Advertisement

kakiyama-1

 

この記事では、Webデザインのアイデアがつまった、注目したい最新Webサイトデザイン35個をまとめてご紹介します。

 

トレンドが目まぐるしく変化するWebデザインを追いかけるのには、できるだけ多くのウェブサイトを実際に体験し、さまざまな視点でデザインを見る目を持つことが重要です。

 

世界中の優れた実例サンプルを実際に見ることで、レイアウトはもちろん、配色やフォント、素材、実装プログラムなど、ページを構成しているデザインパーツなどの新しいアイデアを参考にしてみましょう。

 

zenly
この記事では、今後のWeb制作で参考にしたい最新Webサイトデザイン50個をまとめてご紹介します。 世界中の優れた実例サンプルを実際に見ることで、印象
plink
この記事では、デザイン制作のインスピレーションや参考にしたい、2020年に入って注目を集めている最新ウェブサイトデザイン37個をまとめています。 20
one-upon-a-time-in-hollywoood
当サイトでは、定期的に新しく公開された最新Webサイトデザインをまとめていますが、今回はいつもとは異なり、2019年のベストWebデザイン50個を厳選、ピックアップ

 

 

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

 

Amino Mason

ボタニカルヘアケアブランドの公式サイトで、ブランドイメージぴったりのサイトは、お洒落なロゴはもちろん、上下左右自由に動くパララックエフェクトにも注目です。

amino-mason

 

 

 

井筒

神社仏閣用衣裳、調度品をお届けしている会社の公式ホームページ。モノクロベースの美しいレイアウトは、コンテンツごとに若干色を変更するなど、参考

izutsu

 

 

 

サクラクレパス

膨大な商品の中から目的のアイテムを見つけやすい工夫が随所にみられるデザイン。スクロールに応じてアニメーション展開する、アイコン付見出しタイトルも目を引きます。

sakura-craypas

 

 

 

Pen 特別編集合

Flexboxを利用することで、グリッドを無視した自由なコンテンツレイアウトを実現したメディアサイト。思わずクリックしたくなるサムネイルの並べ方や控えめなアニメーションエフェクトなど。

pen-special

 

 

 

赤坂柿山

歴史のあるあられ、おかきの専門店という業種と使用されている明朝体の雰囲気が見事に調和したデザイン。余白スペースを十分確保することで、読みやすさ向上だけでなく、コンテンツにうまく視線を誘導します。

kakiyama-1

 

 

 

ドラえもん

コミック連載開始から50周年を迎えた、日本の国民的キャラクター「ドラえもん」とのコラボで実現したグッズの販売サイト。雲の形をした独自のシェイプに、流れる見出しタイトルの表示スタイルも素敵。

felissimo-doraemon

 

 

 

Future London Academy

黄色と黒のコントラストがはっきりしたデザインが印象的だったサイト。太字の巨大文字テキストを活用した、2020年に入りよく見かけるスタイルのひとつ。

future-london-academy

 

 

 

Olivier Gillaizeau

文字テキストにカーソルを合わせると、サムネイルが飛び出すエフェクトが素敵。ページスクロールで背景の美しいグラデーションが、立体的な奥行き感を表現しながら変化します。

olivier-gillaizeau

 

 

 

Macbook Pro 16 Inch

スクロールに合わせてコンテンツがアニメーション付きで自由に展開する、ストーリーテリング手法を取り入れたランディングページ。思わずページ下まで読み進めたくなってしまいます。

macbook-pro-16inch

 

 

 

Madies

ページスクロールに合わせてナチュラルな図形シェイプや文字テキストをアニメーション表示することで、無意識にコンテンツに目がいってしまう施策も。

madies

 

 

 

The Pen Tool

カラフルな配色を使った個性の光るデジタルマーケット。モダンレトロな雰囲気は、2020年に注目を集めているスタイル。

thepentool

 

 

 

Lucky Beard

控えめなパステルカラーの配色が素敵で、四角形やサークル円などシンプルな図形とアニメーションを組み合わせたレイアウトが印象的。

lucky-beard

 

 

 

BASIC

シンプルなレイアウトにアニメーションやスクロール、ホバーエフェクトなど豊富な機能がつまったサイト。ピンク色を基調とした、控えめで落ち着いた配色カラーパレットは個人的にメモ。

basic-san-diego

 

 

 

Junction

独特なオリジナルフォントを利用したデザインに、滑らかなページ遷移の他、使い勝手の良いナビメニューの仕様は参考に。

junction

 

 

 

Polly Kole

