PAMPHLET.make
東京
青山
03-5411-2202
  • 立川042-548-0362
  • 横浜045-550-4202
  • 千葉043-330-3106
  • 埼玉048-700-4010

失敗しない、そのために。Webサイトデザインの秘訣

Webサイトデザインの大原則

Webサイトデザインの大原則を知る

要件定義からサイトマップの策定が完了し、情報コンテンツの準備が整ったら、いよいよWebサイトデザインに着手していきます。Webサイト導線は、基本として全ページが同一ルールで統一され、ユーザーが同一のアクションでサイトを回遊できるデザインでなければなりません。もしナビゲーションの位置が、上下左右とページ毎に異なると、ユーザーは次のページに遷移するボタンを都度探すこととなり、サイト内回遊に不便で使いづらいWebサイトになってしまうからです。

各ページのデザインも基本フォーマットに即した構成が必要であり、全ページが一定のルールで統一されたデザインであることが、見やすく、理解しやすいWebサイトであると言えます。もし全ページのデザインフォーマットがバラバラであった場合、ナビゲーション位置と同様に、ユーザーは都度ページ構成を解読しながらサイト回遊を行わなければならず、決して使いやすいWebサイトであるとは言えません。

Webサイト制作時は、ユーザビリティを第一に考慮した導線設計でデザインを行うとともに、文化・言語・国籍・老若男女といった差異を問わず、誰もが使いやすいユニバーサルデザインを目指すことが大切です。

Web制作用語を理解する

Web制作に必要な用語を理解し、円滑な進行管理を図る

Webサイト制作がスタートすると、直接顔を合わせて行うミーティングだけでなく、メール、チャット、Web会議などの情報共有や修正指示のやり取りが多く行われることから、Web制作に必要とされる制作用語を理解する必要があります。Web制作用語を理解することで、あらゆる通信環境を用いたやり取りであっても、確認・指示などが明確となり、共通認識のもと制作をスムーズに進行することができます。開発に必要な専門用語までは必ずしも覚える必要はありませんが、デザイン制作や構成確認時に必要とされる、以下用語の理解は必要です。

ヘッダー

Webページ最上部を指しています。企業名・サービス・商品名など、サイトに準じたロゴマークや名称を配置するのが一般的で、ヘッダーは全ページ共通に設定することから、ロゴマークや名称にトップページへのリンクを設定するのがスタンダードな施策となっています。

フッター

Webページ最下部を指しています。ヘッダー同様に、企業名・サービス・商品名など、サイトに準じたロゴマークや名称を配置する他、住所・連絡先・問い合わせページへのリンクなど、情報コンテンツ閲覧後のアクションへと誘導する情報が掲載されます。また、全ページへのテキストリンクが配されることも多く、サイトマップ同様の役割を果たします。

グローバルナビゲーション(Gナビ)

TOPページを始め、Webサイト全てのページに共通して配置されるメニューバーを指しています。一般的には第二階層に設定する大カテゴリへのリンクがGナビとして設定されますが、階層の浅いサイトや第二階層カテゴリページが少ないWebサイトでは、第二階層に限らず、第三階層・第四階層の中でも重要なページへのリンクが配置されます。

ローカルナビゲーション

TOPページから大カテゴリとなる第二階層へのリンクを設定したメインのナビゲーションがグローバルナビゲーションですが、ローカルナビゲーションは第二階層内にカテゴライズされた第三階層の移動を可能にするナビゲーションです。グローバルナビゲーション下部やサイドカラムに常設されるのが一般的です。階層が深くなるWebサイトでは、ローカルナビゲーション内でさらに階層化される場合も多くあります。

サイドバー

メインコンテンツの横に設置され、各ページへのリンクバナーなどが配置されます。強くアピールしたい情報ページへのリンクや、ブロク、外部リンクなど、様々な情報ページへの誘導に活用されます。

カラム、ロー

