前の章に戻る
- ✓WEBデザインとは何か、WEBデザイナーの仕事の範囲を説明できる
- ✓デザイン上達に必要な3つの取り組み（原則・根拠・インプット）を実践できる
- ✓WEBサイトの基本構造と4つのレイアウトパターンを区別できる
- ✓アートボード幅とコンテンツ幅の違いを説明できる
WEBデザインはセンスがある人だけの仕事ではありません。原則を理解し、根拠を持ってデザインを判断できれば、誰でも一定以上のクオリティを出せます。このレッスンでは、WEBデザイナーの仕事の全体像から、サイト構造・レイアウトの基礎知識までを学びます。
WEBデザインとは
WEBサイトの種類
| 種類 | 概要 | 例 |
|---|---|---|
| 企業ホームページ | 企業の顔となるサイト。会社情報・サービス内容を伝える | コーポレートサイト |
| WEBサービス | ユーザーがブラウザ上で機能を利用するサービス | SaaS、ツール系サイト |
| ECサイト | 商品を販売するオンラインショッピングサイト | 通販サイト |
| ランディングページ（LP） | 1ページで商品・サービスの申し込みを促すページ | キャンペーンLP |
WEBデザイン業務には、レイアウト構成・フォント確定・配色の決定・バナー制作など、サイトのクオリティを左右するあらゆるデザイン業務が含まれます。
WEBデザイナーの仕事
WEB制作の仕事は、企画・デザイン・実装・納品という流れで進みます。WEBデザイナーは上流工程である企画・デザインを担当します。
| 工程 | 主な作業 |
|---|---|
| 要件定義 | クライアントへのヒアリングを実施してWEBサイトの仕様を確定する |
| ワイヤーフレーム作成 | WEBサイトのコンセプト・構成を考え、ページのレイアウト骨格を設計する |
| デザイン確定 | フォント・配色・レイアウトを決定してデザインを完成させる |
WEBサイトが成果を出せるかはWEBデザインの段階でほぼ決まります。近年は集客・成果につながるデザインが求められるため、デザインスキルに加えてWEBマーケティングの視点も必要です。
センスより守破離
WEBデザインに芸術センスは必須ではありません。デザインが思い浮かばない原因の多くは、インプットとアウトプットの絶対量が不足しているためです。
守：参考になるサイトを真似て作る。破：一部をカスタマイズして自分流にする。離：オリジナルのデザインを生み出す。プロのデザイナーもベンチマークとなるサイトを参考にしながら制作するのが一般的です。
WEBデザイン上達への道
原則に従う
初心者が最優先で取り組むべきことは、原則を学びそれに従うことです。顧客視点で優れたデザインには一定の原則があり、原則に従うことで一定以上のクオリティを担保できます。
最初からオリジナリティを追い求めると、判断の基準がなくなって迷走します。まず原則に従ってデザインし、クオリティが安定してきたら少しずつ崩す順番が合理的です。
根拠を持つとは、なぜその色なのか、なぜそのフォントなのか、なぜこの順番なのか——各判断を言語化できる状態を指します。根拠を持てるようになると、クライアントへの説明力が上がり、デザインの再現性も高まります。
良いデザインには良い理由、悪いデザインには悪い理由が必ずあります。他者の作ったデザインを見て、良し悪しの理由を言語化するトレーニングを日頃から続けることで、デザイン感覚が養われます。
大量インプット
頭の中にデザインのイメージが浮かばなければ、デザインは作れません。良質なデザインを徹底的にインプットして、アイデアの引き出しを増やしましょう。
| サービス | 特徴・活用方法 |
|---|---|
| ハッシュタグやデザイナーアカウントをフォローして、日常的に良いデザインに触れる環境を作る | |
| キーワード検索で世界中の広告・ポスター・WEBデザインを閲覧できる。インスピレーションが湧かないときの参考に最適 | |
| Dribbble | 招待制のデザイナー向けSNS。高いクオリティの海外デザイナーの作品が集まる（閲覧は誰でも可能） |
WEBサイトの基本構造
WEBサイトには大きく2つの基本構造があります。サイトの目的に合わせて適切な構造を選ぶことが設計の第一歩です。
階層型
トップページを起点に、カテゴリページ・詳細ページへと枝分かれする構造です。人が情報を把握しやすい形であるため、多くのWEBサイトがこの形式で構成されています。
データベース型
データの検索しやすさと収集しやすさを目的とした構造です。ECサイトや商品一覧ページなど、大量のコンテンツを検索・フィルタリングで絞り込む場面に向いています。
ページを構成する基本4要素
ほとんどのWEBページは以下の4つのエリアで構成されています。WEBサイトを分析するときは、まずこの4要素を確認する習慣をつけましょう。
ヘッダーエリアはページ最上部に位置します。左にサービス・企業のロゴ、右にお申し込みボタンや電話番号を配置するパターンが一般的です。ロゴをクリックするとトップページに戻る仕様が多く、ナビゲーションをヘッダー内に含める形式も増えています。
ナビゲーションエリアはユーザーが目的のページへ移動しやすくするナビです。各ページへのリンクが配置され、モバイルではハンバーガーメニューに格納されることが多いです。
コンテンツエリアはサイトのメインコンテンツが表示されるエリアです。フッターエリアはページ最下部に位置し、会社概要・プライバシーポリシーなどナビゲーションに載せるほどではないページへのリンクを集約します。
アートボード幅とコンテンツ幅
アートボード幅はデバイスの横幅とほぼ同義です。コンテンツ幅はWEBサイト上でコンテンツが表示されている部分の幅を指します。PCでは行長が長すぎると読みづらくなるため、両者は一致しません。
PC
日本のデスクトップ横幅シェアは1920pxと1366pxが多いため、これらでアートボード幅を設定します。コンテンツ幅は大手企業サイトの調査で960〜1100px前後が多く、1000px前後が推奨値です。1000pxを超えると行長が長すぎて読みづらくなります。
スマホ
モバイルはアートボード幅の基準が375px・390pxの2サイズです。コンテンツ幅はほぼアートボード幅と等しくなりますが、両端に16〜24px程度のマージンを設けて読みやすさを確保します。
文字サイズの考え方
| 要素 | 推奨サイズ | 補足 |
|---|---|---|
| 本文 | 16px（14〜18pxの範囲） | ターゲット年齢が高いほど18pxなど大きめに設定する |
| 見出し（h1相当） | 24〜30px | 本文とのジャンプ率をしっかり設ける |
| 最小フォントサイズ | 10px以上 | Googleも10px未満を使用しないよう推奨している |
本文フォントサイズはページ内で統一します。あるページでは16px、別のページでは14pxなど一貫性がないと、アマチュアな印象を与えます。
WEBサイトレイアウトの基本パターン
世の中のWEBサイトのレイアウトは、以下の4パターンにほぼ収束します。それぞれの特徴と向いているサイトの種類を押さえましょう。
シングルカラムレイアウト
1つの列でコンテンツが上から並ぶシンプルな構造です。制作しやすく、レスポンシブWEBデザインとの相性が良いため、近年最も多く使われます。コーポレートサイト・LPに向いています。
シングルカラムの構造
実例：Toyotaのホームページ
マルチカラムレイアウト
コンテンツの左右にサイドメニューなどを持つ複数列の構造です。1画面でより多くの情報を表示できるため、サイトの回遊率を高める効果があります。ニュースサイト・ECサイトに向いています。
マルチカラムの構造
マルチカラムの実例
グリッドレイアウト
グリッド（格子）状にコンテンツを並べるレイアウトです。1画面に多くのコンテンツを表示したいときに向いています。動画サービス・通販サイトで多く使われます。
グリッドの構造
グリッドの実例
フルスクリーンレイアウト
コンテンツを横幅いっぱいで表示するレイアウトです。情報量は少なくなりますが、デザイン性が高くユーザーに強いビジュアルインパクトを与えます。ブランディング用ページ・通販サイトのトップページで使われます。
フルスクリーンの構造
フルスクリーンの実例
- WEBデザイナーはヒアリング・ワイヤーフレーム・デザイン確定という上流工程を担う
- WEBデザインはセンスより原則・根拠・大量インプットで上達する
- サイト構造は階層型とデータベース型の2種類がある
- WEBページはヘッダー・ナビゲーション・コンテンツ・フッターの4要素で構成される
- PCのコンテンツ幅は1000px前後、スマホのアートボード幅は375〜390pxが基準
- レイアウトはシングルカラム・マルチカラム・グリッド・フルスクリーンの4パターンに分類できる