webデザインおすすめサンプル8選〜どのように読み解くか

webデザインおすすめサンプル8選〜どのように読み解くか

タカハシサトシです!

地方で10年、企画の仕事をしています。
その前は10年、デザインの仕事をしていました。

今回は、

webデザインをする時、
どのサンプルを参考にすればよいか悩みます

という声にお答えします。

この記事では、webデザインする時に、いろいろなサイトを参考にする場合がありますが、そのポイントについて解説する記事です。

これが自然にできていたら、あなたはwebデザイナーではなく、webコンサルタントですね!

本記事の内容

1 webデザインおすすめサンプルサイト8選
2 webデザインでサンプルをどのように参考にすれば良い?

では、見ていきましょう!

1 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?

2 webデザインでサンプルをどのように参考にすれば良い?

webデザインでサンプルをどのように参考にすれば良い?

【結論】webサイトの本質を読み解きましょう

デザインに関しては

・直感で素敵と感じる
・ロゴ
・レイアウト
・ナビゲーション
・マージン
・ボタン
・配色

上記あたりを確認すると思いますが、そのサイトの本質まで読み解こうとするwebデザイナーは少ないはず。逆に、それが自然にできていたら、webコンサルタントになれますよ。

キャリアアップに繋がりますね!

webサイトの本質を読み解く6つのポイント

・事業主体の表現
・ターゲットは誰か
・サイトの目的
・ユーザーに何を学ばせようとしているか
・ユーザーと何を共感しようとしているか
・ユーザーに何をさせようとしているか

以上です。

僕も使っているMacやiPhoneを展開するApple公式サイト(日本)を例に、チェックしてみましょう。

↓Appleのサイトは「シングルページデザイン」で制作されています。こについての記事はこちら

事業主体の表現

事業主体とは、誰のサイトかわかるかどうかです。

サイトの左上にロゴマークが配置されていますが、Apple社はブランド力が強いので、これだけで誰が運営しているサイトなのかすぐわかりますよね。地域のお店や新事業など、小規模事業やこれから育てていくブランドの場合は、説明やわかりやすい表現が必要になるでしょう。

ブランドの強さに応じた適切な表現方法かどうかチェックしましょう。

ターゲットは誰か

このサイトが狙っている顧客または市場の事です。

Appleのサイトの場合は、まず既存のApple製品のユーザーがターゲットです。また、Apple以外のユーザーも含めたパソコン市場、タブレット市場、スマホ市場、音楽市場などなど、デバイスを中心とした大きな市場をターゲットにしています。

特に、現在トップページはiPhone12がメインですので、既存のiPhoneユーザーをコアなターゲットにしています。日本ではiPhoneがシェア1位ですので、確実にシェアをキープしたい市場、ということかもしれませんね。

こうしてターゲットからもデザインを決めていきます。

サイトの目的

このサイトが存在する意味、理由の事です。

Appleのサイトの場合は、日本人向けに、企業そのものやApple製品・サービスの紹介、購入やサポートが目的になります。

どのようなサイトでも紹介や販売が目的の場合が多いと思いますが、情報を探すポータルサイト、サイト上で何か操作するウェブサービス、官公庁のサイトなど、事業の目的は幅広いですので、その目的を果たせるようなデザインを心がけましょう。

ユーザーに何を学ばせようとしているか

このサイトにアクセスしたユーザーに学んでほしいことです。

それはどちらかと言えば既存よりも新規ユーザーに向けた事になります。高性能・高品質なApple製品の魅力、デザインや機能・性能等、または様々展開しているAppleのサービスがあることを知ってほしいということです。

それをどう設計しレイアウトするか。

ユーザーと何を共感しようとしているか

このサイトにアクセスしたユーザーと何を共感しようとしているかです。

感じるものなので答えは様々ですが、「未来」でしょうか。
企業理念にも通じますが、例えばiPhoneを始めて手にして操作したときの感動体験など、Appleの製品にはどれもが未来を感じさせるドキドキやワクワクが詰まっていると感じます。

