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

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

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

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

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

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

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

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サイトであることが常識となっています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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