私たちは「整理整頓」という言葉を、クローゼットや収納のような物理的なものに対して使います。しかし、デザインでも整理整頓は大事です。整理整頓をすることで、Webサイトのユーザビリティとユーザー体験を向上させることができるでしょう。
この記事では、デザインの整理整頓を行うための４つのヒントを紹介します。
１. コピーを短縮する
1997年、Nielsen Norman GroupはユーザーがWebをどのように読むのか知るための調査を実施しました。ユーザーがコンテンツをしっかりと読んでいないことはご存知でしょう。代わりに、ほとんどのユーザーはページをざっと流し読みしています。それにもかかわらず、不必要な単語ばかりのWebサイトはたくさん存在するのです。残念なことに、そこら中に雑で直感的でないコピーが存在します。画面に表示される単語の量を減らすことで、Webサイトのコンテンツを整頓することができます。
不要な単語は削除しましょう。また、長々と続く文章は短くして、冗長な文章も削除してください。言いたいことは必ず段落ごとに１つにしましょう。これが優れた文章の形式であり、読者が流し読みするのにも適しています。
最後に、特に長い形式のコンテンツに言えることですが、逆ピラミッド構図を使いましょう。逆ピラミッド構造とは、結論から書き始めて、コンテンツが長くなるにしたがって詳細を加えていくものです。
これは私のお気に入りのアプリの１つ、Daysです。Daysはイベントまでの日にちをカウントダウンするアプリです。アプリのランディングページの各セクションには、ほとんど文章がありません。上のスクリーンショットは、ランディングページの１つのセクションです。コピーが非常に短いのがわかります。見た目も良く、とても読みやすいです。
防水スピーカーAiiaのランディングページは素晴らしいです。スクロールは風変わりであるものの、整ったページが私は大好きです。短いコピーは、ユーザーを膨大な言葉で迷わせることなく、メインとなるアイデアを伝える素晴らしい方法です。
２. ビジュアルの装飾を取り除く
ビジュアルについて、見た目を美しくするために要素を追加したくなるときもあります。誰でもデザインの見た目を美しくしたいと思うでしょう。美しいデザインにしたいという意図は良いのですが、いざやってみると過剰になりがちです。
そのため私は、不必要な装飾をすべて取り除くことを強く勧めます。装飾のいいところは、取り除いてもユーザー体験をまったく損なわないところです。
２つのWebサイトを比較してみましょう。上のスクリーンショットはVConceptのもので、下のスクリーンショットはBornのものです。VConceptのほうがページのコンテンツが少ないですが、意味を理解するのがより大変です。これは、VConceptのページ上にある装飾が邪魔をしているからです。背景は三角形のパターンで、背後で線も動いています。コピーには、普通のテキストと下線付きのテキスト、金色の下線付きのテキストの３つスタイルがあります。さらに段落内にはロゴまで使われているのです。これでは多すぎます。
その一方で、Bornの求人ページを見てみましょう。たしかに、よりたくさんの文章がありますが、気を紛らわす装飾が１つもないので機能しています。これらの求人票が、１ピクセルのボーダーの中に入れられているのを想像してみてください。情報の流し読みはより難しくなるでしょう。
３. デザイン要素を再利用する
反復する要素は統合し、再利用しましょう。たとえば、カラーやフォント、スタイルのバリエーションが多すぎると乱雑になってしまいます。一貫性を保つため、デザイン要素は再利用しましょう。一貫性は、整理整頓されたデザインを作ります。「２～３つ以上のフォントを使用してはならない」というような経験則には、きちんと理由があるのです。
また、カラーや要素についても同じことが言えます。ページの一番下にメルマガ登録部分を配置する場合は、すべてのページの見た目を統一するようにしましょう。一貫性がないと、深刻な混乱につながりかねません。
The Business Depotの色の選択について話しましょう。これは企業顧客向けのITクラウド製品のサイトで、押し付けがましいWebデザインの典型です。トップページと製品ページ、コンタクトページの間には、あまりに多くの種類の色調が使われています。トップページ上では色が主要な要素になっていて、それぞれのページごとに意味が込められているように見えます。
しかし、クリックして回ると、色の使い分けに何も意味がないことがわかります。というのも、自分が今いるページによって色が変わってしまうのです。たとえば、企業情報ページではパステル調の色合いですが、コンタクトページでは明るくて強烈な色合いを使っています。色の一貫性を保つことで、デザインの質を向上できます。
Prismic（上のスクリーンショット）は、ブログの投稿を色分けしており、たくさんのカラーを使用しています。これは危険な賭けではありますが、全体的なカラースキームは統一されています。さらに投稿はモノクロで、青のシェードを使うことによって親しみやすさを保っています。ページ上にあるすべての要素が異なる色だったら、悪夢のようなビジュアルになっていたでしょう。
ここで指摘しておきたいのは、ロゴからCTAボタンにいたるまで、青がメインになっている点です。一貫性は整った見た目を生み出します。
私はずっとLonely Planetのファンです。類似したデザイン要素を再利用しているので、現在のデザインスタイルは非常に優れています。各都市のページは同じテンプレートを使用しているため、見やすいです。Lonely Planetにはたくさんのコンテンツがあるので、同じテンプレートを使用することで読みやすくしています。
４. ページの目的を１つに絞る
整理整頓についての最後のアドバイスは、特定のページの目的や目標を理解することです。ユーザーの視点から目標を設定することがベストでしょう。ユーザーの目標の例としては、無料トライアルへの登録や、特定のレシピについて学ぶこと、メルマガへの登録などが挙げられます。新しいページやWebサイトをデザインしている人は、目標を十分に確認して、その目標を邪魔しないよう気を付けましょう。
明確な１つの目標を、常に目指してください。そうすれば、目標以外の余計なものを取り除くことができるでしょう。たとえばある本のサンプルの章をユーザーにダウンロードしてほしいとき、ほかの本のプロモーションをしてはいけません。ダウンロードボタンを中央に配置しましょう。ページが長い場合は、CTAを数回繰り返してください。またユーザーがサンプルをダウンロードするのに役立たないものは、すべて取り除きましょう。
旅行用モバイルアプリHitlistのランディングページを見てみましょう。ユーザーが行えるのは、アプリのダウンロードです。ダウンロードには、いくつか方法があります。電話番号を入力してテキストリンクを入手するか、App Storeのボタンをクリックするかです。もちろんほかのリンクをクリックすることもできますが、ページのメインは、ほかのものに邪魔されていません。
Seedlipはノンアルコールのスピリッツです。私はこのWebサイトのビジュアルスタイルが大好きです。このトップページはユーザーの目線を１点に集中させるようになっています。また、ページ全体で４つしかCTAを使っていません。その内２つはボトルを購入するためのもので、残りはユーザーがSeedlipを購入するよう納得させるためにさらに情報を提供するものです。CTA同士が競合しないのであれば、複数のCTAを使っても構いません。
結論
この記事では、Webデザインを整理整頓する４つの方法を説明しました。これらを実行することで、Webサイトのユーザー体験とユーザビリティを向上できることを願います。デザインの整理整頓はあまり手間がかからずに、ユーザーがサイトとインタラクションする方法を大きく改善することができるでしょう。結局、ユーザビリティとユーザー体験は密接に関連しており、Webサイトの見た目はその両方に影響を及ぼします。