縦ラインを「カラム」、横ラインを「ロー」と言います。カラムは縦の段組を示す際に使用される用語で、ローカルナビゲーションが配置されるとそのページは2カラム(2段組)、ローカルナビゲーションに加え、サイドバーが設定されると3カラム(3段組)となります。フラットデザインが主流となる近年では、カラムを用いたデザインよりもローを用いたデザインが主流となっています。

ワイヤーフレームを作成する

Webページのレイアウトを定める構成図「ワイヤーフレーム」

ワイヤーフレームとは、Webページのレイアウトを定める構成図のことです。サイト全体の構成を定めるサイトマップとは異なり、ページ単体のレイアウトを線画として構成し、そこに情報コンテンツを落とし込みます。制作に関わる全ての担当者が直感的にページ構成を理解できるワーヤーフレームがあることで、Webサイトデザイン前に大まかな完成イメージを見える化することができ、情報コンテンツの開発も具体的なイメージを持って行うことができます。

前記の通りWebサイトは、ユーザビリティを考慮し、基本フォーマットを統一する必要があることから、Webデザインに着手する前にワイヤーフレームを作成し、情報コンテンツや画像を一定ルールで構成しなければなりません。情報コンテンツ優位でデザイン制作を進めると、各ページのデザインにばらつきが生じ、結果、使いづらく見づらいWebサイトになってしまう危険性があると言えるのです。

ワイヤーフレーム作成では、Webページのレイアウトパターンの数だけデザインフォーマットを作成します。情報コンテンツ開発前にワイヤーフレームがあるとさらに情報コンテンツの開発がスムーズであることから、はじめに暫定的なワイヤーフレームを作成して情報コンテンツを落とし込み都度修正していく方法がおすすめです。これにより情報のモレを防ぎ、情報の流れを予め把握することで、以降の修正作業の大幅な削減にもつながります。

ワイヤーフレームの作成は、Microsoft OfficeのPower PointやExcelを用いると容易です。他にも、Adobe Illustrator、Adobe XD、オンラインサービスのCacooやmoqupsが用いられることも多くあります。いづれにしても大切なのは、基本フォーマットに情報コンテンツを落とし込み、ユーザーが見やすく使いやすい情報ページを構成することにあります。使い慣れたソフトを使い、制作チームの誰もがページ構成を直感的に理解できるよう、情報コンテンツをレイアウトしてまとめ上げることが肝要です。

スマートフォン閲覧を意識する

今や常識とも言えるスマートフォン最適化

総務省が発表する2016年時点のスマートフォンの世帯保有率は71.8%となり、2010年のスマートフォン発売当初9.7%から7年で実に7倍と爆発的に普及が進みました。またパソコン世帯保有率は2016年時点で73%となり、パソコン、スマートフォン共に世帯保有率7割を超える結果となっていることから、Webサイト制作時は、パソコン・スマートフォン双方に最適化されたWebデザインが不可欠であることが分かります。

また、スマートフォン世帯保有率は若年層であればあるほど高くなる傾向にあり、ターゲットセグメントを若年層とするWebサイトにおいては、Webサイトのスマートフォン最適化を優先したWebデザインが必須であると言えます。

検索エンジン最大手のGoogleは、2015年に「モバイルフレンドリー」と言われるアルゴリズムを全世界で実装したと発表しており、現在ではパソコンでの検索順位とスマートフォンでの検索順位が別のアルゴリズムで運営されています。結果、スマートフォン閲覧時には、スマートフォン閲覧に最適化されたページの検索順位を上げ、最適化されていないページの順位を下げる仕組みが導入されています。このことから、Webサイト制作時には、パソコン閲覧だけでなく、スマートフォン閲覧にも最適化されたWebサイトであることが常識となっています。

端末の世帯保有率 2010年 2011年 2012年 2013年 2014年 2015年 2016年
スマートフォン 9.7% 29.3% 49.5% 62.6% 64.2% 72.0% 71.8%
パソコン 83.4% 77.4% 75.8% 81.7% 78.0% 76.8% 73.0%
タブレット 7.2% 8.5% 15.3% 21.9% 26.3% 33.3% 34.4%

