「もっと魅力的なサイトにしたいけど、何から始めたらいいんだろう？」
そんな悩みを抱えているひとへ。
今回は、国内外でいま注目されている最新のウェブデザイン30選をご紹介します。
リンクと一緒にサイトの見どころもピックアップしているので、直感的にデザインのポイントがつかめます。
インタラクティブな動きや美しい色使い、そして思わず見入ってしまうレイアウトが満載で、ページを見ているだけでも新しいインスピレーションが湧いてくるはずです。
自分のサイトをどんなふうに変えていけるか、楽しみながらアイデアを見つけてみましょう。
最新トレンドを活かしたレイアウトアイデア
WebGLやCSSアニメーションでリゾートの魅力を引き立て、心地よいインタラクションを提供したサイト。
日本語テキストの美しさを最大限に活かした、視認性を高めるウェブフォントや配色設計も魅力です。
ブラビス・インターナショナル｜トータルブランディングカンパニー
スクロールするたびに形を変える美しいブロブや、水面に落ちる水滴のような繊細なエフェクトが楽しめます。
ページ遷移時もブロブのダイナミックなアニメーションが魅力的で、自然とサイト全体を巡りたくなる体験が待っています。
茨城県北部6市町にまたがる、全長320km(予定)のロングトレイル。映像でトレイルを体験できるコーナーや、各エリアに伝わる物語を絵巻物風に見せるなど、ぜひ行きたいと思わせる工夫ばかり。
カラフルな色でカテゴリ分けされたブログメディアで、配色とかわいいイラストが光るメディアサイト。「キーワードから探す」の水平スクロールアニメーションを活用した、タグやユーザー表示も素敵。
FREERUN JOURNAL |くるーず薬局の採用ウェブメディア
レトロポップな配色が印象的、薬局が手がける新しい採用のカタチを発信するウェブメディア。フォント選びや太めのボーダー線が、レトロ感をさらにアップしたデザインに。
マウスを動かすとまるで「暖かさ」が漂うかのように、やさしい炎のようなエフェクトがリアルタイムで描かれます。また、女性モデルが光で包まれる演出も加えられ、製品の暖かさと柔らかさを視覚的に伝える工夫が満載。
スマホでの閲覧を想定した特化型レイアウトで、直感的に製品情報へアクセスできるように設計されています。デスクトップでは、背景を製品プロモーションに活用したテクニックを導入。
House of Dreamers – ÊTES-VOUS PRÊTS À RÊVER?
あらゆる年齢の夢見るひとに捧げる初の没入型展示会。18のチャプターを通じて、デザイン、色彩を駆使した魔法のような驚きに満ちた世界へと訪問者を誘います。
Amaterasu – Empower your mental health journey
メンタルヘルスのサポートに特化したAI技術を紹介するサイトで、滑らかなスクロール効果や要素のフェードインによって、心地よい穏やかな閲覧体験を実現。
Home – Monkey Talkie – Creative Video Agency | Milan
イタリア、ミランにある動画デザイン制作エージェンシー。動画の良さを最大限に伝える、没入感満点のスクロールエフェクトが実装されています。
Valentin Cheval | UX/UI & Brand Design Leader
金融業界向けのUX/UIとブランドデザインを得意としたデザイナーのポートフォリオ。いつまでも続く無限スクロールに、どのページも閲覧したくなるページ遷移エフェクトも参考に。
Home – Hatom – The First Liquidity Protocol on MultiversX
ユーザーが暗号資産を効率的に貸し借りやステーキングできるプラットフォーム。抜群の映像力は圧倒されるばかりで、各セクションでマウスを長押しすると…。
HEAVN One – The world’s brightest desk luminaire
「ストーリーテリング」手法ってなんだろう？そんなときに参考にしたいサイトのひとつ。スクロールに応じて製品の特長をずばり紹介した3Dアニメーションは、Appleを連想させるスタイリッシュなつくりに。
Base Habitation – Let the wild in. Find your Base.
プレハブ式パネル組み立てできる、サステナブルな家を販売するフランスの会社。まるでミニチュアのようなデザインのいせ方がかわいかったのでメモとして。
Nod Coding Bootcamp – Learn Python, SQL, Machine Learning
汎用性の高いプログラミング言語であるPhthonの実践的なスキルを10週間で学ぶオンラインコース。分かりやすいかわいいイラスト、ポップな配色カラーパレットがやる気をあと押ししてくれます。
WePresent | Unexpected stories about creativity
スマホサイズのナビメニューをそのまま実装した、あまり見かけないナビメニュースタイルが印象的だったサイト。ハンバーガーメニューの開閉も、余白をうまく活用したデザインに。
Colors
革新的な建築とサステナブルなデザインスタジオの魅力を、洗練されたデザインで伝えます。シンプルなUIに、WebGLヤCSSアニメーションなど、スクロールがしたくなる工夫が随所に。
Noomo Beat — Personalized AI Audiovisual Experience.
好きな音楽ジャンルや気分、テンポ、色を選んで少し待つと、曲に合わせて動く3Dジャケットが完成します。マウスで自由にアングルを変えながら楽しんでみてください。
X-Bionic TerraSkin X00/C – Trail running sock and shoe system
トレイルランニング用に開発されたシューズのLPページ。スクロールに応じて動画が再生されたり、靴の構造をインタラクティブな図解で表現するなど、購買欲を高めてくれるデザイン。
スクロールを進めると、現代からブランドが誕生した過去へとタイムスリップし、会社の歴史や新商品のすばらしさを伝えるランディングページ。製品ページのスクロールエフェクトは一見の価値ありです。
Béisbol en Salt Lake – October 5th & 6th Smith’s Ballpark
カラフルなビジュアルと直感的なナビゲーションで、メキシコのプロ野球開幕戦のイベント情報を魅力的に伝えるサイト。
インタラクティブなエフェクトとセクションごとの柔軟なデザインにより、視覚的な楽しさと情報がスムーズに入ってくる構成。
、高級感とカラフルなスポーティな腕時計の魅力を、美しいディテールと精巧なインタラクションで際立たせています。
特に、スクロールに合わせてコンテンツが水平方向に移動し、時計の針がクルクルと回るアニメーションが印象的で、細部までこだわりが感じられる職人技。
Netlify Celebrates 5 Million Developers | 3D Game
十字キーを操作しながらボールを転がし、ゴールを目指しながら、500万人ユーザーを達成するまでの軌跡をたどることができるミニゲーム形式のコンテンツ。
ChainGPT Labs | Fund, Incubate and Accelerate Web3 Projects
ロックチェーン関連のAI技術を紹介する先進的な構成がポイント。WebGLや3Dアニメーションを活用して、立体的で動きのあるインターフェースを実現。直感的で没入感のある体験が楽しめます。
前回のまとめがこちら。そろそろ、年末の総まとめの季節ですね。
デザインで特別な体験を
今回の30選で見つけたアイデアやテクニックを、今後のプロジェクトにぜひ活かしてみましょう。
サイトを訪れた瞬間からワクワクするような、特別な体験をきっと届けられるでしょう。
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
