参考デザイン
design

UI・UXの完成度が非常に高い「生活定点」のデザイン例

http://seikatsusoken.jp/teiten/
おしゃれなデザイン生活拠点のホームページ
Design Review

デザイン解説

博報堂の研究所が24年分の生活者の観測データ約1,500項目を公開しているメディア。

丸みを帯びたフォントで、メインビジュアルはポリゴン状の幾何学模様が動作し続け、視覚的に定点観測というメディア色を高めている。こういったアニメーションはjQueryの「particles.js」というプラグインで描画することができ、最近は人工知能やICO(仮想通貨関係)のサイトでも多く見かけるようになった。

特筆したいのはメインビジュアルだけでなく、下層ページも非常に丁寧に作られている。

生活定点の面白い動き

上記のように、ナビゲーションでの絞り込みは画面遷移をせずにサクサク行えるので、閲覧したい情報へのアクセスが簡単。グラフの描画に関してはマウスカーソルを合わせると%が表示される仕組みで、UI・UXが素晴らしい。

生活定点の面白い動き2

アンケートへの回答を集めたページでは、%がカウントアップする動作や、タブでのグラフ切り替え、グラフのダウンロードなど、様々な動作や機能が用意されており、見ているだけでワクワクするようなデザインになっている。

動作や機能が充実していても、見づらかったり使いづらかったりする場合が多いが、どちらも両立できている、非常にクオリティの高いメディア。

編集者の採点
カラーコード
  • 338931
  • F0EADD
  • 4A4137
テイスト

こちらのホームページは弊社の制作実績ではありません

掲載会社の情報

会社名生活定点
URLhttp://seikatsusoken.jp/teiten/
住所東京都港区赤坂5-3-1
CONTACT

ホームページを作りたいけど何を相談したら良いか分からない方、まずは費用だけでも知りたい方、
お気軽にご相談ください。まずはあなたのお悩みや相談内容をお聞かせください。