ウェブサイトのデザイン制作に悩んだとき、参考にしたい最新Webデザインをまとめました。美しいレイアウトやグラフィックデザインはもちろん、配色や良質なデザインコンセプトを学んでみてはいかがでしょう。
2015年のWebデザイントレンドを盛り込み、さまざまな仕掛けやアニメーションでユーザーを楽しませてくれ、キラーコンテンツとなるウェブページの作成にどうぞ。
詳細は以下から。
進化するWebデザイン！参考にしたいトレンド満載のウェブサイトまとめ
ゴールドとピンク色の組み合わせが新鮮で、高級感を演出できるイベント告知ページ。オレンジ色とピン色の淡いグラデーションカラーを背景に、繊細なドロップシャドウとアニメーションを加えています。
若くして謎の死を遂げた、世界の歌姫Amy Winehouseをテーマにした映画の公式ページ。フルスクリーン画面に動画を使った、インタラクティブなサイトデザイン。※ 音がでます、ご注意ください。
グリッドラインを基準に、タイル状に商品コンテンツが展開された、インテリア向けオンラインショップ。ロゴや商品名に使われている太字フォントが、サイトのデザイン性、コンセプトをうまく揃えています。
インテリア家具のオンラインサイトで、カード状にコンテンツを並べ、余白スペースをたっぷり確保することで、サムネイル画像を引き立てます。使用されている細字フォントも、ミニマルな印象のアクセントに。
バーガーキングがマクドナルドに、1日限りのコラボレーションを提案した、縦に長いイラストとアニメーションで表現された特設ページ。残念ながら今回のコラボは実現ならず。
画面中央に表示されるボートを、左右にドラッグすることで、イラストで描かれたオランダの街並みを観光できます。
サイトで販売されている商品を、背景スクリーン全体に散りばめ、スクロールするたびにアニメーションを加えた、ミニマルスタイルの特設ページ。
Do You Know YouTube from A to Z?
10周年を記念したYouTube特設ページ。ドラッグで操作する、YouTubeにまつわるクイズが出題されます。
ニューヨークにあるデザイン事務所で、太めのアウトラインにスタッフのユニークな顔写真などが、ブランディングにも役立っている好例。
コンテンツの切り替えにユニークなアニメーションを採用、楽しげな配色も参考にしたいサイトデザイン。
プカプカとシャボン玉が浮かんだ背景に、多彩なアニメーションを仕掛けたコンテンツが美しいサイト。
日本人デザイナー、小林幹也さんのポートフォリオサイト。ページを遷移するたびに、滑らかで気持ちの良いアニメーションが随所に盛り込まれています。
ユニークなコラージュアートを利用したウェブサイトで、右端に配置されたアイコンにホバーすると、ナビメニューが表示される仕組みとなっています。
マウスを下にドラッグして、シャツをズボンに入れるとコンテンツが開始される、ユニークなイラストを使ったTシャツのプロモーションサイト。
広島原爆の体験者、森本さんが語る、その当時の記憶と原爆の恐ろしさを伝えるコンテンツ。ページを捲るように、コンテンツがスムーズに進みます。
各コンテンツをスライド式に表示し、右側のボタンをクリックすることで、コンテンツ全体を一気に確認できる機能も。
ページ四方に散らばった4つのサークルを、中心の四角形にドラッグすることで、各コンテンツが展開されます。
最新Disney映画の未来を感じる公式ホームページ。ドラッグすることで行き先を自由に決定でき、映画のコンセプトに自然と親しむことができます。Chromeブラウザ推奨。
シーズンごとのルックブックを、インタラクティブな表現で描いた、アウトドアブランドのサイトデザイン。商品の良さをよりうまく伝える、コンテンツのデザインコンセプトにも着目です。
複雑なデータをフルスクリーン全画面表示でビジュアル化したサイト。左上メニューボタンに、面白いアニメーションエフェクトも。
The University of Sydney 360° Tour
高画質なビデオ動画を利用して、オーストラリアにある、シドニー大学のキャンパスをまるで歩いているような、バーチャル体験を提供しています。
Cameo – Video Edito & Movie Maker for iOS
スクロールすることで、フルスクリーン表示されていた画像が伸縮し、iPhoneディスプレイに吸い込まれるようなエフェクトがユニーク。
ほんのわずかに動く、濡れた髪の毛の女性が映り、まるでGIFアニメーションのようなエフェクトが不思議な作品。
カラフルなアクリル絵の具でペイントれた作品作品の上に、同色で隠すように配置されたブランド名。クリックすると、アニメーション付きでナビメニューが展開します。
ありふれた日常の一コマをみじかい動画で残し、お祝いをするというコンセプトがユニーク。フルスクリーンのタイル状に配置されたサムネイルを、自由にクリックできます。
商品プロダクトカラーでもあるピンク色で、サイトデザインも統一することで、より分かりやすくコンセプトを伝えることができる、ヘッドフォン・スピーカーのWebデザイン。
使用されているUIインターフェースやロゴ、イラストレーションなどの配色を統一することで、写真イメージをより魅力的にするだけでなく、コンセプトをシンプルに、そして的確に伝えることができます。
参照元リンク : Anniversay of the Warsaw Rising
