Advertisement

ys-dental-clinic

 

この記事では、今後のWeb制作で参考にしたい最新Webサイトデザイン40個をまとめてご紹介します。

 

「デザインのアイデアが見つからない」「見本サンプル例が欲しい」そんなときに活用したい世界中の最新ウェブデザイン実例を集めました。

 

アニメーションが当たり前となった今、ウェブデザインの魅せ方はさらに進化を続けています。2020年に入って紹介したウェブサイトと一緒に確認してみてはいかがでしょう。

 

kakiyama-1
この記事では、Webデザインのアイデアがつまった、注目したい最新Webサイトデザイン35個をまとめてご紹介します。 トレンドが目まぐるしく変化するWe
zenly
この記事では、今後のWeb制作で参考にしたい最新Webサイトデザイン50個をまとめてご紹介します。 世界中の優れた実例サンプルを実際に見ることで、印象
plink
この記事では、デザイン制作のインスピレーションや参考にしたい、2020年に入って注目を集めている最新ウェブサイトデザイン37個をまとめています。 20

 

 

Web制作参考アイデア集!話題の最新ウェブデザインまとめ

 

Delassus

ポリゴンスタイルの鮮やかなイラストを使った水平パララックススクロールが特長で、スクロールに合わせたアニメーションでユーザーの目を楽しませます。

 

 

 

Moooi

画面に吸い込まれるような没入感たっぷりなウェブサイトで、インタラクティブなギャラリーを閲覧しながら、気に入った商品は購入も可能となっています。

 

 

 

Y’sデンタルクリニック

水面が揺れるように切り替わるスライダーやスクロール追従アニメーション、グリッドを無視したレイアウト、高級感のあるセリフ書体使いなど、トレンドを意識したデンタルクリニックの公式サイト。

ys-dc

 

 

 

Yuko Higuchi x Gucci

かわいいイラストからお好みの一枚を選択すると、バラバラのパズルを楽しむことができる、子供を対象とした体験型サイトですが、ゲームの難易度は高め。

yuko-higuchi-gucci

 

 

 

株式会社トンボ鉛筆

MONO消しゴムでもおなじみの会社の公式ホームページ。グリッドを活用したシンプルでミニマルなレイアウトが特長。

tombo

 

 

 

Drink Cann

アルコールフリーの次世代型トニック飲料の公式ホームページ。シュワシュワの炭酸が画面全体を覆い、ブランドカラーとマッチしたストーリーテリング形式のウェブサイト。

 

 

 

Stephanie Nelson Dance Group

グリッドを無視した自由なレイアウトに、文字テキストと画像のみのシンプルなミニマルデザインが特長。

stefanienelsondancegroup

 

 

 

The A-Z of AI

人工知能AIについてもっと詳しく知るために、アルファベット順に用語をわかりまとめたサイト。アニメーション付イラストがキュート。

the-a-z-of-ai

 

 

 

Maison Cacao

ページを下までスクロールすると、次のプロダクト商品の詳細ページが自動で読み込まれ、シームレスなウェブ体験を実現した日本発のチョコレート。

maison-cacao

 

 

 

Stromwerk

プロ仕様の電動自転車を販売しているドイツ発の会社で、すべての情報を1ページに完結させることで、ユーザーに伝わりやすいデザインに。

stromwerk

 

 

 

Turbulent

ページのスクロールを開始すると、立体的なイラストが動き出すユニークな仕掛けが。

turbulent

 

 

 

Un Printemps Suspendu

二人のプロスキーヤーがアルプスの魅力をドキュメンタリー形式で伝える、体験型のインタラクティブなサイト。

un-printemps-suspendu

 

 

 

Pioneer

より育てやすいトウモロコシについて、分かりやすいビジュアルストーリーで伝えます。コンテンツを無限スクロールにすることで、植物の成長をうまく描いている点もポイント。

pioneer-corn-revolutionized

 

 

 

Green Chameleon

ページのスクロールを続けると、画面中央に引き込まれるような感覚になるパララックスエフェクトが印象的。

 

 

 

Haerfest

仕事にもプライベートにも活用できる高機能バックパックの紹介ランディングページ。カード型レイアウトを中心に、パララックスエフェクトやアニメーションが充実したサイト。

haerfest

 

 

 

Ashley & Co

女性向けコスメティック商品を販売しているホームページで、アース色を基調とした落ち着いた配色をカテゴリ分けに採用しています。

ashley-co

 

 

 

Thinkbear

