まずは無料キャリア相談へ!
転職実績No.1🔰エンジニアスクール

【Webデザイン参考サイト多数掲載】おしゃれだけじゃダメ!人を惹きつけるWebサイトをつくる方法

更新: 2019.07.11

多くの人に観てもらえるWebデザインを作るにはどうすればよいのでしょうか。ユーザーに快適な体験を提供するためには、「おしゃれなデザイン」だけでは不十分です。

この記事では人を惹きつけるWebサイトを作る方法について解説します。ファーストビューやよいデザインの4つポイントを押さえて、ユーザーを夢中にするWebサイトを作りましょう。

また、Webデザインの参考になるWebサイトを豊富に紹介しますので、インスピレーションソースとして活用してください。

Webサイトにおける第一印象の重要性

eye-1132531_1280

ユーザーが普段何気なく見ているインターネット上では、同じWebサイトでも第一印象によってユーザーが「このサイト気になる!見てみたい!」と思うサイトと、瞬時に閉じられてしまうサイトがあります。

また、Webサイト自体の第一印象も、人が人と初めて出会った時の第一印象と同じく印象が良ければその人のことが長く脳裏に焼きつきます。

逆に悪い印象を与えてしまうと一度決まった印象は覆すのが難しいとされています。

このような心理現象を「ハロー効果」といい、ある特徴によって他の特徴の評価まで変わってしまう現象です。

今回の場合、ファースビューの特徴によってそのサイト全体の評価が決まるので、まずこのことを押さえましょう。

ファーストビューって何?

ファーストビューとは、端的に言うと「サイトを開いたときにページをスクロールせずに見えるブラウザの画面範囲」のことです。

常に制作者側が考えなければいけないのが、それぞれの媒体でどのように見え方が変わるのか?ユーザーがどういう心理でサイト見るのかという部分になります。

近年ではスマートフォンの普及に伴い、Googleでもスマートフォン対応のサイトを推奨しています。

具体的なポイントをいくつかあげていくと「文字の大きさ」「レイアウトの整列」などの部分で、Googleが提供しているモバイルフレンドリーテストの基準を満たすことが最優先の基準となるでしょう。

また、スマートフォン媒体に関しては他の媒体と比べ画面が小さく、新規タブで開きにくいということからも離脱率は非常に高く、ファーストビューのデザインはシンプルで分かりやすいものが求められます。

当然、媒体によっても画面範囲は異なりますが、以下が目安の数字となっています。

スマートフォン

1334×750(iPhone6):画面サイズ 約4.7インチ

1920×1080(iPhone6 Plus):画面サイズ 約5.5インチ

参考:2016年最新版 iPhone・Androidスマホ 機種別画面サイズ、解像度、縦横比のまとめ

具体的なコードの書き方については、Web design RECIPES:『CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き』に詳しい解説があるので参考にしてみて下さい。

\ パソコンがなくても大丈夫 /

「学習費用を抑えたい。でも給付金は対象外…」

とお悩みの方へ!無料でPCプレゼント中🎁

※学生、新卒以外の方も専門実践教育訓練給付金の対象外であればプレゼントの対象です

よいWebデザイン・悪いWebデザイン

f7fd3e6f6427f9f4cf985c800467ea0c_m

悪いWebデザインの特徴

悪いデザインにも特徴があります。この特徴を知ることで製作する際に注意するポイントを掴めるので、しっかり押さえておきましょう。

①画像の容量が大きすぎる

どんなにきれいな画像を利用したページであっても、画像などのファイルサイズに充分注意しなければなりません。

統計上、インターネットユーザーがページのロードを完了しない間に、ページを閉じてしまう確率は 40~50KBのページで25~30%です。

もし、あなたが開こうとしているサイトが10秒、15秒もロードしている状態が続いていたらどう感じるでしょうか?

ディスプレイ解像度別 ホームページ訪問者Best10

