Advertisement

unleash-the-beast

 

この記事では、最先端のWeb技術やデザイントレンドを取り入れた、世界の最新ウェブデザインをまとめてご紹介します。「デザインのアイデアが浮かばない」「クライアントの打ち合わせで方向、デザイン性を共有したい」そんなときに役立つウェブ見本が揃います。

 

セリフ書体などの文字テキストに、ちょっとした動きを取り入れるのがトレンドとなっており、落ち着いたナチュラルカラーの配色やアウトライン文字のユニークな利用法、WebGLによるインタラクティブなデザインなど、今後の参考にしてみてはいかがでしょう。

 

 

Webの最先端!注目すべき最新ウェブデザインまとめ

Few and Far

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

few-and-far

 

 

 

To Taste

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

to-taste

 

 

 

Home Societe

スクロールに合わせて水平方向にコンテンツが移動するだけでなく、表示される画像にもズームエフェクトを加えるなど、エレガントで魅力的なブランドコンセプトを演出しています。

home-societe

 

 

 

Sabcomeed

希少なイエメン・モカコーヒーを生産、販売しているサイトで、コーヒーの木のイラストをつかった、ストーリー性の高いデザインレイアウトが特長。

sabcomeed

 

 

 

Lamborghini Porrentruy Switzerland

スーパーカー、ランボルギーニの各モデルをスタイリッシュな魅せ方で展開する、ダーク系ランディングページ。

lamborghini-porrentruy-switzerland

 

 

 

Gucci Zumi

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

gucci-zumi

 

 

 

Gucci Childrens Collection SS19

こちらもGucciが手がけた、キッズ向け高級アパレルラインの紹介ページ。画像を多用することでブランドイメージ、コンセプトをうまく表現しながら、スクロールするとページ全体が歪むアニメーションなど遊び心も忘れません。

childrens-collection-ss19

 

 

 

Design in Motion Festival

オランダ、アムステルダム中央駅構内にある、80のスクリーン広告画面を使って開催される、「モーション・デザイン」に特化したフェスティバルのランディングページ。

design-in-motion-festival

 

 

 

Middle Fork Rapid Transit

オレゴン州にあるサーモン川を下るアドベンチャーツアーの紹介ページ。

middle-fork-rapid-transit

 

 

 

Ark Shelter

組み立て式で、家具もすべて揃ったモジュール式住宅ユニットの販売を行っている会社で、一日で家を立てることができるそう。

ark-shelter

 

 

 

オーストリアでできる50のこと

表示される「オースリアでやりたいこと」を選択、自分だけのバケットリストを作成すると、完成したムービをSNSでシェアできる参加型ウェブサイト。

bucketlist-austria

 

 

 

Dogstudio

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

dogstudio

 

 

 

日比谷音楽祭

ページ下に配置されたアイコン付ナビメニューをクリックすると、水平方向にコンテンツがスライドで切り替わります。GIFアニメーションを使ったイラストがユニーク。

hibiyamusicfes

 

 

 

キューピー

おすすめレシピや旬の野菜、素材や料理の基本などと一緒に、商品情報をシンプルにまとめています。

kewpie

 

 

 

やざわ虎クリニック

長野県にある虎が目印の内科・外科クリニック。ウェブサイトにもかわいい虎のキャラクターがいたるところに隠れていました。

yazawa-tora-clinic

 

 

 

Camille Pawlak

スクリーン画面の中央に表示されたサークル円が、クリックでフルスクリーン展開するポートフォリオサイト。

camille-pawlak

 

 

 

ASCC

スクロールに合わせて、文字テキストや画像などがアニメーション付きで表示されるなど、思わずコンテンツを読み進めたくなる工夫が随所に。

ascc

 

 

 

Alacran Group

アンビエントな音色と共に表示される無数のドットを線で結び、自分だけのオリジナル星座をデザインできるインタラクティブな体験型サイト。

alacran-group

 

 

 

Montreux Jazz Festival

表示される音楽ジャンルの好き嫌いを左右ドラッグで決めていくと、自分にあったイベントのプログラムを自動表示してくれます。

montreux-jazz-festival

 

 

 

100 Years of Georgia’s First Democratic Republic

日本人にはあまり馴染みのないヨーロッパの国「ジョージア」の歴史を知ることができ、ストーリーテリングで展開されるコンテンツは秀逸。

26-may

 

 

 

Davide Perozzi

文字テキストをメインにしたサイトですが、文字テキストのサイズや配置、distortion歪みエフェクト、カスタムマウスカーソルなどインタラクティブな仕掛けが満載。

davide-perozzi-portfolio

 

 

 

Closer Cards

さまざまな質問が書かれたカードを5枚引き、会話を進めながら、もっとも面白かった人を決めるゲーム感覚のウェブサイト。

closer-cards

 

 

Pantone Color of the Year 2019

Pantoneが毎年発表している今年の色「Color of the Year」で、2019年の色として選ばれた「リビングコーラル」をストーリーテリング手法で解説したサイト。

pantone-color-of-the-year-2019

 

 

 

Corpus

お好みの匂いを3種類選び、自分だけのデオドラントセットを作成できるショッピングサイト。

corpus

 

 

 

Fabio Fantolino

