Advertisement

osaka-mania

 

この記事では、Webデザイン制作の参考にしたい最新ウェブサイト50個をセレクトしています。

 

さまざまなサイトを実際に見ることで、配色やレイアウト、フォント選びなど、自分のデザインの引き出しを増やしてみましょう。

 

シンプルで美しいWebサイトから、ハイレベルなコーディングが必要なものまで制作のモチベーションをアップさせるデザインが揃います。

 

 

Webデザイン制作の参考にしたい最新ウェブサイトまとめ

 

北斎づくし

生誕260年を記念して今年の夏開催される北斎展の公式ページ。北斎漫画、冨嶽三十六景などもコンプリートでの展示だそう。

hokusai-2021

 

 

 

Pola 2029 Vision

妻のカサカサした手を治したい、という想いからはじまった化粧品会社ポーラの企業理念を、インタラクティブなアニメーションとともに表現しています。

POLA_2029_VISION

 

 

カロリーメイトリキッド

プログラマーに向けたデザインが話題となったカロリーメイトのプロモーションページ。コンテンツの表示アニメーションには特に注目です。

calorie-mate

 

 

 

Yamauchi No.10 Family Office

任天堂の創業家・山内家一族によるゲーム世界をそのまま表現したようなサイト。ボクセルアートによるアニメーションが随所に。左側のアイコンで、通常レイアウトへの切り替えが可能です。

yamauchi-no10-family-office

 

 

 

212 Skate Heroes

矢印キーでスケートボードを操り、障害物をジャンプで避けながらポイントを稼ぐオンラインゲーム。ニューヨークのリアルな街の風景が描かれています。

212-heros-skate-game

 

 

 

To the Stars!

12日間に渡って出題されるミッションをクリアし、スターポイントを獲得するオンラインゲーム感覚のサイト。壁紙の無料ダウンロードも。

to-the-stars

 

 

 

Tecate Pa’l Norte Virtual

バーチャルオンライン音楽フェスティバルの公式サイト、残念ながら南アメリカからのみ視聴可能となっていますが、圧倒的な3Dライオンは迫力ありすぎ。

Tecate-Pa'l-Norte-Virtual-2021

 

 

 

Singita

アフリカにあるサファリロッジの公式サイト。動画と画像を効果的に活用することで、壮大な自然を感じることができるつくりに。

singita

 

 

 

Slow

毎日のライフスタイルを見つめ直すきっかけをつくるコンテンツが特長のオンラインメディア。美しい動画や写真の独特の世界観を楽しみましょう。

slow

 

 

 

Bennett Tea

紅茶の各フレーバーを紹介するプロダクトページでは、画面の切り替えに合わせて茶葉がバラバラと画面上に撒き散らせれる面白いエフェクトも。

bennett-tea-2

 

 

 

Wild Souls

コンテンツの切り替わりに合わせてカラフルな背景デザインがポップな雰囲気のサイト。パッケージデザインともマッチしたフレッシュさが特長。

wildsouls

 

 

 

Wax Poetics

音楽情報メディアとして新しくリニューアルされた老舗音楽サイト。音楽好きにはたまらない濃い内容を紹介しています。目を引くアニメーションエフェクト。

waxpoetics-1

 

 

 

Street Art News

世界各地のストリートアート、グラフィックアートについてまとめためずらしいブログメディア。アートストアでの販売も行っており、違和感のない商品の魅せ方は参考になりそう。

street-art-news

 

 

 

Coffee Supreme

東京にも出店しているニュージランド発のコーヒーロースター。

Coffee_Supreme

 

 

 

Chateau Boll

Chateau_Boll_

 

 

 

Out of the Valley

自然のリズムと共に生活する人々のための建物をコンセプトにした、イギリスの建築事務所。

out-of-the-valley

 

 

 

Armadillo: Rhythm of Nature

ブランドん世界観をチルアウトな音楽と幻想的な動画や画像で伝える新しいかたちの没入型ウェブサイト。

rhythm-of-nature

 

 

 

Black Pistol Fire

音楽グループの新アルバム発表に合わせて公開されたプロモーションページ。矢印キーで入るお店を決めると、動画や曲、コンセプトなどをそれぞれ確認できます。

black-pistol-fire

 

 

 

Nordic Eye

nordic-eye

 

 

 

The Great Lake

アメリカにあるミシガン湖についてわかりやすく知ることができる特設ページ。

grerat-lake-michigan

 

 

 

Zmaslo

まるで画面上に泡が流れ出たような、透明感のあるアニメーションエフェクトが特長のウェブサイト。

zmaslo

 

 

 

Blumenkopf

blumenkopf

 

 

 

The Covid Art Museum

新型コロナウイルスで変化したライフスタイルを切り取った、アート性の高い写真を集めたオンラインミュージアム。

covidartmuseum-1

 

 

 

Crusta C

スクロールに合わせて1本のラインがページ下まで導くユニークな仕掛け。

crusta-c

 

 

 

For the Love of Bread

定期的にアップされる動画エピソードとウェブサイトを連携し、パンについてあらゆる角度で楽しむことができるドキュメンタリー。

for-the-love-of-bread

 

 

 

EASOL

太字の見出しタイトルが目を引くユニークなレイアウト。随所にアニメーションを追加したり、画像をレイヤー状に重ねるなど、レイアウトに悩んだときに参考にしたいサイト。

