ウェブの今を体感!参考にしたい最新ウェブデザイン48個まとめ 2018年10月度

epicurrence

 

メッセージを伝えたり、商品を販売したり、ポートフォリオや企業サイト、ブログやランディングページなど、ウェブページには制作したデザイナーのアイデアがつまっています。まるで思いつかないようなユニークなアイデアが使われていたり、最先端のウェブ技術を駆使したこれまでにない体験をお届けするサイトなど、参考したいポイントがたくさんあります。

 

この記事では、最近国内外で話題となった最新ウェブデザインをまとめてご紹介します。ますます加速するウェブの世界をのぞいてみてはいかがでしょう。

 

実例で学ぶウェブデザイン!参考にしたい最新スタイル見本厳選50個まとめ

 

 

ウェブの今を体感!参考にしたい最新ウェブデザインまとめ

 

The Art Center

子どもたちにデザインの楽しさを伝えるワークショップを開催しているサイトで、カラフルでシンプルなシェイプをつかった統一感のあるデザインが素敵。chu

the-art-center

 

 

 
Cowboy

アプリと連動した電動自転車で、鮮やかなピンク色でフレッシュな雰囲気のサイトデザイン。

cowboy

 

 

 

Uber 2018

2018年に行われたリブランド戦略について、わかりやすくまとめたランディングページ。

uber2018

 

 

 

Mercedes Benz EQC

スクロールに応じて画像や動画などのコンテンツが展開し、思わずページ最後まで見たくなってしまう、ストーリーテリング手法が活用されています。

mercedes-benz-eqc

 

 

 

Qvartz

シンプルで理解しやすいグリッドレイアウトに、参考にしたい美しい配色カラーパレットが採用されています。

qvartz

 

 

 

Joey Bada$$ Political MC

政治的なメッセージの多いラッパー Joey Bada$$ のオフィシャルサイト。最初から、トランプ大統領の写ったお札が、スクロールでみるみる燃えてしまいます。

joeybadass-political-mc

 

 

 

Squarespace Circle

ページスクロールでコンテンツが切り替わるたびに、ユニークでスタイリッシュな動きを加えたミニマルなデザイン。

squarespace-circle

 

 

 

六本木ヒルズ15周年記念サイト

まるで液体がユラユラと流れているようなアニメーションを随所に利用した、クリエイティブなサイト。各ページへの遷移で使われている、水彩絵の具のようなエフェクトにも注目。

roppongihills-15th-anniversary-_-estnation

 

 

 

Sennep Games Alphaputt

アルファベットをコースにした、パットゴルフを楽しむゲームアプリ用ランディングページ。商品と統一されたカラーリングや書体選びなど、分かりやすく読みやすいデザイン。

sennep-games-alphaputt

 

 

 

Fleur Moreau

美しいパステルカラーの配色に、ふわりと浮かびあがるユニークなスライダーを、コンテンツナビゲーションとして活用しています。

fleur-moreau-interior

 

 

 

My Home, My Starbucks

ユーザーのスクロールに応じて、見出しタイトルや画像などをアニメーション展開することで、視線を効果的に集めるテクニック。

my-home-my-starbucks

 

 

 

キッズコレッチオ

イラストで全体のデザインをまとめることで、わかりすく、統一感のあるデザインに。特に手書きイラストは、オリジナル性を演出するのにも最適です。

kids-colleccio

 

 

 

小幸農園

岡山県にあるぶどう農園のサイトで、美味しそなぶどうについて詳しく知ることができる、わかりやすいデザインが魅力的。

koyuki-nouen

 

 

 

Marubeni

ヘッダー見出しに動画を利用し、活動内容をうまく伝えるたり、斜めに入ったスリットやブランドカラーを使った配色など、デザイン性と使いやすさを実現しています。

marubeni

 

 

 

+graph Cloud & Agent

各業界の第一線で活躍するクリエイターのために、会計・経営サポート行ってきた株式会社プラスグラフがご提案する新しいサービス・パッケージです。

plusgraph-ca

 

 

 

株式会社井上製麺

井上製麺は生麺製造専門職としてお客様と一緒に、本当に満足のいくこだわりの商品(麺)を提案していきます。

is-seimen

 

 

 

Pen Magazine International

日本の人気雑誌 Pen Magazine の海外版サイトで、外国人が注目しそうな日本文化がたくさん紹介されています。

pen-magazine-international

 

 

 

Object

アメリカ、ミネアポリスにあるデザイン事務所で、フォントのみを使ったシンプルなデザインの裏には、多彩なアニメーションが秘められています。

object

 

 

 

Jveb Studio

署名サイン風のローディングアニメーションや、ページスクロールに合わせて展開するイラスト、オシャレでスタイリッシュな配色、フォント選びなどどれも参考にしたい要素ばかり。

jveb-studio

 

 

 

Lisa & Ryan

シンプルなレイアウトですが、オリジナル性たっぷりな配色カラーリングを参考にしたいサイトデザイン。

lisa-ryan

 

 

 

Kikk Festival 2018

