アイデアに困ったら確認したい!最新ウェブデザイン良質見本47選 2017年9月度

menya-bibiri

 

「ウェブデザインのアイデアが見つからない。」「漠然としたイメージはあるけど、何が必要か分からない。」「クライアントとの打ち合わせで使えるデザイン見本が欲しい。」

 

そんなときに役立つ最新ウェブデザインの参考サンプルをまとめてご紹介します。優れたデザインのサンプル例を見ることは、新しいアイデアを生み出すのにも大切です。目まぐるしく変化するWebデザインのトレンド確認しながら、今後のデザイン制作に活かしてみてはいかがでしょう。

 

現役デザイナーも注目!最近話題のウェブデザイン50個まとめ 2017年7月度

 

 

アイデアに困ったら確認したい!最新ウェブデザイン良質見本

 

清水寺

世界的にも有名な清水寺の公式ホームページ。ユーザーが必要な情報を見つけやすい工夫が随所に見られ、Instagramなどソーシャルメディアによる共有のしやすさも。

kiyomizudera

 

 

 

旅館 山河

デスクトップではスクロールに応じて、画面右半分のみが無限スクロールしながら、旅館の風景を撮影した美しい写真を閲覧できます。

sanga-ryokan

 

 

 

白鶴

日本語ならではな縦書きを利用し、日本酒ができるまでの過程をストーリー形式で伝えます。

hakutsuru-tenku

 

 

 

Digital Volcano

ビデオ動画を効果的に活用することで、ユーザーを飽きさせることなく最後までコンテンツを見てもらうことができます。

digital-volcano

 

 

 

Bonds Mash Up

マスクカーソルの動きに合わせて、カラフルなパターンテクスチャを描くブラシのようなエフェクトが展開します。

bonds-mash-up

 

 

 

Upperquad

スクロールに応じて、さまざまなシェイプがユニークな動きとともに展開することで、各コンテンツにうまく視線が集まるように工夫されています。

upperquad

 

 

 

One Four Nine

デスクトップとモバイル端末をつなげることで、より新しいウェブ体験をお届けするユーザー体験型のWebサイト。

one-four-nine

 

 

 

Unpigeon

表示される単語の下にあるトグルを切り替えることで、あっと驚くユニークなアニメーションの仕掛けが。

unpigeon

 

 

 

Dock by Crestyl

下方向にスクロールすることで、コンテンツが左右から集約されるように表示、配置されるなど、アニメーションが特長的なサイト。

dock-by-crestyl

 

 

 

Crux Kitchen

スクロールに応じて各コンテンツがパララックスエフェクトなど動きをつけて表示されるなど、ユーザーがウェブ体験を楽しむ工夫が。

crux-kitchen-lookbook

 

 

 

Tbilisi Gardens

トップページにマンションの外観をそのまま表示し、閲覧したい階を選ぶことで、部屋の間取りを細かく確認できるユニークな仕掛けが。

tbilisi-gardens

 

 

 

Urban Photographe

これまでの制作実績を効果的に魅せた、個人向けポートフォリオの参考にしたいコンテンツ配置。

urban-photographe

 

 

 

Anakin Design Studio

anakin-design-studio

 

 

 

Gera & Rod

花柄と文字テキストを組み合わせたグラフィクが印象的で、グリッドを無視した無造作でクリエイティブなレイアウトは参考に。

gerarod

 

 

 

Heart of Travel

幻想的な動きのパステルカラーを使ったオブジェクトの変化を楽しみながら、制作実績をじっくり確認できます。

heart-of-travel

 

 

 

Rich Brown

ビデオ動画を背景として利用し、アニメーション付きのコンテンツ遷移によって、すべてのコンテンツを確認したくなるマイクロインタラクションが素敵。

rich-brown

 

 

 

Gedeon

全編に渡ってビデオ動画を利用することで、コンテンツをより分かりやすく、魅力的に仕上げている好例。

gedeon

 

 

 

Digital Smile Academy

きつめのドロップシャドウを利用することで、立体感たっぷりなレイアウトを表現し、スクロールに応じたアニメーション効果がさらに雰囲気をアップ。

digital-smile-academy

 

 

 

Joseph Mark

,これまでの制作実績を立体感たっぷりなページレイアウトで表現した、参考にしたいポートフォリオサイト。

josephmark

 

 

 

日本デザインセンター

50年以上続く仕事の実績や、現場で働く写真を動画で紹介するなど面白い見せ方の参考にしたいサイト。

nihon-design-cen-ter

 

 

 

Concentinc

ヘッダーに注目を集めやすいビデオ動画を採用し、グリッドレイアウトで分かりやすくコンテンツを配置しています。

concentinc

 

 

 

熊本大同青果株式会社

