最新スタイルはこれ!ウェブデザイン見本コレクション 2019年11月度

shimane-misato

 

この記事では、ウェブサイトのクリエイティブなアイデアが欲しいときに参考にしたい最新デザイン42個をまとめてご紹介します。

 

美しいタイポグラフィーや配色、シェイプの使い方などどれも魅力的なサイトばかりで、メッセージやコンセプトを伝えるユニークな方法が揃います。また、最新のデザイントレンドを取り入れるきっかけにも良いかもしれません。

 

サンプル例でわかる!注目したい2020年のWebデザイントレンド8個まとめ

 

最新スタイルはこれ!ウェブデザイン見本コレクション

 

The Scott Resort & Spa

スクロール追尾アニメーションを中心に、パステルカラーの配色やグリッドを崩したレイアウト、SVGアニメーションなどさまざまなトレンドを取り入れています。ランディングページ作成の参考にもどうぞ。

the-scott-resort-spa

 

 

 

Rumsans

ページを左右に分割し、スライダーと新着コンテンツを並べるなどブログメディアのアイデアになりそうなレイアウト。配色やコントラストの使い方にも注目です。

rumsans

 

 

 

Design Thinkers Conference

2020年1月に東京で開催されるカンファレンスの公式ページで、トップページから各コンテンツまでイラストで描かれるなど、海外から見た日本といった印象。

webdesignconferencetokyo

 

 

 

みさとと。

島根県美郷町の魅力をかわいいイラストのストーリーテリングによって伝えるウェブサイト。スクロールでコンテンツが次々に進んでいきます。

shimane-misato-town

 

 

 

道祖神

疫病などの災いが入ってこないように、村境や道端に祀られている村を守る不思議な神様「道祖神」をカラフルなイラストで紹介するサイト。

dosojin

 

 

 

ラボ出版

CD付き英語絵本を販売しているサイトで、分かりやすく親しみやすいイラストを使ったデザインの他にも、絵本をカテゴリ別に探してソートできる機能なども充実。

labo-shuppan

 

 

 

UT 2019年度 新卒採用サイト

余白スペースを活かしたグリッドの崩し方や縦書きレイアウト、スクロールに応じた画像表示など、日本語サイトでも活用しやすいアイデアが満載。
ut-group

 

 

 

JPホールディングスグループ

子どもたちが描いた絵が印象的で、スクロールに応じて文字テキストがブロックのようにアニメーション付きで並びます。

jphdgroup-recruit

 

 

 

Bruno Simon

キーボードの矢印キーで車を運転しながら、制作実績などのコンテンツを巡るユニークすぎるポートフォリオサイト。

bruno-simon-creative-developer

 

 

 

Dune Buggy AR

マウスかキーボードを使うことでオフロードを爆走するバギーをブラウザ上で運転できる体験型ウェブサイト。

dune-buggy-ar

 

 

 

Simmons Bar

ロンドンにあるバーのオフィシャルサイトは、遊び心にあふれるアニメーションやイラストを多用しており、見ていて飽きないつくりが特長。

summons-good-times-guaranteed

 

 

 

Misfits Market

農場から仕入れたオーガニック野菜を定期的にボックス箱で送るサブスクリプションサービス。ヘルシーでカラフルな配色にも注目。

misfitsmarket

 

 

 

Akaru

まるで七色に輝く水面のようなアニメーションエフェクトが素敵なウェブサイトで、玉虫色のように絶えず変化する色合いはもちろん、高級感のあるセリフ書体などトレンドをうまく取り入れています。

akaru

 

 

 

Dopper

ユラユラと水面の上に浮かぶ文字テキストは、ずっと見ていると酔ってしまいそうなほどリアルな動きが再現されています。

ourmission-dopper

 

 

 

Zoccon

動画を利用したインパクトのあるヒーローセクションに、グラデーションやネオンエフェクト、アニメーションなど多彩な機能が搭載されたウェブサイト。

domore-new-theory

 

 

 

We Cargo

ダーク系のパララックス背景に、ネオンライトとグリッチエフェクトなどのサイバーパンクな雰囲気を演出した、ベルギーで行われたカンファレンスの公式サイト。

wecargo-website

 

 

 

Pioneer

トウモロコシ成長の過程をダイナミックすぎる魅力的な3Dアートで演出するウェブサイト。

pioneer-corn-revolutionized

 

 

 

SOS Violence Conjugale

チャットやメールでのやり取りを実際に体験しながら、パワハラやモラハラになっていないか確認できるサイト。

