ウェブサイトのデザインには毎年新しい要素やスタイルが登場し、流行の兆しを見せます。
それらの中には、上手く取り入れることで企業のストーリーを伝えたり社風を表したりするものもあれば、特定のデバイスでコンテンツを魅力的に表示させるものもあります。これらのトレンドを手当たり次第に取り入れる必要はありませんが、訪問者を強く惹きつける効果を持つ要素が数多く存在することは知っておくべきです。
ですが、選択肢が多過ぎるために、どれを取り入れれば自社のウェブサイトで最も効果的が高くなるか、判断に困ってしまいます。
そこで、この記事では最新のウェブサイトデザインの中から重要な8つの要素を厳選し、それぞれを詳しく説明します。ウェブサイトのパフォーマンスを向上させるための要素を探している方は、ぜひ参考にしてください。
5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法
HubSpotとCanvaは共同で、パフォーマンスが高く見栄えの良いウェブサイトを作成、管理する手順を詳しく説明する無料のガイドを作成しました。
- オーディエンスとそのニーズについて理解する
- オーディエンスに合ったコンテンツを作成する
- ウェブサイトを最適化し最大限の成果を上げる
- パフォーマンスレポートの作成、分析、継続的な改善
今すぐダウンロードする
全てのフィールドが必須です。
最先端のウェブサイトデザイン、８つの要素とトレンド
要素１：個性的で大きなフォント
文字の表示については、企業の多くがそれぞれに特別なフォントを選んで使用し、競合する企業の中に紛れていても顧客がすぐに自社を見つけられるようにしています。選択できるフォントタイプの数はここ数年で大幅に増え、各ブランドがフォントを通じて思いどおりに個性を表現できるようになりました。
たとえば、米国の雑誌『The New Yorker』はAdobe Typekitのユニークなフォントを使用しているため、すぐに見分けが付きます。一方で、Blokletters-Balpenなどのさらにユニークなフォントも、スタートアップやZeroのようなテクノロジー企業で使われ始めています。
主な効果は？
フォントにはそれぞれ決まったデザイントレンドがあるため、ウェブサイトの各要素でフォントを使い分けることで、読者が要素を識別しやすくなる効果があります。たとえば、The New Yorkerのウェブサイトでは、訪問者がフォントの種類やサイズからセクションを簡単に識別することができます。
企業のブランディングを行う場合、フォントの選択によって、自由/堅実、実務型/情報提供型といった企業スタイルの違いを微妙に表現することができます。
フォントを選ぶときには、それが各種PCやブラウザに対応しているかを必ずチェックしてください。一般的なPCやブラウザに対応していないフォントを選ぶと、特定のデバイスでウェブサイトの表示が崩れる恐れがあります。
要素２：大きくてレスポンシブなヒーローイメージ
人気の高いパブリッシングウェブサイト、Medium.comのように、サイズの大きいヒーローイメージを表示するウェブサイトが増えてきました。
これほど大きな画像を入れると、フォールドの上だとか下だとかいうことは、あまり気にならなくなります（参照記事はこちら：Why To Do Great Things）。
CTAもソーシャルのボタンもなく、ただ画像にテキストを追加するだけで、訪問者はビジュアルに惹きつけられ、続きを読むために画面をついスクロールしてしまいます。
大きなヒーローイメージは画面の背景としてもよく利用されます。たとえばUberのウェブサイトは、イメージの上にテキストやその他の要素を重ねて表示していますが、どのアプローチを採用しようと、このようなイメージにはストーリーを言葉ではなくビジュアルに伝える効果が確かにあります。
主な効果は？
顧客は携帯電話、タブレット、デスクトップPCなど、さまざまなデバイスでウェブサイトにアクセスしますが、画面は常に正しく表示されると思っています。上のMediumで使用されている画像は非常にパワフルですが、仮にデスクトップPCでのみ正しく表示されるなら、せっかくの画像を多くの人は見ることができません。
画面が正しく表示されないことで訪問者をがっかりさせないよう、画像をレスポンシブ対応にすることが重要です。背景の画像だろうと、製品の画像だろうと、あるいは訪問者がどのデバイスを使っていようと、常に正しく表示される必要があります。
要素３：バックグラウンドの動画
ページのバックグラウンドとして動画を自動的に再生すると、それだけでストーリーが印象深く伝わるため、ビジネスについて説明するために必要なコンテンツの量を大幅に減らすことができます。
たとえばWistia.comのウェブサイトでは、訪問者がホームページに移動すると、サイズの大きい動画が背景として自動的に開始されます。また、再生ボタンをクリックすると、Wistiaについてさらに詳しく説明した動画を見ることができます。
背景として動画を利用することは、訪問者のエンゲージを高め、メインのビデオの再生ボタンをクリックしてもらうための素晴らしく効果の高い手法です。
主な効果は？
背景の動画は、ページに移動した瞬間に「おや？」と思わせることを主な目的としています。訪問者は動画を見ることで、文字で書かれた説明を何も読まなくても、会社について要点を理解することができます。
また、人間の頭脳は動画を文字よりも6万倍早く処理することがわかっています。テキストが長々と続いていると多くの人が読むのをためらってしまいますが、動画であれば苦も無く、ごく短い時間で見ることができます。
さらに、インターネットの速度が上がったことや、モバイルデバイスの画面サイズが大きくなっていることも、動画が訪問者にとって望ましいコンテンツである要因に挙げられます。
要素４：セミフラットデザイン
アップルは2013年にウェブデザインを一新し、フラットデザインに移行しました。フラットデザインとは、簡単に言うと、立体感を与える陰影などの効果を使用しない要素のことです。
フラットデザインを採用した画面には、ユーザーが内容を理解しやすいだけでなく、ウェブサイトの表示速度が（複雑あるいは非常に高度なテクニックを使わなくても）上がるというメリットもあります。
アップルの後を追うように、大小を問わず多くの企業がフラットデザインに移行しました。一方でUberなどの企業は、陰影や奥行きを微妙に追加することで、フラットデザインに独自のテイストを加えています。下の画像にある四角い6つの画像をご覧ください。周囲に陰影の効果をほんの少し使用して立体感を出しています。
四角い画像のいずれかにマウスのカーソルを合わせると、グレーの影が消えて背後の画像が浮き出てきます。
主な効果は？
フラットデザインには訪問者がコンテンツの内容をすぐに理解できるという効果があります。また、奥行きのある要素を追加すれば、画面を生き生きと見せることもできます。
ウェブサイトのデザインを完全にフラットにする場合も、陰影やその他の要素を追加する場合も、ウェブサイト全体に一貫してそのデザインを適用することが重要です。ホームページや製品ページ、およびその他の主なセクションのすべてを同じデザインに揃えることで、訪問者はあなたのウェブサイトだとすぐに認識できるようになります。
要素５：ハンバーガーメニュー
ウェブサイトの画面上部には、ほとんどの場合さまざまなオプションメニューが多数表示されます。メニューは訪問者がページを自由に移動するためには便利ですが、画面の貴重なスペースを容赦なく奪うというデメリットもあります。
これを解決するのがハンバーガーメニュー（隠しメニューとも呼ばれます）です。これはウェブデザインよりも先にウェブアプリケーションで多く採用されるようになりました。Google Chromeでも画面右上にハンバーガーメニューが見つかります。
出典：UX movement
それにしても、なぜハンバーガーメニューと呼ばれるのでしょうか。
ハンバーガーを思い浮かべてください。上下に並んだ3本のラインがハンバーガーのバンズとパテのように見えるからです。
主な効果は？
ウェブサイトの各ページには、わかりやすくすっきりとしたナビゲーションが必要です。メニューの表示を簡潔にすることで画面が整理されるだけでなく、訪問者が内容に集中しやすくなります。ウェブサイトで訪問者にクリックしてもらいたいボタンがあるなどの場合に、必要な情報を画面で集中して取得できるという効果があります。
要素６：製品の巨大な画像
お気付きかもしれませんが、最近は多くのB2Bウェブサイトが製品の画像をページにでかでかと表示して、さまざまな機能や特徴を紹介するようになりました。これは偶然ではありません。
何の話だかわかりやすく説明するために、HubSpotのウェブサイトプラットフォームの製品ページをご覧ください。
まずページの冒頭に、画面の画像を大きく表示しています。さらにスクロールしてページの下の方へ移動すると、製品の詳細を紹介する大きな画像が次々と表示されます。画像はレスポンシブ対応で、先ほど説明したように、訪問者がどのデバイスを使っていても綺麗に表示されるようになっています。
主な効果は？
サイズの大きい画像を使って製品を紹介すると、製品のさまざまな特徴をより効率的かつ効果的に伝えることができます。
この方法で製品の最も重要な機能に焦点を当てて説明することにより、その機能をより素晴らしく見せることができます。たとえば、このページのその他の画像を見ると、製品の機能の利点ごとに番号が付けられています。
また、大きい画像を表示すると、訪問者に製品のさまざまな特徴を、言葉ではなく画像でわかりやすく、そして確実に理解してもらうことができます。
要素７：カードデザイン
Pinterestの登場以来、世の中のデザイナーもマーケターも、カードがすっかりお気に入りになってしまったようです。一つひとつのカードに情報をビジュアル形式で入れられるため、ウェブサイトにコンテンツをぎっしり詰めこんでも、煩雑にならずすっきりと表示できます。
Brit + Coのホームページは、カードデザインを採用した素晴らしい例です。
コンテンツをカードごとに分けて表示し、ユーザーが読みたい情報を選べるようになっています。ホームページにテキストが大量に表示されないため、画面が整理されてすっきりとします。
主な効果は？
カードデザインを採用すると、情報をユーザーにわかりやすく伝達できるため、最近ではB2BやB2Cのウェブサイトの多くがこれを採用するようになってきました。また、ウェブサイトで複数の製品やソリューションを並べて紹介するにも、このデザインは有効です。
注意すべき点としては、カードデザインをレスポンシブ対応にしてください。画面のサイズが大きくても小さくても、表示されるカードの数とサイズが画面に合わせて正しく調整されるようにしましょう。
要素８：製品や機能を紹介する短い動画
動画は背景だけではありません。製品や機能を短い動画にして使い方を紹介する企業も増えてきました。このような動画は製品の魅力を生き生きと映し出し、訪問者は退屈することなく短時間で製品について理解することができます。
この要素を取り入れた素晴らしい例に、InVisionのウェブサイトがあります。InVisionの製品を使用すると、ウェブサイトのデザインがドラッグ&ドロップで簡単に作成できることを、ホームページで短い動画を使って紹介しています。
主な効果は？
Inc. Magazineによると、B2Bの顧客の92%がオンラインでビデオを視聴し、B2Bの顧客の43%が仕事で製品やサービスについて調べるときにオンラインでビデオを視聴しているそうです。つまりB2B各社においては、製品を紹介するビデオがバイヤーの意思決定プロセスに大きく影響し、このようなビデオの作成が重要であることを意味しています。
短い動画を使って製品を紹介すると、長い時間を使って詳しい説明を聞くことなく、製品の価値を素早く理解することができます。確かに、長い動画が効果的な場合もありますが、ファネルの上の方に位置する見込み客などでは、短い動画を利用して簡単に理解してもらう方が効果が高いようです。
いかがでしたか？他にもウェブサイトに採用したい重要なデザイン要素がありましたらお知らせください。
HubSpotのCMSなど、デフォルト機能でレスポンシブ対応を行なっている最新ツールなどはございますので、興味のある方はご覧ください。
現在お持ちのウェブサイトは、デザイン刷新が必要そうですか。中でも、特に新しくすべきなのはどの部分ですか。
編集メモ：この記事は、 2015年10月に投稿した内容に加筆・訂正したものです。Jeffrey Vocell による元の記事はこちらからご覧いただけます。