(出典)総務省「通信利用動向調査」http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h29/html/nc262110.html

ワンソースでスマホ対応するレスポンシブWebデザイン

ひとつのHTMLファイルで複数デバイスに最適化するレスポンシブWebデザイン

レスポンシブWebデザインは、PC、スマートフォン、タブレットなどの閲覧環境や画面サイズにあわせ、1つのHTMLファイルをCSSで制御し、自動的にページのデザイン・レイアウトを最適化する技術を指しています。以前までスマートフォン用サイトをPCとは別に制作し、閲覧環境を自動判別して適したサイトを表示させていましたが、レスポンシブWebデザインにより1つのHTMLファイルで複数デバイスに対応することで、制作後のメンテナンスを容易にすることができます。

ただし現在では、スマートフォン、タブレット共に多くの端末が発売されており、そのモニターサイズも多種多様であることから、全ての端末毎に最適化することは容易ではなく、基準となるモニターサイズを定めて制作するのが一般的となっています。

スマートフォン最適化を意識した1カラムの縦長デザイン

スマホ閲覧時のユーザビリティを高める1カラムの縦長デザイン

ひとつのHTMLファイルをCSSで制御し、スマホ対応させる「レスポンシブWebデザイン」が主流となった現代のWebサイトは、PC環境の閲覧においてもスマホ閲覧時のデザインを意識した「1カラムの縦長デザイン」がトレンドであり、規則正しい縦長デザインを取り入れることで可読性を高め、洗練されたスタイリッシュなデザイン表現が可能となります。特にスマートフォンのデバイスは小さく縦長であることから、1カラムの縦長デザインにすることで一つひとつのコンテンツを大きく表示することができ、タップ時の押し間違えによるストレスを軽減することができます。

さらにスマホ優位なWebサイトでは、下底までスクールすると次のコンテンツを自動的に読み込む「無限スクロール」が多く取り入れられており、ユーザーはクリックのストレスなく様々なコンテンツを次々に閲覧することで、サイト滞在時間が長くなると同時に、サイトからの離脱率を下げる効果も期待できます

縦長デザインのメリット01 「可読性が高まる」

1カラムの縦長デザインでは、目線の動きが上下に限定されることで、情報コンテンツの閲覧に規則性が生じます。これにより閲覧時に一定のリズムが生まれ、情報をテンポよく閲覧することで、見づらい、分かりづらいなどのストレスが軽減され、情報コンテンツの可読性向上へとつなげることができます。結果、サイト滞在時間が長くなり、SEO効果も期待できます。

縦長デザインのメリット02 「美しいデザイン」

1カラムの縦長デザインでは、情報コンテンツのレイアウトにシンプルな規則性が生じることで、見やすく分かりやすいデザイン・レイアウトが可能となり、ブランド価値の具現化が容易になります。その一方、縦長デザインは、写真や動画などのビジュアル要素とテキスト情報のシンプルな構成となることから、情報コンテンツやビジュアルの質がWebサイトのクオリティに多大な影響を与えると言えます。

縦長デザインのメリット03 「飽きのこないデザイン」

上記の通り1カラムの縦長デザインは、シンプルなデザイン・レイアウトとなることから、トレンドに左右されづらい、飽きのこないデザインが可能であると言えますが、だからこそ、写真や動画などのビジュアル要素とテキスト情報での他社との差別化が不可欠であるとも言えます。飽きのこないシンプルで美しいデザインであるからこそ情報コンテンツにこだわり、他社とは明らかに違う質の高いサイトにすることで、ユーザーに有意義なWebサイトに仕上げることが大切です

トレンドを意識したメリハリのあるWebデザイン

Webデザインにおいて大切な4つのポイント

前記の通り、1カラムの縦長デザインは、「シンプルで規則性のある美しいデザインで可読性を高める」のに適していると言えますが、その一方、それだけでは単調で面白みのないデザインに仕上がってしまう懸念があることも事実です。大切なのは、「いかにシンプルに、メリハリのあるデザインに仕上げるか」と言うこと。1カラムの縦長デザインで制作時は、①余白を恐れずに使う、②メリハリをつけるときは大胆に、③写真は大きくレイアウトする、④色数を3色程度に絞り込む、など、トレンドを意識したメリハリあるWebデザインを意識してデザインすることが肝要です。

