Advertisement

「ホームページのデザインが決まらない」「配色や書体などトレンドを意識したデザインって何?」「見本イメージとしてアイデアをふくらませたい」

 

この記事では、そんなときに役立つ最新ウェブデザイン36個をまとめて紹介しています。

 

どんどん登場する新しいウェブデザインをまとめて確認できるだけでなく、レイアウトや色使い、フォントなどの具体的な使い方を知ることができ、サイト制作にもオススメです。

 

 

脱まんねりデザイン!注目の最新ホームページ見本厳選まとめ

 

Stella Domo

限られた空間にほぼどこでも手軽に設営できる住居スタイル。購入から設置まで含んだフルプライスでの提供で、その手順を解説したアニメーションも秀悦です。

stelladomo-2

 

 

 

The Longest Road Out

手描きのイラスト地図をつかったローディング画面から、詳細に描かれたイギリスとアイルランドを巡る体験型ウェブサイト。ショッピング機能も違和感ありません。

the-longest-road-out

 

 

 

Naomi Osaka

女子プロテニスプレイヤー大坂なおみ選手の公式ホームページ。日本版とはデザインやコンテンツなども全く異なり、彼女のパーソナリティを全面に演出した素敵なサイト。

Naomi_Osaka

 

 

 

Superglow

まるで雑誌の表紙のようなヒーローセクションが特長の、デジタルコンテンツに特化したクリエイティブスタジオ。黄色とピンクのビビッドな配色も目立ちますね。

SUPERGLOW___Creative_Studio___Music___Lifestyle

 

 

 

Quentin Goupille

フランスのイラストレーターの作品をコレクションしたポートフォリオサイト。カードを立体的にめくるようなエフェクトが印象的で、クリックで各コンテンツに移動します。

Quentin_Goupille

 

 

 

BOT – Bottle on the Table

ブランドカラーに合わせた鮮やかな配色や、ユニークな図形シェイプ、大文字テキスト、アニメーション、レイアウトなどを利用した参考サンプル例として。

BOT---Bottle-on-the-table

 

 

 

Club Local

カナダのモントリオールで造られている、おしゃれなラベルのアルコール飲料の販売を行う会社のホームページ。素材写真の美しさはもちろん、文字サイズや画像の配置などもシンプルでおしゃれ。

Club_local_-_Cocktails___Spirits-2

 

 

 

福岡県立バーチャル美術館

福岡県立美術館に収蔵している作品をオンライン上で楽しむことができる新しい試み。マウススクロールで吸い込まれるようなアニメーションエフェクトは必見です。

fukuoka-kenbi

 

 

 

ICS x MDX x DYU Graduation Exhibition

卒業制作の作品をアニメーションをたっぷり利用しウェブ公開しているランディングページ。淡いパステルカラーの配色も参考にいかがでしょう。

ICS×MDX×DYU_JOINT_GRADUATION_EXHIBITIOn

 

 

 

平戸城 懐柔櫓

別名亀岡城とも呼ばれ、築城400年を経た現在もなお、城主、つまりお殿様が存在する珍しい城に宿泊できます。

hirado-jou

 

 

 

水尾

長野県の最北、奥信濃と呼ばれる豪雪地で作られている地酒の販売サイト。

mizuo

 

 

 

日本草木研究所

軽井沢・岐阜・高知をはじめ各地に研究拠点を持ち、全国の里山に眠る植生の「食材としての可能性」の発掘を行っているそう。

nippon-kusaki-lab

 

 

 

Slate Milk

プロテインドリンクの販売を行っている企業サイトで、伝えたいことを分かりやすくまとめ、はじめて訪れたユーザーも迷うことなくコンテンツにたどり着くことができます。

slate-milk

 

 

 

Spotify Design

スウェーデンのデザインチームによるデザインメディアで、ピンク色の配色に大胆な手描きの花柄イラストが目を引きます。

spotify-sweden

 

 

 

Bolixir

まず注目を集めるヒーローセクションには移しい動画が利用され、スクロールでコンテンツへと移動します。グラデーションの使い方やパスに沿ったテキストアニメーション、おしゃれなセリフ書体などトレンド満載。

bolixir

 

 

 

Miti Navi

自分だけの夢のボートをオーダーできるフランスの画期的なサービス。全長26mから50mまでの4タイプのヨット。

Miti-Navi

 

 

 

MSI マッチメーカー

