何だろう？
WEBデザインに関する基本的な考え方
いいWebデザインとは、どんなデザインなのでしょうか？
結論から言うと、明確な答えはないのかもしれません。
他社さまのサイトを拝見すると、「デザインに凝っているな〜」と感じるところもあれば、「結構シンプルでよく見るデザインだな〜」と思うところもあるかと思います。
Webサイトを作る上での目的によっても変わるので、明確な答えはないものの、ある程度の基本的な考え方があります。
代表的な考え方を書いていきます。
余白やサイズ
この記事を見ても分かるとおり、「タイトル」を目立たせるために、サイズを大きく、テキストの周りの余白を大きくとってます。
これが、記事の本文と同じサイズ・余白感だと、「タイトル」であることが分かりづらいですよね。
このように、「タイトル」「本文」「装飾用の文字」などなど、テキストも読みやすく、意味を分かりやすくするために、余白やサイズの概念は大事です。
ただ、目立たせたければ余白やサイズを大きくすれば良い、というわけでもなく、大きくしすぎると悪目立ちしたり、PC（またはスマホ）で見たときに見づらくなってしまいますので、全体のデザインに合わせて、適切な余白感、サイズを選ぶ必要があります。
おすすめのサイズ感としては、
- 本文は14〜16pxがおすすめ。一般的なサイトでは、16pxが多いです。
- タイトル（大見出し）は、何も装飾がない場合、36pxがおすすめ。装飾がある場合は、もっと小さくしても、意味の切り分けはできるかなと思います。
- 大見出し以外のタイトル（中見出しや小見出し）は、何も装飾がない場合、36pxと16pxの間がおすすめ。中見出しは30px、小見出しは24pxくらいかなと。
余白に関しては、周りの余白が大きければ大きいほど目立つので、
- タイトルの周りの余白は大きく、本文の周りの余白はそれよりも小さく。
この辺りを意識すると、シンプルでも綺麗な表示が可能です。
グループ化
例として、MINIMAL WEBの記事一覧ページを見てみると、
記事へリンクするボタンが2つ並んでいます。このボタン、「カードデザイン」と言ったりするのですが、グループ化によく使われるデザインです。サムネイル、タイトル、本文を、一括りにして横並びになってます。
これがカードデザインではなくテキストのみの縦並びだと、
ちょっと極端ですが、ぱっと見、意味合いが切り分けられていることが分かりづらくないですか？
カードデザインを使うと、意味の切り分けがスッキリしますし、どのテキスト・画像がどのグループに属しているのかが分かりやすく、比較的すぐに視覚で認識できます。
カードデザイン以外にも、意味を切り分けたいときに枠で括ってあげたり、周りに影をつけてあげると、グループ化できて、伝えたいことがスッキリ伝わります。
導線
導線は、ディレクターが作るワイヤー時点で決められることが多いですが、デザインの面も含まれるため、記述します。
導線とは、ユーザー（サイトを見る人）が、最終的にたどり着くページ（もしくはセクション）までの流れのことです。
特にLP（ランディングページ）では、導線は大事かなと思います。
LPは、最終的にお客さんに商品・サービスを購入してもらうとか、そういったことが目的になる、長い1ページのサイトです。
LPでは例として、下記のような構成で、導線（流れ）が敷かれることがあります。（〇〇には商品名が入ります。）
- メインビジュアルとキャッチコピー
- こんなお悩みはありませんか。
- 〇〇の3つのメリット
- サービス内容
- 選ばれる理由
- 実績
- 購入までの流れ
- 購入ページへのボタン
この場合だと、商品購入を目的として、導線が敷かれています。
ユーザーの心理を考えて、そこから逆算してこの構成になっております。
メインビジュアルとキャッチコピー
その商品の魅力だったり、一番伝えたいことを表示します。
こんなお悩みはありませんか
ユーザーがもしそのお悩みを持っていたら、読み進めると思います。ここで、この商品が必要なユーザーと不要なユーザーを切り分ける効果もあります。
〇〇の3つのメリット
そのお悩みを解決するために、こんなメリットがありますよ！と訴求します。
サービス内容
具体的なサービス内容、商品の詳細を説明します。
選ばれる理由・実績
実際に効果があるサービスであることや、良い商品であることを説明します。
購入までの流れ
購入方法を記し、お客さんの商品に対する不安を消した上で、購入意欲を高めた状態で購入ページへリンクできるように、ボタンを設置します。
このように、導線はお客さんを商品購入まで導くための大切な要素です。
今回はLPで紹介しましたが、コーポレートサイトとかだと、導線の最終的なゴールは、また別の目的になることが多いかと思います。
例えばコーポレートサイトでは、自社を紹介して信頼性を上げるため、順を追ってに読んでいただけるような構成にするだとか、トップページにて他ページの導入文とボタンを設置し、他ページにリンクしやすいような仕組みにするだとか、ですね。
集客を目的としたオウンドメディアですと、記事の一覧全てと、カテゴリ分けされた記事の一覧をトップページに載せて、各記事に移動しやすいようになっていることが一般的かと思います。
ユーザビリティ
ユーザビリティとは、一言で言いますと、サイトの使いやすさです。
前のセクションで紹介した「余白やサイズ」「グループ化」「導線」も、ユーザビリティの一部ですが、一般的な使いやすさを向上させるためには、もっと方法があります。
- 情報を複雑にせずに簡潔にし、読みやすくする
- 視認性を良くするために、文字と背景色はしっかり切り分ける
- ボタンはボタンであることを素早く認識できるようなデザインにする
- アイコンを使って、その文章がどんなことを表しているかを一目でわかるようにする
- 文字、余白などは適切なサイズにする
- なるべく他サイトで見慣れたデザインをインスパイアする
- サイトの表示スピードをなるべく速くする
などなど、サイトを使いやすくするアイデアは多数あります。
情報を複雑にせずに簡潔にし、読みやすくする
ユーザーが混乱しないような状態にしていく、ということです。
視認性を良くするために、文字と背景色はしっかり切り分ける
視認性のための色の選定は大事です。ぱっと見で見やすい色を選びましょう。
文字や背景色のみならず、画像などもしっかり表示させるために、視認性を意識してデザインしていく必要があります。
ボタンはボタンであることを素早く認識できるようなデザインにする
ボタンは、押せることがわかるデザインにしましょう。本文の中に、本文と同じデザインなのに押せるところがあっても、分かりづらいですよね。
ボタンであることが一目で分かれば、ユーザーはサイトを回遊しやすくなります。
アイコンを使って、その文章がどんなことを表しているかを一目でわかるようにする
アイコンを使うと、一目でどのような特性の文章が書かれているか、すぐに見分けられるメリットがあります。
例えば、「効率化について」書いている文章のタイトル部分右側に、タイマーのアイコンを置くとか、
「デザインについて」書いている文章のタイトル右側に、パレットのアイコンを置くなどです。
文字、余白などは適切なサイズにする
こちらは前述の通り。
なるべく他サイトで見慣れたデザインをインスパイアする
他サイトで見慣れたデザイン、こちらも一例を紹介します。
一般的にユーザーがよく見るサイトってなんでしょう？
おそらく多くの方が同じ回答かと思いますが、Googleの検索サイト、Yahooの検索サイトではないでしょうか。
これらのサイト、検索後に表示される一覧の文字は、青文字に下線が引かれているデザインで書かれているかと思います。下記のような感じです。
Google
この青文字に下線が引かれているデザインで表示させることにより、「クリックできる」ことが分かりやすくなります。
サイトの表示スピードをなるべく速くする
これはWebデザインというよりも、サイトのシステムだったりコーディングによるものなのですが、デザインにも関わります。
デザインは、なるべく同じスタイルを使ってあげると、コードを書く量が少なくなるため、表示スピードが（微々たるものですが）速くなります。
同じスタイルで構成された「共通パーツ」を使って、それを複数使うこと、かつ、なるべく簡素なデザインにしてあげると、サイトの質が上がりやすいです。
トンマナ（トーン&マナー）・色味
トンマナとは、サイト全体の統一感のことです。
トンマナは、その商品やサービス、企業を表す色味が使われます。
一般的には、この統一感を出すために、サイトの色味はある程度絞られます。
メインカラー・アクセントカラー・ベースカラーの3種類で分ける、といった考え方があります。
ベースカラーは、白・黒・灰色などのサイト全体の70%を占める色です。
メインカラーは、サイトの雰囲気の決定づける色です。その企業やサービスの印象に近い色味（会社さんによっては、カラーコードまで決まっていることもある。）を選定することが多いでしょう。
アクセントカラーは、ベースカラー、メインカラーから逆算して、目立つ色味を選定します。特に目立たせたいところでよく使用されます。
まとめ
いかがだったでしょうか？
今回紹介した、「Webデザインに関する一般的な考え方」については、あくまで一般論です。
これらを応用したり、あえて一般的な考えから外したデザインを起こすこともありますが、最低限守っておくと、外れないデザインになるかと思います。