ウェブサイトの制作に追われるうちに、アイデアが枯れてしまったという経験はないでしょうか。目まぐるしく変化を続けるウェブデザインの世界では、新しいアイデアやトレンドをうまくサイトに盛り込むことも重要です。
ユーザーに新しいウェブ体験を提供することで、コンテンツをより魅力的に仕上げるだけでなく、伝えたいメッセージやコンセプトをうまく表現できるようになります。
今回は、最近話題になった新作ウェブデザイン50個をまとめて紹介します。配色えらびやデザインが苦手な人でも参考にできる、最先端で実践的なテクニックを得意としたサイトを集めているので、今後のデザイン制作にも活躍してくれるでしょう。
現役デザイナーも注目!最近話題になったウェブデザイン50個まとめ
2017年要注目のデザイントレンド、デュオトーンカラー・エフェクトを利用した写真イメージが魅力的で、CTAボタンが目立つ工夫がされたシンプルなサイト。
長いブランドの歴史を振り返り商品ライナップを紹介したサイトで、シュワシュワとした泡などアニメーションの美しさにも脱帽。
新作コレクションまとめたルックブック的ランディングページで、ブラジルらしい鮮やかでカラフルな配色に特に注目です。
スクロールに応じて画像や文字テキストなどのコンテンツがふわりと表示される、心地の良いアニメーションがポイント。
テーマカラーのピンク色をサイト全面に使用することで、統一感のあるコンテンツの魅せ方を可能にした、ランディングページ作成の好例として。rma
グリッドレイアウトで整理されたコンテンツは、カーソルを合わせることで拡大ズームアップで表示される仕掛けも。
Googleマップを駆使したストーリングテリングの新しい魅せ方を提案してくれるでしょう。
自動車の自動運転を近い将来に実現しようとしている Tesla のテクノロジーを分かりやすいイラスト付きで解説しています。
400年以上続く老舗の技を大きな写真イメージで表現し、明朝体を使用することで由緒正しいお店の雰囲気にも見事にマッチしています。
質感たっぷりなダーク系テクスチャを背景にすることで、美味しそうなフードメニューが引き立っています。
画面を縦方向に2分割するスプリットレイアウトに、遊びココロのある筆記体が、takeお店の雰囲気を見事に伝えています。
下方向へのスクロールでコンテンツが切り替わるヘッダー用スライダーが魅力的で、全体の配色を統一することですっきりとした見た目に。
ブランドカラーの鮮やかな黄色が特長的で、伝えたいことのみ簡潔にまとめたサイトデザイン。
企業向けウェブサイトの作成で参考にしたい、レイアウトやコンテンツのまとめ方、見せ方など工夫がぎっしり詰まったサイト。
写真と文字テキストの重ね方や、グリッドを崩したレイアウト、心地よいアニメーションなどウェブデザインのトレンドを意識したつくり。
文字テキストとイメージ写真の重ね方や配置など、企業サイト作成時の参考にしたいサイト。
コンテンツごと分かりやすく整理された、ブログメディアサイトのデザイン作成の参考に。
ユーザーが知りたい情報を重要度に応じてまとめ、整理しています。ソーシャルメディアの活用方法やバナー広告の魅せ方など、実践的な企業サイトの作成にも。
極太フォントが印象的で、ダーク系ウェブサイトのサンプル例が欲しいときにも。
ウネウネと動く極細ラインのアニメーションが目を見張るサイト。
黄金比を用いたレイアウトは、スクロールを開始するとクルクルと回転しながら目的のコンテンツまで遷移する仕組み。
マウスを当てると動き出すロゴに、ふわりと文字テキストを表示するマイクロインタラクションに注目。
2017年の人気トレンド、カスタムイラストが特長的で、カーソル移動に応じたアニメーションに力を入れたサイト。
長崎の港町、佐世保で愛さて続ける銘菓を商品ラインアップごとに分かりやすいレイアウトで表現します。
余白スペースをたっぷりのグリッドを崩したレイアウトに、セリフとサンセリフ書体の高級感のあるフォントの組み合わせも◎。
アニメーションを駆使しながらも早い反応速度にすることで、ユーザーが待ち時間のストレスなくコンテンツを楽しむことができます。
マウスカーソルの動きに合わせて、巨大アップの顔が追従するように動くアニメーションが素敵。
ソウル・ミュージックの歴史をグリッドレイアウトを崩して並べ、まるで雑誌を読んでいるような感覚にさせてくれます。
文字テキストと写真イメージのみのシンプルなサイトですが、スクロールに応じたアニメーションを追加することで、オリジナル性をうまく演出しています。
あらゆる年齢層にも分かりやすいサイトで、レイアウトや配色を変更することでコンテンツの重要度をうまく伝えることができます。
商品の良さを伝えながらラインアップなども詳しく紹介したサイトで、各コンテンツも余白スペースで分かりやすくまとまっています。
女性向けウェブマガジンを想定したサイトで、水平方向へのスライダーを活用することで多くのコンテンツがユーザーの目に触れる工夫も。
はじめて訪れたユーザーにもインパクを与えるヒーローイメージに、コンテンツをすっきり分かりやすく整理するグリッドレイアウトの参考例として。
動画を使ったストーリーテリングによるコンテンツの見せ方を提案しており、ユーザーの操作性にもこだわりを持っています。
文字テキストと画像を重ねたり、グリッドを崩したレイアウト、落ち着きのある配色などデザイントレンドが満載。
マウスカーソルに合わせて立体的に動くパララックスデザイン要素が魅力的なサイトで、配色の参考にしたい素敵な色使いも特長。
ゲーム制作会社らしく遊びココロたっぷりのサイト作成を実現しています。
背景デザインにビデオ動画を採用することで、文字テキストのみのシンプルなコンテンツを補強するテクニック。
サイトを開くと画面が乱れたようなグリッチエフェクトが採用されており、社風をうまく表現した新しいカタチ。
マウスカーソルに反応して立体的に動く背景イメージが印象的で、未来を感じるインタラクティブなサイト。
動画とヒーローイメージを組み合わせたインタラクティブなヘッダーデザインで、スクロールに応じたスムーズでなめらかな動きが素敵。