実例で学ぶ最新のWebデザイン見本コレクション厳選50個 2019年8月度

sumida-aquarium

 

この記事では、デザイン制作のインスピレーションやアイデアの参考にしたい、クリエイティブな最新Webデザインをまとめてご紹介します。

 

時代に関係なく長年愛されるシンプルな配色や、控えめで効果的なアニメーション、エレガントで高級感のあるセリフ書体のフォント選びなど、実際にウェブサイトを制作するときに真似したくなる素敵デザイン・レイアウトが揃います。

 

 

実例で学ぶ最新のWebデザイン見本コレクション厳選まとめ

 

Save Whales

クジラの保護を訴えるプロジェクトで、スクロールに応じて縦横無尽に画像が切り替わるユニークなスライダー機能を実装。

save-whales

 

 

 

Stonewall Forever

stonewall-forever

 

 

 

Once Upon a Time in Hollywood

LGBTQ問題の歴史について、インタラクティブなストーリーで伝える未来を感じる体験型サイト。ぜひ一度ページを開いてみてほしいサイトのひとつ。

one-upon-a-time-in-hollywoood

 

 

 

The Goonies

クラシック映画「グーニーズ」を掘り下げるユーザー体験型ウェブサイト。スクロールするたびにストーリーが展開していく、思わずスクロールしたくなる仕掛けも素敵。

goonies

 

 

 

40075

40075

 

 

 

West Coast Tasmania

オーストラリアの南にあるタスマニア島の魅力を伝えるランディングページで、配色やグラフィック、フォント選びなどレトロ・ビンテージデザインを検討しているときに。

west-coast-tasmania

 

 

 

探求学舎

ユーザーを視線を引きつける魅力的なヒーローヘッダーを中心に、教育向けサイトデザインの参考サンプル例。

tanqgakusha

 

 

 

Sukusuku Ball

お子様の成長を願うママの気持ちでつくった、安心で栄養もちゃんとあるスナックです。砂糖も塩も使わず、お米とおやさいだけでつくりました。

sukusuku-ball

 

 

 

Pantone Living

PANTONE公式のオンラインショップで、カラフルで思わず手に取りたくなる商品の数々が、無限スクロールアニメーション付きで表示されています。

pantone-living

 

 

 

もじFes.

フォントワークス25thアニバーサリー、また、そのフラグシップである筑紫書体の15thを記念して行われる、世にもめずらしい、文字のフェスティバル。

moji-fes

 

 

 

ユーフーズ

フレンドリーな画像とかわいいイラストを組み合わせ、親近感のわくデザインに仕上げた企業サイトのサンプル例。

ufoods-corporation

 

 

 

スクリーン

「体温をとどける」ストーリーづくりを手掛ける企業で、想いに共感したくなるフレーズがふわりとアニメーション表示されるなど、落ち着いた配色も好印象。

screen

 

 

 

Uruoi

グリッドを完全に無視した自由なレイアウトに、スクロールアニメーションを追加し、洗練された雰囲気のセリフ書体がうまくマッチしたミニマルサイト。

uruoi-japanese-skincare

 

 

 

Thibaud Allie | Folio – 19

グリッドを無視して表示される巨大なセリフ書体は、強いメッセージを発しながら、ユーザーにスクロールを促すストーリーテリング型ポートフォリオ。

thibaud-allie-folio-19

 

 

 

Ada Sokol

表示されているテキストメニューにマウスを合わせると、突如イラストが立体的に飛び出しコンテンツが遷移する、ユニークさとエレガントさを両立したデザイン。

ada-sokol

 

 

 

InDnegev

イスラエルで10月に行われる音楽フェスの公式サイト、カラフルで独創的なイラストはもちろん、背景のさり気ないイラストアニメーションなどにも注目です。

indnegev

 

 

 

Largo Studio

店舗設計・内装デザインを手掛ける企業サイトで、ページスクロールに合わせたアニメーションエフェクトが美しく、コンテンツ遷移も分かりやすいマススカーソルエフェクト付き。

largo-inc-landing-page

 

 

 

Crafted

美しい表情のセリフ書体にスッキリとしたグリッドレイアウト、余白スペースの取りかた、アニメーションなど参考にしたいウェブサイトのサンプル例として。

crafted-experience-basic

 

 

 

Morenita

スペインの楽園イビザ島の近くにあるメルノカ島で、木製のビンテージボードをレンタルできるサービス。ブランドイメージにぴったりなスタイリッシュな配色と余白スペースの使い方に注目。

morenita

 

 

 

The View From Above

The New York Timesがお届けするスペシャルコンテンツで、スクロールに合わせて表示されるデザイン要素の立体感など、細かすぎるこだわりがつまったサイト。鳥が羽ばたくローディングアニメーションもつぼ。

the-view-from-above

 

 

 

Oban Whisky

歴史を感じさせるビンテージなイラストや書体選びなどレイアウトの参考にしたい、ウイスキー醸造所の公式ウェブサイト。

oban-whisky

 

 

 

Ocean Vegabond

まるで背景と動画が一体化したようなヒーローヘッダーが特長で、サーフィンをコンセプトにしたアニメーションがとても素敵。

ocean-vegabond

 

 

 

Marini

マウスカーソルの動きに合わせてスクリーン画面全体がグリグリと変形するなど、触った楽しむエフェクトをうまく活用したウェブサイト。

marine

 

 

 

KIKK Festival

kikk-festival

 

 

 

Carbon 8

オリジナルイラストとアニメーションを見事に活用したランディングページで、思わずページをスクロールしたくなるストーリー性や仕掛けは参考として。

