1. WEBデザイン概要
a. WEBデザインとは
WEBデザインとは、インターネット上に表示されるページのデザインを指します。
Webサイトの種類は多岐にわたります。
==
- 企業ホームページ
- WEBサービス
- ECサイト
- ランディングページ（LPと呼ぶ）など
==
企画に始まり、Webサイトのレイアウト構成、フォント確定、配色の決定、フォントサイズの確定、必要なバナーなどの作成などあらゆるデザイン業務が含まれます。
WEBデザイン業務はWEBサイト制作の工程においてWEBサイトのクオリティを左右する最も重要な業務と言えます。
b. WEBデザイナーはどんな仕事をするのか？
WEB制作の仕事は、企画・デザイン・実装・納品という流れで進んでいきます。
その中で企画・デザインという上流工程を担当していきます。
==
- クライアント担当者・その他ステークホルダーにヒアリングなどを実施してWEBサイトの仕様を確定する
- WEBサイトのコンセプトや構成を考えワイヤーフレームを作成する
- 具体的にフォント・配色・レイアウトなどを決定してデザインを完成させる
==
そのためWEBデザイナーは、WEBサイトの成否を分ける極めて重要な仕事だと言えるでしょう。
近年は特に集客でき成果を出せるWEBサイトが求められています。一見おしゃれでも自己満足のデザインになっており、成果につながらないWEBサイトは意外にも多いです。
それゆえ良いWEBデザイナーにはデザインツールやデザインの考え方だけではなく、WEBマーケティングのスキルも必要です。
WEBデザインとアートの違い｜センスがなくてもWEBデザインはできる
「アート」には芸術センスが必要でも「集客できるWEBデザイン」に芸術センスは必須ではありません。
「デザインが思い浮かばない...」という人は圧倒的にインプットとアウトプットが足りていないケースが多いです。
またデザインが思い浮かばない...という悩みは一生なくなりません。苦しみながらも成果のでるデザインを生み出していくのがWEBデザイナーの仕事です。
- 参考になりそうな良質なWEBサイトをとにかく集める。
- 「守破離」を意識して最初は参考となるサイトを真似て、一部カスタマイズする方向で作る。
- 「完全オリジナル」にこだわってしまいいつまでも進まない。
- プロですら完全オリジナルではなく参考にして作業することは多いのです。
- 初心に戻って「守破離」を徹底しましょう。
- 元々デザインが思いつきづらい人が急に楽にデザインが思いつくようになることはありません。
2. WEBデザイン上達への道
a. 原則を学び、それに従う
初心者がデザインを学んでいくときに最も重要なことの1つは原則を学びそれに従ってデザインを作っていくことです。
顧客視点で優れたデザインには一定の原則があります。原則・ルールに従うことで、一定以上のクオリティを担保することができます。
いきなりオリジナリティを求めるのではなくまずは原則に従ってデザインを行うことを心がけていきましょう。
b. デザインには根拠を持ち言語化を心がける
デザインを根拠を持って作れるようになると、クライアントに納得してもらいやすくなりますし、自分の中で再現性を持って良いデザインを作れるようになります。
良いデザインには良い理由があり、悪いデザインには悪い理由が必ずあります。
また他者が作った良いデザイン、悪いデザインを見つけては良い/悪いの理由を言語化するトレーニングを日頃からするのはおすすめです。
これらの地道なトレーニングを積み重ねることでデザイン感覚が養われていきます。
c. デザインを大量にインプットする
どんな人も最初は良いデザインを作れません。
それは自分の中にアイデアの引き出しがないからです。まず頭の中にデザインのイメージが浮かばないとデザインを作ることはできません。
良質なデザインをインプットする際におすすめのサイトを紹介します。
★ おすすめのサイト
スマホアプリもあるのでインストールするのがおすすめです。
キーワード検索することで世界中の広告デザイン、ポスターデザイン、WEBデザインなどを見ることができます。
インスピレーションが湧かないときはPinterestで似た雰囲気のデザインを探すのがおすすめです
▼ Dribbble
海外の最先端のデザイナーの作品や企業の作品を見ることができます！
招待制度が採られているため、作品をアップロードできるデザイナーは限られています。
そのため非常に高いクオリティの作品が見つかりやすいというのが特徴です。
閲覧自体は招待がなくてもできるので安心してください。
3. デザインの4原則
デザインは皆さんが思っている以上に論理的なものです。
原則に従って作ることで、優れたデザインを生み出せます。
ここでは一般的に有名なデザインの4原則について説明します。
こちらは、以降で説明するデザインの4原則についてより詳細に解説した書籍です。今後もっと深く勉強したいという方にはおすすめです。
原則１：近接 - 関係する情報同士を近づける -
デザインに限らず、「グループでまとめる」という整理方法は企画書の作成などにも有効です。
下の二つの図を見比べてください。
左側が近接を意識していないデザイン、右側が近接を意識したデザインです。
左側の近接を意識しない場合だとスッと入ってこないですよね。
例えば中央付近の値段(左のさくらんぼの下にある「300円」)が上の値段を指すのか、下の値段を指すのかが一瞬で入ってきません。
一方、右側はどうでしょうか。
図・名前・値段が近接の原則に従って近づけてあり情報としてスッと頭の中に入ってきます。
これが「近接」の効果です。
鋭い方はお気づきかと思いますが、近接を効率的に利用するなら「余白」を意識しましょう。
「同じ性質を持つ要素を近く配置し、関係ない要素同士との間には余白を設ける」これが近接の原則です。
余白はWEBデザインにおいては極めて重要な意味を持ちます。
- ごちゃごちゃしている
- スッと情報が入ってこない
- 要素間の関係性がわからず混乱する
原則２：整列 - 要素に一体性を持たせて組織化する -
整列のポイントは要素同士を見えない線で結び並べることです。
要素を整列させる事でデザインに統一感が生まれ、「近接」と同様に視覚的に理解しやすい組織化されたデザインになります。
「なんとなくデザインがごちゃごちゃしていてまとまりがない」と感じたときは、整列の原則にのっとり見直すことをおすすめします。
左の図では写真、住所、会社名、名前などがバラバラでまとまりがありません。
一方で右の図では美しく線に沿って整列されているのでまとまった印象になっています。
左右の整列は「左揃え」「中央揃え」「右揃え」の3パターン、上下の整列は「上揃え」「中央揃え」「下揃え」の3パターンに分けることができます。
統一感はデザインにおいてとても重要です。上級者になるとあえて乱したりすることもありますが、当面は左右の整列、上下の整列をしっかり行うことをおすすめします。
細かい統一感がプロとアマチュアの差になります。
- 統一感がない
- 雑でアマチュアな感じがする
原則３：強弱 - 情報に優先度をつけ、違いを明確にする-
要素にはっきりと強弱をつけることで、情報を理解するスピードが早くなり、「直感的に伝わるデザイン」を作ることができます。
また、適切な強弱をつけることで、抑揚によるリズムが生まれ、心地よいと感じさせる効果もあります。
注目してほしい文言を「大きくする」「太くする」「文字色を変える」「背景色を変える」「周りに装飾を付与する」などを行うことで強弱をつけます。
例えばインターネットの記事でもすべて太かったり赤かったりすると読みづらいと思いますし、ユーザーに飽きられてしまいます。
デザインには強弱をつけることが重要です。
左の図だとすべて同じフォントサイズ、色、太さでどこに注目していいかが分かりません。
右図ではSALEであること、50%OFFであることが強調されておりより注目を集めやすく伝わりやすいデザインになっています。
強弱のポイントを1つあげるとすれば、「差をつけるなら大きく差をつける」ということです。
例えばSALEという文字を強めたいとして、「黒のまま文字サイズを1.3倍にする」などをしてもあまり目立たずに統一感が失われるだけです。
強弱をつけるときは下のサンプルのように、「文字サイズを大きく変えて文字色も全く違うものにする」など大きくアクセントをつけてみるのがポイントです。
- デザインにメリハリがない
- 結局何が伝えたいかわからない
- 印象に残らない
原則４：反復 - 特徴的な要素を繰り返すことで一貫性を持たせる -
色や線、モチーフ、レイアウトなど、デザインの中で同じ要素を繰り返して使うことで一貫性が生まれます。
ページをまたいでヘッダやタイトルのデザインを統一する手法は、UIデザインの基本になっています。
一貫性を持たせたスタイルやルールのことを「トーン&マナー」と呼ぶこともあります。
例えば見出しは全て青にする、本文はグレーにするなど「反復」を使うことで一貫性を生み出すことができます。
左の図では目次がそれぞれ同じ性質のものであるにもかかわらず、デザインが違うため一貫性がなく見えてしまいます。
右の図では全て同じフォントサイズ、箇条書きのデザインになっており「反復」の原則に従って一貫性が生み出されています。
- 一貫性がない
- 落ち着かないデザインになっている
- 雑な印象になっている
4. WEBサイトのレイアウトを学ぼう
a. WEBサイトの基本構造とは
WEBサイトには階層型とデータベース型という大きく2つの基本構造が存在します。
階層型
階層型は人が情報を把握する上でとても分かりやすい構造です。
多くのWEBサイトは一般的に階層型で構成されています。
データベース型
データベース型は、データの「検索のしやすさ」「収集のしやすさ」を目的として作られたデータの集合体です。
ECサイトなどはデータベース型で構成されていることが多いです。
b. ページを構成する基本４要素
==
- ヘッダーエリア
- ナビゲーションエリア
- コンテンツエリア
- フッターエリア
==
ヘッダーエリア
左にサービスや企業のロゴが配置されることが多いです。
ロゴはタップするとトップページに遷移する仕様になっていることが多いです。
また、右の方に、お申し込みボタン、資料請求ボタン、電話番号などを置くことが多いです。
最近ではヘッダーエリアの中にナビゲーションエリアが含まれることも増えています。
ヘッダーを常に上部に固定するパターンと固定しないパターンがあります。
ナビゲーションエリア
⇧参考画像
ナビゲーションとは文字通りユーザーが目的のページに移動しやすいようなナビを表します。
一般的には各ページのリンクが貼られてタップすれば移動する形式になっていることが多いです。
最近ではナビゲーションエリアがヘッダーエリアの中に入っている形式も増えてきています。
モバイルではナビゲーションエリアはハンバーガーメニューの中に格納されるケースが多いです。
ハンバーガーメニューは下記の写真の3本線の部分を指します。
クリックされると情報が表示される仕組みであり、モバイルデザインではよく使われます。
コンテンツエリア
サイトのコンテンツが入ってくるメインとなるエリアです。
フッターエリア
サイト内の他のページへのリンクが貼られるエリアです。
ナビゲーションエリアに記載するほどアピールする必要はないが開示しておきたいページのURLなどをおくことが多いです。
会社概要・代表の挨拶・プライバシーポリシーページなどがそれに該当します。
c. アートボード幅とコンテンツ幅
アートボード幅とコンテンツ幅の定義
コンテンツ幅とはWEBサイト上でコンテンツが表示されている部分の幅です。
PCではアートボード幅とコンテンツ幅が同じにはなりません。
コンテンツ幅がアートボード幅と同じだと行長が長すぎて読みづらくなってしまうからです。
行長が長すぎるとユーザーは横に大きく目を動かさねばならず、目が疲れやすくなってしまいます。
スマホでは横幅がそもそもそこまでないのでアートボード幅とコンテンツ幅が同じ程度になっていることが多いです。
以下の「東洋経済」のPC版のWEBサイトのようにアートボード幅とコンテンツ幅には差があり左右に余白があります。
PCのアートボード幅とコンテンツ幅
様々な大手企業のWEBサイトを調査したところ、コンテンツ幅は960px～1100pxあたりが一般的であるため、PCのコンテンツ幅は1000px前後に設定することをおすすめします。
ちなみにwixではコンテンツ幅は980pxに設定されています。
1000pxを超えると「行長」（=1行の長さ）が長すぎると感じられてしまうでしょう。
行長が長すぎるとユーザーは目を大きく左右に動かさなければならず目が疲れてしまいます。
スマホのアートボード幅とコンテンツ幅
モバイルのコンテンツ幅はほぼアートボード幅と等しくなる傾向にあります。
ただ画面いっぱいまでコンテンツがあると、さすがに見づらいため、ある程度のマージンを設けることが多いです。
マージンは16px〜24px程度の幅で両端に設定することが多いです。
文字サイズの考え方
本文のフォントサイズはターゲットの年齢層によって変えると良いです。年齢が高いほど配慮して18pxなど大きめに設定されることが多くなっています。
またフォントサイズはどれだけ小さくても10px以上に設定しましょう。Googleも最低でも10px以上を強く推奨しています。
一方でh1（HTMLにてh1タグは大見出しを表します。HTML編で学習するので今は分からなくても問題ないです。）などの「見出し」については24～30pxくらいが一般的です。
見出しと本文ではフォントサイズに差をつけることが多いです。
見出しは30px、本文は16pxなどルールをもってWEBデザインを作っていきましょう。
- すべての文字が同じフォントサイズでメリハリがない → ジャンプ率を設けるべき
- 本文があるページでは16px,あるページでは14pxなどのように一貫性がなくバラバラである → 一貫性を設けるべき
WEBサイトレイアウトの基本パターン
世の中のWEBサイトのレイアウトはほとんどこれから説明する4パターンに収束されます。それぞれ特徴を理解してサイトの用途に応じて使い分けられるようにしましょう。
シングルカラムレイアウト
シンプルに上から並んでいくのが特徴で制作がしやすいです。
またレスポンシブWEBデザインとの相性が良いため近年この形式が増えています。
シングルカラムレイアウトであればレスポンシブに対応する場合に大きな変更が少ないため、サイト制作の工数が減るというメリットがあります。
コーポレートサイト、LPなど多くのWEBサイトにはシングルカラムレイアウトが向いています。
基本的にはまずシングルカラムレイアウトでWEBデザインを作成できないか検討し、その上で必要性があれば他のより複雑なレイアウトを検討する形が良いと思います。
toyotaなどの大企業のホームページもシングルカラムレイアウトでWEBサイトが構築されています。
マルチカラムレイアウト
マルチカラムレイアウトはコンテンツの左右にサイドメニューなどがある形式で、文字通りサイト内で複数の列が存在する形式です。
ニュースサイトやECサイトではこの形式であることが多いです。
モバイルにするときはサイドメニューは非表示にするなど、大きめなデザインの変更が必要になります。
例えば「東洋経済」ではヘッダー、ナビゲーションがありその下のパートでは「左側にコンテンツ、右側にアクセスランキングなどのサイドメニュー」が存在しています。
マルチカラムレイアウトだと1画面でより多くの情報をユーザーに伝えることができるため、サイトの回遊率(1回のサイトアクセスで閲覧するページ数のこと)を高める効果が得られます。
グリッドレイアウト
グリッドレイアウトはグリッド型にコンテンツを配置していくデザインのことです。
コンテンツを1画面でたくさん見せたい時に向いています。
動画サイト、通販サイトなどで特に向いています。
例えばNETFLIXでは、「一画面にできるだけ多くの動画のサムネイルを表示」することで「興味のある映画が見つかる確率が高まる」ようなデザインになっています。
フルスクリーンレイアウト
情報量は減りますがデザイン性が高くユーザーに強いイメージを与えることができます。
通販サイトのトップページ、ブランディング用ページでよく使われるデザインです。
例えば以下のuniqloの通販サイトのトップページではフルスクリーンデザインで洗練された印象を与えることに成功しています。一方で一覧で商品を閲覧できるページはグリッド型で表現されています。
このようにページに応じてWEBページのレイアウトを使い分けることも大切です。
