第一印象で“らしさ”が伝わってくるサイト｜デザイナーsite hunt!

こんにちは！
BitBeansでは、毎週デザイン会を開き、現在進行中の案件報告や、デザインに関する課題・疑問を共有し合うようにしています。そして最後に行っているのが「サイト探し」の発表。毎週、それぞれがテーマに合わせて探したサイトを紹介します。今回はYOさん提案の 「第一印象で“らしさ”が伝わってくるサイト」です。各自「これはいいデザイン！参考になる！」と思ったサイトを選び、注目ポイントとともに共有してもらいます。

佐久間宣行 オフィシャルサイト

SHさんが紹介するのは、エンタメ全開、佐久間ワールドに引き込まれるサイト

SH「テレビ番組『ゴッドタン』や『罵倒村』、『トークサバイバー』などの生みの親であり、テレビプロデューサー、演出家、ラジオパーソナリティなど幅広く活躍されている佐久間宣行さんのオフィシャルサイトです。リッチな作りでエンタメ性に全振りしたデザインは『面白い』『楽しい』が詰まっていて、まさに佐久間さんらしさが凝縮されたサイトだと感じました。装飾も豊富で、情報量が多いにもかかわらず、きちんと読みやすいのもすごいポイントです。」

東京ディズニーシー25周年“スパークリング・ジュビリー”

TOさんが紹介するのは、シンプルさと華やかさのバランスが印象的なサイト

TO「ディズニーリゾートのトップページは比較的シンプルなデザインですが、イベント情報やピックアップの遷移先のページでは縦長の画面を活かしながら、世界観あふれる、楽しげで凝ったデザインになっています。ディズニーと言えば、キラキラとした演出や鮮やかな色彩、光り輝くグラデーションなど、華やかで装飾性の高い表現が特徴的ですが、それが「ディズニーらしさ」としてしっかり成立しているのが魅力的です。」

ずっと真夜中でいいのに オフィシャルサイト

NOさんが紹介するのは、世界観ファーストで作り切るWeb体験

NO「曲だけではなく、世界観すべてを含めて『ずとまよ』なんだと感じさせる、非常に作り込まれたホームページです。Y2K的とも言えるビジュアルで、MVや音源のアートワーク、ライブと共通するモチーフやイラストが散りばめられており、サイト全体に一貫した雰囲気が感じられます。さらにWebならではのインタラクティブな要素も多く盛り込まれています。正直、見やすさや分かりやすさを最優先にしたサイトではありませんが、それ以上に世界観を体験してもらうことを重視しているように感じます。完全に世界観ファーストで作り込まれた、ずとまよらしいサイトだと思います。」

元祖大阪みたらしだんご

TAさんが探したのは、パッケージからWebへ広がる世界観

TA「元祖大阪みたらしだんごの世界観を、FVから細部まで一貫して表現しているサイトです。パッケージの印象をベースに、古風なフォントや手書きイラスト、遊び心あるUIや体験型の演出が組み合わさっており、随所に丁寧な作り込みが感じられます。サイトを開いた瞬間から、商品の「らしさ」やブランドの世界観がしっかり伝わってくる点が印象的です。」

無印良品

KAさんが紹介するのは、シンプルで伝えるブランド設計

KA「『第一印象で“らしさ”が伝わるサイト』と聞いて、真っ先に思い浮かんだのが無印良品の公式サイトでした。全体的に無駄がなく、余白を活かしたシンプルなデザインで、情報量は多いにもかかわらず、ごちゃつきを感じさせず、とても読みやすく設計されています。使用されているゴシック体もしっかりとしていて、『無印らしい』と直感的に感じられるポイントだと思いました。
また、良品計画の採用サイト（ https://careers.muji.com/jp/ ）も一般的な採用サイトらしさがなく、装飾を極限まで削ぎ落としたデザインが印象的です。プロダクトだけでなく、採用や企業姿勢においても一貫して『無印良品らしさ』が表現されていると感じました。」

ASHIM FACTORY ポートフォリオサイト

KOさんが紹介するのは、第一印象で強みを伝えるポートフォリオサイト

KO「自分の強みを1枚のイラストで表現したKVが目を引くサイトです。ポートフォリオサイトのセオリーとしては、制作事例や自分をイメージするビジュアル・プロフィール画像を大きく見せる構成が多いですが、このサイトでは『自分がいるメリット』がKVでしっかりと訴求されています。商業デザイナーとして、自分の強みをきちんと伝えている点がとてもいいなと思いました。スクロールすると、引きの強いコピーもバシッと決まっていて、マウスホイール1回分で『お仕事の相談をしてみたい』と思わせるほど、訴求力のあるサイトだと感じました。」