イタリアを拠点に活動するイタリア人デザイナーのポートフォリオサイト。なめらかなアニメーションやカスタムマウスカーソル、ミニマルスタイルなど、最近のトレンドを取り入れたシンプルな実例サンプルとして。

fabio-fantolino

 

 

 

First Frame

画面が乱れるようなグリッチエフェクトを多彩に活用したウェブサイトで、ページ遷移による切り替えやボタンホバーエフェクトの他、スクロールで文字テキストにもグリッチエフェクトが。

first-frame

 

 

 

Nature Elixir

画面をクリックすると、水面に波紋をつくることができるユニークなトップページ。「SHOP」ボタンから商品の詳細を確認できます。

nature-elixir

 

 

 

Fleava

制作実績を印象的なストーリーテリング手法をつかって紹介するポートフォリオサイト。控えめなアニメーションやカスタマイズされたマウスカーソル、ホバーエフェクト、スライダーなどにも注目です。

fleava-digital-agency

 

 

 

Future of Sustainability

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

future-sustainability

 

 

 

Gautier Maillard

個人ポートフォリオサイトのひとつで、ビリビリと紙をやぶったような写真加工をスライダーを利用したユニークで美しいアイデア。

gautier-maillard

 

 

 

Untamed Emotion | GETZ

エレガントなセリフ書体がブランドイメージとマッチし、各コンテンツにもデザイン性の高い画像をアニメーション付きで展開しています。

getz

 

 

 

Gild Group

ところどころページに穴が空いたようなスペースがあり、スクロールすることで背景を覗くことができるユニークなアイデア。

glid-group

 

 

 

Kombu

世界的に人気となっているコンブチャの飲料ドリンク用ランディングページ。カラフルなストライプ柄が揺れながら切り替わります。

kombu

 

 

 

le cab com

カラフルで親しみやすい配色カラーパレットに、手書きイラストやアニメーションといった視覚的なデザイン要素で分かりやすくコンテンツを展開しています。

le-cab-com

 

 

 

Ledger Investing

美しいグラデーションカラーで統一された配色の参考にしたいサイトのひとつ。控えめなパララックスエフェクトなど、マイクロインタラクションもうまく採用されています。

ledger-investing

 

 

 

Ocus

ビジュアルコンテンツの制作を得意としたデザイン会社で、トップページのインタラクティブで吸い込まれるようなスライダー展開は、思わず何度もスクロールしてしまいそう。

ocus

 

 

 

Picture Start

映画やTV番組などあらゆるメディアのクリエイティブ制作を手がけるアメリカ、ハリウッドにあるデザイン会社のポートフォリオ。

picturestart

 

 

 

Polugar Russian Breadwine

歴史のあるロシアのお酒の紹介ページで、マウスカーソルの動きに合わせて、細いデコレーションラインが背景に描かれるなど、高級感のあるサイトデザインに仕上がっています。

polugar-russian-breadwine

 

 

 

Tilt Story

画面全体を活用した動きのあるスライダーをつかったポートフォリオサイトで、ページ遷移なしでのよりシームレスなコンテンツ展開は、アプリのようなシームレスな操作性を実現できます。

tilt

 

 

 

Square Interface Game

画面全体を動き回るインタラクティブな操作性は、慣れるまでにすこし時間がかかるかもしれません。リスト一覧で高速スクロールをすると、、。レッツロックンロール。

square-interface-game

 

 

 

Steven Hanley

steven-hanley-portfolio

 

 

 

The Hook Group

ソーシャル・マーケティングを得意とした会社のポートフォリオサイトで、ページ遷移やホバーエフェクトなど随所に魅力的なマイクロインタラクションを採用している好サンプル例として。

the-hook-group

 

 

 

The Next Level as Monaco

サッカーをするのに最高の環境が揃ったモナコのパフォーマンススクール。フルスクリーン画面で切り替わるナビメニューによって、お好みのコンテンツに移動しやすい工夫も。

the-next-level-as-monaco

 

 

2019年のデザイントレンドも押さえておこう。

ウェブデザインのアイデアが決まったら、他のトレンドを一緒に利用しても良いでしょう。これまでに紹介した最新ウェブデザイン、トレンドをまとめています。

 

konoradiogayabai
従来のありがちなウェブサイトではなく、アイデアや工夫を凝らした、デザイン制作の参考にしたい最新ウェブデザイン36個をまとめています。 ストーリーテリン
latestweb2019feb
デザイン制作のインスピレーションや参考にしたい、2019年に入って注目を集めている、最新ウェブサイトデザイン30個をまとめています。 落ち着いた配色や

 

より詳しいウェブデザイントレンドを、17のポイントに分けて紹介しています。

2019designtrend
海外サイト DesignModo で公開された Top 17 Web Design and UI Trends for 2019 より許可をもらい、翻訳転載

 

2018年のウェブデザインにも目を通しておくと、ウェブの流れ、変化が分かりやすいかもしれません。

best-of-webdesign-2018-pt1
当サイトでは、定期的に魅力的な最新ウェブサイトのデザインをまとめて紹介していますが、2018年は革新的なエフェクトやインタラクティブな仕掛けをつかったサイトが、たく
top-hearted-codepen-2018
CodePen は、ブラウザ上でコーディング、プレビュー確認ができ、ソースコードの共有を行うことができる、世界でも人気のウェブサービスです。 今回は、

 

サムネイル@ : Unleash the Beast – Dodge