1. 1920×1080:利用者比率 25.02%
2. 1366×768:利用者比率 16.75%
3. 1024×768:利用者比率 4.83%
4. 2560×1440:利用者比率 4.66%
5. 1440×900:利用者比率 4.16%
6. 1280×1024:利用者比率 4.13%
7. 1280×800:利用者比率 4.13%
8. 1536×864:利用者比率 3.45%
9. 360×640:利用者比率 3.44%
10. 1920×1200:利用者比率 3.36%

これはホームページを見に来たユーザーが使用しているディスプレイ解像度ベスト10です。

この表から読み取れる最適な解像度は1920×1080となりますが、この数値はホームページ全体のサイズです。

画像の周囲にはホームページの枠があり、文字や空白が必要ですので実際の画像サイズは800×600ピクセルが上限、640×480ピクセルが推奨です。

小さめの画像であればもちろんそれよりも小さくてもOKです。(出展:ホームページに載せる適正画像サイズをデータで検証

撮影した画像データは小さくする事はできても、大きくする事(無いデータを補完)はできません。

印刷をしたりする可能性があるのであれば、大きめのサイズで撮影をしておき、ホームページに載せたい写真はパソコンで複製したものを640×480ピクセル程度にリサイズして使用しましょう。

Web上の画像のサイズを簡単に変更できるツールなどを活用して、サクサク見れる快適なサイトを目指しましょう。

②バラバラなレイアウト

これは、ユーザビリティ(使い勝手)の悪さというものです。Webサイト構成に問題がある初歩的な失敗です。

サイトを開いた瞬間に必要な情報がパッとユーザー目に入ってこないとこのことも離脱してしまう大きな要因になってしまいます。

詳しくは、ユーザビリティ向上のための具体的なポイントを解説しているサイトやアプリのユーザビリティを向上させる35のポイントを参考にしてみてください。

③自己満足なデザイン

商用Webサイトの場合、その目的はマーケティングに活用するためであるのが通常です。

その場合デザインは誰のためのものであるべきかを自覚する必要があります。

製作者本人が満足するサイトではなくターゲット層からサイトの目的を定め、その目的を果たすためにはどういうデザインにすべきか?というところから切り開いていかなければ単なる自己満足なものになってしまいます。

もちろん”見た目のデザイン”を否定するわけではありませんが、利用者や消費者は見た目がよいから使ったり買ったりするのではありません。

使いやすいから使ったり、Webサイト運営者の思い通りに誘導されているから購入するのです。

一例として日本最大のECサイトである楽天を考えてみましょう。

意見は様々あるとは思いますが、楽天を「カッコイイ」Webサイトだとか「スタイリッシュ」だと思う方は少ないでしょう。

しかし、日本のEC創世記から今日まで、楽天は日本最大のECサイトに君臨し続けているのです。

「格好良い」ことは使いやすいことや目的通りの行動をしてもらえることとは全く別の問題なのです。

それだけではなく、画像を多用することで表示速度が遅くなったり、SEO対策が全くとれず膨大な集客コストを必要としたりと格好良いとされているWebサイトは、ユーザーの使いやすさや管理コストを犠牲にしていることが多いのも現実です。

サービス向上や情報発信、新規販売窓口など目的があってわざわざWebサイトを制作し運営するのですから、やはりデザイン時にはユーザビリティを考え、訪問して下さるお客様の利便性を最優先にすること、そしてWebサイトを制作した目的が果たされるようにすることが最重要なのは自明のことです。

まずはこの3点を押さえて製作していきましょう。

よいWebデザインの特徴

次によいデザインの特徴について紹介していきます。ここではより具体的な内容について、いくつか押さえておくポイントがあるので見ていきましょう。

①揃える

すべての要素の配置において論理的な説明ができなければ、それは自己満足なデザインになってしまっているかもしれません。計画的に整えることで、デザインの内部に秩序が生まれ、視覚的に必然性や根拠が生まれます。

ポイントは「なぜこの場所にその要素を配置したのか?」というところになります。手始めにまずはガイド(補助線)を引いて「揃える」を意識していきましょう。

スクリーンショット 2016-08-27 20.21.25

②反復させる

ユーザーにストレスを感じさせずに、自然とサイトの情報を伝えるためには「反復性」が欠かせないです。

反復させることによって要素ごとのリズムがうまれ、ユーザーに情報が伝わりやすくかつ記憶に残りやすくなります。

まずは伝えたい言葉に優先順位を付け、同順位のものを同じレイアウトにして考えていきましょう。

整列

③ジャンプ率で情報を整理する

ジャンプ率を利用すると「反復性」を簡単に生み出すことができます。

ジャンプ率とはデザインの中でのメリハリの付け具合のことをいいます。

例えば「ヘッドコピー、サブヘッドコピー、詳細情報、補足情報」とあった場合には、下記のように重要度によってメリハリをつけることで、淡々としたデザインではなく一目でわかりやすいものにできます。

note1

 

④余白をうまく使う

基本的にデザインというのは限られたスペースの中で情報をまとめ、わかりやすく伝えなければいけません。
要するに文字や画像を強調しようとして画面いっぱいに埋め尽くすということはできないのです。

そこでポイントになってくるのが「余白の使い方」です。

余白をうまく利用することによって凛とした緊張感をもつようになり文字や画像を際立たすことができます。

では実際の例を見ていきましょう。

図

余白があることで情報が整理され重要なポイントを一瞬で判断できるようになります。

情報量の多いサイトにおいて、うまく余白を作り出すことはデザインの情報伝達力を高める重要な要素になりますので、しっかり押さえておきましょう。

印象を大きく変える配色の選定

592234059d767aaf786f7479e2cca2e9_m

配色は組み合わせることが非常に複雑であり、基本的なことを学んだからといってすぐに実践に活かせるのか?というとそうではありません。

色の機能的効果、情緒的効果、配色調和、具体的な配色手法などあらゆる専門知識を学んでいくことでが必要になってきます。

これらを一気に学ぶとなるとなかなか骨折りな学習になるので、まずは「一般の人が見て違和感なく普通だと思えるレベル」を目指していきましょう。

具体的な学習方法としてはweb上でみた配色、街の商品や看板をみてその色をマネしてみることが先決になってきます。

自分独自の色彩感覚を磨くよりも、一般人の感覚とずれのない健全な配色を学んでいくことのほうが最短距離で配色の選定力を身につける方法であるといえます。

Web上にはテーマカラーを一色選べば、それにあった配色を提案してくれる配色ツールなどがあります。

ウェブ配色ツール Ver2.0などは、Webサイトのプレビューを見ながら配色の調整ができるので、初心者さんにもおすすめです。

MsmCfHgMDTP_Yr_1472449918

手始めに3色だけで配色を考えていきましょう。

Webサイト制作に参考にしたいデザインサイト集

Webサイト制作の参考になるデザインが集められたおすすめのサイトを紹介します。

81-web.com

81-web.com_

81-web.com

本のサイトに限定されたサイトで、Webサイト制作に役立つ優れたデザインのサイトを集めたデザイン&リンク集です。色んなジャンルで活用できるようになっており、種類は豊富です。

WP デザインギャラリー

09

WP デザインギャラリー

WordPressを使用したサイトを取り扱っており、運営者の解説もあってわかりやすい説明が載っています。

キレイなデザインに限らず、色んなジャンルのデザインを掲載しています。ぎゃらりーとして活用してください。

High Floater

20

High Floater

海外のまとめサイトです。日本のサイトとは違ったデザインが豊富にそろっていて、また違った楽しみがあります。

ランディングページ集めました

27

ランディングページ集めました

ランディングページに特化したギャラリーサイトで、商品やキャンペーン訴求の依頼などの参考になるでしょう。

見出しデザイン.com

29

見出しデザイン.com

様々なサイトで使用されている見出しを集めたサイトです。カテゴリーも分けられていて、検索しやすくなっています。

イラストブックマーク

イラストブックマーク

イラストブックマーク

イラストが使用されたサイトを世界中から集めたギャラリーサイトで、アイコンやイラストを使用することによってコミカルな印象を与えることができます。

WebDesignClip

WebDesignClip

WebDesignClip

日本国内の洗練されたサイトや「アイディア」「技術」に優れたクリエイティブ性の高いサイトが載っています。

気に入ったサイトを保存でき、いつでも簡単に開くことができます。また、自分が制作したサイトを提出できるため、採用された際には多くの方に見てもらう事もできます。

WebDesignFile

WebDesignFile

WebDesignFile

WebDesignClipの姉妹サイトで、海外のサイトのみを集めたギャラリーサイトです。最新のトレンドを知りたい時には、こちらを参考にするのもいいでしょう。

MUUUUU.ORG

MUUUUU

MUUUUU.ORG

「使いやすさ」や「見やすさ」に重点を置いたギャラリーサイトです。

情報設計などのも参考にしやすく、縦に長くオーソドックスなレイアウトで、デザインの非常に優れたサイトを厳選して掲載しています。

ひとりでWeb制作できた!「知識0から学ぶ」すごいスライドやサイト27

コムテブログ Webdesign

ひとりでWeb制作できた!「知識0から学ぶ」すごいスライドやサイト27

Webデザイン初心者の方にも、Web制作に挑戦しようとしている方にもおススメなサイトです。

作り方やデザインなど様々な情報がまとまっています。

スマートフォンサイトのhtmlコーディングメモ12個

スマートフォンサイトのhtmlコーディングメモ12個

スマートフォンサイトのhtmlコーディングメモ12個

スマートフォン用のデザインを考える際に参考になるサイトです。IEなどに対応していないブラウザがあるので、注意が必要です。

ノンデザイナーこそ押さえておきたい!グッとくるWebサイト配色パターン集

配色パターン集

ノンデザイナーこそ押さえておきたい!グッとくるWebサイト配色パターン集

大手企業などの既存サイトの配色について解説した記事です。

それぞれの色がユーザにどういう印象を与えているのかとても参考になります。

YSIG/Your site is good

ysig

YSIG/Your site is good

個人で運営している「Webサイト」や「Webサービス」などを集めたリンク集です。

「ジャンル」「テイスト」「レイアウト」「カラー」からカテゴリー検索できます。

ワンパターンなウェブデザインから抜け出すための10のヒント

ワンパターンなウェブデザインから抜け出すための10のヒント

ワンパターンなウェブデザインから抜け出すための10のヒント

クリエイティブなセンスを向上させるためのヒントが載っています。違う目線からデザインを創造してみましょう。

WONDER BOOKMARKS

wonder bookmarks

WONDER BOOKMARKS

「カテゴリー」「サイトカラー」「サイトタイプ」別に優れたWebデザインをブックマークしたWebデザイナーのためのデザインリンク集です。

さいごに

今回は”サイトの第一印象を決める!!「0.1秒で惹きつけるwebデザイン」”というテーマでお伝えしてきましたがいかがでしたか?

まだまだデザインというものは奥が深く学ぶべきことはたくさんあります。しかし、まずは第一印象が大事というところで、これからのよりよいサイト作りに貢献できれば幸いです。

↑目次へ戻る

最先端のITスキルが学び放題!AI時代で勝ち残る人材になる。

\テクノロジー時代に活躍できる人材になりませんか?/

あらゆる業界でIT化が進んでいる今、
エンジニアではなくともテクノロジーへの理解が不可欠な時代になりました。

プログラミングを活用して新しい価値を生み出すことで、
あなたの人材価値を高めることができます。

プログラミングを学ぶと、
・キャリアアップ、年収アップを目指せる
・テクノロジーを活用した課題解決ができる
・業務効率化ができるようになる
・自分でサービスを作れるようになる

テックキャンプは、テクノロジースキルが定額で学び放題。

プログラミング、AI、デザイン、DXスキル、
そして、話題のChatGPTも学ぶことができます。

これからの時代で必要とされるスキルを学び、
市場価値を高め、個人で活躍できる人材を一緒に目指しましょう。

詳しくはこちら

この記事を書いた人

あなたの理想のキャリアに合わせた、テックキャンプの2つのサービス

Advertisement