Webデザイン、これからどうなる?すぐに使えるアイデア見本集58選

heros

 

ウェブサイトのアイデア出しに困ったり、これからサイトを作成しようというときに参考にしたい、最新の良質ウェブデザインをまとめてご紹介します。

 

配色やレイアウト、フォント選び、トレンドなど優れた実サンプル例を見て、クリエイティブなデザインアイデアにつなげてみましょう。デザインの打ち合わせなどにもオススメしたいサイトが揃います。

 

2018年に流行しそうな、注目Webデザイントレンド20個を大予想

https://photoshopvip.net/106130

 

 

Webデザイン、これからどうなる?すぐに使えるアイデア見本集

 

Happier Village Toshiba

イラストを全面に利用したサイトデザインで、スクロールしながら隠されているコンテンツを表示する体験を中心としています。

happier-living-toshiba

 

 

 

Interword

マウスカーソルに合わせてデザイン要素が動いたり、文字テキストでマスキングされた動画イメージなど、素敵なアニメーションエフェクトがたくさん。

interword

 

 

 

30Seconds Trip

日本国内の人気の旅行・観光スポットの魅力を30秒の旅動画で紹介しているサイト。

30seconds-trip

 

 

 

Cacao 70

チョコレートをつかった商品を販売しているサイトで、利用しているイラストにもチョコレートやカカオを題材に描かれています。

cacao70

 

 

 

Ueno Interview

ゲーム形式で会社の入社面接を行うという、新しいユニークな取り組みを行っているサイト。

ueno-3d-interview

 

 

 

Buddha Pizza

宅配ピザのメニューサイトで、ユニークなアイコンデザインにアニメーションを加えたロゴが目を引きます。

buddha-pizza

 

 

 

Get Obachan

外国人にとって珍しい日本の雑貨や商品を販売しているサイトで、商品を並べたヒーローイメージが個人的にツボ。

get-obachan

 

 

 

Fisheye Gallery

スクロールすることで水平方向にコンテンツが展開していくポートフォリオサイトで、写真を多用するときに参考にしたいレイアウト。

fisheye-gallery

 

 

 

Gusto Play

アルバム楽曲をまとめてストリーミングできるサービスで、曲を選択することでこもった音からクリアに試聴できます。

gusto-play

 

 

 

Paper Tiger Agency

paper-tiger-agency

 

 

 

Jal Steam School

飛行機と空の世界をSteamの視点から紐解いていく体験型プログラムで、空を通じて未来を考える「空育」の新たな教育プログラム。

jal-steam-school

 

 

 

Julie Bonnemoy

オランダ、アムステルダムを拠点とするフリーランスデザイナーのポートフォリオ。滑らかなアニメーションを随所に散りばめた、触れて楽しむインタラクティブなサイトデザイン。

julie-bonnemoy

 

 

 

Loyal Coffee

2018年のトレンドにもなりそうなパステルカラーをコンセプトに、コンテンツを余白スペースたっぷりに並べたレイアウト。

loyalcoffee

 

 

 

Mitsugu Takahashi

美しく高級感たっぷりの文字テキストと、スムーズで滑らかなくアニメーションの組み合わせがスタイリッシュ。

mitsugu-takahashi

 

 

 

Rise to the 2018 Challenge

かわいいアニメーション付きイラストが印象的で、スクロールに応じて各コンテンツが切り替わるカラフルなデザイン。

rise-to-the-2018-challenge

 

 

 

Take Care Of

植物をふんだんに利用したボタニカルなデザインに、淡いパステルカラーがトレンドを感じるヒーローイメージ。

careof

 

 

 

Daucy

daucy

 

 

 

Smalls

発色の良い黄色をアクセントカラーに利用したサイトで、 配色の参考としてメモ。

smalls

 

 

 

Don’t Be Numb

戦争における正しい認識をクイズ形式で紹介する、これからのワタチたちに必要な体験型ウェブサイト。

dont-be-numb

 

 

 

Leningrad Agency

まるで水面のようなリップルエフェクトを採用したサイト全体に利用しています。

leningrad-agency

 

 

 

Tesla Roadster

Teslaが仕掛ける、世界最速を目指す車 Roadsterの特設サイト。

tesla-roadster

 

 

 

10×17

26人のアーティストの2017年ベスト音楽アルバムを、インタラクティブなリスト表示で展開します。

10x17

 

 

 

The Sill

多肉植物やトロピカルな観葉植物を販売しているサイトで、ブランドイメージを大切にした、親しみやすいコンセプトが素敵。

thesill

 

 

 

Duroc

duroc

 

 

 

Lamborghini Porrentruy

スーパーカー、ランボルギーニの各種ラインアップを動画を使ってインタラクティブに演出したサイト。

lamboghini-porrentruy

 

 

 

O2 PF 2018

夜空に輝く星座をモチーフにしたクリスマス特設コンテンツ。