電光掲示板に写ったナビメニューをクリックすると、ピンク一色の世界に旅立つストーリー風に仕立てた、体験型のインタラクティブなデザイン。

polly-kole

 

 

 

Say Cheese

写真撮影の基本について、ストーリーテリング手法を使いながら、インタラクティブなサンプル付きで解説したガイドブック的サイト。

say-cheese

 

 

 

Goodfish

魚をベースとしたスナック菓子のランディングページで、ページ随所に手書きのテイストを加えることで、ブランディングとうまくマッチするデザインに。波のようにゆらゆらと揺れる境界線もポイント。

goodfish

 

 

 

Vanmoof

新しく発売された、自転車大国オランダ初の電動アシスト自転車。新機能を動画を交えながらわかりやすく伝え、赤いサークルで囲まれた箇所をクリックすると、。

vanmoof

 

 

 

Stone & Style

画面中央に立体的に浮かぶ石の塊が、ページスクロールで少しずつ削れていくエフェクトが魅力的なサイト。モノクロで統一したミニマルスタイルに、インタラクティブなエフェクトを実装したサイトが増えています。

stone-style

 

 

 

Rino & Pelle

高級感のあるセリフ書体とスクロールに合わせたパララックスエフェクト、ランダムなレイアウトなどトレンドを盛り込んだサイト。

rino-pelle-1

 

 

 

Polygon

ページを開くと、まるでリビングルームに照明が灯ったようなエフェクトではじまります。さらに左右にドラッグすると、部屋全体をチェックできる建築オフィスらしい仕掛けも。

polygon

 

 

 

Robin Golf

スクロールに応じた控えめなアニメーションが目を引くサイトで、ナチュラルなシェイプと素敵な配色カラーパレットも参考に。

robin-golf

 

 

 

Wray & Nephew

スクロールに応じてプラカップがページ全体を動き回り、ジャマイカンカラーが印象的。太字サンセリフとブラシ手書き文字の組み合わせも、サイトイメージとマッチしています。

wray-nephew

 

 

 

Type Kontrapunkt

type-kontrapunkt-com

 

 

 

Jeans for Refugees

無数の糸や端切れをつかったテキストエフェクトが目まぐるしく変化する、ステーリーテリング仕立てのプロジェクトサイト。

jeans-for-refugees

 

 

 

Charlie Montagut

一見ランダムに並べられた文字列にマウスカーソルを合わせると、サムネイルが画面全体に表示されるユニークなエフェクトが実装されており、各ページへのナビメニューの役割に。

charlie-montagut

 

 

 

Thierry Chopain

ページをスクロールしたときに、とにかく気持ちの良い絶妙なアニメーションが特長の個人ポートフォリオ。モノクロでまとめたミニマルなデザインも素敵です。

thierry-chopain-portfolio-2020

 

 

 

Underpromise.

アムステルダムにあるデザインスタジオのポートフォリオ。お洒落なセリフ書体が印象的で、サムネイル付リンクホバーやスクロールエフェクト、カスタムカーソルなど独自機能が目白押し。

underpromise

 

 

 

Guillaume Gouessan

フランスを拠点にするフリーランサーのポートフォリオサイト。ページをスクロールしていくと、実はワークスペースのモニターを眺めていた、そんなギミックが。

guillaume-gouessan

 

 

 

The A-Z of AI

人工知能についてアルファベット順に紹介しているガイドサイト。イラストを用いることで全体の統一感だけでなく、伝わりやすいデザインに仕上げています。

atozofai

 

 

 

Corentin Bernadou

まるで雑誌をみているような雰囲気のサイトは、巨大に表示されたセリフ書体の見出しタイトルが全体のイメージをうまく演出しています。縦型ナビメニューも人気ですね。

corentin-bernadou

 

 

 

Muteza

muteza

 

 

 

Kati Forner

パッケージやブランディングなどを得意とした、ロサンゼルスを拠点としたクリエイティブエージェンシー。巨大なタイポグラフィー、高級感のあるセリフ書体、余白スペース、スクロールエフェクトなどトレンドも豊富。

kati-forner

 

 

 

Pitok Motor Museum

画面全体に表示された文字リンクにカーソルを合わせると、インタラクティブにサムネイルがポップアップ表示される、最近よく見かけるエフェクトのひとつ。

pitoko-motor-museum

 

 

 

Mix legno

没入型のストーリーテリング手法をつかって、ページを最後まで読みたくなる気持ちの良いスクロールエフェクトを実装。たっぷりの余白スペースを確保することで、可読性がアップするだけでなく、コンテンツにうまく注目を集めることができます。

mixlegno

 

サムネイル@ : 赤坂柿山