印象に残るホームページに共通する4つのポイントとは？

更新日: 2018年01月31日

デザイン

ホームページ制作に関わっているひとであれば誰でも、印象に残るホームページを作りたい、あるいは他のホームページより一つ上に抜き出たい、と思っているでしょう。
ブログメディアであれば、一人でも多くの読者を獲得したり、コマースサイトであれば少しでも売り上げを上げたいと思うのは、ごく自然なことです。

そうした場合に私たちに必要なのは「独創性」つまり「オリジナリティ」だと言われます。
確かに、創造力豊かでインスピレーションに溢れていれば、他とは違ったユニークなホームページになります。
しかし、「オリジナリティ」をどのように発揮すればいいのか、その方法は極めて抽象的で経験的だとも言えます。

「オリジナリティ」「イマジネーション」などの抽象的な言葉に惑わされずに、印象に残るホームページを作るにはどうすればいいのでしょうか。

そこで今回は、印象に残るホームページの4つの共通点をご紹介します。

印象に残るホームページの4つの共通点とは？

1. レイアウト

他のサイトと明確な差別化を図る上で最も分かりやすく効果的な方法のひとつは、レイアウトにこだわることです。

例えば、ブログサイトであれば左に本文エリア、右にサイドバーというスタイルが一般的ですが、そうした*「慣行」(例：ブログサイトとは一般的にこうレイアウトするものである)や「思い込み」*(例：ブログサイトとはこうしたレイアウトでなければならない)に縛られる必要はありません。

むしろ、そうした慣行や思い込みに縛られすぎてしまうと、場合によっては印象の薄いデザインになってしまいます。

Screenshot on http://rikiyanakamura.com

例えば、フォトグラファーの中村力也りきやさんのポートフォリオサイトは、写真家の作品紹介ページの既成概念を大きく外しています。
横幅の違うカラムにさまざまな写真が滝のように流れていくのが印象的で、記憶に残りやすいレイアウトだということができます。

Screenshot on https://holliefernandophotography.com

同じく、ロンドン在住のフォトグラファーのホリー・フェルナンドさんのポートフォリオサイトは、同じ写真家でも、かなり大胆な写真の配置をしているホームページです。

このようなグリッドを無視して配置するレイアウトのことを*「ブロークングリッド」(Broken Grid)*と呼ぶことがあります。
はっきりとしたルールに基づいて並んではいないので、次にどこに配置がされるのかが予測不可能で、それがユーザーを飽きさせない工夫になっています。

2. ブランディング

レイアウトの他にも、さまざまな競合サイトの中で突出させるための強力な武器となるのが、ブランディングです。

ブランディングというと抽象的に聞こえるかもしれませんが、要するにブランディングガイドラインを作成して、一貫したレイアウトや情報発信にこだわっていくということです。
財布やカバンなど商品に依らずヴィトンのモノグラムを見ただけでルイ・ヴィトンブランドを感じることができるように、ロゴやタイポグラフィ、デザインの方向性が一貫していれば、ユーザーはブランドとしての魅力を感じることができます。

Screenshot on http://www.huffingtonpost.jp

HuffPostが2017年4月に行ったリブランディングは、うまくいった典型だといえます。
ロゴもセリフ体の細めのロゴからサンセリフ書体の太めのロゴに変更し、エメラルドグリーンのアクセントカラーを用いることで、ロゴを見たらすぐに「ハフポスト」だと分かるでしょう。

Screenshot on https://www.lightrail.com

一方で、似たような色合いやフォント、ボタンを使った色合いのデザインはブランディングとしては少し弱くなります。
例えば、ライトブルーやライトパープル・エメラルドグリーンなどを使った白地にカラフルな色調を使ったサイトは、デザイントレンドの流行に乗っかっているのでシンプルで見やすいですが、どれも似たようなデザインで印象に残りにくくなってしまいます。

Screenshot on https://todo.microsoft.com/ja-jp/

ブランディングを見直したいと考えているのであれば、ユーザーが本当にそのサイトのことを*「唯一無二」*であると感じるように設計しなければなりません。
もし、ブランドのスタイルガイドラインで、カラフルな色彩が使われていたり、HelveticaやAvenirなどの一般的によく使われるフォントばかりがフォントリストに並んでいたりするのであれば、インパクトに欠けるページになっている可能性があります。

3. グラフィック・イラスト

ブランディングで満足しないのであれば、「視覚に訴える」方法を考えてみましょう。
全画面的に表示する美しい写真やイラスト、あるいはその両方を使うことで、記憶や印象に残るホームページになるはずです。

Screenshot on http://minamishima.com.au

オーストラリアで展開している日本食ダイニングの「Minamishima」のホームページは、魚介のネタを黒背景のボードに並べた、印象的な写真を多く掲載しています。
料理長の南嶋コウイチさんの手ほどきも、写真で見るだけで文字通り「息を飲んで」しまいます。

Screenshot on http://ivanmesaros.com

一方、セルビアのイラストレーターであるイヴァン・ミザロスさんのホームページは、可愛らしいイラストが豊富で、イラストにはアニメーションもかかっているので、思わず見入ってしまいます。
イラストには、写真にはない柔らかい雰囲気があるので、ターゲットによってはイラストを使ってみてもいいでしょう。

Screenshot on https://www.and.co/task-manager

AND CO社がリリースしているフリーランス向けのタスクマネジメントツールMY DESKのホームページでは、写真とデジタルイラストを組み合わせたレイアウトになっています。
写真が持ち合わせる生き生きとしたイメージとイラストの柔らかいイメージが重なりあい、アイコンに使っている色合いもブランドを意識した色調となっています。

ただし、必ずしも写真やイラストを使えばいいというわけではありません。
ストックフォトなどを使うと却って没個性的となってしまうので、できる限りカスタムメイドの写真を使うようにしましょう。

4. マイクロコピー・コンテンツ

重要でありながら、多くの場合後回しにされがちなのが、マイクロコピーやコンテンツ自身です。
テキストコンテンツは画像やレイアウト以上にそのサイトの考え方を表しているので、他のサイトとの差別化できるポイントになります。
しかし、冗長に書いてしまったり、情報が整理されていなかったりすると、ユーザーに伝えたい意図が伝わりにくくなってしまいます。

Screenshot on https://www.wework.com/ja-JP/