この記事では、ウェブサイトのクリエイティブなアイデアが欲しいときに参考にしたい最新デザイン42個をまとめてご紹介します。
美しいタイポグラフィーや配色、シェイプの使い方などどれも魅力的なサイトばかりで、メッセージやコンセプトを伝えるユニークな方法が揃います。また、最新のデザイントレンドを取り入れるきっかけにも良いかもしれません。
最新スタイルはこれ！ウェブデザイン見本コレクション
スクロール追尾アニメーションを中心に、パステルカラーの配色やグリッドを崩したレイアウト、SVGアニメーションなどさまざまなトレンドを取り入れています。ランディングページ作成の参考にもどうぞ。
ページを左右に分割し、スライダーと新着コンテンツを並べるなどブログメディアのアイデアになりそうなレイアウト。配色やコントラストの使い方にも注目です。
2020年1月に東京で開催されるカンファレンスの公式ページで、トップページから各コンテンツまでイラストで描かれるなど、海外から見た日本といった印象。
島根県美郷町の魅力をかわいいイラストのストーリーテリングによって伝えるウェブサイト。スクロールでコンテンツが次々に進んでいきます。
疫病などの災いが入ってこないように、村境や道端に祀られている村を守る不思議な神様「道祖神」をカラフルなイラストで紹介するサイト。
CD付き英語絵本を販売しているサイトで、分かりやすく親しみやすいイラストを使ったデザインの他にも、絵本をカテゴリ別に探してソートできる機能なども充実。
余白スペースを活かしたグリッドの崩し方や縦書きレイアウト、スクロールに応じた画像表示など、日本語サイトでも活用しやすいアイデアが満載。
子どもたちが描いた絵が印象的で、スクロールに応じて文字テキストがブロックのようにアニメーション付きで並びます。
キーボードの矢印キーで車を運転しながら、制作実績などのコンテンツを巡るユニークすぎるポートフォリオサイト。
マウスかキーボードを使うことでオフロードを爆走するバギーをブラウザ上で運転できる体験型ウェブサイト。
ロンドンにあるバーのオフィシャルサイトは、遊び心にあふれるアニメーションやイラストを多用しており、見ていて飽きないつくりが特長。
農場から仕入れたオーガニック野菜を定期的にボックス箱で送るサブスクリプションサービス。ヘルシーでカラフルな配色にも注目。
まるで七色に輝く水面のようなアニメーションエフェクトが素敵なウェブサイトで、玉虫色のように絶えず変化する色合いはもちろん、高級感のあるセリフ書体などトレンドをうまく取り入れています。
ユラユラと水面の上に浮かぶ文字テキストは、ずっと見ていると酔ってしまいそうなほどリアルな動きが再現されています。
動画を利用したインパクトのあるヒーローセクションに、グラデーションやネオンエフェクト、アニメーションなど多彩な機能が搭載されたウェブサイト。
ダーク系のパララックス背景に、ネオンライトとグリッチエフェクトなどのサイバーパンクな雰囲気を演出した、ベルギーで行われたカンファレンスの公式サイト。
トウモロコシ成長の過程をダイナミックすぎる魅力的な3Dアートで演出するウェブサイト。
チャットやメールでのやり取りを実際に体験しながら、パワハラやモラハラになっていないか確認できるサイト。
マウスカーソルを当てた部分だけ、立体的で超リアルに膨張させるギミック付き。ピンクとグレーの控えめなパステル配色、デカ文字で表示されるサンセリフ書体など、今のトレンドを感じるウェブサイト。
ページ全体を使って縦横無尽にレイアウトがコンテンツに応じて変化し、パステルカラーを使ったエレガントな印象など、ブランドイメージにも合わせたパステルカラーが素敵。
天然由来成分だけでできたエッセンシャルオイルは、商品に合わせて背景のシェイプや色も変化します。また、グリッドラインをあえて見せている点にも注目です。
特にポートフォリオサイトではマップ上から制作実績を選択するなど、他では見られないユニークな仕掛けを施しています。
サムネイルにマウスホバーすることで、ユラユラと波のように揺れるエフェクトが魅力的。
シンプルなデザインながら、スクロールに応じて画像や文字テキストなどがふわりと表示されるアニメーションが目を引きます。
スクロールに応じて水平方向にコンテンツが移動したり、ページ全体にテキストアニメーションが配置されています。
画像が変化しながら表示されるアニメーションをふんだんに利用したポートフォリオサイト。制作実績ページとのシームレスなページ遷移を体感できます。
グリッドを無視したクリエイティブなレイアウトに、スクロールすると伸縮する画像ファイルなど飽きさせない工夫が随所に。
ロシア、モスクワにあるアパートメントの紹介ページ。美しい風景やアパートの外観など、写真をたくさん見せるときに参考にしたいレイアウト。
イタリア、ミラノで開催されたカンファレンス公式ページで、文字テキストやスクロールなどにアニメーションを取り入れるだけでなく、背景にも利用することでよりインタラクティブな印象に。
ページ全体を使ってレイアウト、画像やテキストを重ねて表示したり、おバーサイズの背景画像を利用したりと、旅行したくなる魅せ方は参考になりそうです。
これまでの制作実績をまとめたポートフォリオサイトで、スクロールすると流れるように表示される画像やテキストに、複数のグリッドレイアウトを組み合わせたページ構成。
Googleが販売予定のワイヤレスイヤホンのランディングページ。ページをスクロールするとイヤホンがケースに収納されるなど、スクロールに応じたアニメーションが多彩。
表示された単語にマウスホバーすると、詳細画像や文字テキストがバラバラと表示されるアニメーションで、視線をうまくコンテンツに誘導してくれます。若干、読み込み時間がかかってしまうかもしれません。
まるで古いブラウン管テレビを見ているような、画面の歪みをそのままウェブサイトに採用しています。
各コンテンツごとにさまざまな仕掛けやテクニックが披露されており、思わずページ下までスクロールしたくなってしまいます。
ページ端の単語にマウスを合わせると、平面的なデザインが突然サイコロのように立体的に動き出します。
クリエイティブな映像作品を全面に利用し、サンセリフとセリフ書体の組み合わせ方など細かい部分にもセンスが光るデザイン事務所の公式ページ。
いかがでしたでしょう。合わせて、2020年のウェブデザイントレンドも確認しておくと良いかもしれません。