o2-pf-2018

 

 

 

Reloca

「道の駅」を起点とした魅力的な場所作りを専門に行うプロジェクト。

reloca

 

 

 

Flayks

グリッドを崩し、各要素が重なったような新しいレイアウトが特長のポートフォリオサイト。

flayks-portfolio2018

 

 

 

Vollerei Restaurant & Bar

スクロールに応じて料理やカクテルが回転、表示されたりするなど、お店の雰囲気をうまく演出しています。

vollerei-restaurant-bar

 

 

 

Kymberlee Jay

グリッドを無視して、文字テキストと画像を重ねる新しいレイアウトを採用したり、パステルカラーの淡い配色がブランドイメージにも合っています。

kymjay

 

 

 

Europejski

スクロールするたびに水彩ペイントでふわりと浮かび上がるようなエフェクトを実装し、思わずさまざまなコンテンツを見たくなる工夫も。

the-europejski

 

 

 

Hortus Garden Furniture

アウトドアを中心とした家具を販売しているサイトで、スクロールに応じて商品が次々と展開していきます。

hortus-garden-furniture

 

 

 

福田茶屋

fukuda-chaya

 

 

 

寒川神社

スクロールに合わせて文字テキストがふわりと表示される、アニメーション豊かなデザインが特長のサイト。

samukawa-jinja-shrine

 

 

 

Nonagon Style

フルスクリーンで切り替わるスライダーでは、淡いパステルカラーの見出しタイトルがうまく目を引くデザイン。

nonagon-style

 

 

 

Milwaukee Ballet

サークルを回すことで各コンテンツに移動できるナビゲーションメニューが特長で、級感のあるセリフ書体とアニメーションがエレガント。

milwaukeeballet

 

 

 

Pinatex

pinatex

 

 

 

Heart Full

サイト全体にイラストを利用し、そこにアニメーションをうまく加えることで、スクロールするたびに視線を目的のコンテンツにうまく誘導します。

heart-full

 

 

 

愛宕幼稚園

新潟にある幼稚園の公式サイトで、美しいデザインパターンをサイト全体に散りばめ、アニメーションを加えることで、より効果的に視線を集める工夫も。

atago-kdg

 

 

 

Oriens Tea

1909年の創業以来受け継がれる確かな技術と、変わらぬ情熱から生まれた美味しい紅茶のサイト。

oriens-tea

 

 

 

Clarity

clarity

 

 

 

ESPN FC 100

世界的に有名なサッカープレイヤーの似顔絵を並べ、ユラユラとしたアニメーションを追加しています。

espn-fc100

 

 

 

HowIt

サイト全体にさまざまな仕掛けを施し、触って楽しむイラストを中心としたデザインが素敵。

howit-haruki-higashi

 

 

 

Elton John

elton-john

 

 

 

One Shared House 2030

2030年の人間の暮らしを考えるアンケートを実施し、統計をグラフィカルなチャートで表現します。

one-shared-house-2030

 

 

 

Vintage Agency

グリッチエフェクトや3Dデザインなど、新鋭のデザインテクニックを駆使したポートフォリオサイトで、あっと驚くアニメーションの使い方にも注目です。

vintage

 

 

 

暗黒透視術

Addidasが発表したスニーカー特設サイトで、デザインから詳細、マテリアルなどを詳しく紹介しています。

ankoku-toshi-jutsu

 

 

 

Adoratorio

adoratorio

 

 

 

Pixter

スマートフォン端末に取り付けて、カメラの性能を最大限に引き出すガジェットを販売中。ストーリーテリングの手法を利用し、ユーザーの購買意欲を刺激します。

pixter

 

 

 

Tao Tajima

コンテンツを切り替えるたびに、波のような滑らかなアニメーション付きで表示され、思わず他のコンテンツにも手が伸びます。

tao-tajima

 

 

 

Institute for Faith Work & Economics

tifwe

 

 

 

Avaunt Magazine

フォントの使い方が印象的なサイトで、ブランドイメージを表現する高級感のあるセリフ書体が特長。

avauntmagazine

 

 

 

Steve Roach

soundworlds-of-steve-roacy

 

 

 

Chobani

カラフルで落ち着いた北欧デザインのイラストを利用したヨーグルト販売用サイト。

chobani

 

 

 

Revolucion de Cuba

カラフルな配色パレットで実現した、シングルページ完結型のレイアウトで、ダイナミックな写真を中心としたコンテンツが並びます。

revolucion-de-cuba

 

 

 

谷口彫刻

山紫水明の地「飛騨高山」にて、初代 谷口一貞、二代目 谷口傳幸・谷口宝凛の三名の職人による工房です。

taniguchi-chokoku

 

 

 

You Are the Stylist

映画のストーリーが進むように各コンテンツがシームレスにつながる、インタラクティブな体験型サイト。

you-are-te-stylist

 

 

サムネイル@ : Hero’s – Sportsmanship Heroes