【2017年度版】さりげないグラデーションが魅力的なサイト6選

【2017年度版】さりげないグラデーションが魅力的なサイト6選

CSS3からグラデーションを実装できるようになり、サイト全面をグラデーションで彩るデザインも珍しくなくなりました。

CSS3浸透直後の「グラデーション使ってみたい」熱も落ち着き、今はデザイン表現のひとつとしてスタンダートなテクニックに落ち着いたように思います。

グラデーションの使い方を見習いたい魅力的なサイトをご紹介します。


成安造形大学「イラストレーション進化×深化論」

成安造形大学「イラストレーション進化×深化論」

http://www.illustration.seian.ac.jp/

スクランブル交差点の画像から、スクロールすると上からグラデーションの筆跡が下りてきてサイトタイトルが浮かび上がる仕様です。

未来を担うクリエイターへのメッセージがカラフルさで表現されています。


夕日の美しいホテル 夕映えの宿 汐美荘

夕日の美しいホテル 夕映えの宿 汐美荘

http://www.shiomiso.co.jp/

美しい夕日そのままに、夕日の色をグラデーションに使用しメイン画像との親和性が高いデザインになっています。

マーケティングをしっかりデザインに落とし込んでいる印象です。


INUPATHY - the world’s first dogs mental visualizer

INUPATHY

http://inupathy.com/

ブランドロゴのグラデーションのトーンを明るくしてボタンや見出しアクセントに応用しています。

グラデーションを使うポイントは控えめですが、その分他の部分ではモノトーンやナチュラルカラーを多用する引き算も感じられます。


丸京染色株式会社

丸京染色株式会社

http://www.marukyou-mk.co.jp/

動画の上にかかる色がゆっくりとグラデーションで変化していきます。

つい見入ってしまうアイディアです。


Sugiura Lab

Sugiura Lab

http://web.tuat.ac.jp/~sugiura/en/index.html

グラデーションやボタン、下層ページのタイトル画像など、使用箇所が少ないからこそ知的で効果的です。

ホワイトスペースの使い方も見習いたいところです。


kolor

kolor

http://kolor.jp/

グラデーションの縦使いが魅力的なファッションブランドのサイトです。

コレクションのARCHIVESから過去のコレクションへ遷移すると、グラデーションのテーマが変化します。

海外のサイトっぽい雰囲気ですが、なんと日本のサイトです。

OUR SERVICE

01戦略立案

Webサイトを活用したマーケティング企画を支援。コンセプト策定、現状分析、機能検討の各フェーズを経て、成果につながる実現可能な提案が強みです。

02課題解決

Webサイトに関する様々な課題を解決。基礎的な技術はもちろん、AI連携、グローバルサイト構築、大量コンテンツ移行などの大規模な事例にも実績があります。

03システム開発

CMS実装、アプリ開発、外部システム連携などの開発技術を支援。将来的な拡張性を考慮し、専門的な技術者がご相談にのります。

04運用支援

Webサイト公開後の更新作業から保守までの一貫したサポートを提供。アナリティクス解析やWeb広告の運用など継続的な支援を行い、お客様との長期的な信頼を築き上げます。

CONTACT

Web制作・サービスに関するご相談を承ります。お気軽にお問い合わせください。