ハッ!とするサイト｜デザイナーsite hunt!

こんにちは！
BitBeansでは、毎週デザイン会を開き、現在進行中の案件報告や、デザインに関する課題・疑問を共有しあうようにしています。その最後に行うのが「サイト探し」。毎週、それぞれがテーマに合わせて探したサイトを紹介します。デザイナーならではの視点で選ばれたサイトは、ユニークで刺激的で、毎回新しい発見があります。今週のテーマは、MAさん提案の 「ハッとするサイト」です。各自「これはいいデザイン！参考になる！」と思ったサイトを選び、注目ポイントとともに共有してもらいました。

SUSHI QUEST

TOさんが紹介するのは、ゲーム感覚で知る水産業の今

TO：「すしの未来」に向けた水産業の今の課題と解決策をテーマごとに紹介している、スシローによる大阪・関西万博記念コンテンツです。
選んだ理由は、単純に私がドット絵表現が好きだからという点も大きいのですが、見ての通りゲーム感覚で水産業の課題と解決策の現状を学べるユニークさに惹かれました。デザインの直接的な参考というよりは、「テーマに沿った世界観づくりが徹底されたデザイン」という視点では優秀な事例として注目しています。

AlphaTheta

TAさんが紹介するのは、レイヤー表現が光る高級感UI

TA：CDJ-3000X – 次世代プロフェッショナルDJプレーヤーのサイトです。UIの見せ方やホバー時のアニメーション、多重レイヤーで構成された動きがとても洗練されており、高級感のある体験設計に思わずハッとさせられました。プロダクトの質感や世界観をそのままサイト上に落とし込んだような演出がスマートでカッコよく、デザイン表現の参考になるポイントが多いと感じました。

株式会社 永賢組

SHさんが紹介するのは、自由スクロールが魅力のコーポレートサイト

SH：工場や商業施設の建設、リフォームを手がける企業のWebサイトです。新聞を読むような感覚で自由に閲覧できるトップページがとても印象的で、大胆な構成ながら読みやすさも両立している点が魅力だと感じました。アニメーションやホバーによるインタラクションも心地よく、上下左右に自由にスクロールできるサイトは時々ありますが、コーポレートサイトでこのスタイルを採用しているのは珍しく、インパクトがありました。

KAI Design Dept.

KAさんが紹介するのは、シャープな表現が光る貝印デザイン部門のサイト

KA：貝印（刃物メーカー）のデザイン部門が運営するサイトで、「切れ味で暮らしをえがく」というコピーをそのまま体験できるような表現が印象的です。ページの随所に走るスタイリッシュな線の演出が特徴で、単なる装飾ではなく、刃物が持つシャープさや切れ味をしっかりと視覚化してる点が魅力だと思いました。自分なら背景を斜めにカットしたり、線を置く程度で終わってしまいそうなところを、このサイトでは「線が動き・流れ・空間を切り替える装置」として機能しており、表現の幅の広さに、ハッとさせられました。

Ymauchi No.10 Family Office

YOさんが紹介するのは、圧倒的な世界観を構築したアイソメ表現が魅力のサイト

YO：任天堂の創業家の一族が手描ける事業のWebサイトで、世の中のユニークな取り組みに投資する会社のようです。とにかく世界観の作り込みが圧巻で、調べてみたところ、このサイト制作のために専用のモデリングツールまで開発したというこだわりに驚かされました。レイアウト面で直接参考にできる部分は多くはないかも知れませんが、アイソメトリックのイラスト表現は以前から挑戦したいと思っていた分野なので、インスピレーション源としてとても刺激的だと思いました。

in commonwith

MAさんが紹介するのは、点灯イメージを一覧で見られる気の利いたUI

MA：ニューヨークで家具や照明を販売しているショップのWebサイトです。製品ページの右上にあるライトのON、OFFのボタンで、すべての商品の照明が点灯した状態のイメージを一覧で確認することができ、単なる商品紹介にとどまらない体験型の工夫が魅力的だと感じました。照明の“見え方”をひと目で比較できるのは利用者にとっても便利で、機能性とデザイン性を両立したおしゃれなアイデアだと思いました。こうした細やかな視点をプロダクトとUIに落とし込んでいる点が、とても参考になるサイトです。

ザ・森東 池袋支社

NOさんが紹介するのは、エンタメ性が全開のコラボ特設サイト

NO：「さらば青春の光」が所属する事務所「株式会社ザ･森東」と、池袋パルコのコラボキャンペーンの特設サイトです。会社のホームページ風に仕立てたレトロでチープなインターフェイスがインパクト抜群で、アイディアの面白さと独特なテイストがしっかり世界観を作っていると思います。サイトの隅々まで小ネタとユーモア、作品への愛が散りばめられており、“見ていて純粋に楽しい”エンタメとしてのWebサイトに仕上がっています。特別さらば青春の光のファンというわけでもないですが、ついつい見続けてしまいます。

カービィのエアライダー

KOさんが紹介するのは、世界観が行き届いたUI設計

KO：カービィのゲームのブランドサイトで、作品の世界観をそのままサイト上に落とし込んでいるだけではなくて、情報の整理が美しく整っている点が印象的でした。
特にライダーとマシンの紹介をスライダーで、「商品+シーン」の2枚セットとして1画面に収めている設計がいいと思いました。製品点数が多い場合は、モーダルで対応することも多いと思いますが、画面遷移のストレスを軽減しながら情報量も確保できる、とても理にかなったUIだと感じました。
例えば採用サイトの社員インタビューなどでも、“社員写真+仕事のシーン”の２枚をワンセットで見せる構成にすると、下層に飛ぶ前に社員が活き活きと働く姿を見せられると思いました。
さらにスマートフォンで見た際に、どのセクションもバチっと1画面に収まる設計が見事で、さすが任天堂のUIだ…と思いました。

MEMEME

FUさんが紹介するのは、ポップで尖った感性が光るヘアケアブランドサイト

FU：Y2K的とも言えるポップで少し尖ったデザインが印象的です。色づかいや動き、余白の使い方など、感度の高いユーザーに刺さるデザイン設計だと思いました。
薬局の棚に並ぶ姿を想像しても、一目で目を引く大胆なボトルデザインなのも特徴的です。コンテンツ自体は、とてもシンプルな情報で構成されていますが、「見せたい」「伝えたい」「買いたい」が混在せず、整理された導線とデザインがしっかり共存している点が好印象でした。カーソルがキラキラしたり、スクロールで中に入り込むようなアニメーションなど、遊び心ある演出も魅力的で楽しいサイトです。Kao様の商品だったことにも驚かされました。

ミロコマチコ – mirocomachiko web site

YAさんが紹介するのは、アナログの温度感が伝わるサイト

YA：結構前のサイトですが、この方のデザインを初めて見たとき、“webサイトってこんな表現ができるんだな〜”と強く心に残っています。紙に書いたスケッチがホームページになったかのような独特な世界観が魅力で、デジタルでありながらアナログの温度感がしっかり伝わってくる感じが魅力的です。Web表現の自由さや、発想次第でどこまでも広がる面白さをあらためて感じさせてくれるサイトだと思います。

---

今回ご紹介した「ハッとしたサイト」はいかがでしたか？
デザイナーの目から見て、デザイン性が優れていたり、面白かったり、楽しい動きを意識した工夫があるサイトなど、とても参考になるものばかりでしたね。またスマートフォン（SP）向けの構成も参考になりますね。次回も楽しいテーマを取り上げながら、素敵なサイトをご紹介していきたいと思います。