「Webサイトをもっと多くのひとに知ってほしい」
「みんなが注目する魅力的なサイトを作りたい」
ウェブサイトやブログ、ポートフォリオサイトなどを運営するとき、きっと誰もが一度は悩んだことがあるはず。
当ブログでは10年以上にわたって、その当時の最新ウェブデザインを定期的にまとめてきました。
これまで紹介したサイト数で言えば、2000サイト以上。
ちょっとした言葉や見せ方、色の違いで、サイトのアクセス数が何倍にも変わるなんてことも。
この記事では、売れるWebデザインをどのように生み出せば良いのか？配色やレイアウトなどのアイデアを手に入れる、世界で話題の最新Webデザインをご紹介します。
売れるWebサイトのヒミツを知ろう、最新デザイン一覧【39サイト】
物語に引き込まれるような没入感たっぷりのイントロにはじまり、サステナビリティを連想させるやさしいイラスト、そして二度見してしまう、文字から芽が生えてくるアニメーションなど、どこを見ても飽きさせないコンテンツ構成。
手描きスケッチしているようなページの読み込みアニメーションにはじまり、日本語で書かれた直筆テキストの動きにも注目。思わず目が行ってしまうため、効果的に目的の要素を引き立てることができます。
RM 07-01 – A NEVER-ENDING SUMMER COLLECTION BY RICHARD MILLE
理想的な夏のバケーションの過ごし方を提案するモバイル向けツールアプリ。デスクトップでは太陽は沈んだ朝焼けですが、画面サイズを変更・リサイズすると、少しずつ太陽が上へと昇り、ツールが利用できるのも素敵。
シンプルなランディングページですが、魅力的でインパクトのある画像をヒーローセクションに利用したことで、ブランドの統一感と魅力がぐっと増したミニマルスタイル。
30年前にボスニアで起こった戦争の本当の真実を語る、ストーリーテリング手法をつかった体験型で新しいコンテンツの見せ方。
ヒーローイメージは静止画と思ったら、ページをスクロールするとコンテナが立体的に浮かび上がります。
滑らかで心地よいアニメーションも、ユーザーにスクロールを促すのにとても効果的。
水面の揺れをリアルに表現した没入感の高い体験型サイト。神秘的な効果音やクリック音を駆使し、3D空間を動き回ります。
ロゴやアイコン、パッケージ、ステッカー、ＳＮＳ投稿デザインなどあらゆるデザイン媒体をプロのデザイナーが毎月使い放題でデザインしてくれる新しいスタイルのサブスクプラン。
Justine Soulié – Motion Designer & Illustrator based in Paris
くるくると無限に回転しながら、マウスにも反応するアニメーションがぐっとハートを掴むトップページ。
実績ページでは、見出しタイトルにまるで生きているようなアニメーションを追加することで、シンプルながらオリジナル度、注目度もばっちり。
10・20代の女性をターゲットに、美肌と酸素のヒミツを漫画や動画コンテンツを通じて楽しみながら学ぶことができる体験型サイト。
かわいいイラストがページ全体で見つかるランディングページ。あなたのペットがティッシュ箱に印刷される特別キャンペーン実施中。
動くイラストがとにかくかわいい、介護・医療に特化した人材派遣のコーポレーションサイト。
THE BUTTER CAKE｜ザ・バターケーキ スペシャルサイト
高級感を感じる明朝体フォントと紺色のメインカラーの組み合わせが素敵な菓子のランディングページ。
列車だけものすごいスピードで再生される動画がユニークなウェブサイト。鮮やかな青色をメインカラーに、黄緑色のホバーエフェクトが目を引きます。
和と北欧をお手本にした機能美の戸建て・注文住宅を提供している会社のコーポレーションサイト。フルスクリーンで動画を表示することで、制作実績を分かりやすく伝えることが可能。ふわりと画像が表示されるエフェクトも素敵。
iPhone 15 ProとiPhone 15 Pro Max
スクロールに合わせてポップアップで表示されるボタンエフェクトが印象的だった新型iPhoneのランディングページ。
じつはそのボタン効果、CSSのみで再現可能。そのまま利用できるHTMLコードスニペットも公開中です。
2023秋冬限定ヘアアイロン | SALONIA(サロニア)公式サイト
ヘッダー以外はモバイル向けのレイアウトサイズでコンテンツを並べ、モバイルファーストに振り切りながら、デスクトップでは背景にアニメーションを追加するスタイルが新鮮。特に国内サイトで増えています。
United Sodas – Premium Soda Reimagined
スクロールに合わせてカラフルなアルミ缶がくるくる回転しながら展開する、ブランでぃんんぐにピッタリなアイデア。ちょっとずるい、無料モックアップを使えば、再現できそう。
グリッドなど一切関係なく、好きなアイテムを横に並べていくという、新しいブランディングの見せ方参考として。太字フォントと画像の組み合わせや、絵文字をつかったホバー効果など、いろいろクリックしてみたくなるハンバーガーシップの公式サイト。
Creative Advertising & Digital Company London | Fold7
最低限の控えめなスクロールアニメーションが心地よいサイトで、ページの最後までストレスなくコンテンツに注目させます。
高級シャンパンの公式特設サイトは、できるだけ画像や動画に注目を集めた、自由なレイアウトが特長。余白スペースたっぷりでスタイリッシュな雰囲気に。
ページのスクロールに合わせたアニメーションや、おしゃれで親近感のわくポップな配色、極太サンセリフとエレガントなセリフ書体の組み合わせも参考にしたいところ。
水平方向へのコンテンツ展開するにつれて、チャプターごとにタブ状に左右にまとめることでナビメニューの役割も果たしためずらしいレイアウト。
控えめでオシャレな配色とフォント選びも参考に。
サンディエゴにあるクリエイティブエージェンシーがほぼ毎週、社内でお気に入りのプレイリストを公開しているユニークなサイト。
ページ遷移のアニメーションやクリック音などのギミックは特に秀悦。
オーストラリアにある写真家やスタイリスト、ヘアスタイリスト、メイクアップアーティストなどを代表するマネージメント会社の公式サイト。
すべてのページのフッター部分に配置された巨大な会社名がインパクト大。
ブランド名で動画をマスクしたヒーローイメージに、もこもことした極太フォントがフレンドリーで親近感を与えます。Bento UIとスクロールアニメーションの組み合わせも、最近よく見かける手法のひとつ。
Gapsy Creative Design Studio | UI UX Design Agency
まるでスタジオの中を歩きまわっているような、立体的な空間のなかにコンテンツを表示する演出が面白いコーポレイトサイト。
ヒーローセクションにフルスクリーン動画を利用し、サイト全体の没入感を演出したデザイン。
シンプルな作りで、思わず下までスクロールしたくなる心地よいアニメーションが実装されています。
KIKK Festival 2023 – Edition 12 – Kikk Festival 2023
ベルギーで開催予定の音楽イベント向けランディングページ。一度見たら忘れない独特のアニメーションをヘッダーに、むらさき色と黄色のハッキリとしたコントラスで、文字の読みやすさをうまく確保できます。
Storia | Original Short Stories
ツールの特長を伝えるために、スマートフォンを固定表示し、その画面上にコンテンツを次々に展開。思わず引き込まれてしまうユーザー体験を実感。
型にとらわれない柔軟な見せ方は、参考にしてみてはいかがでしょう。
すっきりとした見た目に、要素ごとにスクロール速度の異なるパララックス効果など、自然とユーザーの視線を誘導する工夫がされたポートフォリオサイト。
NiceAtNoon Boutique Design Studio
弁当箱をモチーフにしたWebスタイル「Bento UI」の参考サイトに。各コンテンツの画像に丸みをもたせ、太字のサンセリフとのポップな組み合わせに。
スクロールに合わせてコンテンツ遷移や、わずかな動きでユーザーを魅了するマイクロインタラクションが随所に散りばめられた、モノクロトーンのミニマルスタイル。
Noomo Agency – Interactive design agency.
スクロールすると、いきなり逆方向にコンテンツが展開され、3Dイラストを活用したナビメニューなど他にはないエフェクトを使いながら、すらすらとスクロールしたくなるページ全体のフローも重要。
ぐにゃりと曲がった図形シェイプをコントラストがはっきりとした黄色にしたことで、全体のメインアクセントになっています。フッターにはアニメーション付きで表示。
デンマークのコペンハーゲンにあるデザイン事務所の公式サイトで、鮮やかなオレンジ色をメインカラーに、ページ遷移アニメーションやぼかし付ナビメニュー、太字のサンセリフ書体なども素敵。
HAPPY OUTSIDE BEAMS | NEW BEPPU CITY GUIDE
ビームススタッフと行く別府ガイドは、どれも行きたくなる地元スポットをクリックすると、ぼわっと湯気を出しながら詳細が表示されるなど、旅行向けサイトづくりの参考に。
ページのスクロールで展開するロボットの儚いものがたり。デスクトップ環境での閲覧がおすすめ。
進化し続けるWebデザイン
さまざまなデザインのトレンドをまるっとまとめているので、時間が足りないという人にもおすすめの記事。
参照記事 : 【2023年版】いろんなデザイントレンドを調査、まとめてみた。
およそ2か月ぶりとなった今回ですが、前回のまとめがこちら。
参照記事 : アイデアの宝庫、すごい最新Webデザイン40個まとめ
参照記事 : 要注目の最新Webデザイン見本サイト34選まとめ
Adobe Stockを無料でお試し
画像、イラスト、ミュージックなど、体験期間中に10点無料で入手できます。
