Advertisement

one-upon-a-time-in-hollywoood

 

当サイトでは、定期的に新しく公開された最新Webサイトデザインをまとめていますが、今回はいつもとは異なり、2019年のベストWebデザイン50個を厳選、ピックアップしご紹介します。

 

2019年は特に選ぶのが難しいほど、素敵なWebサイトが数多く公開されたのですが、以下は特にお気に入りのベスト50となります。型にはまらない独自のアプローチを採用し、2019年のデザイントレンドも積極的に取り入れているサイトを集めています。

 

フルスクリーン動画や個性のあるイラスト、ミニマルスタイル、多彩なアニメーションなど2020年に引き続き人気となりそうなトレンド多め。昨年のベストWebデザインと比較してみても良いでしょう。

 

当サイトでは、定期的に魅力的な最新ウェブサイトのデザインをまとめて紹介していますが、2018年は革新的なエフェクトやインタラクティブな仕掛けをつかったサイトが、たく

 

 

【総まとめ】2019年印象に残った世界のベストWebデザイン厳選50個

 

eDesign Interactive

ヘッダーの魅力的なアニメーションや配色が目を引くデザインが特長で、遊びゴコロあふれるイラストアニメーションが素敵なサイト。配色はもちろん、フォント選び、余白スペースのとり方なども参考に。

edesign-interactive

 

 

 

Bruno Simon

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

bruno-simon-creative-developer

 

 

 

MA True Cannabis

世界各国で規制を緩和する動きが活発になっている大麻について、インタラクティブなアニメーションを使い、わかりやすく解説しているサイト。

cannabis-1

 

 

 

お茶のはまだ

水面がゆらゆらと揺れるようなアニメーションエフェクトが、背景やサムネイル画像などに採用した、鹿児島県南九州市の銘茶「知覧茶」の販売を行うウェブサイト。

ocha-hamada

 

 

 

Tao Tajima

スクロールの強弱に応じて、3Dモーフィングアニメーション付きでスライダーがヌルヌルと動く、WebGPLの技術を見事に利用したポートフォリオサイト。ページ遷移の滑らかさが、世界でも話題となっています

tao-tajima

 

 

 

Sukusuku Ball

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

sukusuku-ball

 

 

 

みさとと。

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

shimane-misato-town

 

 

 

スクリーン

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

screen

 

 

 

マリモ歯科・矯正

フレンドリーで親しみやすい配色やかわいいイラストが分かりやすい、神奈川県にある矯正専門歯科の公式サイト。

marimo-dental

 

 

 

Neutral Works

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

neutral-works

 

 

 

Canals

アムステルダムの街に扇形で張り巡らされた運河の歴史を紹介したサイト。スクロールでコンテンツが水平移動し、まるで雑誌をめくっているような感覚に。

canals-1

 

 

 

HI x NY

ハワイの魅力を存分に伝える観光向けツアーガイド的サイトで、ハワイの島々の良さをそれぞれインタラクティブに伝えます。

hixny

 

 

 

West Coast Tasmania

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

west-coast-tasmania

 

 

 

Bruege Once in Lifetime

古い絵画から飛び出した登場人物たちがに動きを加えたユニークなヒーローイメージ。

bruegel-once-in-lifetime

 

 

 

Once Upon a Time in Hollywood

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

one-upon-a-time-in-hollywoood

 

 

 

SOS Violence Conjugale

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

sos-violence-conjugale

 

 

 

Future of Sustainability

2030年前に直面するかもしれない地球の危機を伝えるウェブサイト。プラスチックゴミによる環境破壊や温暖化などチャプターごとに、地球の深刻な状況をまとめています。

future-sustainability

 

 

 

Save Whales

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

save-whales

 

 

 

BBC: Real Happiness Project

マウスの動きに合わせて画面が立体的に動き出し、ボタンを押し続けるとサメがチーターに変身するなど、触って楽しむコンテンツが満載のイギリスBBCの地球環境向けサイト。

bbc-real-happiness-project

 

 

 

Kalfire

暖炉の販売を行うサイトで、薪が燃えている様子を、背景全体に動画を使うことで、効果的に表現したデザイン。

04_kalfire

 

 

 

Hinderer Wolff

さまざまなワインを販売しているウェブサイトで、ボトル全体を配置し、まるで手に取るように細かく説明を加えています。

hinderer-and-wolff

 

 

 

66 Nord

北極圏から約61km南にある、北緯66度をテーマにした旅行を提供しているユニークなウェブサイト。背景の山と雲、文字テキストをつかった、ページ後半のパララックスエフェクトが素敵。

5c46d48c92ab6

 

 

 

Nomadic Tribe

英語ナレーション付きで進んでいく、ステーリーテリングの手法を取り入れた、触れて楽しむインタラクティブなウェブサイト。マウスドラッグすることで、きれいな花を野原に咲かせることができます。

nomadic-tribe

 

 

 

Epicurrence

