Appleも実践！シンプルだけど魅力的なデザインを実現しているホームページ6つの心得

デザインが非常に洗練されていると評判のAppleは、製品だけでなくホームページも驚くほどシンプルです。
シンプルで印象的な見た目は、時に冗長で複雑な説明をするよりも説得力があります。

ただ、単にいくつかの要素を考えもなしに置くだけでは、シンプルなデザインとは言い難いでしょう。
シンプルとは、余計なものをそぎ落とすだけでなく、本当に大切なものを選りすぐっていった先にこそあるからです。

今回は、シンプルだけど魅力的なデザインのホームページを作成する際に気をつけたい7つの心得をご紹介します。
「シンプルかつ、万人に訴求するようなデザイン」は、どのような考えをベースに作成されているのでしょうか。
ポイントごとに詳しく見てみましょう。

シンプルだけど魅力的なデザインのWebサイトの7つの心得

1. 伝えたい大テーマを１つに絞る

１ページにつき伝えたい大テーマを１つに絞っていくことは、シンプルなデザインを行う上で非常に重要なことです。
ナビゲーションやフッターをのぞいて、それぞれのページでユーザーに促すアクションは１つだけにしましょう。

例えば、MacBook Proのホームページを見てみましょう。
MacBook Proのキャッチコピーは*「指先に、さらなる才能を」*というコピーです。
もちろん、新しいMacBook Proは速度も改善され、驚異的なまでに薄くて軽く、美しいディスプレイを備えています。

しかし、もっとも売り込みたいのは、指先に表示されたTouch Barです。
長い間キーボードの上部を占領していたファンクションキーを取り除き、全く新しい方法でOSやソフトウェアを操作するためのインタラクティブな方法を提案しています。

また、テーマだけでなくユーザーに求めるアクションも、できるだけ一つに絞るようにしましょう。
リンクやボタンをクリックさせたり、入力フォームにさまざまな情報を入力させたり、ビデオを見せたりというのを全て単一ページで行なってしまうと、ユーザーは疲れてしまいます。

2. 余白を侮らない

デザインを考える上で一番のセンスが問われる部分、といっても過言ではないの、それは*「余白」*です。
逆に言えば、余白を上手に操作できるようになれば、デザインにおいて美しい見せ方をすることができます。

余白なくびっしりと詰めると、インパクトはありますが、場合によっては窮屈に見えてしまうことがあります。
一方、余白をしっかりととることによって、洗練されたすっきりとしたイメージを与えることができます。

Appleのホームページではできるだけ余白を取ることによって、プロダクトの持つすっきりとしたイメージをしっかりと表現しています。

3. 使うべきフォントを絞る

シンプルなホームページにしたいのであれば、使うフォントを２つか３つにまで絞ったほうがよいでしょう。
フォントをいくつも多用してしまうと、デザインに一貫性がなくなり、その結果として説得力が失われてしまいます。

例えばAppleのホームページではSanFranciscoが使われており、細身のスタイリッシュなフォントが製品の美しさを際立たせています。
ゴシック体やサンセリフはモダンで無機質なイメージがあり、明朝体やセリフは大人っぽく上品なイメージがあります。

また、太くなると権威的で男性的なイメージがあり、細くなるほどシャープで女性的なイメージがあります。
フォントを選ぶ際には、イメージだけでなく可読性(読みやすさ)も考慮して選んでみるといいでしょう。

4. ビジュアルヒエラルキーを作る

ビジュアルヒエラルキーとは、重要なものほど大きく、あるいは太くすることによって、外見的な見た目の序列を作り上げていくことです。
ビジュアルヒエラルキーのないデザインは、単調でどこかつまらないイメージを与えてしまいます。

一方、ビジュアルヒエラルキーがしっかりと定まれば、読む際に自然とリズムをとることができ、視線をぐっと引きつけることができます。

例えば、MacBook Proのパフォーマンスのセクションでは、*「あらゆるプロのための究極の仕事道具。」*というキャッチコピーがヒエラルキーとしては一番高い位置にあり、下に並んでいる4つの項目は自然と下位項目として認識されます。

ビジュアルヒエラルキーは、位置だけでなく、大きさや配色など、さまざまな要素によって決定されます。

エンゲージメント率を高める！デザインの視覚的階層ルール「ビジュアルヒエラルキー」3つのコツ

5. テキストアラインメントを統一する

意外と意識していないのが、テキストアラインメントです。
テキストアラインメントとは、テキストの左揃え・中央揃え・右揃えのことです。

デザインに関してあまり気を配っていないときには意外と意識しませんが、できるだけアラインメントは統一しておくべきです。
右揃え、中央揃え、右揃え、左揃え…とテキストの開始位置があちこちに散らばってしまうと、非常に読みにくくなってしまいます。

テキストだけでなく、ボタンや画像の位置も可能な限り本来のルールに沿って配置しておいたほうがよいでしょう。

6. タイムレスなデザインを考える

動画やマイクロインタラクションなど、動きのあるオブジェクトは確かに視線を奪います。
しかしながら、シンプルでミニマルなデザインにしたいのであれば、*「タイムレス」*なデザインを考えてみるのがいいでしょう。

ここでいう「タイムレス」とは、例えば動画のタイムライン上でチップを動かしてもずっと静止しているようなデザインのことです。
動きのあるオブジェクトは活発でアクティブに見えますが、シンプルさを追求したいのであればできるだけ動きのないデザインを心がけてください。

「タイムレス」なデザインは、エレガントでしとやかな印象を与えます。

Appleのホームページで採用されている製品の写真は、自然と「タイムレス」に写っていますね。
直線的なエッジが多いことや、余白を十分にとっていることが理由として挙げられます。

曲線的なフォルムのオブジェクトは、それだけで動きを連想させてしまいますが、直線的だともの静かなイメージを与えます。
また、余白がないと騒がしいイメージを連想させますが、余白をしっかりとることで、静かで凛としたイメージを与えることができます。