Apple自身もユーザーに対し、そのようにしたいと思っているし、製品を手にしたユーザーもそう感じたのであればブランディングは成功と言えます。

その企業の背景を汲み取ることができれば、デザインに何かしらプラスになると思います。

ユーザーに何をさせようとしているか

このサイトにアクセスしたユーザーが次にとってほしい行動の事です。

学び、共感した方には、ぜひその製品を購入して体感してほしいはず。
購入、ダウンロード、登録と、様々な次への行動がありますので、それらにうまくナビゲートしてあげるのもデザインの役目になります。

まとめ:サンプルサイトを活かすには本質を見るようにしよう

サンプルサイトを活かすには本質を見るようにしよう

そのデザインは意味があってその形になっています。
その意味というのが本質です。

なので、参考のデザインをそのまま流用したのでは「本質」が異なる以上、ちぐはぐなデザインになり、それが違和感になります。

見本のデザインを探す前に、今回制作する案件の本質を一度明確にしておいてはいかがでしょうか。

↓webデザインの作り方の記事も参考ください

関連記事

  1. 職業訓練で40代からwebデザインを学べるか〜独自のキャリアをつくろう

    デザイン

    職業訓練で40代からwebデザインを学べるか〜独自のキャリアをつくろう

    タカハシサトシです!地方で10年、企画の仕事をしています。…

  2. webディレクションを学べるおすすめスクール3選〜マーケティングスキルが鍵

    デザイン

    webディレクションを学べるおすすめスクール3選〜マーケティングスキルが鍵

    タカハシサトシです!地方で10年、企画の仕事をしています。そ…

  3. webデザインの仕事を在宅で稼ぐ方法【下請けから始めよう】

    デザイン

    webデザインの仕事を在宅で稼ぐ方法【下請けから始めよう】

    タカハシサトシです!地方で10年、企画の仕事をしています。その前は1…

 

チャレンジ応援のまとめ記事

  1. 【初心者向け】タスク管理(todo)の始め方〜目標の作り方・目標達成のコツを解説

    レコメンド

    タスク管理の始め方・目標をつくり挑戦しよう

    タスク管理を始めたい方向けの記事です。また、目標の作り方とタスク管理を活用した目標達成のコツを初心者にも優しく解説しています。

  2. webデザインの始め方・学びながら挑戦しよう

    レコメンド

    webデザインの始め方・学びながら挑戦しよう

    webデザインを始めたい方向けの記事です。本質を知り、独学やスクールで学び、プロの仕事に挑戦しよう。

  3. マーケティングの始め方・集客を学び挑戦しよう

    レコメンド

    マーケティングの始め方・集客を学び挑戦しよう

    マーケティングを学びたい方向けの記事です。マーケターを目指し、集客に挑戦しよう。

  4. 新しい事業の始め方・企画づくりに挑戦しよう

    レコメンド

    新しい事業の始め方・企画づくりに挑戦しよう

    企画職の方、また企画の仕事を目指している方へ向けた、まとめ記事です。企画職を目指し、事業を起こそう。

 

グラスの商品・サービス

  1. グラスの手帳|文庫本サイズ

    グラス

    グラスの手帳|文庫本サイズ

    当方で商品開発した、グラスの手帳を数量限定販売いたします。1冊500円(税別)で販売中。

  2.   【初回半額/5社限定】グラスのフードビジネス支援

    グラス

    【初回半額/5社限定】グラスのフードビジネス支援

    ビジネスサイクルの速い飲食業界では、何かをつくる事で推進される仕事が多々あります。そんなデザインを切り口とした、月額支援サービスのご提案。月額33,000円(税込)〜

  3.   【提案無料】グラスのweb制作

    グラス

    【提案無料】グラスのweb制作

    小さく始めて大きく育てる、新事業のチャレンジに最適な、ミニマムなweb制作のご提案です。99,000円(税込)〜

アーカイブ

PAGE TOP