ナビゲーションメニューを左固定とすることで、探している情報をより見つけやすくし、モバイル端末での表示にもバッチリ対応したレスポンシブデザイン。

kumamoto-seika

 

 

 

よねしま歯科・矯正歯科

誰にでも親しみやすい黄色とみどり色の配色が特長で、ユーザーが調べたい内容がすぐに見つかるように、コンテンツをうまくカテゴリ分けしています。

yoneshima-shika

 

 

 

富山県美術館アート&デザイン

スッキリとしたシンプルなレイアウトながら、ユーザーが確認したい開館時間やイベント情報など、分かりやすく目につきやすい工夫も。

tad-toyama

 

 

 

Haptic Design

日本語の読みやすさにこだわったレイアウトに、アニメーションやクリエイティブなレイアウトを利用することで、全体的にスッキリとした印象に。

hapticdesign

 

 

 

鈴乃屋

着物という日本伝統の魅力を、縦書きレイアウトを利用することでうまく表現したウェブサイト。書体には明朝体を利用することで、より洗練された雰囲気を演出しています。

konomo-no-inochi

 

 

 

御船山楽園

和をモチーフにした落ち着いた配色で、カテゴリごとに色分けするなど、誰にでも親しみやすいデザインが素敵。

mifuneyamarakuen

 

 

 

Allterrain

スクロールすることで各プロダクト商品が流れる水平方向に移動するユニークな仕掛けが。

allterrain

 

 

 

Aida Eats

商品プロダクトのパッケージに合わせて、配色を統一することでブランディング効果もバッチリ。

aida

 

 

 

Repulic

republic

 

 

 

Epicurrence

スクロールに応じてアニメーション付きでコンテンツが表示される仕掛けで、思わずスクロールを続けたくなるテクニックと言えるでしょう。

epicurrence-no6

 

 

 

Funktional Agency

マウスカーソルの動きに合わせてページに立体的なパララックスエフェクトを採用しています。

funktional-agency

 

 

 

Goulburn Valley

マウススクロールを始めるとスプラッシュ動画が開始され、ユーザーの見たいコンテンツに応じてストーリーの展開が変わってきます。

goulburn-vvavlley-food-tours

 

 

 

Pivovarov

テレビ画面が乱れたようなグリッチエフェクトや、マウススクロールに応じたパララックス効果など面白い仕掛けが満載です。

pivovarovv

 

 

 

Studio Gusto

滑らかで洗練されたアニメーション効果が特長のウェブサイトで、スムーズなページ遷移によってより没入感のあるデザインに。

gusto-ids

 

 

 

Travel Oregon

アメリカはオレゴン州の観光サイトで、各コンテンツごとに親しみやすい配色を利用し、鮭のユニークなマスコットがいたるところに。

meet-the-travel-regon-salmon

 

 

 

Design Better

ページのスクロールに合わせ、コンテンツが切り替わるたびに背景色も変更されるなど、動きが特長のウェブサイト。

designbetter-co

 

 

 

Cars 3

出題されるクイズに答えながら、自分のスタイルに合った車のデザインを提案してくれるなど、映画と連動したコンテンツ作成が魅力的。

cars3

 

 

 

Bear Grylls

スクロールに応じて出現するボタンや、グリッドを無視し写真を重ねるようなレイアウトを採用するなど、最新トレンドを多数盛り込んでいます。

bear-grylls

 

 

 

Savor Wavs

さまざまな材料ごとに音が用意されており、自分だけのミックスを完成させることができるユニークなウェブサービス。

savor-wavs

 

 

 

TV Series Equalizer

tv-series-equalizer

 

 

 

Basic Brandbeats

いたってシンプルな作りですが、フォント選びや配色、余白スペースなどミニマルスタイルで参考にしたい要素がぎっしり。

basic-brandbeats

 

 

 

Wyss Institute

ハーバード大学が公開しているオンラインコンテンツで、さまざまな情報を見つけやすくするグリッドレイアウトが採用されています。

wyss-institute

 

 

 

Woodwork

ページ遷移のストレスを感じさせない、新しいウェブ体験を提供するオランダ、アムステルダムのデザイン事務所の公式ページ。

woodwork-amsterdam

 

 

 

My Most Beautiful Nightmare

 少しだけ文字テキストが動く仕掛けやコンテンツ遷移など、アニメーションを効果的に利用し、イラストをより魅力的に仕上げています。

my-most-beautiful-nightmare

 

 

 

Synasthesia

VRをつかった新しいウェブ体験を提供するサイト、ぜひVRを装着して未来のエフェクトを感じてみましょう。

world-of-synesthesia

 

 

サムネイル@ : MENYA BIBIRI:メンヤ ビビリ – 奈良市のラーメン屋