Webデザインには人々の興味を惹きつけるため、各企業とも色々な手法を用いてユーザーの興味に訴えかけています。大胆に大きいイメージを全面に打ち出したwebサイトなど、2016年5月現在、webデザインのトレンドとなったサイトをご紹介いたします。
クオリティの高い画像を大胆に打ち出したサイト
Summer Fridays - Summer Fridays
Elijah Kukharev - Web Deisgner & Art Director
たくさんの画像や動画を用いたwebサイトがまた人気が出始めてきています。大きな画像を用いることによってサイトコンテンツの魅力を最大限に引き出し、ユーザーの興味を惹きつける効果があるとされています。しかしながら、画像のクオリティが最大のファクターであり、画像の質には最大限に力を入れるべきでしょう。
ここで、少し注意しておきたい点をまとめておきます。
- 明確な画像を使用すること。興味を惹きつけ、他にはないものを。
- 色調補正をする。例えばモノクロにするなど、ちょっと極端に。
- あなたのブランドや製品を紹介する。
- 他の要素は最小限にまとめる。ロゴや短いヘッドラインのみで。
- 次のアクション（スクロールさせるなど）をユーザーに明確にさせる。
- 背景や照明にこだわりのあるドラマティックな画像を使う。
- タイポグラフィーを強調してみましょう。
スライドバーナビゲーションを効果的に用いたサイト
Jürgen Hassler - Digital Product Designer & Design Director
8X On The Park – Live the park life in Vancouver, BC
Quechua - Lookbook Spring / Summer 2016
webサイトのTOPページにナビゲーションを用いる手法は最近、一般的になってきていますが、まだ主流ではありません。ユーザーにとって使いやすいナビゲーションはユーザーの数だけ存在するといってもいいでしょう。
スライドバーナビゲーションはスクリーンの左側に配置するのが現在、もっとも一般的です。なぜならユーザーの感覚は左から右へ意識が向かうので、ヘッドラインや大きなコピーを見た後に、左にナビゲーションへ行動を移すのがもっとも自然な行動パターンになります。
モバイルナビゲーションもデスクトップのウェブサイトの論理と同様です。小さなスクリーンのデバイスで横からポップアップのナビゲーションを見たことがあると思います。サイドにナビゲーションバーを探すといったユーザー行動も一般的に受け入れたことでしょう。
幅の広い画像になるにつれて、モバイルを含めた、すべてのスクリーンに考慮した技術が必要です。モバイルデザインを戦略的に行うことで、すべてのデバイスにも応用が効きます。
大きなスクリーンでのスライドバーナビゲーションには、少なからず考えるべき特別な要素があります。
- ナビゲーションがユーザーにとってわかりやすいものにする。例えばハンバーガーアイコンのようなもの。
- ナビゲーションが左か右からポップアップで表示されていること。
- スライドバーナビゲーションが一部としてではなく、全体のデザインとして組み込まれていること。
- ナビゲーションの要素が明確で読みやすくするために十分な余白を入れること。
- ページ遷移してもナビゲーションの変化がわかりやすいようにする。
インタラクティブ（双方的）なサイト
Take an Instant Caribbean Vacation in full 360º.
デザイナーはよりインタラクティブ性を持たせたサイトにするために動画を用いたり、アニメーションを駆使するようになります。このようなサイトは、ブランドやビジネスにとっても非常に有益とも言えます。
インタラクティブなストーリーはコンテンツ次第では、サイト滞在時間だけでなく、リンクをクリックしてもらえたりと良い結果をもたらします。
reference: Essential design trends, May 2016 | Webdesigner Depot
まとめ
海外の最新webデザインのトレンドはいかがでしたでしょうか？最近はダイナミックな画像を用いたサイトも多いですが、それと同時にモバイルの最適化を考慮しながらも、ストレスフリーなサイトが大前提です。視覚的、感覚的にユーザーに興味を引きつけるために、動画やアニメーションなども目立ってきています。
あなたにとって魅力的なサイトとはどういうサイトですか？
最新Webデザインスキルを身につけるには
Codecampはマンツーマンでプロの最新webデザインレッスンを受けることができます。まだwebデザインはできるけど自信がない、一線で活躍しているプロからマンツーマンでレッスンを受けたいという方はCodecampがオススメです。
