2014年も終わりに近づき、今年1年間で見られるようになったWebデザイントレンドを振り返ってみましょう。いくつかのトレンドは新しく、いくつかは従来のデザインに新しいアイデアを加えて開発されています。
トレンドの多くはとてもユニークで、デザインコミュニティーにとって有益なものばかりですが、いくつかのポイントについては考慮する必要があるようです。今回は2014年特に見る機会の増えたデザイントレンドをまとめています。
詳細は以下から。
ベスト・デザイントレンド2014
まずはじめに新しいアイデアではないですが、2014年にかけて新しく開発されたトレンドをまとめています。より良いレイアウトを組むには常にチャレンジが必要ですが、人気のトレンドアイデア、コンセプトを核としてうまく反映されています。
トレンド１ ミニマルなフラットデザイン
2013年ごろより耳にするようになったフラットデザインは、デザインプロセスをより簡単にすることができるミニマルなスタイルが基本となります。2014年にかけてGoogleマテリアル・デザインに代表される、多くのフラット型アイコンやUIキットなどの無料素材が公開されています。
Webサイトがシンプルになることで、デザインコンポーネントも簡略化されます。もちろんグラフィクデザインだけでなく、配色やタイポグラフィーも含まれます。コンテンツがWebページにおいて重視される今、よりミニマルスタイルの環境が好まれ、人気となっています。
フレームワークBootstrapの人気や、iOS 8がアウトライン付フラットボタンを使ったコンセプトを採用しています。また多くのWebサイトがゴーストボタンを採用しており、傾向としてシンプルなスタイルがトレンドとなり、これからより面白い表現が増えてくるでしょう。
トレンド２ Webフォントの改善
CSS3は高度なメディアクエリの設定やアニメーションを取り入れるうちに、自然と大きなトピックとなりました。また同時にCSS3は、カスタムフォント用@font-faceにも対応しています。2014年にかけて数えきれない程のウェブサイトが、Google Webフォントなどの外部リソースを活用しています。
特にオンラインマガジンやブログなどは、Webフォントをとてもうまく役立てています。使用できるフォントの選択肢が増えたことで、新聞を真似たデザインなども可能となりました。ブログなどに限らずすべてのウェブデザインにおいて、Webフォントを使った新しい可能性がこれからますます増えるでしょう。
トレンド３ フルスクリーン背景
フルスクリーン背景を作成するために、さまざまなプラグインやコード・スニペットが公開されています。イメージ写真とビデオ動画を利用したトレンドは人気となっており、ハイクオリティな画質とウィンドウ幅に応じてスケールされる点が支持されています。
このトレンドでは、スライダーを使ってより多くのイメージ写真をレイアウトしていることもあります。それぞれのスライドイメージにはテキストコンテンツが含まれているケースもあり、画面の両サイドに配置された矢印ボタンで操作することができます。モダンなデザインに最適なこのトレンドも、2014年にかけて多くのウェブサイトで見かけました。
すべてのプロジェクトにおいてフルスクリーン背景が役立つわけではないことに注意しましょう。どのような背景を採用するのかアイデアが重要となり、ユーザーにどのような印象を与えるか検討しましょう。
トレンド４ レスポンシブデザインの改善
スマートフォン端末が当たり前になり、モバイルを含むタッチスクリーン端末からウェブサイトを訪れるユーザー数の増加は、目を見張るものがあります。デザイナーやデベロッパーは、あらゆる解像度に対応することにより着目しています。
ドロップダウンナビゲーションを採用した、スマートフォンなど画面サイズの小さな端末用レスポンシブナビメニューは、2014年大きなトレンドとなりました。タッチスクリーンとマウス操作では反応がそれぞれ異なることにも注意しましょう。イメージカルーセルやビデオ動画、アコーディオンメニューなどのプラグイン開発でもサポートされています。
ワースト・ウェブデザイン2014
では次にあまり良い印象を与えないかもしれない、いくつかのワースト・トレンドアイデアについて紹介します。多くのケースは今でもよく見るトレンドですが、モダンウェブデザインとの相性はあまり良いとは言えません。もちろんいくつかのサイトでは、うまく活用しているかもしれませんが、ほとんどのWebレイアウトにマッチせず、変更を検討する必要があります。
トレンド５ プロモーション用モーダルウィンドウ
モーダルウィンドウとは、最前面に飛び出すように現れる画面ウィンドウを表示します。多くのケースで背景を少し暗くしながら「閉じるボタン」をクリックすることで、元のページに戻る仕組みとなっています。直接ウェブサイトにアクセスしようとすると、メールマガジンへの登録メッセージが強制的に表示されてしまうケースもしばしばです。
ただしすべてのモーダルウィンドウが悪いわけではありません。別のウィンドウを用意することで、よりユーザーの注目が集まるのも事実です。しかしユーザーがモーダルウィンドウを開きたい（イメージギャラリーやビデオ動画、サインアップ・フォームなど）と思い、クリックしたときに表示されるべきではないでしょうか。
「閉じる」ボタンを押さずに、暗くなった背景エリアをクリックすることで、モーダルウィンドウをより早く閉じることができるなど改善点もあります。しかしモーダルウィンドウは、まるで時間がないときに内容も理解できない商品を、セールスマンに押し売りされているような気分になってしまいます。注目させたいコンテンツをサイドバーに移動させることで、より良い効果を得ることができるかもしれません。
トレンド６ ソーシャルメディアの使いすぎ
いくつもの素敵なソーシャル・ネットワークを使ったコンテンツを共有、シェアサービスは、2014年にかけて特に目立った傾向です。ブログやWebサイトにシェアボタンを設置することで、ソーシャルメディアを通じた大量のアクセスを期待するなど、さまざまな理由が考えられるでしょう。しかし数には限界があり、多すぎることでユーザーのブラウザ体験を損ねてしまう恐れがあります。
たとえばMarginal Revolution Homepageでは、各記事の下にシェアボタンが配置されています。緑色の「share this」にマウスカーソルを合わせると、モーダウンウィンドウが表示されます。通常このエフェクトは、クリックすることで表示されるべきです。
ブログデザインQuirky Chrissyはもうひとつの例です。デザイン自体は特に問題はないのですが、それぞれの記事の下に配置されている大量の灰色ボタンは必要ないように思います。実際、一か所にたくさんのボタンがあると、ユーザーはシェアすること自体思いとどまってしまうこともあります。ソーシャルボタンをWebサイトに追加するときは、ユーザーのアクセス性を重視し、使いすぎには注意しましょう。
トレンド７ 永遠に続くローディング画面
これはマイナーなトレンドですが、なぜユーザーがイライラするのか理由ははっきりしています。インターネットの回線速度は劇的に早くなっていて、だれも遅いウェブサイトのために待ちたいとは思っていません。もともとローディング画面はFlashを使ったウェブサイトで見られた手法で、トレンドが数年前に逆戻りしてしまったような感覚です。
いくつかのモダンWebサイトでは、読み込みプリローダーを実装することでこの問題をうまく解決しています。多くのリソースやコンテンツ、アニメーションを読み込む必要がある場合も、ベストとは言えませんがしょうがないでしょう。しかし延々とローディング画面が続くサンプルウェブサイトAnata Jewelryではあまり必要ないように思います。
クリックスをする度にローディングアニメーションが表示され、永遠に感じるほどの数秒間の待ち時間がつづきます。すべてのページに読み込みプリローダーを表示しなくても、実際のところ特に問題ないでしょう。
トレンド８ カスタマイズされたスクロールバー
このトレンドもFlashサイトから持ち越されているトレンドのひとつで、ブラウザの初期設定の代わりにスクロールバーをカスタマイズするのに利用されています。現在はjQueryなどのプラグインやライブラリを利用することで、手軽に編集することができます。
たとえばjQuery Custom Scrollbarのように、ページ内部にある一部のコンテンツに利用し、ブラウザ用スクロールバーは基本設定通りの場合は問題ありません。しかし、カスタマイズされている場合は、スクロールスピードなどにも影響し、ユーザビリティーを低下させてしまいます。
WebサイトFCBotiga Megastoreでは、まず必ずスクロールが必要なパララックスコンテンツを表示した後に、別のスクロールバーが表示される仕組みとなっています。ユーザーがどのコンテンツを表示したいのか、選択できるようにレイアウトする必要があります。
最後に、、。
今回は個人的にコレクションした、他のトレンドアイデアに比べて特に目立ったポイントをまとめています。2014年もたくさんのクールな新しいリソースが公開され、デザイナーにとって面白い年となりました。予想以上に人気が集中したフラットデザインは、ミニマルスタイルを取り入れながら、さらに2015年には他のスタイルを加えてどのようなデザイントレンドが生まれるでしょう。
参照元リンク : The Best & Worst Web Design Trends of 2014- envatoMarket