この記事では、ホームページ制作のデザインアイデアが浮かばないときに便利な、最新ウェブデザイン47個をまとめてご紹介します。
特に注目を集めるヒーローデザインや、各種コンテンツの見せ方やボタンエフェクトなど、「突き抜けた」他と差のつくデザインが欲しいときに重宝するデザインを集めています。
ますます進化するウェブデザインの最先端を体感でき、レイアウトや配色えらび、フォントなどサイト制作の参考としてもオススメです。
Webデザイン最前線、流行先取りの注目ホームページ見本47選
ゴッホ美術館の公式サイトがリニューアル。ちなみにゴッホのコレクション油彩画200点以上、素描画約500点、書簡約750点は、すべて無料ダウンロードできます。
マウスをクリックしながら左右に動かすと、頭も360度回転する面白い仕掛け。ナビメニューよりモデル名を選択してみましょう。
ヴィンテージな手描きイラストとピンク色の配色が印象的だったサイトデザイン。
目を引くポップなカラーリング、書体えらび、イラストが揃った、ブランドイメージをうまく表現したデザイン。
「過去と未来の融合」をコンセプトにしたライフスタイルブランド、「HUMAN MADE」を手掛ける会社の公式サイト。
雑誌でもおなじみのブルータスのウェブメディア。思わず読みたくなる、クリックにも仕掛けが。
料理人のための和食専門ウェブマガジン。注目の料理人が、最新の技術から古い仕事までを大公開。食材や日本の酒のこと、うつわの知識、雑学。和食の「旬の話題」をお届け。
新しい暮らしをはじめることは、新しい楽しみをはじめること。それが、宮崎県西都市が考える移住のカタチです。
Leroy Merlin Inspirational Mag
各コンテンツを切り替えると、360度回転できる超リアルな3Dレンダリングを体験できます。
マウスの動きに合わせて、照明を当てることで、ビルでできる影を操ったり、マウスを左右に動かし、3Dモデリングを360度回転できます。コンテンツを読み進めたくなる、スクロールに合わせたアニメーションや、コンテンツの切り替えなど、参考にしたいポイント多数。
スニーカーのショッピングサイトで、大きく表示されたモデルやブランド名が目を引く、横スクロールを主体としたデザイン。
マップ上に表示されているポイントをクリックし、ゲームに参加し、ポイントを競いましょう。没入感の高いデザイン。
画面上を自由に動き回り、各ポイントをクリックすることで、商品を確認できるプロモーション。
マウスカーソルを上下に動かし、迫ってくる障害物を避けて高得点を狙うオンラインゲーム。高級ブランドGucciによるプロモーションサイト。
Mission Ionosphere Web Game Experience
矢印キーを左右に小刻みにずらし、障害物を避け、上へ上へと向かい点数を競うウェブゲーム。
画面上のディストピアな世界イラストから、SF映画に関連するものを探し、キーボードで入力し、ポイントを競うオンラインゲーム。
スクロールで浮き上がるようなアニメーションが注目を集めるデザインで、手描きの水彩イラストとうまくマッチしたエフェクトと言えるでしょう。
街乗りにも便利な電動アシスト自転車の公式ページ。各モデルのランディングページのつくりがとてもユニーク。
英国発の電動アシスト自転車で、地面に緑色のLEDライトを映し出し、安全性を高めたスタイル。運転しているドライバーにも認識しやすいメリットが。
個人向けフライトサービスで、自家用機を丸ごと貸し切るゴージャスさ。スクロールすると、ジェット機が飛んでいきます。
ページのスクロールに合わせて、コンテンツがふわりと表示される気持ちの良いアニメーションに、自由なグリッドレイアウトが目を引くデザイン。
シンプルなレイアウトですが、落書きのような手描きを加えることで、オリジナル度の高いデザインに。
立体的にレンダリングされたプロダクトを実際に体験できるサイト、まさに未来。
文字テキストが中心のミニマルなデザインですが、書体えらびから随所のライン線をつかった遊び心を詰め込んでいます。
超極細なセリフ書体と、オレンジ色の配色カラーパレットが高級感のある雰囲気に。
クリエイティブエージェンシーの公式サイトで、スクロールに応じて変化するロゴデザインが素敵。
遺伝子DNAのようにねじれたSFアニメーションが、スクロールに応じてくるくる回転するエフェクトは必見。
240年以上続くパリの宝石店の公式サイト。まるでお店を訪れている感覚にさせるナレーションと動画をヒーローイメージに使用しています。
回転寿司のようにフロアライトがくるくると回った動画をヒーローセクションに。
写真にフォーカスを集めるようなレイアウトに、高級感のあるセリフ書体の見出しタイトルが目を引くインテリアサイト。
高級感、信頼感のある緑色をメインカラーにした、ノート手帳の販売サイト。セリフ書体の見出しタイトルも美しいです。
シンプルに並んだ文字のリストにカーソルを合わせると、背景色が変更され、関連するサムネイルが表示されます。ノイズのテクスチャ感がミニマルで印象的でした。
ニッポニア
都心から約２時間。多摩川源流をさかのぼる山あいの村、山梨県小菅村。700人の村がひとつのホテルになった、ユニークなコンセプト。
壁パネルを取付けるだけで、ご自宅の壁がキャットウォークに。動画をつかったヒーローセクション、かわいいイラストが猫好きにはたまりません。
サステナブルな素材で作成した、スパチュラなどのキッチン用品の販売サイト。シンプルでわかりやすく、ブランドイメージにも合った、 目に優しい配色が特長。
キッズ向けコンテンツに合わせた色使いやイラスト、シェイプによる画像の切り抜きなど、デザインアイデアが欲しいときに。
かわいい3Dアイコンをつかったポップなデザイン。ヒーローデザインは、Spaceバーをクリックすると、各ゲームをプレイしているユーザー数が表示されます。
業種やジャンルに応じて、人気の高い音楽を分析した、Spotifyによる特別ページ。立体感のあるアイソメトリックなイラストアニメーションが素敵。右上メニューよりコンテンツに進むことができます。
サンセリフとセリフ書体の組み合わせ、控えめな配色カラーパレットを採用したコンテンツ、巨大な文字サイズなど、デザイントレンド満載。
アメリカ発のワッフル、パンケーキミックスのショッピングサイト。日本ではあまり見かけない、ポップで大胆な色使いや書体えらび。スクロールでコンテンツがアニメーション展開、最近このパターンが主流となりつつあるのでしょう。
プロカメラマンのポートフォリオサイトで、マウスを上下に動かすことで、コンテンツが水平スクロールで閲覧できます。
画面の奥から迫ってくるようなスライドエフェクトが印象的なダークデザインに、カスタムマウスポインターのオレンジが映えます。
ネオングリーンをアクセントカラーに、ややレトロデジタルな雰囲気を演出したサイトデザイン。
奈良県にある下北山村の暮らしと関わりを届けるウェブメディア。おしゃれなレイアウトで、わかりやすく情報がまとめられています。
前回のウェブデザインまとめも一緒にいかがでしょう。
サムネイル@ : Chérie Healey