アメリカ、コロラド州にてスキーやスノーボードを楽しみながら、2日間のグループディスカッションなどを行うカンファレンス用ランディングページ。

epicurrence

 

 

 

40075

インタラクティブで引き込まれるような没入感を演出した体験型ウェブサイト。表示されるシーンから隠れている3つの曲を探しましょう。

40075

 

 

 

Miu Miu Twist

Spaceキーでジャンプしながら、表示される香水を重ねて月を目指す新感覚のゲーム。香水をきれいに重ねると、高得点につながります。

twist-the-game

 

 

 

Fila Explore

fila-explore

 

 

 

Carbon 8

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

carbon-eight-8

 

 

 

Hallo Basis

ヒーローイメージにも描かれていた動くミニチュア人形たち、実はページの至るところに隠れています、見つけてみましょう。

hallo-basis

 

 

 

HiFly

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

hi-fly

 

 

 

Few and Far

心地よいなめらかなアニメーションをふんだんに利用したウェブサイトで、思わずコンテンツをスクロールしたくなるページ遷移やマイクロインタラクションは制作の参考にも。

few-and-far

 

 

 

Gucci Zumi

ウェブデザインにも力を入れている高級ブランドGucciのプロモーション用ページ。ブランドの世界観を見事に表現した、ストーリーテリング手法で商品を紹介しています。

gucci-zumi

 

 

 

Gucci Marmont

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

gucci-marmont

 

 

 

Stonewall Forever

stonewall-forever

 

 

 

Ada Sokol

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

ada-sokol

 

 

 

Daphné Launay Portfolio

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

daphne-launay-portfolio

 

 

 

Reform Collective

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

reform-collective

 

 

 

Spatzek Studio

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

spatzek-studio

 

 

 

Bahaa Samir

画像がゆらゆらと歪みながら切り替わる写真スライダーや、オシャレで高級感のあるセリフ書体とアニメーションの組み合わせも参考に。

bahaa-samir

 

 

 

Crafted

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

crafted-experience-basic

 

 

 

The Scott Resort & Spa

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

the-scott-resort-spa

 

 

 

The Balcony Garden

サイト名の通りベランダー、バルコニー、お庭づくりに欠かせない観葉植物用ベースなどインテリア家具、雑貨をまとめたサイト。

the-balcony-garden

 

 

 

Morenita

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

morenita

 

 

 

Ocean Vegabond

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

ocean-vegabond

 

 

 

Akaru

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

akaru

 

 

 

To Taste

美味しそうな料理レシピを更新するサイトで、海外らしいオシャレな料理が揃った、シンプルで読みやすいページデザイン。

to-taste

 

 

Mociun

不要な要素を取り除いたミニマルスタイルは、より写真や見出しを強調し、ブランドイメージをうまく演出できるテクニック。

mociun

 

 

 

Maxim Shkret

WebGLを使った画面全体が歪んだようなエフェクトが素敵で、マウスで表示されるオブジェクトを360度自由に回転させ、JPEG画像として有料ダウンロードできる仕組み。

max-shkret-artist-portfolio

 

 

 

Dogstudio

立体的に動く超リアルな犬をキャラクターが、ページスクロールに応じて360度の3D展開するアニメーションが印象的。

dogstudio

 

 

 

Dopper

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

ourmission-dopper

 

 

 

2019年紹介したWebサイトデザイン全まとめ

 

以下は、2019年のあいだに紹介した世界のクリエイティブな最新Webサイトデザインとなります。今回未紹介のデザインも一緒に確認してみませんか。

 

デザイン制作のインスピレーションや参考にしたい、2019年に入って注目を集めている、最新ウェブサイトデザイン30個をまとめています。 落ち着いた配色や
従来のありがちなウェブサイトではなく、アイデアや工夫を凝らした、デザイン制作の参考にしたい最新ウェブデザイン36個をまとめています。 ストーリーテリン
この記事では、最先端のWeb技術やデザイントレンドを取り入れた、世界の最新ウェブデザインをまとめてご紹介します。「デザインのアイデアが浮かばない」「クライアントの打
この記事では、デザイン制作のインスピレーションやアイデアの参考にしたい、クリエイティブな最新Webデザインをまとめてご紹介します。 時代に関係なく長年
この記事では、デザイン制作で参考にしたい世界の最新Webデザインをまとめて紹介します。 デザイントレンドを意識したサイトはもちろん、近未来を感じるイン
この記事では、ウェブサイトのクリエイティブなアイデアが欲しいときに参考にしたい最新デザイン42個をまとめてご紹介します。 美しいタイポグラフィーや配色

 

 

2020年のウェブサイトはどうなる?最新デザイントレンドをチェックしよう

 

以下の記事では、これから2020年に注目したいウェブデザインの最新トレンド8個をピックアップ、予想しています。「アッと驚かすデザインをつくりたい。」そんな思いにさせてくれる、たくさんのデザイン事例と一緒に紹介しています。

 

海外サイト 99designs で公開された 8 innovative web design trends for 2020 より許可をもらい、翻訳転載しています。