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以外のユーザーも含めたパソコン市場、タブレット市場、スマホ市場、音楽市場などなど、デバイスを中心とした大きな市場をターゲットにしています。

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

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

サイトの目的

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連記事

  1. フリーランスデザイナーが営業しないで仕事をとる手順【営業が苦手な方へ】

    デザイン

    フリーランスデザイナーが営業しないで仕事をとる手順【営業が苦手な方へ】

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

  2. タカハシサトシです! 地方で10年、企画の仕事をしています。 その前は10年、デザインの仕事をしていました。 今回は、 web制作の際にシングルページデザインは どういう時に採用すると良いでしょうか という声にお答えします。 2014くらいからシングルページデザインのwebサイトが流行り増えてきたように感じます。 特に下にスクロールして変化するようなサイトが印象的です。 今回はシングルページデザインを採用する理由とその効果についてを記事にしています。作り手としては、これを採用する意味を押さえておくべきでしょうし、サイトの目的によっては採用スべきではない場合もあるでしょう。 そこらをプロとして、意味ある提案につなげていきたいものですね。 本記事の内容 1 シングルページデザインを制作する理由とその効果 2 シングルページデザインで制作すべきクライアントの条件 では、見ていきましょう! 1 シングルページデザインを制作する理由とその効果 作り手が制作するメリットとしてはシンプルで、 「少ないページ数で完結できる」 です。これにより、以下の効果が考えられます。 ・目的がはっきりする ・導線がすっきりする ・抵工数、高スピード ・ブランド力アップ もちろん、案件によりけりです。コンテンツ量が多いサイトは採用しないか、部分的に採用するかになるでしょう。 以下、解説しますね。 目的がはっきりする シングルページデザインは、ページの構成が単純です。あちこち遷移させるページではないので、表現する事も単純になります。ということは内容はシンプルに特化されるので、そのサイト、ページの存在理由が明確になりやすいです。 web制作のプロとしては、クライアントさんとの打ち合わせで、もちろん目的を確認すべきですが、確認する前に想定することができます。 クライアントさんの抱える問題は大きくわけて2つしかないからです。 ・売上や利益の問題 ・人材の問題 これら両方が関係しあっている場合も多々ありますので、実際何が問題なのか読み解く事が大切です。もちろんヒアリングで確認されると思いますが、本音を話すかどうかはクライアントさんとの関係次第ですし、そもそもクライアントさんも問題だと思っていない場合もあります。 そういった事も踏まえて、目的をはっきりさせます。 導線がすっきりする シングルページデザインは上から下へとスクロールして見ていくタイプのサイトになります。ということは、そのように見られるという流れを前提としてデザインできます。 よい言われるストーリーを描くことができます。 何のストーリーかはサイトの目的によりますが、例えば求人ならば最終的に応募してもらうことが目的ならば、「あ、応募したいな」と思わせる流れを作る必要があるでしょう。 いかに、いやらしくなく誘導できるか、ですね。 抵工数、高スピード これも必然的にページ数が少なくなるためです。 場合によってはトップページで終わる場合もあります。 ですので、少ない工数で納品できるために費用も抑えられ、納期も早まります。 ブランド力アップ ブランド力は、ご存知の通り、すぐに身につくものでもないし、確かな方法は無いと思っていますが、シングルページデザインは情報が特化しやすいので、ブランド力が向上する土台になりやすいと捉えています。 シングルページデザインに収めるので、範囲を狭くしたり、絞る必要があるとすれば、条件が厳しくなると同時にブランド力が強くなる傾向があるでしょう。 そういう効果を踏まえて、強いブランドをつくるきっかけに活用します。 2 シングルページデザインを依頼するクライアントが抑えるポイント 制作を依頼するクライアント側が抑えるべきポイントです。 ・コンテンツ量が少ない場合 ・低予算で済ませたい場合 ・事業を試したい場合 ・ブランド力を強めたい場合 先程「1」で述べたことと重なります。 コンテンツ量が少ない場合 この場合はシングルページデザインが適しているかもしれません。 コンテンツ量が少ないということは、中小企業さんの公式サイトであったり、小さな店舗、または新規事業あたりが該当するかと思います。 低予算で済ませたい場合 低予算で済ませるために、シングルページデザインのサイトを制作する場合もあるでしょう。この場合は、自ずとシンプルなサイトになるでしょうから、まずは公式サイトを持ちたい、という場合が多いかもしれません。 事業を試したい場合 新事業の始め方や戦略にもよりますが、まずは小さく始めて試したいという考えもあるでしょう。なるべくリスクを抑え、小さくつくり、事業とともに育てていこうと考えるのは当然です。その場合もシングルページデザインのサイトは最適かもしれません。 ブランド力を強めたい場合 強いブランドを築くには「条件」が必要です。 牛丼と言えば「吉野家」「すき家」などイメージできますが、「ぐらす家」という牛丼屋ブランドを広めようとしても「牛丼といえば」という条件では難しいですよね。 なので、ぐらす家のブランドを強めるには条件をつけるしかありません。 1番になれる条件を考える必要があります。 ・牛丼とスンドゥブの店といえば ・牛丼とたらこスパゲティの店といえば ・牛丼食べ放題といえば

良いかどうかは別として、
狙う市場やターゲットを見つつ勝てる条件を考え、 そのキーワードを元に店舗もサイトも展開していく事になるでしょう。 強いブランドをつくる場合は、このポイントを先に定めないと意味あるサイトは作れないですね。

まとめ:シングルページデザインを扱えるプロになろう いずれにせよ、シングルページデザインにはメリットがあります。 クライアントさんによっては適切でない場合もありますが、メリットを踏まえた上で、意味ある提案に結びつけ、プロとして良い仕事を目指しましょう!

    デザイン

    webデザイナーがシングルページデザインで制作する理由

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

  3. AI時代の到来でwebデザインの仕事はなくなる?

    デザイン

    AI時代の到来でwebデザインの仕事はなくなる?

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

 

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

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

    コラム

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

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

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

    コラム

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

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

 

グラスの商品・サービス

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

    グラス

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

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

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

    グラス

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

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

アーカイブ

PAGE TOP