タカハシサトシです！
地方で１０年、企画の仕事をしています。
その前は１０年、デザインの仕事をしていました。
今回は、
webデザインをする時、
どのサンプルを参考にすればよいか悩みます
という声にお答えします。
この記事では、webデザインする時に、いろいろなサイトを参考にする場合がありますが、そのポイントについて解説する記事です。
これが自然にできていたら、あなたはwebデザイナーではなく、webコンサルタントですね！
本記事の内容
１ webデザインおすすめサンプルサイト8選
２ webデザインでサンプルをどのように参考にすれば良い？
では、見ていきましょう！
１ webデザインおすすめサンプルサイト8選（日本）
僕的に、見やすく探しやすいサイトのみ厳選です。
ズロック https://www.zzrock.net/
Good Design Web http://gooddesignweb.com/
I/O 3000 https://io3000.com/
MUUUUU.ORG http://muuuuu.org/
SG_BOOKMARK http://bookmark.dot-sg.com/
SANKOU! https://sankoudesign.com/
WebDesignClip https://www.webdesignclip.com/
81-web.com http://81-web.com/
さて、デザインのテクニックについて参考にできれば、それでOK？
２ webデザインでサンプルをどのように参考にすれば良い？
【結論】webサイトの本質を読み解きましょう
デザインに関しては
・直感で素敵と感じる
・ロゴ
・レイアウト
・ナビゲーション
・マージン
・ボタン
・配色
上記あたりを確認すると思いますが、そのサイトの本質まで読み解こうとするwebデザイナーは少ないはず。逆に、それが自然にできていたら、webコンサルタントになれますよ。
キャリアアップに繋がりますね！
webサイトの本質を読み解く６つのポイント
・事業主体の表現
・ターゲットは誰か
・サイトの目的
・ユーザーに何を学ばせようとしているか
・ユーザーと何を共感しようとしているか
・ユーザーに何をさせようとしているか
以上です。
僕も使っているMacやiPhoneを展開するApple公式サイト（日本）を例に、チェックしてみましょう。
↓Appleのサイトは「シングルページデザイン」で制作されています。こについての記事はこちら
事業主体の表現
事業主体とは、誰のサイトかわかるかどうかです。
サイトの左上にロゴマークが配置されていますが、Apple社はブランド力が強いので、これだけで誰が運営しているサイトなのかすぐわかりますよね。地域のお店や新事業など、小規模事業やこれから育てていくブランドの場合は、説明やわかりやすい表現が必要になるでしょう。
ブランドの強さに応じた適切な表現方法かどうかチェックしましょう。
ターゲットは誰か
このサイトが狙っている顧客または市場の事です。
Appleのサイトの場合は、まず既存のApple製品のユーザーがターゲットです。また、Apple以外のユーザーも含めたパソコン市場、タブレット市場、スマホ市場、音楽市場などなど、デバイスを中心とした大きな市場をターゲットにしています。
特に、現在トップページはiPhone12がメインですので、既存のiPhoneユーザーをコアなターゲットにしています。日本ではiPhoneがシェア1位ですので、確実にシェアをキープしたい市場、ということかもしれませんね。
こうしてターゲットからもデザインを決めていきます。
サイトの目的
このサイトが存在する意味、理由の事です。
Appleのサイトの場合は、日本人向けに、企業そのものやApple製品・サービスの紹介、購入やサポートが目的になります。
どのようなサイトでも紹介や販売が目的の場合が多いと思いますが、情報を探すポータルサイト、サイト上で何か操作するウェブサービス、官公庁のサイトなど、事業の目的は幅広いですので、その目的を果たせるようなデザインを心がけましょう。
ユーザーに何を学ばせようとしているか
このサイトにアクセスしたユーザーに学んでほしいことです。
それはどちらかと言えば既存よりも新規ユーザーに向けた事になります。高性能・高品質なApple製品の魅力、デザインや機能・性能等、または様々展開しているAppleのサービスがあることを知ってほしいということです。
それをどう設計しレイアウトするか。
ユーザーと何を共感しようとしているか
このサイトにアクセスしたユーザーと何を共感しようとしているかです。
感じるものなので答えは様々ですが、「未来」でしょうか。
企業理念にも通じますが、例えばiPhoneを始めて手にして操作したときの感動体験など、Appleの製品にはどれもが未来を感じさせるドキドキやワクワクが詰まっていると感じます。
Apple自身もユーザーに対し、そのようにしたいと思っているし、製品を手にしたユーザーもそう感じたのであればブランディングは成功と言えます。
その企業の背景を汲み取ることができれば、デザインに何かしらプラスになると思います。
ユーザーに何をさせようとしているか
このサイトにアクセスしたユーザーが次にとってほしい行動の事です。
学び、共感した方には、ぜひその製品を購入して体感してほしいはず。
購入、ダウンロード、登録と、様々な次への行動がありますので、それらにうまくナビゲートしてあげるのもデザインの役目になります。
まとめ：サンプルサイトを活かすには本質を見るようにしよう
そのデザインは意味があってその形になっています。
その意味というのが本質です。
なので、参考のデザインをそのまま流用したのでは「本質」が異なる以上、ちぐはぐなデザインになり、それが違和感になります。
見本のデザインを探す前に、今回制作する案件の本質を一度明確にしておいてはいかがでしょうか。
↓webデザインの作り方の記事も参考ください