easol

 

 

 

人と尾道

「会いたい人ができると、そこは、帰りたいまちになる。」をコンセプトに尾道の魅力を伝えるポータルサイト。技術面では、CSS Gridを活用したレスポンシブ対応テクニックや、美しい明朝体フォントの縦書き、なめらかなアニメーション効果など参考にしたい点も多数。

hito-onomichi

 

 

 

ポパイマガジン

まるで雑誌を開いているような感覚にさせるレイアウトが素敵なメディアサイト。記事ごとに文字や背景色が異なるなど、遊び心も満載。

popeyemagazine

 

 

 

How many Plants

ステイホームで育てるひとも増えた観葉植物について、かわいい手書きイラストで紹介しているサイト。植物にカーソルを合わせると水をあげることができる工夫も。

How-Many-Plants

 

 

 

Finely Crafted

スタジオを3D空間で再現したゲーム要素を取り入れた、インタラクティブな没入型サイトで、スニーカーができるまでを詳しく解説したストーリーテリングが素敵。

jack-daniels-the-snhoe-surgeon

 

 

 

At Glacier’s End

アイスランドの氷河を上空1,000メートルから撮影した様子を紹介するプロジェクトサイト。

At-Glacier's-End

 

 

 

Juicy Marbles

植物由来の成分で作られた、信じられないほど柔らかい代替肉の公式サイト。

Juicy_Marbles

 

 

 

Kategora

ヨーロッパを拠点とした建築オフィスの公式ページで、リキッド状の流れるようなアニメーションエフェクトが、高級感のあるブランディングにもうまくマッチしています。余白スペースのとり方も参考に。

kategora-1

 

 

 

La Nouvelle

コンテンツが切り替わり時に、消しゴムで消したり、ゆらゆらと水面のように揺れるなど、オーガニックな見た目を演出しています。ピンク色を中心とした落ち着いた配色も素敵。

La-Nouvelle

 

 

 

Lens

マウスカーソルに合わせて、まるでプレゼンテーションを見ているような縦横無尽なレイアウト変更を楽しむことができます。

lens-science-1

 

 

 

Life in Vogue

サイトを開くと、飛び出す絵本のようにストーリーが展開する体験型ウェブサイト。

life-in-vogue

 

 

 

Marcus Eriksson

グリッドを無視した自由なレイアウトに配置されたポートフォリオサイト。たくさんの画像をページ移動に関係なくシームレスに閲覧できる工夫が随所に。

marcus-eriksson-1-1

 

 

 

Matthew Fisher

ページのスクロールに合わせて流れるように文字テキストや画像が表示されるアニメーションが特長。高級感のあるフォント選びも参考に。

Matthew_Fisher

 

 

 

Napa Valley

アメリカでワイン製造の盛んなナパバレーについて紹介したプロモーションページ。高級感のある配色やフォント選びにも注目。

napa-valley

 

 

 

Oxmeco

高級感と信頼感のあるセリフ書体を利用し、落ち着いた色合いでコンテンツを整理するなど、シンプルで親しみやすいつくりに。

Omexco

 

 

 

Penderecki’s Garden

ポーランドの著名な作曲家、クシシュトフ・ペンデレツキと出会うことができるバーチャル空間。画面上に散らばった無数のアイコンをクリックすると詳細ページへと移動します。

Penderecki's

 

 

 

Playa Grande Golf & Ocean Club

ドミニカ共和国にある高級リゾードホテルの公式サイトで、スクロールに応じたなめらかなコンテンツ表示、美しいセリフ書体などラグジュアリーな雰囲気を真似したいときに。

playa-grande-golf-ocean-club

 

 

 

Plus

水に溶ける紙ペーパー式の新しいボディーソープを提案する商品紹介向けランディングページ。持ち運びやすく、デザインもおしゃれ。

plus-1

 

 

 

Prometheus

一台のスポーツカーを中心に、会社の概要をさまざまな角度からアニメーションイラストと共に紹介するインタラクティブなストーリーテリング。マウスカーソルに合わせてストーリーが展開しているような感覚に。

Prometheus_Fuels

 

 

 

QQ Studio

q-studio

 

 

 

Evernest

スタイリッシュな住宅を圧倒的なビジュアルで紹介するウェブサイト。思わず住んでみたいと思わせる動画や内装インテリアの魅せ方などもゴージャス。

selected-evernest

 

 

 

Sentempo

イタリアにあるデザイン事務所の公式サイト。スムーズなアニメーションをつかったビジュアルアニメーションを得意としています。

Studio-Sentempo-3

 

 

 

Superlist

サイト全体に3D要素を組み合わせることで、奥行き感のあるミニマルデザインに。さらにアニメーションを加えることで、ふわりとした特有の浮遊感を演出しています。

superlist

 

 

 

Youthquake

マウスカーソルに合わせて、画像が水面のようにユラユラと動く、シンプルですが効果的なアニメーション。

youthtakje

 

 

前回まとめからおよそ3ヶ月ぶりとなった今回ですが、毎回ワクワクする新しいサイトが登場しています。

 

この記事では、進化を続けるWebデザインの最新の実例サンプル33点をまとめてご紹介します。 世界中の優れた実例サンプルを実際に見ることで、印象や配色、レイアウ

 

サムネイル@ : オオサカマニア