BEAMS コーポレートサイト

FUさんが紹介するのは、空気感で伝えるBEAMSらしさ

FU「何を選ぼうか悩みましたが、日々の生活の中で『やっぱりここが好きだな』と感じるお店、BEAMSの企業サイトを取り上げてみました。サイトを開いた瞬間、まず目に飛び込んでくるのはブランドの空気感そのものです。ファーストビューの動画では、販売員の方々の個性やファッションが軽やかに映し出され、BEAMSの“人”を中心に据えた価値観が伝わってきます。単なる会社紹介ではなく、ライフスタイルや、一人ひとりの個性を大切にする姿勢がにじみ出ていて、まさに“BEAMSらしい”と感じました。
配色には、白やグレー、黒といった無彩色をベースに、ブランドカラーであるBEAMSオレンジがアクセントとして使われており、視覚的にもブランドの個性が表れています。さらに、ブランド紹介や活動内容、取り扱いブランドの一覧も整理されていて、『見たい情報にスッとたどり着ける』設計になっています。ビジュアルだけでなく情報設計からも、BEAMSらしさが伝わってくるサイトだと思いました。」

ベイブレード

MAさんが見つけたのは、テクノロジーとエンタメを両立したデザイン

MA「最近は子どもだけでなく、大人向けの大会も頻繁に開催されているというベイブレードの公式サイトです。大人も子どももワクワクするようなエッジの効いたデザインで、テクノロジーやギアの精密さが視覚的に演出されているのが特徴的でした。スクロールに合わせて構造や仕組みが理解できる演出も分かりやすく、スクロールに合わせて構造や仕組みが見えていくため、プロダクトの特徴も理解しやすく感じました。自分が子どもの頃に遊んでいたベイブレードとはまた違った、競技性の高さも感じられ、そうした進化に合わせてエンタメ性の高いデザインになっているなと感じました。」

Spiral AI

YOさんが紹介するのは、無機質ではないAIを表現するデザイン

YO「AIをより人間らしくし、楽しさや便利さを広げることを目指している会社のサイトです。『生成AIの先へ、生命を感じるAIを。』というコピーにふさわしいデザインで、一般的なAIに抱く無機質な印象とは対照的な、温かみのあるビジュアルが目を引きます。ざらついた質感の背景、ラフに切り抜かれた写真やオブジェクト、手書き感のあるフォントや線などを用いることで、完璧さではなく人間らしさや温度感が表現されています。デザインそのものがメッセージとして機能しており、『何を目指している会社なのか』が自然に伝わってくるサイトだと感じました。」

パイロットのシャー芯

YAさんが紹介するのは、機能を分かりやすく伝えるデザイン設計

YA「高純度の黒鉛を使用したシャープペンシル替芯を紹介するサイトです。「折れにくさ」「濃い筆跡」「なめらかさ」という商品の特徴を、「テスパ」というワードで分かりやすくまとめたサイトです。これらの商品の魅力を『テスパ』というワードで、分かりやすくまとめている点も特徴的です。デザイン面では、シャープペンシルの筆跡やノートのフォルムをモチーフにしながら、硬くなりすぎない表現になっています。また、色味をあえて淡い色にすることで、ポップになりすぎず、勉強・学生生活を自然に想起させるトーンに仕上がっており、文具メーカーらしいバランスの取れたデザインだなと思いました。」

---

今回ご紹介した「第一印象で“らしさ”が伝わってくるサイト」はいかがでしたか？
エンタメ性に振り切ったもの、世界観を徹底的に作り込んだもの、ミニマルに削ぎ落としたものなど、それぞれ異なるアプローチで“らしさ”が表現されていました。デザイナーの目線で見てみると、ビジュアルや配色だけでなく、情報設計やコピー、インタラクションなど、さまざまな要素が組み合わさることで「らしさ」が形作られていることに気づかされます。
同じ「らしさ」でも、その伝え方はサイトによってさまざま。ビジュアルだけではなく、コピーや動き、情報の見せ方まで含めてブランドの印象がつくられているのが面白いところでした。
次回も楽しいテーマを取り上げながら、素敵なサイトをご紹介していきたいと思います。