アイコンが素敵なサイト｜デザイナーsite hunt!

こんにちは！
BitBeansでは、毎週デザイン会を開いています。各メンバーが現在進めている案件の報告や、デザインに関する課題・疑問を共有し合う場です。そして最後に行うのが「サイト探し」。毎週、それぞれが気になったサイトを一つずつ紹介します。同じテーマでも、選ぶサイトや注目するポイントは人それぞれ。毎回、いろいろな発見があります。
今週のテーマは、TAさんが提案した 「信頼感のあるトーンで、アイコンが素敵なサイト」です。アイコンが分かりやすい、親しみを感じるなどをポイントに探してもらい、各自が「これは新しい！素敵！」と感じたサイトを紹介します。各自どんなポイントに注目したのか、一言ずつコメントも添えました。

ツムラ

SHさんが紹介するのは、信頼感と美しさを兼ね備えた「ツムラ」公式サイト

SH「言わずと知れた医薬品メーカー、『ツムラ』の公式Webサイトです。事業内容が医薬品ということもあり、サイト全体からしっかりとした信頼感が伝わってきます。色合いやレイアウト、タイポグラフィの細部まで丁寧に作られており、誠実で落ち着いた印象につながっています。アイコンの数自体は多くはありませんが、だからこそ一つひとつのビジュアルの精度が際立ち、情報に対する信頼を高めています。中でも目を引いたのはファーストビュー右下に配置された4つの人物アイコン。線一本で表現している髪型の書き分けが見事で、シンプルな表現の中に個性やニュアンスがきちんと込められているのがスゴイ！」
TA「この細い線のイラストがいいですよね。」

FamilyMartVision

TAさんが紹介するのは、線と色が生み出す統一感と親しみやすさのあるサイト

TA「ロゴとアイコンで統一された線の太さや色を使用することで、サイト全体に一貫性を感じます。注目すべきなのは、アイコンのスタイル。線画をベースにしたミニマルなデザインは、シンプルでありながら、どこか親しみやすく、柔らかな印象を与えてくれます。また、アイコンが使用されている箇所は、主にテキストだけでは伝わりにくい情報を補足し、視覚的にユーザーのサポートをしています。デザインが美しいだけでなく、きちんと『意味がある』使い方がされている点でも、とても好感が持てます。」

社会福祉法人グリーンコープ

KAさんが紹介するのは、あたたかく信頼感を伝えるデザインのサイト

KA「やさしいトーンでデザインされた社会福祉法人グリーンコープのサイトです。まず目に入るのは、線ではなく『塗り』で描かれているアイコン。これにより、視覚的にシンプルで柔らかく、あたたかみのある印象を与えており、自然と信頼感や親しみを感じられるデザインになっています。色使いもカラフルでありながら、彩度やトーンに統一感があり、決して子どもっぽくならない“やさしくて大人っぽい雰囲気”に仕上がっています。特定の年齢層に限定されず、幅広い世代にも親しみやすそうな配色が印象的です。内容的には高齢者向けの福祉サービス中心ですが、情報設計も堅苦しさがなく、誰でもスッと読めるように整理されたUIも含めて素敵なサイトです。」
TA「ロゴもいろんな色があるけど、アースカラーで締めるのがいいですよね。」

HRMOS採用 7周年サイト

FUさんが紹介するのは、特別感と信頼感が同居する、心地よい周年記念サイト

FU「カードとアイコン、そしてコンテンツの情報量がとてもバランスよく配置されていて、見ていてとても心地よく感じられる周年サイトです。アニメーションも過剰にならず、自然な動きで視線が誘導されていて、情報を追いやすく感じました。全体を通して使われているブルーのトーンは、信頼感をしっかり表現していて、周年記念という特別なテーマにもぴったりです。情報が決して少なくありませんが、それを感じさせない整理整頓された構成も好印象です。記念サイトらしい“特別感”と“信頼感”という2つの要素を見事に両立している、周年サイトを考える際にも参考にしたくなるサイトだと思いました。」
TA「アワーヒストリーも一個一個細かく書いていますが、わかりやすくてすごくいいですね。」

株式会社ベンナーズ

TOさんが紹介するのは、一風変わったキービジュアルのコーポレートサイト

TO「一風変わった構成のキービジュアル（KV）が印象的なサイトです。KVが赤と青の2色だけで描かれたほんわかとしたテイストのアイコンと、英字の説明文のみというシンプルさに引き込まれました。色数を絞ることで統一感が生まれ、親近感のあるトーンをつくりながらも、子どもっぽくならない絶妙なバランスに仕上がっています。シンプルな矢印も、見せ方によってしっかりデザインの一部になるんだなと感じました。アニメーションも決して派手な表現ではなく、ちょこちょこと小さな動きが、可愛らしさと親しみやすさを演出しており、好印象でした。遊び心を取り入れながらも、ちゃんとコーポレートサイトとしても信頼感を保っている、そんな絶妙なバランス感がとても魅力的です。」

伸栄商事グループ採用サイト

YOさんが紹介するのは、上品さと信頼感を両立する採用サイト

YO「キレイめなトーンでデザインされている化粧品などを扱う卸売企業の採用サイトです。落ち着いたカラーリングと統一感のあるデザインで、上品さと信頼感がしっかり伝わってきます。アイコンを多く使うと可愛らしい印象になりやすいですが、このサイトでは親しみやすさを残しつつ、上品にまとめられています。よく見るとさりげないグラデーションが使われているので、サイト全体の雰囲気に馴染んでいるのかなと思いました。『可愛い』だけで終わらせず、きちんと整った印象に仕上げている点がとても参考になりました。」
SH「このグラデーション、とってもいいですね。」

渋谷区

KOさんが紹介するのは、アクセシビリティへの配慮が印象的な行政サイト

KO「何度か取り上げられているサイトかもしれませんが、改めて紹介したい行政のサイトです。情報が丁寧に整理されていて、幅広い人が目的の情報を探しやすい構成になっていると思いました。特に外国人・高齢者・障がいのある方など、さまざまな立場の人にも配慮されたアクセシビリティ設計。文字の大きさや構造、色使いなど、細かなところまで工夫が感じられます。ナビゲーションの絞り込みも直感的で、目的の情報に迷わずたどり着けるのがとても好印象でした。シンプルでありながら行き届いた構成が見習いたいポイントです。」
TA「日本人以外の人が見るときに、アイコンって効果的なんだなって改めて思いました。」

採用ブランディングエキスパート 電通

SUさんが紹介するのは、動きで魅せる採用サイト

SU「電通が手がける、企業の採用活動を支援する公式サイトです。全体はシンプルで視認性に優れ、統一感のあるアイコンが使用されているので洗練された印象です。使われているのはオーソドックスなアイコンですが、アニメーションを取り入れることで、思わず目を引く演出に。丁寧に設計された動きを加えることで、定番のアイコンでも印象的に見せる工夫がされていました。」

SH「微妙な動きがめっちゃにくいですね。」

---

今回のテーマは「信頼感のあるトーンで、アイコンが素敵なサイト」でした。
どのサイトにもアイコンの使い方に工夫があり、単なる装飾ではなく、情報を分かりやすく伝えたり、サイト全体の印象をつくったりする役割を担っているのが印象的でした。
同じ「信頼感」というテーマでも、親しみやすさや上品さ、遊び心など、その表現方法はさまざま。それぞれのデザイナーが注目したポイントの違いも面白いデザイン会となりました。