Webサイトのアイデアに困ったときは、多くの優れた参考サイトを見ることが、次のデザインへとつながります。
なぜなら、レイアウトや配色、文字組みなど実践的なプロのテクニックを学びつつ、変化の早いトレンドも確認できるのが理由です。
この記事では、デザイナーが参考にしたい最新ウェブデザイン30個をまとめてご紹介します。
クライアントとの打ち合わせ時のサンプル見本や、「ああしたい、こうしたい」というデザインの共有にもおすすめです。
Webデザインに悩まない、心をつかむ最新サイトまとめ
満点の星空をテーマに、流れ星のようなSVGラインアニメーションが素敵な、美容系ウェブサイト。
2022年を代表する、90年代レトロブームの再来をテーマにしたウェブサイト。
パステルカラーの配色や、ピクセルドット風フォント、くるくるまわるホバーエフェクトなど、どれも参考になりそう。
CSSのみで「Gameboy」を完全再現、さらにウェブサイト全体をゲーム風に仕上げた、フリーランスデザイナーのポートフォリオサイト。
マウスでクリックした場所にキャラクターが移動、バスなどを避け、コンテンツをめぐります。
いたるところに面白い仕掛けが隠されています、探してみましょう。
無数のアニメーション動画が、流れるように下から上への移動する、ダイナミックなウェルカムページ。
作品以外は、できるだけ無駄のないシンプルなデザインで仕上げています。
なめらかな動きを加えた、永遠に続く上下スクロール。
ウェブサイト全体は、ブラウン管テレビで映し出したような、 じりりとしたGrainエフェクトも印象的。
エントランスから吸い込まれるようなページエフェクトに驚きながら、福岡にゆかりのあるアーティストの作品を、オンライン上で鑑賞できます。
Super Model Room -Ai’s Daily Life-【ザ・パークハウス】
まるで本当に来ているような、オンラインでのルームツアーを体験できるサイト。
マップ上を十字キーでキャラクターを操作しながら、コンテンツの情報を集める、インタラクティブな最新ウェブサイト。
遊園地をモチーフに、性教育について体験しながら学ぶ、フランス発のウェブサイト。
障害物をよけながら、水ボトルをできるだけ多くの獲得を目指すオンラインゲーム。
大都市ロサンゼルから数時間離れた山奥に、ぽつんと建てられたおしゃれな宿泊ホテル。
絶賛建設中で、サイト上でアップデートされていく模様。控えめな配色も素敵。
水平方向の無限スクロールテキストは、2022年を代表するトレンドテクニック。
鮮やかなヒーローイメージにより注目を集めることができ、ブランドのメッセージの伝えやすさも◎。
福井県にある、ピクニックを楽しむときのお供にぴったりな、美味しそうなベーグルとコーヒーのお店。
絶えず変化するグラデーション背景や、右上がりなサムネイルや文字など、エモい女性らしい雰囲気。
フルスクリーンで動画を映し出し、ページのスクロールに合わせて、背景のみ「ぼかし」が追加されます。手書きのナチュラルなフォントとも相性ばっちり。
DAOをオンライン上で手軽に作成できるツールで、現在は招待コード待ちの状態。
フォント選びや配色の他にも、カラフルなページ遷移などデザインシステムとしても注目したいウェブサイト。
黄色をメインカラーとしたポップなWebサイト。丸みのある太字フォントも、ブランドとうまくマッチした音楽メディア。
ミッドセンチュリーでモダンな配色に、水平方向に展開されるコンテンツ。
シンプルですが、必要な情報がわかりやすく、すべてまとまっている参考例として。
テキストカラーからマウスカーソルまで、ブランドカラーで「らしさ」をサイト全体で表現しています。
さまざまな野菜の切りかたを、動画付きの簡単ステップでまとめた辞典サイト。
永遠とつづく無限スクロールに、野菜イラストのふわりと舞うエフェクト、動きのあるマウスオーバーなど、触れて楽しむデザイン。
ページをスクロールすると、トランプがぱらぱらと舞いながらストーリーがはじまり、見事にコンテンツへと誘う、ストーリーテリング手法のお手本のようなサイト。
ビビッドな色使い、右に固定された垂直スクロールテキスト、フォントの組みあわせなどトレンド要素を取り入れた、クリエイティブスタジオの公式サイト。
カクテルのつくり方や歴史、限定商品、ギャラリーさらにはラップライブまで盛り沢山。
左下にあるエレベーターをつかって、3階建てのビルを歩き回ってみましょう。
いまだ見たことのない世界を体験する、サステナブルな旅行プランを提案してくれるサイト。
魅力的な写真をふんだんに利用することで、イメージがどんどん湧いてきます。
ふわりと浮かび上がる縦書きの明朝テキスト、配色、余白スペースなど、心が落ち着く神社ならではのサイト。
文字テキストの一部のみネオンエフェクトを加えることで、インパクトのあるヒーローデザインに。
とにかくページをスクロールしたくなる、水中への回転ワープなどの参考にしたい仕掛けばかり。
神秘的な雰囲気を演習する画像や配色、トライバル柄のイラストなど。
購入ショッピングサイトから、お試しカクテルレシピなども一緒に掲載しています。
紙芝居のように切り替わるコンテンツ、 超立体的なフォトエフェクトなど、アーティストの想いが詰まったインタビューサイト。
> サムネイル@ : Sustainable PRODUCTS｜日本製紙グループ
