Advertisement

The_Beach_Club_SANDALWOOD

 

「ウェブデザインが浮かばないから、なにか新しいアイデアが欲しい」

「今後の案件で利用できる、最新Webデザイン事情を知りたい」

「ウェブサイト、なにから作ればいいかわからない」

 

そんなときに目を通したい、国内外の最新おすすめWebデザイン37選をご紹介します。

 

他のウェブサイトを見ることで、デザインのアイデアやインスピレーションにもつながります。

 

「こんな感じのデザイン、考えています」といった具合で、実際のページを開きながらの打ち合わせにもオススメ。

 

レイアウトや配色、フォント選びだけでなく、コンセプトをうまく伝えるウェブデザインを意識した制作に活かしてみましょう。

 

 

ウェブデザインの潮流をよむ、最新おすすめサイトまとめ

 

Kubota Future Cube

スタートボタンを押した途端に、キューブの中には未来の姿がひろがります。コンテンツの切り替えにもキューブをうまく活用した、没入感たっぷりのイラストに引き込まれるでしょう。

KUBOTA_FUTURE_CUBE

 

 

 

BelArosa Chalet

まさに未来の紙芝居を見ているような、スクロールするごとにイラストが立体的に切り替わっていくアニメーションは必見。

BelArosa_Chalet___Startseite

 

 

 

Freak Mag

カラフルに色分けされたコンテンツが、美しいグラデーションに混ざり合い、自由なレイアウトはまるで雑誌をぺらぺらめくっているような感覚に。

FREAK_MAGのカバー画像

 

 

 

重力から守るボディケアかるた | ワコール

コンテンツがモバイル幅で作成されており、ロゴやナビメニュー、商品名などがコンテンツ外に固定表示されています。モバイル幅で作成されたWebサイトの考察で、詳しい解説や使いどころ、他のサンプル例も一緒に紹介されています。

wacoal-重力から守るボディケアかるたとは? 

 

 

 

Anna Jóna

カフェとバー、そして映画をみるための小さなシネマルームを完備したユニークなお店。アイスランドに2022年、秋オープン。ピンク色のかわいい配色やフォント使い、店内の写真なども含めて分かりやすくまとめられています。

anna-jona

 

 

 

Hematogenix

圧倒的な3Dアニメーションで魅せる、シンプルながらダイナミックなウェブサイト。動きに合わせて繊細なサウンド効果も追加し、ユーザーの没入感をより高めてくれます。

Hematogenix_—_Bringing_Precision_Medicine_to_Everyoneのカバー画像

 

 

 

Hisami Kurita

いたるところに仕掛けのあるポートフォリオサイトで、いろいろなところをクリックしたくなるクリエイティブなデザインアイデアは、海外でも話題に。

Hisami_Kurita_Portfolio

 

 

 

The Circular Cities of Barometer

25の都市がどの程度、循環型経済に変化しているかを測定。かなり複雑なデータが大量にありますが、分かりやすく、はっきりとユーザーフレンドリーな方法で整理されています。新しいコンテンツの見せ方のひとつと言えるでしょう。

circular-cities-barometer

 

 

 

岡山芸術交流

岡山市で3年ごとに開催される国際現代美術展で、岡山城、岡山後楽園周辺エリアの歴史文化施設10か所を会場に開催されます。

OKAYAMA_ART_SUMMIT_2022

 

 

 

Digital Cover

マウススクロールに合わせて、画像やテキストなどのコンテンツが迫ってくるような立体的なアニメーション演出が、没入感を高めてくれます。

Digital_Creative_Agency_in_Malta__Paris___Lyon___Digital_Cover

 

 

 

Stryds

超巨大な文字サイズ、グラデーション付テキスト、ダーク系の背景にも映えるカラーリングなどシンプルですが、効果的なデザインテクニック。

stryds-interior-1

 

 

 

Nishiyama Ramen

西山製麺のヨーロッパ向けホームページ。のれんのようなロゴをつかったローディング画面に、思わずスクロールしたくなるようなコンテンツの配置や順番なども参考。海外展開を検討するときに。

SAPPORO_NISHIYAMA_EUROPE_GmbH

 

 

 

I Want It All – MSI

平面方向だけでなく、縦方向にも移動できる立体型のブロック消しゲーム。高得点を狙って、ゲーミングモニターやデスクトップPCが当たるチャンスも。

MSI-I_want_it_all-

 

 

 

Clutch Series | MSI

温度に注意しながらマウスまたは指でルートを進もう。究極の正確さを試す、灼熱サーキットゲーム。マウスやキーボードなどパソコン周辺機器のランディングページ。ゲームのレベルが高い。

Gear_Up__Game_ON | Clutch Seriesのカバー画像

 

 

 

KIKK Festival 2022 – Edition 11

サイト全体をユニークでカラフルなイラストで表現し、思わず目が行くアニメーションも参考にしたい、音楽イベント向けランディングページ。

KIKK_Festival_2022_-_Edition_11_-_Kikk_Festival_2022

 

 

 

BiSH is Over!

メンバーの集合写真がゆらゆらと消える読み込みローディングで目を奪われ、Dive Into DiscボタンでCDの波にのまれる体験つき。楽曲をクリックすると、YouTubeで再生できるなど、機能面も際立ちます。