超巨大なタイポグラフィーが印象的な個人デザイナーのポートフォリオサイト。テキストリンクにマウスホバーと、サムネイルがポップアップ表示されます。

thinkbearfolio2020

 

 

 

Gucci Mascara Hunt

マウスドラッグで強弱をつけ、ボールを使ってマスカラを倒しながら1分間のハイスコアを狙うゲーム。

gucci-mascara-hunt

 

 

 

Beans Agency

beans-digital-marketing

 

 

 

Readymag Design Workout

脳を活性化させ、クリエイティブなデザインアイデアを鍛えるワークアウトメニューが揃ったサイト。新型コロナによる自宅時間が増えたというひとへ。

readymag-design-workout

 

 

 

Daniele Buffa

圧倒的なアニメーション使いによってミニマルなレイアウトをより魅力的に仕上げた、ロンドン在住デザイナーのポートフォリオ。左下のアイコンでダークモードへの切り替えも可能。

daniele-buffa

 

 

 

Everpost

湾曲した立体的なイメージスライダーをヘッダーに採用したサイトで、アニメーションを全体に利用することで、ページ下までストレスなくスクロールできる工夫も。

everpost

 

 

 

マガジン ど

温度に関わる衣食住についてのお役立ち情報、トレンド満載のデジタルマガジン。左固定ナビメニューを活用したブログメディアのデザイン参考例として。

dododododo

 

 

 

キッズ珠算会

kids-shuzankai

 

 

 

ザ・メープルマニア

古き良き時代のアメリカを舞台にしたスイーツ専門店は、ヴィンテージテイストがブランドイメージともマッチしています。

themaplemania

 

 

 

Smart Drive

動画に合わせて文字テキストをマスキングしたヒーローイメージが魅力的なウェブサイト。

smartdrive

 

 

 

AIAIAI Audio

プロミュージシャンに向けた高品質ヘッドフォンを販売している会社で、モノクロで統一したレイアウトに、蛍光イエローのハイライトが強調されたデザイン。

aiaiai

 

 

 

Chiara Luzzana Sound Designer

アンビエントミュージックに合わせてオブジェクトが振動するユニークなサイト。制作実績ページも、グリッドを無視した自由なレイアウトを採用し、センスの光るおしゃれなデザインが魅力的。

chiara-luzzana-sound-designer

 

 

 

My Better Normal

2021年10月1日までに達成したい目chia標を入力すれば、タイムカプセルとして保存され、時間が来るとメールで通知してくれるユニークなサイト。

my-better-normal

 

 

 

Reed.be

思わずスクロールしたくなるマイクロインタラクションを多用した、触って楽しむタイプのウェブサイト。水平スクロール、最近よく見かけます。

reed-be

 

 

 

1987 Masters

滑らかなページ遷移やユニークなホバーエフェクトなどを用いた、イベント設営に特化したデザインチームの公式サイト。

master1987

 

 

 

Altermind

コンテンツの切り替えと同時に、背景が立体的に変化するユニークな仕掛け。高級感のあるセリフ書体でサイト全体の統一感を演出。

altermind

 

 

 

Baboard Group

babord

 

 

 

Semp.Ai

スクロールに合わせたアニメーションが随所に盛り込まれたポートフォリオサイト。旗のように揺らめくサムネイルや、クルクル回転するロゴマークなど遊び心満載。

sempai

 

 

 

La Cantiche

スクロールで水平方向に移動するコンテンツは、ストーリーテリング手法を用いることで、没入感たっぷりのデザインに仕上げます。セリフ書体の使い方や配色なども参考に。

lecantiche1320

 

 

 

House of the World

世界にある美しい住宅を、ウェブサイトならではのインタラクティブな魅せ方で伝えます。

house-of-beautiful-houses

 

 

 

Jazz Keys

表示されたブランクページにランダムで文字を入力していくと、それに合わせてジャズサウンドが奏でられる面白プロジェクト。

jazzkeys

 

 

 

Superfluid

エネルギッシュでカラフルな配色と太字フォントの組み合わせが、ブランド位ミレニアル世代をターゲットにしたブランディングとうまくマッチしています。

superfluid

 

 

 

The Badass Project

黄色と黒の配色、エレガントなセリフ書体、スクロールに合わせたアニメーションなど他とは差がつくオリジナリティが魅力。

the-badass-project

 

 

 

Black Lives Matter

人種差別に関するさまざまなニュースを提供しているブログサイト。

black-lives-matter

 

サムネイル@ : Y’s Dental Clinic