sos-violence-conjugale

 

 

 

Studio Voila

voila

 

 

 

Danilo de marco

danilodemarco

 

 

 

Design Embraced

マウスカーソルを当てた部分だけ、立体的で超リアルに膨張させるギミック付き。ピンクとグレーの控えめなパステル配色、デカ文字で表示されるサンセリフ書体など、今のトレンドを感じるウェブサイト。

designembraced

 

 

 

Daphné Launay Portfolio

ページ全体を使って縦横無尽にレイアウトがコンテンツに応じて変化し、パステルカラーを使ったエレガントな印象など、ブランドイメージにも合わせたパステルカラーが素敵。

daphne-launay-portfolio

 

 

 

Helias Oil

天然由来成分だけでできたエッセンシャルオイルは、商品に合わせて背景のシェイプや色も変化します。また、グリッドラインをあえて見せている点にも注目です。

heliasoils

 

 

 

Red Edition

rededition

 

 

 

Rand

特にポートフォリオサイトではマップ上から制作実績を選択するなど、他では見られないユニークな仕掛けを施しています。

rand

 

 

 

Nowyteatr Theater

サムネイルにマウスホバーすることで、ユラユラと波のように揺れるエフェクトが魅力的。

nowyteatr-theater-website

 

 

 

Laguta Laguta

シンプルなデザインながら、スクロールに応じて画像や文字テキストなどがふわりと表示されるアニメーションが目を引きます。

laguta-laguta-agency

 

 

 

Beauvoir

スクロールに応じて水平方向にコンテンツが移動したり、ページ全体にテキストアニメーションが配置されています。

beauvoir

 

 

 

Bruno Arizio

画像が変化しながら表示されるアニメーションをふんだんに利用したポートフォリオサイト。制作実績ページとのシームレスなページ遷移を体感できます。

bruno-arizio

 

 

 

Castor Pollux

グリッドを無視したクリエイティブなレイアウトに、スクロールすると伸縮する画像ファイルなど飽きさせない工夫が随所に。

castor-pollux

 

 

 

Composition 24

ロシア、モスクワにあるアパートメントの紹介ページ。美しい風景やアパートの外観など、写真をたくさん見せるときに参考にしたいレイアウト。

composition-24

 

 

 

Digital Design Days Milano

イタリア、ミラノで開催されたカンファレンス公式ページで、文字テキストやスクロールなどにアニメーションを取り入れるだけでなく、背景にも利用することでよりインタラクティブな印象に。

digital-design-days-festival

 

 

 

Discovery Land Company

ページ全体を使ってレイアウト、画像やテキストを重ねて表示したり、おバーサイズの背景画像を利用したりと、旅行したくなる魅せ方は参考になりそうです。

discovery-land-company

 

 

 

District 2 Studio

これまでの制作実績をまとめたポートフォリオサイトで、スクロールすると流れるように表示される画像やテキストに、複数のグリッドレイアウトを組み合わせたページ構成。

district2-studio

 

 

 

Google Pixel Buds

Googleが販売予定のワイヤレスイヤホンのランディングページ。ページをスクロールするとイヤホンがケースに収納されるなど、スクロールに応じたアニメーションが多彩。

google-pixel-buds

 

 

 

Marie Weber

表示された単語にマウスホバーすると、詳細画像や文字テキストがバラバラと表示されるアニメーションで、視線をうまくコンテンツに誘導してくれます。若干、読み込み時間がかかってしまうかもしれません。

marie-weber

 

 

 

Meet Your New Twitch

mew-twitch

 

 

 

Purple Rock Scissors

まるで古いブラウン管テレビを見ているような、画面の歪みをそのままウェブサイトに採用しています。

purplerockscissors

 

 

 

Reform Collective

各コンテンツごとにさまざまな仕掛けやテクニックが披露されており、思わずページ下までスクロールしたくなってしまいます。

reform-collective

 

 

 

The Story of White Tower

the-story-of-the-white-tower

 

 

 

Vladmir Gruev

ページ端の単語にマウスを合わせると、平面的なデザインが突然サイコロのように立体的に動き出します。

vladimirgruev

 

 

Spatzek Studio

クリエイティブな映像作品を全面に利用し、サンセリフとセリフ書体の組み合わせ方など細かい部分にもセンスが光るデザイン事務所の公式ページ。

spatzek-studio

 

 

いかがでしたでしょう。合わせて、2020年のウェブデザイントレンドも確認しておくと良いかもしれません。

サンプル例でわかる!注目したい2020年のWebデザイントレンド8個まとめ