BiSH_iS_OVER

 

 

 

Pop in the City

カラフルでポップな3Dイラストを散りばめ、子供でも楽しめるデザインレイアウトの参考として。

Pop_In_The_City_-_A_Bold___Ballsy_Experience

 

 

 

Adidas Ozworld

マウスを上下にドラッグに合わせて、画面の中央にある球体がぐにゃりと曲がる体験型サイト。自分だけのアバター作成など、パーソナライズ化が重要なファクターに。

adidas_Ozworldのカバー画像

 

 

 

Goals

フッターボールの新しい未来をコンセプトにしたオンラインゲームで、圧倒的なリアルさを追求したアニメーションは圧巻です。

GOALSのカバー画像

 

 

 

Pyramids of Meroe

エジプトに接するスーダンのナイル渓谷には、むかし200を超えるピラミッドがある都市、古都メロエがありました。オンラインで歴史を知ることができ、ピラミッドを実際に3Dビジュアル化、マウスで移動、触れることができるようにした画期的なアイデア。最後はピラミッドの内部まで探検です。

pyramids-of-meroe

 

 

 

Das Salz

おしゃれでレトロなフォントと配色えらびが光る、黄色をアクセントカラーに利用したオーストリアはザルツブルグにある宿泊ホテル。

daz-salzのカバー画像

 

 

 

Metagolden

なにもない荒野に、ゆらゆらと揺れながら架かる七色の虹の帯が、とにかくインパクト大。

Jewelry___fashion___art_paired_with_digital_NFT_assets_–_Metagolden

 

 

 

ORE Jewelry

有名音楽PVなどにも登場するジュエリー会社のランディングページ。高級感のある書体えらびや、次々とコンテンツが重なるようなレイアウトはもちろん、水平方向に並べられた宝石をスクロールすると、キラリと光るギミックも素敵。

ore-jewelrys

 

 

 

Artemis

ダイヤモンドの0.0001%しか存在しないと言われる、「ピンクダイヤモンド」の歴史をめぐるウェブサイト。石をぶつけるようなクリック音もナイス。

Artemis_-_Argyle_Alora_Collection

 

 

 

Camille Mormal

なめらかすぎるカルーセルが中毒性たっぷりなポートフォリオサイト、写真を多く利用するコンテンツ向けレイアウトとして。

Camille_Mormal_—_Independent_Designer___Art_Director

 

 

 

Tilton

100%リサイクルできるプレート皿を紹介するランディングページ。各コンテンツが紙芝居のように重なるところも素敵。

Emballages_de_plastique_thermoformé___Tiltonのカバー画像

 

 

 

Sakar Brewing

130年位以上の長い歴史をもつ日本酒の、海外での販売を想定した美しいデザインが素敵なサイト。なめらかなパララックス効果にも注目。

Sakari_—_Brewing_joy_since_1889のカバー画像

 

 

 

Burger Toulouse

フランスにあるハンバーガーレストランのホームページ。商品ページは、まるでブラウン管テレビに映っているようなザラザラ感まで表現されています。

Burger_Toulouse__Les_Mecs_au_Camion

 

 

 

Rita八女福島

「暮らすように泊まる宿」をコンセプトにした、福岡県にある宿泊施設のランディングページ。文字テキストや写真のレイアウト、余白スペースの使いかたなど、コンセプトに合わせた上質な体験をかんじます。

rita八女福島のカバー画像

 

 

 

The Perennial

まるでプレゼン資料をめくるような感覚で、コンテンツを読み進めることができる、さまざまな仕掛けが満載。本物そっくりに揺れる影や、ページ全体に無造作に配置されているオブジェクトも超リアル。

the-perennial

 

 

 

Studio Ping Pong

studio-pingpong

 

 

 

Appart Agency

次から次へと展開するコンテンツの中で、必要なデザイン要素に視線を誘導し、サービス内容も知ることができる企業サイトの好例サンプル。

appart-agency

 

 

 

Make New Panasonic

ブランドロゴの一部を、各ページへの遷移アニメーションとして活用した例。世界の多様なアーティスト25名が、「Make New」をテーマに制作したした映像も◎。

make-new-panasonic

 

 

 

Fimmigrm

卓越したヒットソングのトラックを分析・学習させた、「AIトラックジェネレーター」。AIが自動で作曲するから、難しい操作は必要なし。ハイクオリティなオリジナル曲が、メロディの類似なく、あなたのものに。

FIMMIGRM™_-_AI_TRACK_GENERATOR

 

 

 

Barge 166

商品やサービスが誕生した理由や、これまでの経歴などを物語のように魅せる、優れたストーリーテリング(Storytelling)手法のサンプル例として。

barge-166のウェブサイト

 

 

 

Find Sanctuary

都会の喧騒から離れた、山の中にぽつんとあるキャビンに宿泊したいという人へ。

find-sanctuaryのカバー画像

 

 

・ サムネイル@ : The Beach Club – Sandalwood

前回のおすすめWebサイトを見る

定期的に目を通したいWebギャラリーサイトを見る

最新Webデザイン情報を確認する