音楽やアートなどのカルチャーと同じく、Webデザインにもその時代ごとの思潮があり、毎年新たなデザイン要素や機能、トレンドなどが発生します。また、デザインに対する考え方も、新しい技術の急速な発展に伴い急激に変化します。
Webデザインのトレンドの中には、時の試練に耐えられないものもあります。ユーザビリティを損なうトレンドやユーザーのサイト訪問を妨げるようなトレンドは避けるべきです。以下に挙げるトレンドは、ユーザーはサイトから離れてしまう可能性もあるので、これらを採用する場合は慎重にならなければなりません。
ネガティブスペース
ネガティブスペースはホワイトスペースとも呼ばれ、画像やデザイン要素の周辺の何もない空間のことを指します。ユーザビリティの観点において、ネガティブスペースには重要な役割がありますが、その重要さは過小評価されています。
アートと同じで、Webデザインにおけるネガティブスペースも、芸術的要素としての効果があります。残念ながらネガティブスペースを空間の無駄だと考える人もいますが、美術館の壁に掛けられた作品と作品の間に空間が必要であるように、Webデザインにおいても同様のことが言えます。ネガティブスペースは、サイト内のコンテンツを読みやすく、また認識しやすくします。
Webデザイナーは、「少ないほど良い」ということを意味するCoco Chanel氏の名言「家を出る前に、鏡を見てアクセサリーを１つ外しなさい」を念頭に置いて作業するようにしましょう。
良いWebサイトには高品質なコンテンツが必要です。しかし、コンテンツという装飾が多いサイトは、見るべき箇所が多くなりすぎてしまいます。そうならないように、各要素のまわりに十分な余白を作ることで、コンテンツが見やすくなり、コールトゥアクション（CTA）を目立たせることができるでしょう。
コンテンツが多いサイトを改善するには、いくつかの簡単な方法があります。まず、無限スクロールを活用することです。トップのナビゲーションがわかりやすくなっていれば、スクロールしなければ見られない画面領域に表示する要素もユーザーに見てもらえるでしょう。最初からきちんとナビゲーションされているサイトならば、ユーザーがさらなる情報を探すのに手間取らなくなります。
次に、フォントのサイズに気を付けましょう。これについては、タイポグラフィについての項目でより詳しく述べますが、大きすぎるタイポグラフィはスペースを取り、攻撃的な印象を与えます。重要なのはバランスであり、圧迫感はないが、注目されるようなフォントを見つけましょう。
ハンバーガーメニュー
Webデザインのトレンドの中でも、過去数年間でもっとも顕著なものがハンバーガーメニューです。モバイル端末でWebサイトにアクセスするユーザーが急増したことにより、このトレンドが生まれました。ハンバーガーメニューのポイントは、ナビゲーションメニューを非表示にして、ページのメインスペースをすっきりとさせることです。ユーザーはメニューのアイコンを認識できるので、通常はメニューを見つけるのに困ることはありません。ユーザーがページを訪れる前から何を見たいのかわかっている場合、これは良いアイデアです。
ハンバーガーメニューの問題は、ユーザーが自らコンテンツを発見することに、サイトが依存している場合に生じます。Luke Wrobleski氏は、「明確なことが常に勝つ」と言っています。表示されている方が使いやすいことは当然です。
Facebookの例を考えてみましょう。iOSアプリにおいて、ハンバーガーメニューから画面下部のタブバーになったことで、ユーザーのエンゲージメントが増加しました。さらにユーザー満足度の増加や収益の増加、そして表示速度と認識のしやすさが改善されました。
ユーザーが自然に発見できるコンテンツの量を制限することは、危険な賭けです。カテゴリーを非表示にすると、サイト訪問者は選択肢をすぐに発見できなくなります。
ハンバーガーメニューは、特にECサイトで不利益をもたらします。ユーザーが商品を見つけられるかどうかに、ビジネス自体が依存しているからです。ユーザーが自分でメニューを開く必要がある場合、ビジネスにおいてもっとも重要な項目をユーザーが見逃してしまうかもしれません。またRSSフィードの読者に依存しているビジネスの場合は、その日のトップニュースや関連記事を見てもらえなくなってしまうのでハンバーガーメニューの使用を徹底的に避けるべきです。
カルーセル
フロントページのカルーセルは、小規模ビジネスから大企業のサイトまでさまざまなサイトで使われています。カルーセルはひとつの機能で多くの情報を伝えることができ、見た目上のスペースを節約できるので、デザイナーにとっては魅力的に思えるかも知れません。
しかし、企業が名前を売ろうとしている段階ならば、カルーセルは注意深く使用すべきです。カルーセルはSEOに悪影響を与えて、検索からページを見つけてもらいにくくなります。これはページのコンテンツ量が少ないと見なされ、結果としてGoogleが検出するメタデータも少なくなるからです。
編注：Googleはカルーセルのような隠れたコンテンツの評価を下げると言われますが、最近ではモバイルファーストインデックスにおいては評価を下げないと発言しています。詳しくはこちら。
ページにテキストを加えたりして対処することもできますが、それではカルーセルを用いてスペースを節約するというメリットがなくなります。またカルーセルには、アクセシビリティの点で大きな問題が存在します。それは、読み込み時間が遅くなるという問題と、JavaScriptよってパフォーマンスが低下するという問題です。
カルーセルは、サイトのアクセシビリティを低下させ、またユーザーのエンゲージメントを高める効果もありません。2013年に実施されたあるリサーチでは、カルーセルをクリックしたサイト訪問者は約１％だったことが報告されています。この結果は、カルーセルの切り替わりが自動であるか手動であるかによっても変わるそうです。
Wroblewski氏のハンバーガーメニューに対するアドバイスを考慮するならば、同じ問題がカルーセルにも当てはまります。つまり、カルーセルはわかりにくいのです。先ほどのリサーチでは、クリックをした１％のユーザーのうち83％が、１番目の画像をクリックしたそうです。ほかの４つの画像を使うのに意味はあるでしょうか？ それらの画像に利用価値はなく、エンゲージメントを促進する効果はあまり見込めません。
Wroblewski氏は実際の例として、PJ McCormick氏によるAmazonのカルーセルのデザインを挙げています。このカルーセルには画像を使った複数のメニューがあり、ユーザーはメニューにカーソルをあわせると画像がカルーセルになって動きます。これによって、ユーザーはどこをクリックすれば探しているものが見つかるのかわかるようになります。
ポップアップのフォーム
ドロップダウンメニューは、スキルのあるユーザーにとっても複雑な操作です。小さいスクリーンがより複雑になり、ナビゲーションとしては悪夢のようなものです。それに対してポップアップによるメニューは、簡単にスクロールできる選択肢のリストを別枠で提供するものです。iPhoneのドラムロールUIはこの良い事例です。操作する部分は大きく、選択肢も見つけやすいので操作性が良くなっています。
きちんと使われていれば、ポップアップは日付や長さ、重さなどの入力に用いるのにとても適しており、入力プロセスをよりスムーズに行えるものにします。
たとえば、年月日の３つの要素を入力するのにそれぞれの選択肢を用意する代わりに、ポップアップにより表示される単一の日付用フィールドを用意することで、ユーザーは一度に３つのリストをスクロールして、正しい日付を入力することができます。このような簡単な修正で、ユーザーが入力に時間がかかってイライラするようなことを減らすことができます。
無限スクロール
無限スクロールは便利です。終わりなく表示されるコンテンツは、ユーザー体験を向上させることができます。Pinterestのようなサイトでは、上手く無限スクロールが用いられており、これによってサイトが最先端である印象を与えています。
縦スクロールはいくつかのアプリに対して大きな成功をもたらしていますが、横スクロールは今でも多くのユーザーの不満の種として挙げられます。ユーザーは横スクロールが存在することに気づいてないことすらあります。これが原因でコンテンツが終わってしまったように見えると、ユーザーは困惑してしまうでしょう。
無限スクロールが問題となるのは、サイトの中にユーザーがアクセスしたいであろうフッターコンテンツが存在する場合です。この場合、どれだけスクロールをしても、フッターに辿り着くことはできないでしょう。慣れているユーザーはこのことを理解してくれるでしょうが、それがイライラする作業ならば、彼らはやろうとしないでしょう。わかりやすいことに加えて、ナビゲーションは簡単でなければなりません。
読み込み時間
ユーザーがサイトから離脱する圧倒的ナンバーワンの理由は、読み込み時間の遅さです。ある調査では、半分以上のユーザーがページの読み込みを10秒以上待たないと言っています。私たちは速いインターネット接続やデバイスに慣れているので、読み込みが一瞬で行われることを期待しています。画面の読み込みに長く時間がかかるほど、多くのユーザーが離れていきます。
これに対してユーザーが責めを負うべきではありません。テクノロジーは改善を積み重ねて、我々が期待する通りのものになっています。もし読み込み時間が遅くなる複雑なコンテンツを導入しようとしているなら、本当にそれが重要なものか検討してください。モバイルユーザーは、カフェラテを飲みながら座ってWebサイトをチェックする人たちではありません。彼らは動きながらモバイル端末を使っており、すぐに読み込まれ動作するモバイル体験を期待しています。
複雑なタイポグラフィ
今では多くのフォントが利用可能となっており、Webデザイナーはひとつのページにたくさんのフォントを使いたい衝動に駆られるかもしれません。よく言われるタイポグラフィのガイドラインとして、ひとつのページ上に２つか３つ以上のフォントを使用してはならないというものがあります。
複数のフォントが正当化される状況もあるかもしれません。しかし通常では、情報を見やすくわかりやすく伝えることに焦点を置く方が良いです。Wroblewski氏は、Tim Brown氏のタイポグラフィのペストプラクティスについてコメントしています。もっとも重要な要素として、タイポグラフィのバランスが挙げられます。サイズや行間、文章の量のバランスが良いと、読みやすさや見た目の良さが向上します。読みにくいようであれば、フォントの目的とは果たして何でしょうか？ デザインが見やすさを阻害するのであれば、直感的にわかりにくく読者数を増やすことにはなりません。
フォントを１つか２つ選択して使うことで、統一された見た目になりユーザーがブランドを認識するのに役立ちます。目的はユーザーのエンゲージメントを高めることです、忘れてはいけません。複数のフォントでサイズのバリエーションも多いサイトだと、読みにくく不快を与えます。テキストが判読不能であれば、誰もそのページにはとどまらないでしょう。
フローティング
フローティングされた要素は、ユーザーの関心を集める有効な手法です。しかし不適切なタイミングで用いられると、ページの一部を隠したりユーザーが見たいものから注目をそらしてしまったりして、ユーザーを妨害してしまうでしょう。そうなってしまうと、ユーザーのエンゲージメントにつながることはほぼあり得ません。小さな画面でサイトにアクセスしようとするモバイルユーザーにとっては、フローティング要素は特にストレスを与えます。
それに加えて、フローティング要素は思ったほど機能することがあまりありません。一度閉じてもまた開いたり、重要なページの機能の上で表示されていたりします。ユーザー体験がより複雑化するほど、ユーザーはそのようなサイトを使い続けようとはしないでしょう。
パララックススクロール
パララックススクロールは、必ずしも悪いデザインではなく、多くのマーケティング手法において効果的に活用されています。サイトを差別化する上で、新鮮さを与えるオプションであり最近でも人気があります。
しかし、いくつか欠点もあります。まず、カルーセルと一緒に用いると、SEOに不利な作用をもたらします。これは検索エンジンが認識するコンテンツが少ないからです。
またモバイル端末からのアクセスが必要とされるサイトでは、あまり良い選択肢ではありません。パララックスはJavaScriptやグラフィックの多用に依存しているため、ページの読み込み速度が遅くなり、ユーザーが離脱してしまう可能性が高くなります。
最適なトレンドを使用する
これらすべてのトレンドに対して最適な活用法がかならずある一方で、その利用を決定する前にWebデザイナーは注意深く考えなくてはなりません。あらゆるデザイナーに通用する最適なルールは、一時的な流行に乗るよりも、機能性やユーザー体験をより重視するということです。Luke Wroblewski氏のアドバイスを常に忘れず、わかりやすいデザインを行いましょう。コンテンツがどんなに良いものでも、それが隠されるのでは役に立ちません。