マウスで正確な円を書いたり、四角形を高速回転させたり、同じ形のペアを一致させたりと、ミニゲームを通じて世界中のユーザーとリアルタイムで対戦できます。豪華賞品も用意されていますよ。

msi-match-maker

 

 

 

Dpt.

AR(拡張現実)の技術に特化したフランスの会社のホームページ。ページのローディング画面、アイコン、ナビメニューなどあらゆる要素に控えめなアニメーションをふんだんに利用しています。フォント選びも参考に。

dpt

 

 

 

Tribes of Europa: Catch the Cube

SF映画のようなインターフェースデザインと電子音が印象的な特設サイトで、Netflixコンテンツ専用アプリをダウンロードし、AR空間に浮かぶ「キューブ」を捕獲しましょう。

tribes-of-europa

 

 

 

Ljubicic Tennis Academy

アドリア海の北部にあるクロアチアのロシニ島にある、プロのテニス選手を目指すアカデミースクールの公式ホームページ。最高の環境で、最高のパフォーマンスを。

Ljubicic-Tennis-Academy

 

 

 

Scepterand Sword

ボトルに金色の装飾を施した、高級感ありすぎなワイン販売用のランディングページ。マウススクロールで水平方向にコンテンツが展開します。

Scepter-&-Sword-Wine-Co

 

 

 

Under Armour

スポーツブランドの公式サイトで、Instagram投稿と連動したコンテンツ展開は今後ますます注目の分野と言えるでしょう。

under-amour

 

 

 

Gucci Osteria

Gucci-Osteria

 

 

 

No-Code Conf 2021

ページのスクロールに合わせて丸い玉がスルスルと移動しながら、視線を次のコンテンツへとうまく促します。ザラッとした質感やレトロ・フューチャーな配色も素敵。

No-Code-Conf-2021

 

 

 

Instabase

ランディングページのお手本のようなウェブサイト。レイアウトや配色、書体選びまで控えめですが、個性が光るレイアウト作成の参考にいかがでしょう。

Instabase

 

 

 

Principio

発行させた蜂蜜をつかった新しいドリンクで、ページのスクロールに合わせてボトルがくるくると回転しながら、追従してくるユニークな仕掛けも。ページ全体に利用された手描きイラストもオリジナル性を高めます。

Meadlight_presents__Principio_is_a_fermented_honey_drink_-2

 

 

 

D.M.

ブラジルで作られているスパークリングワインの販売サイト。フォントと画像のみのミニマルスタイルで、超巨大な文字サイズや自由に画像を配置したレイアウトが、自然とユーザーの視線を誘導します。

DM

 

 

 

JRM BDR

フランス拠点のUIデザイナーのポートフォリオサイト。背景全体で文字テキストがくるくる回転するなど、シンプルながら目を引くデザインが特長。

jrm-bdr___presentation__ui_designer__front-end_developer

 

 

 

bake-inc

 

 

 

Norda

ランニングやトレイルに特化した靴を販売しているショッピングサイト。必要最低限のデザイン要素のみを利用することで、コンテンツにより注目が集まるテクニック。文字サイズやレイアウトでデザインもがらりと変わります。

norda

 

 

 

Bloomers

ブラジルのメディアサイトですが、日本ではあまり見かけない配色の組み合わせだったのでメモとして。

Bloomers

 

 

 

Etinenne Barbedette

画像をシールで止めたり、蛍光マーカーを引いたりとアナログ要素をうまく加えたミニマルなデザインが魅力的。マウススクロールに合わせたなめらかなアニメーションがよりデザイン性を高めています。

Etienne-Barbedette---Portfolio

 

 

 

Amuse Bouche

魚が骨になっていくローディングアニメーションに始まり、ストーリーテリング手法を用いたレストラン用ランディングページ。思わずスクロールしたくなってしまいます。

Home___Amuse-Bouche

 

 

 

Mission Ionosphere

上から迫ってくる障害物や敵を矢印キーまたはマウスで左右に避けながら、ゴールを目指すオンラインゲーム。

mission-ionosphere

 

 

 

First On Soundcloud

SoundCloudでブレイクしているアーティストを発掘、紹介しているプログラム。使われている極太サンセリフや手描きフォントの組み合わせも参考に。

First_on_SoundCloud

 

 

前回のホームページ見本と合わせて確認してみてはいかがでしょう。

 

参照元リンク : 噂で始まる京都観光 ポマガジン