スクリーンで展開される面白アニメーションや、マウスカーソルをスポットライト状に利用するなど、愉しいたくさんの仕掛けが。

kikk-festival-2018

 

 

 

Mailchimp

最近ブランドイメージを一新し、賛否両論となっているサイト。独特のアート感で表現されたイラストは、好みが分かれそうなところですが、定評のあるサービスに変わりはありません。

mailchimp

 

 

 

Mariano Pascual

サイト全体を古いMacのようなレトロUIデザインで統一した、面白ポートフォリオサイト。

mariano-pascual

 

 

 

Marie Morelle

イラストレーターのポートフォリオサイトで、ナビメニューを上下に操作することで、これまでの制作実績をまとめて確認できます。

marie-morelle-illustrator

 

 

 

Ueno.

ちょっとした動きを加えるだけで、オリジナル性とサイトの使いやすさを向上させたシンプルデザイン。

ueno

 

 

 

Your Plan Your Planet

たべもの、エネルギー、水といった地球に大切なものをインタラクティブに伝える、Google参加のアースプロジェクト。

your-plan-your-planet

 

 

 

Spicy No Spicy

独特なスケッチ画や、ページを部分的に水彩絵の具で汚すなど、スタイリッシュなレストランの雰囲気ともマッチしたサイトデザイン。

spicy-nospicy

 

 

 

Pittori di Cinema

アート本の販売サイトですが、本の良さを十分に伝えるランディングページ。アニメーションや配色など参考にしたい点も多数。

pittori-di-cinema

 

 

 

Yard Agency

フルスクリーン動画コンテンツを切り替えるたびに、水面エフェクトを採用したスライダーデザイン。今年のトレンドとも言える、アニメーションをうまく利用した参考例。

nike-skair-yard

 

 

 

Meltin MMI

フルスクリーン動画をヘッダーデザインに利用することで、ユーザーの注目を一気に集めるテクニック。企業サイトやランディングページなどで有効。

meltin-mmi

 

 

 

Odyssey Japan

山形、鳥取、佐賀、宮崎など日本の美しい田園風景が残る場所に、外国人の観光客に楽しんでもらおうというサービス。オリンピックに向けて、このようなサービスが増えるといいですね。

odysseyjapan-1

 

 

 

Emergence Magazine

emergence-magazine

 

 

 

Clorova

マウスカーソルに合わせて画像が動きながら、なめらかにスライドしていく、マイクロアニメーションが光るデザイン。

clorova

 

 

 

Make Reign

コンテンツが切り替わるたびに、なめらかで美しいアニメーションが文字テキストに採用されています。

makerain

 

 

 

Sage Culture

フルスクリーンで展開するスライダーは、高級感のあるセリフ書体とライン線を組み合わせた、シンプルで魅力的なレイアウト。

sage-culture

 

 

 

Erik Bernacchi

まるで古いWindows 95のようなスクリーン画面を再現したユニークなポートフォリオサイト。

the-website-of-erik-bernacchi

 

 

 

Kalpa Collection

高級腕時計の販売サイトで、エレガントなセリフ書体やなめらかで美しいアニメーションなど、高級感にこだわったデザインが特長。

kalpa-collection

 

 

 

Get the Picture

日本の良さや文化などを伝える英語サイトで、日本の国旗をモチーフにした配色カラーリング、美しいセリフ書体などエレガントな雰囲気を演出しています。

getthepicture

 

 

 

Audiotheque

ベルギーにある音楽アプリなどの開発を行うスタジオで、ミュージックを全面で表現したイラストがユニーク。

audiotheque

 

 

 

BryBry

クリック&ホールドでウェブサイトのストーリーを進めていく、体験型のクリエイティブなアイデア。

brybry

 

 

 

HKI Paris

メタリックな龍のウロコのような輝きを、背景でアニメーション展開させる美しいデザインが魅力的です。

hki-paris

 

 

 

Inifini

スクロールに合わせてコンテンツがアニメーション展開し、文字テキストと画像を重ねたレイアウトなど、トレンドデザインも盛り込んでいます。

infini

 

 

 

Erik Jorgensen

スライダーが切り替わるたびに、水面が揺れるような繊細なアニメーションエフェクトが実装された、ミニマルなサイトデザイン。

erik-jorgensen

 

 

 

Humbert Poyet

読み込みローディング画面から、ロゴデザインへと変化するなど、文字テキストや画像に利用したアニメーションが美しいサイト。

humbert-poyet

 

 

 

Bewegen

電気自転車の詳細を、スクロールしながらひとつずつ解説していく、ストーリーテリング手法を採用した販売サイト。

bewegen

 

 

 

Foundation Chu Sainte Justine

シンプルなグリッドレイアウトですが、コンテンツの遷移のたびに、目を引くアニメーションが多彩に展開します。

fondation-chu-sainte-justine

 

 

 

JPLS Open Source Rover

NASAのプロジェクトの一環で、火星を走行するローバーを自分で設計できてしまいます。プロジェクトの紹介は、アニメーションを用いたランディングページで詳しくされています。

jpls-open-source-rover

 

 

サムネイル@: Epicurrence 2018