トレンドが目まぐるしく変わるWebデザインでは、できるだけたくさんの優れたデザインのサイトを見て、触れることが重要で、次のアイデアにもつながります。
この記事では、Webデザインの創造力を高める最新良質サイト36個をまとめてご紹介します。
Webサイトの雰囲気や印象づくりはもちろん、配色や利用フォント、レイアウトなどの参考にもぴったりで、Webデザインに関わる全てのひとにオススメの内容。
前回のWebデザインまとめも一緒にどうぞ。
https://photoshopvip.net/129649
;
Webデザインの創造力を高める最新良質サイトまとめ
七色に輝くヒーローイメージの他に、スクロール追従アニメーションを効果的に活用した要素の表示テクニックや、シンプルでミニマルなグリッドレイアウトなどデザインの参考に。
自社牧場をもつ飛騨牛をメインに扱う肉屋のウェブサイト。ひと目見たら忘れないインパクトのあるビジュアルはもちろん、目玉の横綱セットは、千人前百九十七kgでお値段310万円など、面白い企画とコンテンツ力にも脱帽です。
美味しくて満足できるサラダを、一つひとつ手づくりで提供するカスタムサラダ専門のレストランで、美しいウェブデザインも必見。
気象データと連動した実食できる「サイバー和菓子」など、アートとテクノロジーを融合させた新しい体験を表現したサイト。白黒のみのモノクロデザインで、マウスをホバーすると画像が美しいカラーに。
トイレは日本が世界に誇る「おもてなし」文化の象徴。渋谷区の17カ所で、順次公共トイレが生まれ変わっていきます。
マウスの動きに合わせて水面のような歪みを加えたり、ユニークなページ遷移体験などクリエイティブで新しいユーザー体験を提供しているポートフォリオサイト。
ページをスクロールするときの画像の表示アニメーションにも注目したいランディングページ。
マウスの動きに合わせてスポーツカーを360度、自分の好きな角度で眺めたり、運転席に座ったりといったバーチャル3D体験ができるウェブサイト。
ウェブサイト全体がデザインのようなホットソースの販売サイト。ページをスクロールするあいだ、ホットソースがゆらゆらと視線の周りに追従します。購入ボタンにも細かいアニメーションとテクニックが。
お好みの観葉植物のサイズを選択すると、スライダー形式で植物とプランターを選び、パーソナライズされた植物をお手元までお届けする新サービス。金額もその場で確認でき便利です。
やさしく肌をマッサージするボディーバターの紹介ランディングページ。Love と Rub（こする）をかけた言葉遊びも素敵。
美しいグラデーションカラーのヒーローイメージや、リアル感たっぷりなドロップシャドウ、美しいパステルカラーの配色、シンプルなサンセリフ書体など真似しやすいポイントもたくさん。
手書きフォントとイラストを効果的に利用し、ブランドカラーに合ったポップな配色が独創性のあるウェブサイトに仕上がります。Blobなどのシェイプ要素の配置の参考にも。
使い終わったらそのまま堆肥となるコーヒーフィルターを紹介したランディングページ。スクロールに合わせてフィルターがくるくると回転しながら、コンテンツを表示していきます。
詰め替えタイプの香水など環境にも配慮した商品展開を行うブランドは、ナチュラルでオーガニックな雰囲気をパステルカラーを中心とした配色で見事に表現しています。
さまざまなエンターテイメントをオンライン上で実現するプラットフォームづくりといった、新型コロナウイルスの影響で生まれた新しいサービス体型。
まずは「海岸」または「山」コースを選ぶと、実際にクルマでテスト走行ができる体験型ウェブサイト。クルマの購入を検討しているユーザーを虜にするブランディング。
マルチカラーのグラデーションや3Dデザインなど奥行き感のある没入型のウェブサイト。
ドライバーではなく、クルマに乗るひとのことを第一に考えた自動運転する未来のモビリティサービス。
マウスをつかってドローンを操作し、ウェブページ上に設置されたコンテンツまで飛行する、ゲーム要素を取り入れたポートフォリオサイト。
画面全体に表示される動画をつかったヒーローイメージは、中心の円形ナビメニューを選ぶことで背景も一緒に切り替わります。アメリカのマイアミにあるホテルのウェブサイトで、高級感のある配色やフォントえらびも参考に。
フランスのポテトフライをつかった美味しそうなテイクアウトメニュー。カラフルでポップな配色や書体、イラストの使い方なども参考になりそうなレイアウト。
育て方にとことんこだわった新鮮な卵を生産、販売しているオランダはアムステルダムの企業向けサイト。オリジナルのかわいいイラストや、青をベースとした配色カラーパレット、手書きフォントもかわいいです。
コスメティックブランドの商品プロモーション用ランディングページで、スクロールすることで詳しく紹介が進むストーリーテリング手法
セリフ書体と筆記体の組み合わせや、高級感のある配色カラーパレットが印象的で、控えめなパララックスエフェクトを採用したサイト。
画面全体に広がるサムネイルをクリックすると、各プロジェクトの詳細を確認できるインタラクティブな制作実績ページ。
アスリート向けの義足の開発、販売を行っているデンマークの会社の公式ウェブサイト。
グリッドではなく、視線フローに合わせた画像要素の配置、目に優しい配色カラーパレットを利用したオーストラリアのプロ写真家のポートフォリオサイト。
イーロン・マスク氏の50歳の誕生日を祝うファンサイトで、ローンチボタンをクリックすると火星まで仮設トイレを打ち上げるユニークなプロジェクト。
プロダクト商品の紹介でストーリーテリング手法を取り入れるときに参考にしたいサンプルページ。ページのスクロールに合わせて縦横無尽に配置されたデザイン要素、たっぷりの余白スペースなど目からウロコのデザインテクニックが満載。
ウェブページが立体的に「折り曲がる」ユニークなエフェクトに、文字テキストにカーソルを合わせることでサムネイルを表示するなど、シンプルながら魅力的なエフェクトを随所につかったポートフォリオ。
ブランドのコンセプトや歴史などを伝えるときは、平行方向のスクロールを実装することでより自然にコンテンツを見せることができる実例サンプル。
イタリア、ミラノにあるデザイン制作会社の公式ページで、文字テキストを中心としたシンプルなミニマルレイアウト。
オレンジ色のロゴに合わせた、レトロでどこか懐かしいノスタルジックな配色が特長のウェブサイト。使用されている書体もレトロ。
Webデザインの創造力を高める最新良質サイト36個まとめはPhotoshopVIPで公開された投稿です。