[fancy_box]海外デザインブログDesignModoで公開された「Best Website Design of 2014」の著者 Carrier Cousinsより許可をもらい日本語抄訳しています。[/fancy_box]
2014年もそろそろ終わりに近づき、今年公開されたWebデザインを振り返ってみましょう。今年もウェブデザインにおける多くのトレンド、テクニックが登場した一年となりました。
ウェブデザイナーはこの一年、フラットやほぼフラット、ミニマルスタイル、パララックスやビデオ動画などのデザイントレンドに着目し、爆発的に世界中に広がりました。2014年において良デザイン要素の鍵となるのは、モバイルやレスポンシブデザインの計画や使いやすさです。あらゆるユーザーが、あらゆる環境においてWebサイトにアクセスできることがポイントになります。
今回は2014年に公開された20個のベストWebデザインを、サイト設計において考慮されているポイントと一緒にご紹介します。世界的なWebギャラリーサイトAwwwardsで特集されたWebサイトデザインばかりを集めており、ユーザーを飽きさせないさまざまな仕掛けやテクニックが採用されています。
詳細は以下から。
2014年ベストWebサイトデザイン20個総まとめ
人気海外ドラマシリーズの劇場版公式サイトで、ドラマの雰囲気を見事に表現したビジュアルがユニーク。シンプルなスタイルに、極太タイポグラフィーやパララックスエフェクトを採用した、シンプルなカラーパレットなど機能が充実しています。メッセージやビデオなどのコンテンツは、まるで映画の中で自分が行動しているような感覚を味わえます。
今年公開されたWebサイトの中でもっともスタイリッシュなサイトのひとつで、たくさんのトレンドをうまく取り込んでいます。このサイトではフルスクリーン型ヒーローイメージが採用されており、シンプルな余白スペースはメッセージやゴーストボタンの操作性を高めています。サイト全体の作りもシンプルで、アクセントとなるデコレーションが白背景にマッチしています。
スクロールするたびにディスプリが飛び出すエフェクトやパズル式スライダーなど多彩なアニメーションを実装し、ビジュアル的にユーザーの注目を集めるよう考慮されています。面白いボタンホバーエフェクトやポップアウト型ナビメニューなどにも注目です。
シンプルなデザインが魅力的なサイトで、余白スペースと太字タイポグラフィーを使ったブランドコンセプトまで考えぬかれています。パララックスエフェクトを使ったスライダーや、クリックすると画面全体を覆うオーバーレイエフェクトのナビメニューなどトレンドが目白押し。
アルツハイマー病の脳に与える影響を認知してもらうプロジェクトのために作成されたサイトで、とてもインタラクティブなビジュアルをたのしむことができます。ダーク系背景にキラキラと輝くライトは、それぞれユーザーの思い出が投稿されています。またこのサイト自体の透明度がすこしずつ下がり、最後には記憶から消えてしまうというアルツハイマー病を連想させる仕掛けも。
今年のもっとも大きなトレンドの中で、見た目において分かりにくい要素は、ウェブサイトがよりストーリー性を含んでいる点です。このサイトでは飲酒中に起こった面白いストーリーをまとめており、ユニークなホバーエフェクトやタイポグラフィーデザインに、動画やアニメーションなどのテクニックを組み合わせています。
ミニマルデザインお手本のようなサイトで、レストランで提供される美味しそうなフード写真スライダーをヘッダーデザインに使用しています。ページの読み込み速度も考慮されており、ナビゲーション・メニューは最初ページの下に配置することで、よりベターなWebサイト体験を実現します。（スクロールするとナビメニューが上部にふわりと固定されます。）洗練されたイメージを演出したWebデザインのひとつ。
ビデオ動画を利用したテクニックも2014年を代表するデザイントレンドのひとつで、このサイトではうまく活用しています。サイトを開くとビデオからはじまり、まるであなたが映画に登場しているような錯覚に。あなたのマウスさばき次第でストーリーが変わってくるユニークな仕掛けが。スクロールし過ぎにはご注意を。
Chrome専用として作成されたwebサイトで、実際に打ち上げられている衛星ISEE-3からのライブ画像を確認したり、フライトミッションに関する動画を見たりと、さまざまなコンテンツが用意されています。シンプルでモダンなデザインは、Webサイトの今後を期待させます。
直感的に音楽ループを作り、カラフルなビジュアル・エフェクトと一緒に魅せる中毒性たっぷりな楽しいゲームサイト。ベースやドラム音をキーボード操作でループさせ、音を組み合わせていくことでオリジナルのトラックを作成します。
豊富なアニメーション、ビデオエフェクトを取り入れたサイトで、思わずクリックしたくなる素敵なフェクトを追加することで、ユーザーをコンテンツに誘導するよう設計されています。ミニマルスタイルに映えるインパクトのあるイメージ写真の選び方も参考になります。
A Journey Through Middle-Earth
公開映画用の公式Webサイトには、より印象的な仕掛けが実装されているケースがここ最近増えているようです。そしてこちらのサイトも、映画ストーリーと連動したゲーム感覚のインタラクティブなサイトに仕上がっています。
ごくシンプルなミニマルサイトですが、ページ中央に表示された2枚のペアイメージ写真が上下にツイストしたり、スクロールエフェクトを追加したりとアニメーションが効果的に活用しています。ナビゲーションをクリックすることで、会社内容をフルスクリーン画面で紹介しています。
古い蓄音機にレコードが置かれており、マウス操作で機能がつまったサイトは、ついつい長居してしまいそうなものばかりです。アニーメーションやビデオを使った、新しい音楽体験ができるだけでなく、実際に音楽を演奏することもできます。レコードをDJのようにこすってみると、、隠し機能満載。
ミニマルデザインに洗練された印象を加えたサイトで、ゴールドの配色にピカっと光るライトエフェクトなど、派手すぎないエフェクトをつめこんでいます。またスクロールした際にイメージ画像にも素敵なホバーエフェクトが追加されており、こちらも思わずクリックしたくなってしまいます。サイトリンクのアニメーションにも予期しないエフェクトが、。
フラットデザインをコンセプトにした素敵Webサイトで、ブロックごとに分かれたコンテンツを美しいイメージ写真が飾ります。特にカラーパレット配色はフラットスタイルだけでなく、独自のスタイルを見事に打ち出しています。またソーシャルメディアを連想させるスタイルや、レタッチ加工を加えたイメージ写真はどこかInstagramのよう。
一見シンプルに見えるこのサイトも、さまざまなトレンドテクニックが隠されています。たとえばヘッダー部分にはパララックスエフェクトとSVGアニメーション付ゴーストボタンが採用されており、使用されているイメージ画像にはクリックしたくなるホバーエフェクトも。またページ読み込みローディングもオリジナルで素敵です。
映画用トレーラーやビデオゲームのような形式で紹介される、車購入の動機につながる販売プロモーションサイト。インタラクティブな動きに加え、イメージ写真に重ねたメッシュオーバーレイによって、白テキストやちいさな文字の可読性をあげています。
シンプルなイメージ写真に、ごくわずかな操作ボタンなどを採用した新しいミニマルスタイルの形を提案したサイト。青色フラットスタイルに、ユニークな並びのイメージ写真はまるで雑誌をみているようなレイアウトが魅力的に仕上がっています。
ゲーム形式のWebサイトはより楽しみながら何かを学ぶのに適しています。このゲームスタイルではかわいいイラストと明るいカラーリングを使い、15ヶ国語のシンプルなワードを学ぶことができます。
[fancy_box]海外を中心としたWebデザイントレンドが中心で、今後が楽しみなテクニックばかりです。ユーザーをワクワクさせる仕掛けや工夫がされており、どのサイトも実際に訪れて体感してみることをオススメします。2015年はどのようなデザインテクニックが登場するのか、今からたのしみです。[/fancy_box]
