良質サンプル多数!Webの参考にしたい最新ウェブデザイン45個まとめ

gfsmith

 

目まぐるしく変わっるWebデザインを追いかけるには、できるだけたくさんの優れたデザインのサンプル実例をじっくり見ることが、次のアイデアにもつながります。

 

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

 

「イメージは決まっているけど、どこからはじめたらいいか分からない」といったときも、レイアウトや配色はもちろん、使用しているフォントやテクスチャなど、個別パーツごとに参考にしてみても良いでしょう。

 

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

Webアイデアの宝庫!注目したい最新ウェブデザイン35個まとめ

 

良質サンプル多数!Webの参考にしたい最新ウェブデザインまとめ

 

Hoang Nguyen Personal Site

画面の四隅にあるリンクをクリックすると、キャラクターが動きながら次のコンテンツへと移動、表示まで行うユニークすぎる個人サイト。

hoang-nguyen-personal-site

 

 

 

Begonia

台湾にあるデザイン事務所の公式サイト。SVGアニメーションのページ遷移やオリジナルイラストの使用など、デザイン性に優れた演出がきらり。

begonia

 

 

 

Making Maisel Marvelous

Amazonプライム・ビデオと連動したウェブコンテンツで、ドラマのコンセプトを崩さず、より理解を深めるストーリーテリングが採用されています。

making-maisel-marvelous

 

 

 

Grand Matter

ピンクと紺色の配色が特に印象的だったサイトデザインで、ヒーローイメージが目立つレイアウトはブログサイトにも。

grandmatter

 

 

 

Globekit

立体の地球儀をWebサイトに実装できるスクリプト。現在6スタイルが提供されており、複雑なデータのビジュアル化、視覚化に便利。

globekit

 

 

 

Mailchimp Presents: By the Books

新しいアイデアをサポートし、デザインアイデアに対する新しい視点、味方のきっかけづくりにオススメの本コレクション。実際に棚に並んだ本をクリックすると、各詳細ページに移動します。

mailchimp-presents

 

 

 

The Oyster & Fish House

地元で獲れた魚などのシーフードで料理を提供する、イギリスにある個人経営のレストラン。オーナー兼シェフ、マークの人の良さがにじみ出た落ち着いたデザイン。

oysterfishhouse

 

 

 

Anna Twelve Fragrances

メインメニューを真横に傾けるという斬新なデザインが特長で、背景デザインもマウスカーソルで歪ませることが可能。シームレスなページ遷移を実現したサンプル例として。

annatwelve-fragrances

 

 

 

Yourra!

フランスにあるデザイン事務所のポートフォリオサイトで、スマイルマークをクリックからはじまる、面白さが伝わるデザイン。

yourra

 

 

 

NIIKA Agency

ウェブページの下方向にスクロールしていくと、3Dで立体的なデザインパーツが縦横無尽に移動、レイアウト、パララックスエフェクトなどを追加した遊び心のある個人ポートフォリオ。

 

 

 

Yolélé

ランディングページに使われている、水平スクロールをうまく利用したコンテンツは、数少ないサンプル例のひとつ。

yolele

 

 

 

Next Big Thing AG

nextbigthing

 

 

 

Kukla Kit

プロトタイプツールFigma上で、3Dデザインパーツを作成、カスタマイズできる拡張プラグインのランディングページ。立体感が表現されたブランディングともマッチしたデザイン。

kukla-3d-icon-kit

 

 

 

Radiant Studio

マウスカーソルを合わせた領域がビリっとグリッチエフェクトで歪む、ユニークなエフェクトを活用したポートフォリオサイト。

radiant-studios

 

 

 

Markus Agency

各コンテンツの見出しタイトルにバリアブルフォントを採用し、絶え間なくアニメーションさせるなどギミックさが光るストックホルムのデザイン事務所。

markus-agency

 

 

 

Graphic Designer: Incube

ページのスクロールを開始すると、少しずつ立方体が壊れはじめるなど、ページを思わず下方向にスクロールしたくなる仕掛けが満載。

graphic-designer

 

 

 

Kieran Baybutt

超巨大な文字テキストをメニューにし、リストにカーソルを合わせるたびにサムネイルが表示されるなど、マイクロインタラクションを効果的に利用しています。

kieran-baybutt-portfolio

 

 

 

Salomon Ligthelm

salomon-ligthelm

 

 

 

Fabrizio Milesi

モノクロで統一されたミニマルなサイトでは、セリフとサンセリフ書体の組み合わせ、グリッドを無視した自由なレイアウトなど、デザイン性がより際立つデザインに。

fabrizio-milesi

 

 

 

Golden Suisse

スイススタイルを採用し、活字をメインとしたシンプルで美しいサイトデザイン。

