Advertisement

and-plants

 

「ウェブデザインのアイデアが決まらない」「なんとなくイメージはあるけど、どう作ればいいかわからない」「打ち合わせでのサンプル見本が欲しい」

 

この記事では、そんなときに役立つ世界中のクリエイティブな最新Webデザイン33個サイトをまとめてご紹介します。

 

すぐれたデザインをたくさん見ることで、アイデアやインスピレーションになるのはもちろん、Webデザイン力をあげるきっかけにもなります。

 

雰囲気やレイアウトはもちろん、配色やフォント選び、トレンド性のあるパーツの使い方など、用途に応じて参考にしてみるとよいでしょう。

 

 

Webデザイン力を鍛える最新良質ウェブサイト36個まとめ

 

Kazuki Noda Portfolio

まるで本物の木漏れ日がウェブサイトにかかっているようなエフェクトにはじまり、ブルーを基調とした落ち着いた配色、フォント選びまでセンスが光るポートフォリオサイト。

kazukinoda-1

 

 

 

まるでペンキで塗り替えるようなページアニメーション遷移が特長のホームページ。

We_are_THIRD___Home

 

 

 

Red and Green

ページのスクロールに合わせたユニークなアニメーションやカスタムカーソルなど、デザイン性にこだわった素敵サイト。

Red_and_Green

 

 

 

Tosaco ブルワリー

高知で「飲みやすさ」を意識したビールづくり、販売を行っているサイトで、愛情がつまったかわいい手描きイラストがアクセントに。

tosaco-brewing

 

 

 

St. Martin Agency

サイケデリックなグラデーションカラーが目を引くロシアのデザイン事務所の公式サイト。チーム紹介など他ページにも美しいグラデーションがふんだんに利用されています。

st-martin-agency

 

 

 

Richard Sancho

自由にかたちが変化するグラデーションをすりガラスから覗いているようなザラッとした粒状の質感を加えたユニークな背景。オリジナル性の高いおしゃれなセリフ書体を採用。

Richard_Sancho

 

 

 

Fran Hulet

ページ全体に淡いグラデーションを採用したポートフォリオサイト、各テキストリンクをクリックすることでナビメニューの代わりに。

frans-hulet

 

 

 

Discover Boat Tail

世界に一台しかない自分だけのクルマを制作するコーチビルド制度でデザインされた、ロールス・ロイスによる特別なランディングページ。夕焼けを連想させる高級感のある配色やフォント使い、レイアウトも参考に。

DISCOVER_BOAT_TAIL

 

 

 

Nasdaq 50

ナスダック50周年を記念した特別サイトで、これまでの歴史をインタラクティブにまとめています。マウスの動きに合わせて反応する、無数の美しいパーティクルデザイン。

nasdaq50

 

 

 

Myth Buster Challenge

コンテンツを読みすすめるにつれて奥へと進んでいるような没入感、未来感がたまらないサイト。オリジナル性の高いアートワークはもちろん、まわりに散りばめられたパーツなどどれもおしゃれ。

mythbusterchallenge-1

 

 

 

We Bulletproof Brands

Bulletproof-2

 

 

 

Noodz Nothing to hide

オランダ、アムステルダム発のデンタルケア商品を販売するサイト、ポップでSFレトロな配色が今っぽいデジアン。

wearenoodz-1

 

 

 

Wisr

スクロールに合わせて複雑な装置が動き出し、レール上をボールが転がりながらコンテンツも展開していく、ステーリーテリング手法を取り入れた体験型サイト。@オーストラリア

wisr-2

 

 

 

K72/a>

スクロールに応じて伸縮するカード型コンテンツなど、あっと驚くアニメーションが実装されたサイト。

k72-3

 

 

 

Niarra Travel

マウスカーソルに合わせて視点が立体的に動くヒーローデザインや縦型サムネイル画像を利用したユニークなレイアウト、山の頂上に登るフッターなどユニークさ満点。

Niarra-Travel-1

 

 

 

Grainne Morton

グリッドレイアウトをうまく活用したショッピングサイトで、高級感のある配色カラーパレットとセリフ書体の組み合わせがおしゃれ。

grainne-morton

 

 

 

the Figo

香港にあるドッグフレンドリーなカジュアルホテル。控えめなアニメーションやオーガニック系の丸みのあるシェイプ、ローディング用イラストなどに注目です。

the-figo

 

 

 

Boon Market

かわいいだけでなく環境のことも考えた良い商品だけを集めて販売しているショッピングサイト。サーモンピンクとブルー系の配色が素敵。

the-boon-market

 

 

 

Craie Craie

ウェブページにオーバレイで重ねるようにデザインパーツが立体的に移動する、シンプルさとユニークさを両立したフランスのウェブサイト。

craiecraie-1

 

 

 

Aroz Jewelry

aroz-jewelry-1

 

 

 

Details of War

まるでファッション雑誌を見ているようなシンプルな美しさが特長のEコマースサイト。フォントの選び方やサイズ、余白の使い方などミニマルデザインの参考に。

Details_of_war

 

 

 

Cyberphotos

cyberphotos-1

 

 

 

Redwood Empire

カリフォルニア州でつくられているワインの公式ウェブサイトで、ヴィンテージテイストで統一したデザインが素敵。イラストやスタンプ、セリフ書体、落ち着いた茶系の配色の使い方などを参考に。

redwood-empire

 

 

 

Aalto University

フィンランドのヘルシンキに拠点をもつ大学の公式サイトで、イノベーションを基礎に置く学校らしく、インタラクティブな地図をつかったキャンパスツアーをオンラインで体験できます。

aalto-university

 

 

 

Gage Hotel

宿泊ホテルの魅力を1ページにまとめたランディングページで、スクロールに応じたアニメーションが随所に採用されています。Instagramフィード表示も当たり前になってきましたね。

gage-hotel

 

 

 

Weleda

weleda

 

 

 

Pacific Counter

カラフルな配色やポップなシェイプや画像がブランディングとうまくマッチした、アメリカはフロリダ発の多国籍レストラン。

pacificcounter

 

 

 

Johannes Kempe

ページをスクロールしていくと顔中に、、。ぜひサイトを開いて確認してみましょう、遊び心満載のポートフォリオサイト。

Johannes_Kempe

 

 

 

Apose

画像とテキストにわずかなパララックス効果を演出し、高級感たっぷりなダーク系デザインを採用した高級時計の公式サイト。商品ページでの画像の魅せ方やスライダーの使い方なども秀悦。

apose

 

 

 

InteirorLab

interiorlab-creative-nights-2

 

 

 

DeNA x AI

ピクセルアニメーションをコンセプトにしたデザインは、思わずじっくり眺めてしまうほど。テクノロジーを活用した横浜DeNAベイスターズ選手の強化施策など、AIをフル活用した新しい時代に。

DeNA×AI

 

 

 

Fern

ストーリーテリングとアニメーションを得意としたアトランタのデザインオフィス。モーショングラフィックと細字セリフフォントの組み合わせ、上下左右ページスクロールなど視線を自然と誘導するテクニックの参考に。

Fern

 

 

前回のウェブサイトまとめも一緒に確認してみてはいかがでしょう。

この記事では、Webデザイン制作の参考にしたい最新ウェブサイト50個をセレクトしています。 さまざまなサイトを実際に見ることで、配色やレイアウト、フォ
この記事では、ウェブデザイン制作で活用したいユーザーの視線を釘付けにする最新UIインタラクション、アニメーションをまとめてご紹介します。 Webサイト

 

参照元リンク : And Plants