テキストはWeb標準フォントで

検索エンジン最適化に不可欠なWeb標準フォント

Webサイトは、文字情報のHTMLファイルとデザインを制御するCSSで構成されており、検索エンジンはHTMLファイルに記載された文字情報を判別して検索結果に表示させることから、テキストはできるだけWeb標準フォントで構成することが大切です。Web標準フォント以外での構成を行う場合、フォントデータの読み込みや、テキストの画像化が必要となり、読み込みに時間を要することでページ表示速度が低下し、ユーザビリティが低下するだけでなく、SEOの観点においてもマイナス評価の危険性を孕んでいます。

グローバルナビを上部で固定してユーザビリティを高める

サイト内回遊に不可欠なグローバルナビを常時表示する

ひとつのドメイン以下に複数ページを構えるWebサイトでは、ユーザーがWebサイト内をストレスなく回遊できることが、ユーザビリティを決定づける重要ポイントのひとつであり、Webサイト内の滞在時間やページ閲覧数がSEOに多大な影響を及ぼすことから、メインの導線となるグローバルナビを上部で固定し、いづでも、どこからでもサイト内回遊のできる環境を用意し、ユーザビリティを高めることが大切です。

また、スマートフォン閲覧時に主に使用される三本線の「ハンバーガーナビ」をヘッダーに設定するのも効果的であり、Webリテラシーの高いユーザーや、トレンドに敏感な若年層のサイト回遊率を高めることができます。一方、Webリテラシーの低いユーザーや中高年層には不向きであり、ナビゲーションであることが直感的に伝わらないことで、サイト離脱率を高める結果になる危険性があることも留意が必要です。

視差効果で魅せるパララックス・エフェクト

Webサイトに動きを加えることで多彩な演出が可能に

パララックス・エフェクトは、スクロールの動作に応じて、複数のレイヤーにある要素を異なるスピードで動かすことで「視差」を生み出し、立体感や奥行きを演出する手法です。Webデザインではスクロール効果として取り入れられることが多く、ユーザー自身が動かしているような錯覚に至ることで、見て動かして楽しめる、体感型Webサイトに仕上げることができます。また、Webサイト上に動きを加えることで、ストーリー性の演出や、重要箇所の強調も可能になります。

一方、パララックス・エフェクトの読み込みに時間を要することから、ページの表示速度が低下することでユーザビリティの低下を招く懸念があるのに加え、SEOの観点からも評価されづらい点があります。また、制作時のWebブラウザチェックにも多くの時間を要することから、対象ブラウザを主要ブラウザに限定するなどの要件定義も不可欠だと言えます。

動画を活用したブランド表現

動画のWebコンテンツ化で興味・関心を誘引する

近年では、動画を活用したマーケティング活動に注目が集まっており、動画コンテンツのWeb活用が盛んになってきています。動画をWebコンテンツ化することで、写真や文章だけでは伝えきれない雰囲気や温度感を直感的に伝えることが容易となり、ストーリー性のある動画を配信することで、ユーザーの心を動かすことも可能です。 また動画コンテンツは、優れたアイキャッチ効果に加え、記憶に残りやすい特性を併せ持つことから、商品ブランディングにおけるブランド表現や、採用ブランディングにおける情緒訴求に適した取り組みであり、動画を通じて企業や商品の魅力を発信することで、それらに共感する顕在層・潜在層の興味・関心を引くことも可能だと言えます。

クリエイティブに自信のあるクリエイター必見!フリーランスクリエイター募集

PAMPHLET.makeを運営するパドルデザインカンパニーでは、フリーランスで働くクリエイターとの協業を強化しています。Web、グラフィック、動画・映像、コピー、撮影、ブランディングなど、パドルデザインのクリエイティブにご興味のある方からのご連絡お待ちしています。

募集詳細へ