carbon-eight-8

 

 

 

Animal

粒子のようなつぶでできた文字テキストは、マウスカーソルを合わせるたびに破壊されながら、コンテンツが進んでいく仕掛け。

animal

 

 

 

Lyft – Cities Talk Back

Lyftドライバーが実際に体験したストーリーをシェアし、日常に潜む危険に警笛を鳴らすプロジェクト。

lyft-city-back

 

 

 

Home of Classic Addidas

Addidasでこれまでに発売された靴をギャラリー形式でまとめ、最終的に購入することができる新しい形のeコマース系ウェブサイト。 ネット版ポップアップショップと言ったところでしょうか。

home-of-classic-addidas

 

 

 

Eye Health 1st

巨大な眼球がスクリーン画面いっぱいに表示され、スクロールすることで伝えたいメッセージがうまく表示されるストーリーテリング型ランディングページ。

eyehealth-1st

 

 

 

Google Pixel 3a

Googleが発売した高機能スマートフォンの特長を紹介したランディングページで、スクロールするたびに没入感を感じるアニメーションが随所に利用されています。

google-pixel-3a-lauch-page

 

 

 

Gucci Marmont

高級ブランドのバッグをまるで絵画を3D鑑賞しているかのようなエフェクトで楽しむことができ、実際に気に入ったバッグを購入することができてしまいます。

gucci-marmont

 

 

 

HAUS

スクロールのみでコンテンツ遷移を行うことができる直感的な操作性はもちろん、ゆらゆらとしたコンテンツ・スペーサー、フォントの組合合わせなどデザインの参考になる点も多いです。

haus

 

 

 

HiFly

飛行機の期待をそれぞれ立体的に比較、閲覧することができる、飛行機好きにはたまらない仕掛けがたくさん。

hi-fly

 

 

 

RISE

ページスクロールに応じて展開するコンテンツや、CSS Gridプロパティを利用した自由なアイデアを実現できるレイアウトは今後の参考として。

rise

 

 

 

KEUS

水平スクロールでコンテンツが展開するショッピングサイトで、レイアウト作成の参考に。

keus-ecommerce

 

 

 

Kilotype

表示されている各フォントの上でマウスを左右に移動させると、動きに合わせてフォントの太さが変化する、Variableフォントを体験できるサイト。

kilotype

 

 

 

Hotel Particulier

hotelparticulier

 

 

 

Bornfight

プロジェクトのケーススタディ向けページで、太字の巨大フォントとアニメーションが見事にマッチし、コンテンツの最後まで読み進めたくなるアニメーションの実用例がふんだんに。

kuwait-case-landing

 

 

 

Life of Your Code by Google

Googleの提供するクラウドサービスCloud Runの使い方を、列車の模型で分かりやすく、そしてインタラクティブに表現する体験型ウェブサイト。

life-of-your-code

 

 

 

Martinehrlich

マウスカーソルで直感的にコンテンツを選び、読み進めることができる、さり気ないアニメーション遷移エフェクトはお見事です。

martinehrlich

 

 

 

Max Korzh

ミュージシャンMax Korzhの公式サイトで、

max-korzh-official-website

 

 

 

museum-of-science-industry-chicago

 

 

 

Neutral Works

ダーク系背景にセリフ書体、黄金カラーパレットなど高級感を演出したサイトで、マウススクロールに合わせた心地よいアニメーションが随所に活用されています。

neutral-works

 

 

 

On Fait Quoi Pour Le Climat?

on-fait-quioi-pour-le-climat

 

 

 

Oust

シンプルなグリッドにスクロールに応じたアニメーションや、画像と文字テキストなどの要素が重なったオーバーレイ、パララックスエフェクトなどトレンド満載。

oust

 

 

 

Parrot | Anafi

4K HDRカメラを搭載した新型ドローンの特設公式ページ。ドローンの機能や性能をスクロールアニメーションを活用することで、うまく視線を引きつけます。

parrot-anafi

 

 

 

The History of Web Design Book

1990年から現代までの30年間に及ぶウェブの変化をまとめた、インタラクティブなインフォグラフィックのようなウェブページ。

the-history-of-web-design-book

 

 

 

True Ventures

機械的なサンセリフと手書きブラシフォントの新しい可能性を感じさせる、シンプルだけど効果的な組み合わせ。手書き風アニメーションがうまく伝えたい部分のみを強調しています。

true-ventures

 

 

 

Wade and Leta

ランダムな配色とレイアウトの繰り返しで構成させるミニマルスタイルのアート性の強いサイト。

wade-and-leta

 

 

2019年のウェブ制作で参考にしたいクリエイテイブなウェブサイトまとめ

 

ここでは、2019年に入って紹介した比較的新しいウェブサイトデザインをまとめて一覧リストアップしています。今回紹介したサイト以外にもアイデアやインスピレーションの参考にいかがでしょう。

 

Webの最先端!注目すべき最新ウェブデザイン43個まとめ 2019年5月版

Webの進化が止まらない!参考にしたい最新ウェブデザイン36個まとめ

Webが進化中!参考にしたい話題の最新ウェブデザイン30個まとめ

 

デザイントレンドや最新の動向もチェックしておくと良いでしょう。

人気上昇中!2019年に注目されているウェブデザイントレンド10個まとめ

動画がアツい!After Effectsで使える無料テンプレート厳選65個カテゴリ別まとめ【完全版】

 

サムネイル@ : すみだ水族館: 近づくと、もっと好きになる。