アイデアの宝庫、すごい最新Webデザイン40個まとめ

https://photoshopvip.net/149235

2023年のデザイントレンドを意識した作品から、時代に関係なく愛されるシンプルなスタイルまで、幅広いセレクションを取り揃えています。

レイアウトや配色などの参考にできるのはもちろん、魅力的な動きのアニメーション探しにもおすすめです。

PHOTOSHOP VIP
  1. Tote.design:カラフルなグラデーションで埋め尽くされた空間を移動しながら、制作実績を見つけ出す超ポップなポートフォリオサイト。ハンバーガーメニューは、まさにハンバーガーそのまま。
  2. チルするすゝめ:ノスタルジックで幻想的な色使いのイラストが特長のランディングページ。モバイルでの閲覧に最適化。想定ユーザーに刺さる、読みたくなるコンテンツも素敵なサイト。
  3. Bollina Avanti:「あなたのバスタイムを一新するシャワーヘッド」をコンセプトにした商品のランディングページでは、高級感のある美しさと、汚れを落とす実用性もうまく表現。
  4. 安倍元総理”襲撃の記憶”:事件当時の空間を3つの異なる視点で再現した、「75秒の記憶」。
  5. The Search for Work Happiness:「仕事のよろこび」を求めて、リーダーが自分自身と部下を幸せにし、精神的に健康に保つのに役立つ逸話をまとめた面白サイト。
  6. Fluffy Hugs:顔にモコモコとした犬や猫がくっついた、ユニークなイラストが揃うNFTアートギャラリー。
  7. クラスカハウス:サイト全体に広がるグラデーションの図形シェイプやイラスト、目に優しい配色など、親しみやすさを感じる不動産向けページ。
  8. Tigermilk:店内の様子を撮影した動画を、画面いっぱいに表示したヒーローデザインで、メニューを表示すると、思わずクリックしたくなるホバーアニメーションが実装され、さまざまな動物たちが隠れています。
  9. Sophie Studio:カーソルを合わせるたびにグリッチ風に切り替わるヒーローイメージや、ピクセルドットのページ遷移アニメーション、バツ印に展開するナビメニューなど、こだわり満載のポートフォリオサイト。
  10. Maison Egea:一瞬で目を奪うおしゃれなヒーロー画像が、高級感あふれる壁紙を販売するブランドイメージにも合ったショップサイト。
  11. Discovery Builders:マウススクロールに合わせたアニメーション付きのコンテンツ表示や遷移が魅力的なウェブサイト。グリッドを無視したような、ジグザグに画像を配置したり、迫ってくるような没入感を追加するなど、最後までユーザーを飽きさせません。
  12. Casa Mami:カリフォルニアにある民泊施設の紹介ページは、無駄を省いたミニマルスタイルで、オシャレ度満点。シンプルですが、伝えたい内容はきっちりまとめられており、情報量の少ないコンテンツでの制作の参考に。
  13. Bavet:ずっと見ていたくなるようなストーリー性あふれるコンテンツは、どれも遊び心たっぷりに表現されており、思わず訪れてみたくなるベルギーにあるスパゲティレストラン。
  14. うおみこども園:切り抜かれた子供たちがサイト全体で暴れまわる、個性たっぷりな鹿児島のこども園公式サイト。トップページのほか、園の生活ページなどどれも個性的で、思わずスクロールしたくなる、イラストを多用したコンテンツ構成の参考に。
  15. MetaMask:画面全体に表示されるマップを移動させながら、Web3の知識をついて知る学習型コンテンツ。気になるイラストをクリックすると、各詳細が表示されます。
  16. Wallpaper Magic:かわいい動物キャラクターイラストが印象的なサイトで、レトロな日本語フォントや配色ともうまくマッチしています。
  17. The Race Explorer Platinum:矢印キーで操作して最高タイムに挑戦する、中毒性たっぷりな車のミニゲーム。光るラインをたどると、スピードアップで加速します。
  18. Search Inc:考古学の世界的リーダー企業で、 海洋考古学、およびあらゆる文化遺産サービスに精通し、特殊な業務をこなす様子を動画をつかって、うまく伝えています。
  19. QINO:「気の新しい使い道を発明する地域共創プロジェクト」公式ウェブサイトで、メッセージから活動内容、商品の販売まで行います。
  20. Mimiguri:サイト全体を通して利用されているイラストが統一感だけでなく、コンテンツの理解度を深めるのにも大きく貢献。ちょうどよい余白スペースや文字の大きさなども、実践的に参考にしたいところ。
  21. Mikiya Kobayashi:フルスクリーンで写真が展開するポートフォリオは、余計なUIなどを一切省いたミニマルスタイルで、制作実績をメインに据えたデザインで、心地よいコンテンツ遷移アニメーションつき。
  22. Hotel Odisej:クロアチアにあるホテルの宿泊サイトで、落ち着いたおしゃれな配色に、高級感のあるセリフ書体を用いることで、統一感のあるデザインに仕上げています。
  23. Roboto Entertainment:香港を拠点としたゲームクリエイティブ制作会社のホームページで、オレンジ色をアクセントカラーに、デジタル感のある太字フォントが印象的。
  24. Haunted House Outlanders:マウススクロールに合わせて、3Dパーツの周りを移動しながら、コンテンツの内容を表示する、ダイナミックな見せ方。
  25. Escape Plan:万が一、火事になってしまった時の脱出ルートを確認しておくことの重要さを伝えるサイトで、5分以内に建物のなかからの避難を体験するゲームによるコンテンツ構成。
  26. Little Red Riding Hood:アーケードゲームさながらの高詳細な動きを表現したミニゲームを楽しむことができるサイトで、キャラクターの動きに合わせてコンテンツとストーリーが展開していきます。
  27. Sandy Shore:アスパラガスや玉ねぎなどの栽培を行うカナダの会社で、ビジョンや行っている内容を分かりやすいイラストで紹介、スクロールしたくなる仕掛けが随所に。スクロールに合わせて字幕風に字が表示されるエフェクト、いろいろなサイトで増えてます。
  28. The Cube House:ビルに向かって吸い込まれるような没入感のあるアニメーションで幕をあける、アムステルダムにある貸しオフィスの紹介ランディングページ。鮮やかでコントラスト比の高い、黄緑色(#E5F77D)のアクセントカラーも印象的。
  29. はるni:スマホアプリやPCゲームを中心としたゲーム開発を行う、鹿児島に拠点を構えるゲーム開発会社のウェブサイト。立体的な3Dイラストを回転させると、行っている事業や採用情報、お問い合わせなどを表示することができます。
  30. IKEA Wish Network:クリックでショールームの扉をくぐり、海外旅行などの豪華プレゼント企画の会場へと進む、体験型オンラインサイト。賞品をえらぶ際に利用する画像カルーセルには、浮遊感たっぷりな3Dイラストにアニメーションが追加され、マウスの動きが光源となり、インテリアを照らします。
  31. Senses Bang Olufsen:自分のお気に入りの楽曲データをもとに、複雑な動きで踊るミュージカルアバターを作成できるサイト。各アバターのスライダーによる遷移アニメーションが斬新。
  32. Dior Mother’s Day:2023年の母の日を記念した特設サイトでは、特別なギフトをタロットカード占いのように探すことができる、ゲーム要素を取り込んだショッピングサイトの好例サンプル。
  33. Sector 32:まるでビデオテープを再生しているようなノイズ感を画面全体で表現、さらにざらつきの強弱もカスタマイズできるなど、クリエイティブな個性がひかるポートフォリオサイト。
  34. plantica:花に関係するアート、ファッション、ライフスタイル、メディア…それぞれの領域を繋げながら、スペースデザイン、インスタレーションアート、テキスタイルデザイン、プロダクトデザイン、アートディレクションまで手がけています。
  35. 仙台で暮らす、湖山で働く。:太めフォントやイラスト、レトロっぽい配色カラーパレットなどトレンド要素を詰め込んだウェブサイトで、ポップでフレンドリーな雰囲気づくりにぴったり。
  36. Kuya Creative Studio:文字を主体としながら、ブランドのポップさを配色とフォントの配置や大きさをつかい、見事に表現したポートフォリオサイト。シンプルですが効果的に、かつ確実にユーザーの視線を誘導できるテクニック。
  37. Envy™:超リアルなりんごがマウススクロールに合わせて、くるくると回転したり、八つ切りや真っ二つになったりしながら、コンテンツが進行していく体験型ウェブサイト。
  38. Diamond Journey:きらりと輝く本物そっくりなダイヤモンドが、マウススクロールに合わせて形を変えながら、コンテンツ展開する、ストーリーテリング手法を用いたランディングページ。
  39. 第一交通:立体的なアイソメトリック・イラストをサイト全体に利用した、親しみやすいデザインが素敵なサイト。コンテンツの端など、「必要ではないけど、あったらうれしい」、そんなイラストが随所にちりばめられているので、探してみましょう。