golden-suisse

 

 

 

Gucci Dive

潜水艦をえらび、障害物を避けながらコースをクリアするオンラインゲーム。ブランドに関係なく没頭してしまいそうな中毒性の高さ。

gucci-dive

 

 

 

Theremin

手を触れずに演奏する、世界初の電子楽器テルミンの発明100周年を記念した特別サイト。再生ボタンをクリックすると、マウス操作でテルミンを操ることができます。

theremix-virtual-theremin

 

 

 

Mav Farm

画面下のボタンをクリックすると、まるで未来のようなコンセプトデザインが魅力的なポートフォリオサイト。制作実績なども3D感たっぷりなユニークさ。

mav_farm

 

 

 

The Story of Babushka

マトリョーシカ人形の歴史を触って楽しむ、インタラクティブなデザイン体験で提要するWebサイト。イラストの一部をクリックし続けると、。

babushka

 

 

 

Creative Crew – Partnership program

マウススクロールでシンプルな言葉とイラストをつかった、水平方向のプレゼンを閲覧できるストーリーテリング手法。

 

 

 

Laughrees

ファッション雑誌のようなラフなレイアウトをWebで表現し、アニメーションを加えることでより訴求力の高いデザインを確立したランディングページ。

laughrees

 

 

 

Wallet+ 4th Anniversary

ページのスクロールに合わせて、アニメーションを使用しながらコンテンツを効果的に表示した、ランディングページ作成の参考にしたい、シンプルで伝わりやすいデザインが印象的。

wallet__4th_anniversary

 

 

 

海龍王寺

グリッドに囚われない自由なレイアウトで、ポイントポイントで利用される英字アルファベットが、日本伝統の文化と見事にマッチし、モダンで親しみやすい雰囲気を演出しています。

kairyuouji

 

 

 

渋谷メディアペディア

ページを開くとフルスクリーンで展開する、訴求力高めの動画ヒーローイメージを採用。控えめなグリッドラインが効果的で、マイクロインタラクションを随所にちりばめたデザイン。

shibuya-media-pedia

 

 

 

Japan Cultural Expo

日本の美しさを海外に伝える特設サイトで、各イベント情報などを分かりやすく伝えています。

japn-cultural-expo-2020

 

 

 

The Papestielliz

落ち着いたやさしい配色カラーパレットから、人気の手書きイラスト、親しみやすいセリフ書体、随所にひかるアニメーションなどトレンドを盛り込んだサイト。

the-papestielliz

 

 

 

Admita

ページスクロールに合わせて、画像サムネイルがズームインで引っ張られたようなアニメーション付きで表示されます。

admita

 

 

 

Drink Sustainably

地球の環境問題に対する取り組み方を、わかりやすいストーリーテリング手法で伝えるランディングページ。

drinksustainably

 

 

 

Fleava

制作実績ページが作成するときに参考にしたい、圧倒的なデザイン性の高さを演出したポートフォリオサイト。各コンテンツの移動をシームレスに感じるアニメーションの工夫も◎。
fleava-1

 

 

 

HazeLight

ページのスクロールに合わせて流れるようなエフェクトを文字テキストや画像ファイルなどに適用し、シームレスでフローを感じるデザインに。背景を含む配色カラーも素敵。

hazelight

 

 

 

Bien Joue

無数に並べられた映像サムネイルを、マウス操作で操りながらコンテンツを選択する、体験型ウェブサイト兼ポートフォリオ。

bien-joue

 

 

 

iGaming Design Agency

水平方向に並べられたプロフィール、制作実績をスクロールするだけでスラスラと表示できます。

igaming-studio

 

 

 

Jo Loves

jo-loves

 

 

 

Seal & Co

高級感、信頼感を感じるがっしりとしたセリフ書体が印象的で、デザインのメインとして文字の使い方が工夫されています。

sealandco

 

 

 

SDU Future Education

上記キーをつかってキャラクターを操作しながら、各コンテンツまで移動していく、インタラクティブで未来を感じるウェブサイト。

sdu-future-education

 

 

 

Raters App

控えめな立体感が特長のスキューモーフィズム・スタイルを、ページ全体に採用した奥行き感と立体感を演出したサイトデザイン。

raters

 

 

 

Extraset Typefaces Shop

販売しているフォント一覧を、画面いっぱいに巨大なフォントサイズで表示する新しい魅せ方。

extraset-type-foundry

 

 

 

Find Wunder

ポップなブランドイメージに合った鮮やかな配色カラーパレット、巨大タイポグラフィ、目を引く画像デザインなど注目すべきポイントの多いデザイン。

wunder

 

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

いまWebがすごい!参考にしたい話題の最新ウェブデザイン37個まとめ

 

サムネイル@ : G. F Smith