この記事では、Webデザイン制作の参考にしたい最新ウェブサイト50個をセレクトしています。
さまざまなサイトを実際に見ることで、配色やレイアウト、フォント選びなど、自分のデザインの引き出しを増やしてみましょう。
シンプルで美しいWebサイトから、ハイレベルなコーディングが必要なものまで制作のモチベーションをアップさせるデザインが揃います。
Webデザイン制作の参考にしたい最新ウェブサイトまとめ
生誕260年を記念して今年の夏開催される北斎展の公式ページ。北斎漫画、冨嶽三十六景などもコンプリートでの展示だそう。
妻のカサカサした手を治したい、という想いからはじまった化粧品会社ポーラの企業理念を、インタラクティブなアニメーションとともに表現しています。
プログラマーに向けたデザインが話題となったカロリーメイトのプロモーションページ。コンテンツの表示アニメーションには特に注目です。
任天堂の創業家・山内家一族によるゲーム世界をそのまま表現したようなサイト。ボクセルアートによるアニメーションが随所に。左側のアイコンで、通常レイアウトへの切り替えが可能です。
矢印キーでスケートボードを操り、障害物をジャンプで避けながらポイントを稼ぐオンラインゲーム。ニューヨークのリアルな街の風景が描かれています。
12日間に渡って出題されるミッションをクリアし、スターポイントを獲得するオンラインゲーム感覚のサイト。壁紙の無料ダウンロードも。
バーチャルオンライン音楽フェスティバルの公式サイト、残念ながら南アメリカからのみ視聴可能となっていますが、圧倒的な3Dライオンは迫力ありすぎ。
アフリカにあるサファリロッジの公式サイト。動画と画像を効果的に活用することで、壮大な自然を感じることができるつくりに。
毎日のライフスタイルを見つめ直すきっかけをつくるコンテンツが特長のオンラインメディア。美しい動画や写真の独特の世界観を楽しみましょう。
紅茶の各フレーバーを紹介するプロダクトページでは、画面の切り替えに合わせて茶葉がバラバラと画面上に撒き散らせれる面白いエフェクトも。
コンテンツの切り替わりに合わせてカラフルな背景デザインがポップな雰囲気のサイト。パッケージデザインともマッチしたフレッシュさが特長。
音楽情報メディアとして新しくリニューアルされた老舗音楽サイト。音楽好きにはたまらない濃い内容を紹介しています。目を引くアニメーションエフェクト。
世界各地のストリートアート、グラフィックアートについてまとめためずらしいブログメディア。アートストアでの販売も行っており、違和感のない商品の魅せ方は参考になりそう。
東京にも出店しているニュージランド発のコーヒーロースター。
自然のリズムと共に生活する人々のための建物をコンセプトにした、イギリスの建築事務所。
ブランドん世界観をチルアウトな音楽と幻想的な動画や画像で伝える新しいかたちの没入型ウェブサイト。
音楽グループの新アルバム発表に合わせて公開されたプロモーションページ。矢印キーで入るお店を決めると、動画や曲、コンセプトなどをそれぞれ確認できます。
アメリカにあるミシガン湖についてわかりやすく知ることができる特設ページ。
まるで画面上に泡が流れ出たような、透明感のあるアニメーションエフェクトが特長のウェブサイト。
新型コロナウイルスで変化したライフスタイルを切り取った、アート性の高い写真を集めたオンラインミュージアム。
スクロールに合わせて1本のラインがページ下まで導くユニークな仕掛け。
定期的にアップされる動画エピソードとウェブサイトを連携し、パンについてあらゆる角度で楽しむことができるドキュメンタリー。
太字の見出しタイトルが目を引くユニークなレイアウト。随所にアニメーションを追加したり、画像をレイヤー状に重ねるなど、レイアウトに悩んだときに参考にしたいサイト。
「会いたい人ができると、そこは、帰りたいまちになる。」をコンセプトに尾道の魅力を伝えるポータルサイト。技術面では、CSS Gridを活用したレスポンシブ対応テクニックや、美しい明朝体フォントの縦書き、なめらかなアニメーション効果など参考にしたい点も多数。
まるで雑誌を開いているような感覚にさせるレイアウトが素敵なメディアサイト。記事ごとに文字や背景色が異なるなど、遊び心も満載。
ステイホームで育てるひとも増えた観葉植物について、かわいい手書きイラストで紹介しているサイト。植物にカーソルを合わせると水をあげることができる工夫も。
スタジオを3D空間で再現したゲーム要素を取り入れた、インタラクティブな没入型サイトで、スニーカーができるまでを詳しく解説したストーリーテリングが素敵。
アイスランドの氷河を上空1,000メートルから撮影した様子を紹介するプロジェクトサイト。
植物由来の成分で作られた、信じられないほど柔らかい代替肉の公式サイト。
ヨーロッパを拠点とした建築オフィスの公式ページで、リキッド状の流れるようなアニメーションエフェクトが、高級感のあるブランディングにもうまくマッチしています。余白スペースのとり方も参考に。
コンテンツが切り替わり時に、消しゴムで消したり、ゆらゆらと水面のように揺れるなど、オーガニックな見た目を演出しています。ピンク色を中心とした落ち着いた配色も素敵。
マウスカーソルに合わせて、まるでプレゼンテーションを見ているような縦横無尽なレイアウト変更を楽しむことができます。
サイトを開くと、飛び出す絵本のようにストーリーが展開する体験型ウェブサイト。
グリッドを無視した自由なレイアウトに配置されたポートフォリオサイト。たくさんの画像をページ移動に関係なくシームレスに閲覧できる工夫が随所に。
ページのスクロールに合わせて流れるように文字テキストや画像が表示されるアニメーションが特長。高級感のあるフォント選びも参考に。
アメリカでワイン製造の盛んなナパバレーについて紹介したプロモーションページ。高級感のある配色やフォント選びにも注目。
高級感と信頼感のあるセリフ書体を利用し、落ち着いた色合いでコンテンツを整理するなど、シンプルで親しみやすいつくりに。
ポーランドの著名な作曲家、クシシュトフ・ペンデレツキと出会うことができるバーチャル空間。画面上に散らばった無数のアイコンをクリックすると詳細ページへと移動します。
Playa Grande Golf & Ocean Club
ドミニカ共和国にある高級リゾードホテルの公式サイトで、スクロールに応じたなめらかなコンテンツ表示、美しいセリフ書体などラグジュアリーな雰囲気を真似したいときに。
水に溶ける紙ペーパー式の新しいボディーソープを提案する商品紹介向けランディングページ。持ち運びやすく、デザインもおしゃれ。
一台のスポーツカーを中心に、会社の概要をさまざまな角度からアニメーションイラストと共に紹介するインタラクティブなストーリーテリング。マウスカーソルに合わせてストーリーが展開しているような感覚に。
スタイリッシュな住宅を圧倒的なビジュアルで紹介するウェブサイト。思わず住んでみたいと思わせる動画や内装インテリアの魅せ方などもゴージャス。
イタリアにあるデザイン事務所の公式サイト。スムーズなアニメーションをつかったビジュアルアニメーションを得意としています。
サイト全体に3D要素を組み合わせることで、奥行き感のあるミニマルデザインに。さらにアニメーションを加えることで、ふわりとした特有の浮遊感を演出しています。
マウスカーソルに合わせて、画像が水面のようにユラユラと動く、シンプルですが効果的なアニメーション。
前回まとめからおよそ3ヶ月ぶりとなった今回ですが、毎回ワクワクする新しいサイトが登場しています。
サムネイル@ : オオサカマニア