移り変わりのとても速いウェブデザインの世界では、どのようなデザインや実装テクニックが人気トレンドとなっているのか、定期的にチェックしておくことが重要です。今回は、クリエイティブなアイデアの参考にしたい最新ウェブデザインをまとめてご紹介します。
コンテンツを最大限うまく引き出し、ユーザーの印象に残るデザインを演出する最先端ウェブテクニックを体感してみましょう。各サムネイルをクリックすることで、参考ページを確認することができます。
詳細は以下から。
新しいウェブデザインの魅せ方を提案する、参考にしたいサイトまとめ
ファレル・ウィリアムズの世界観を表現した公式ページ。グリッド上に並べられたサムネイルをクリックすると、豊富な情報を多彩なレイアウトでまとめています。
美しい配色とシンプルなレイアウト、書体の組み合わせはぜひ参考にしたいミニマルデザイン。
ゼリーのようなぷるんとしたエフェクト効果が楽しく、配色も素敵なポートフォリオサイト。
スクリーン画面を２分割したレイアウトにフォントを組み合わせた、今後ますます増えてきそうなトレンドのレイアウトで、もちろんレスポンシブにも対応しています。
アナログ時計の文字盤をモチーフにしたローディングで、SVGを利用したユニークなスライダーの切り替えがポイント。
マウスカーソルに合わせて目がギョロギョロと動くギミックも。
ノンアルコールのリキュールを販売しているサイトで、ミニマルなパッケージデザインとフォントの組み合わせが参考に。
イギリスにある貸コテージの紹介ページで、思わず訪れたくなる美しいイメージ写真をつかった魅せ方は、さまざまな業種に利用できそう。
各コンテンツ毎にクラリネットやカスタネットなどの音を合わせることで、色々な場所をクリックしたくなる仕掛け。
アジア各国の観光地を中心に、ユニークなイラストとGoogleマップを利用して、インタラクティブに演出したサイト。第３弾として、ついに日本が登場です。
縦に長い単一ページですが、左側にラインを使ったナビメニューを加えることで、視線を下方向へと誘導するデザインアイデアが採用。
従来の一般的なレイアウトにとらわれず、インタラクティブな表現を可能にしたウェブサイト。
ネオンカラーで統一されたコンテンツが並び、マウスホバーで面白いアニメーションが豊富に実装されています。ダーク系ウェブサイトの参考にも。
ヘッダーに利用された鮮やかなグラデーションが目を惹くデザインで、商品とアルファベットを重ねたレイアウトが新鮮。
次世代のマイクロインタラクションを加えることで、各コンテンツに自然と目が誘導されるレイアウト。
ページスクロールなしで、コンテンツごとにフルスクリーン画面を切り替えます。
レスポンシブ対応で、特集コンテンツを大きく魅せるレイアウト。販売アイテムが多いサイトにも適しています。
マウスドラッグでストーリーを進めていく、ユーザー参加型のインタラクティブなサイト。
鮮やかん配色カラーパレットに手書きフォント、スクロールに応じたコンテンツ表示などデザイントレンドを詰めこんだサイト。
矢印ボタンでアイテムをゲットし進めていくオンラインゲームで、スピード感を表現するアニメーションが見事。
画像がぐねりと曲がる印象的なエフェクトをヒーローイメージに採用したサイトで、ダーク系デザインの参考にも。
配色やフォントの使い方、ナビメニューやレイアウトなどランディングページ作成時の参考にしたいサイト。
インクを垂らしたような不思議アニメーションを利用した、スプラッシュページもポイント。
膨大なコンテンツを扱うサービスにおける配色や、グリッドを使ったレイアウトなどの細かい仕様をまとめたコンセプトページ。
スクロールに応じてさまざまなアニメーション付きでコンテンツを表示していきます。ページ読み込みにやや難あり。
スクリーン画面全体にグリッドラインを引くことで、レイアウト全体の統一感を表現しているサイトで、利用している太字フォントも参考に。
デザイン・カンファレンスの特設ページだけあり、配色やフォント使いはもちろん、ランダムに置かれている四角形シェイプも、実はうまく計算されて配置されてます。
映画の世界をそのまま体験できる特集ページで、VR技術を利用しゲーム要素を盛り込んだコンテンツを楽しむことができます。
スイスにあるバーケーションホテルの案内ページで、セリフとサンセリフ書体の組み合わせが、エレガントな高級感を演出しています。
まるでブラウン管テレビに映しだされた映像のような、グリッチエフェクトをイメージ画像に加えることで、うまくレトロ感を演出してます。
スライダー付きヒーローイメージに最低限のパーツのみを揃えたミニマルさが特長で、フォントの組み合わせ方も参考にしたいサイト。
ページをスクロールすると、表示されていたロゴやイラストがあらゆる方向に飛び散るスプラッシュページ付き。
