デザイン分析日記35
Webサイトから学ぶ、デザイン分析
こんにちは。デザイン歴1年ほどのひよっこですが、本業と両立しながら、心を動かされたデザインを分析・発信していきます。以前は週一で発信していましたが、自分のタイミングにて発信できればと考えております、、、。（甘えてしまっておりますが何卒。）
今回ご紹介するのは、サンフロロシステム株式会社様（https://www.sunfluoro.co.jp/）です。
表現の意図の仮説
今回のサンフロロシステム株式会社様のホームページでは、新たな技術や素材を紹介すると同時に「本気度」や「信頼感」を伝えることも目的として設計されているのではないかと考えました。
「洗練された印象」「プロフェッショナルさ」「先進性」を表現することで「この会社に依頼してみたい」「一度問い合わせてみたい」という感情を、ターゲットに持ってもらうことを意識したデザインになっていると感じました。
サイトをどのように感じたのか？（私）
このサイトを見たとき、「洗練された」「かっこよさ」「プロフェッショナルさ」「先進性」を感じました。※自分のとても好みのホームページでした。
どのような要素で感じたか？
（モーション・レイアウト・フォント）
①FV（ファーストビュー）動画
初めのFV（ファーストビュー）の動画は、色味のトーンが数％の青黒色をオーバーレイとしサイト全体のトーンと統一感を持たせていました。
それと同時に青色が持つ先進性を感じせさせていることや、ホームページの世界観のトーンを合わせることでよりグッと深みを出させている要因であり、より洗練された印象を受けることができます。また、動画内では製造工程の「手元」に焦点が当てられていました。普段なかなか見ることのない加工技術や制作過程を映し出すことで、「高い技術力を持った会社である」という説得力を持たせることができ、プロフェッショナルさを感じさせる演出になっていると考えました。
②ヘッダーメニュー
ヘッダーメニューには、グラスモーフィズムが採用されていました。近年のUIデザイントレンドでもある表現ですが、こういった現代的なデザインを自然に取り入れている点からも、先進性を感じました。また、単にトレンドを取り入れるだけではなく、サイト全体の無機質で洗練された世界観と調和していた点も印象的でした。
③フォント
フォントに着目すると、日本語フォントには「Noto Sans JP」が使用されていました。Noto Sans JPは、可読性と汎用性の高さに優れたフォントですが、サンフロロシステム株式会社様のサイトでは、Thin（300）系の細いウェイトを主体に使用することで、「無機質さ」「洗練感」「シャープなかっこよさ」を演出していると感じました。
Noto sans を深く調べてみるとNotoプロジェクトは「No More Tofu」（文字化けをなくそう）という理念のもと制作されているフォントであることを知りました。かっこいい、、、。
フォントの理念まで込みで選定ができれば、デザイン作成の深みを演出できるのではないかと改めて気づきました。
英字フォントには「Work Sans」が使用されていました。
「Work Sans」はNoto Sans JPとの相性も良く、シャープさを持ったかっこよさ（無機質な良さ）という世界観が統一できている要因でもあると気づきました。
また、このフォントはサンセリフ体特有の均一な太さによって無機質で洗練された印象を持ちながらも、細部には少し丸みを感じる表情があります。特に、「g」のループテール型のデザインなどには独特の個性があり、ニュートラルでありながらも、どこかモダンで印象に残るフォントだと感じました。
④レイアウト
レイアウトに関しては、各セクションに詳細ページへ遷移するCTAボタンが配置されていた点が印象的でした。
これは、情報量をあえて制限することで洗練された印象を保ちつつ、興味を持ったユーザーにはさらに詳しい情報を提供できる導線設計になっていると感じました。
また、全体的に、「左側のタイトル → 右側のコンテンツ」という視線誘導が統一されており、整列されたレイアウトによって情報が非常に見やすく整理されていました。さらに、画像・文章・文字間・行間など、余白が広めに設計されていることで、「上質感」「落ち着き」を印象として持たれる設計になっていると考えました。
このサイトはどのターゲットに向けて作られている？（仮説）
本サイトの主なターゲット層は、半導体業界や化学工業メーカーなど、製品製造に関わる企業の担当者や意思決定者であると考えました。
その理由として、サンフロロシステム株式会社様では、タンクやコンテナなどの設備内部を保護するライニング技術を提供しており、製品や設備に使用する素材選定に関わる企業に向けて、自社の技術力や安全性を訴求する必要があるためです。
特に、半導体業界や化学工業分野では、安全性や耐久性、品質への信頼が非常に重要視されるため、本サイトでは「洗練された印象」や「プロフェッショナルさ」、「先進性」を強く打ち出すことで、「この会社なら安心して任せられそう」「高い技術力を持っていそう」「一度相談してみたい」といった感情を持ってもらうことを目的として設計されていると感じました。
さらに、各セクションには詳細ページへ遷移できるCTAが配置されており、まずはサイト全体で興味や信頼感を持ってもらった上で、より詳しい技術情報へ誘導し、お問い合わせへ繋げる導線設計になっていると考えました。
写真に注目
FV（ファーストビュー）の動画では、冒頭でも触れたように、製造工程の「手元」に焦点が当てられていました。
普段なかなか目にすることのない加工技術や制作工程を映し出すことで、「高い技術力を持った会社である」という説得力を自然に生み出しており、プロフェッショナルさを感じさせる演出になっていると考えました。
また、About us セクションでも同様に、対象へ寄った写真や、作業中の様子を切り取った写真が使用されていました。
「技術へのこだわり・作業への真剣さ・現場感」をリアルに伝える役割を担っていると感じました。
製品情報のセクションでは、すべての写真が、「白背景＋製品」という統一された構図で撮影されており、それらが縦スライダー形式で流れるように配置されていました。そのため、清潔感・上質感・信頼性といった印象をもたらせていると考えました。
また、背景情報を極力減らすことで、製品そのものへ視線が集中しやすくなっており、無駄を削ぎ落とした洗練された印象にも繋がっていると考えられます。
そして、サイト内で使用されている写真全体にも共通した空気感がありました。「情報量は少なめ・彩度を抑えめにしていること・白や青を基調にしていること」で以下印象をもたらせていると感じました。
清潔感
冷静さ
先進性
無機質な美しさ
さらに、光の表現としても、昼光色のような白くクリアな光が多く使用されており、写真全体にクリーンで近未来的な印象を与えているように感じます。
また、一部の写真では、紺色を基調とした空間表現が使用されており、どこか宇宙を連想させるようなビジュアルになっておりました。
余白を大きく取り、情報量を抑えることで、写真そのものの存在感が際立ち、先進性・静けさ・高級感を感じさせる演出になっていると考えました。
さらに、人物の顔の向きに合わせて文字情報を配置することで、自然な視線誘導も設計されているように感じました。こうした細かなレイアウト設計によって、情報を無理なく読ませる工夫もされていると考えられます。
最後に
サンフロロシステム株式会社様のホームページからは、新たな技術や素材を紹介するだけではなく、「本気度」や「信頼感」を伝えることも目的として設計されていると感じられました。映像・フォント・余白・写真・情報設計など、あらゆる要素を通して一貫して表現している点が非常に印象的でした。
今回の分析を通して特に学びになったのは、「洗練されたデザイン」は単に見た目を整えるだけでは成立しないということです。
例えば、「左→右流れでCTAへ誘導」「余白のゆとり加減」「フォントの思想や表情をブランドイメージへ反映すること」「写真の色味や情報量によってブランドトーンや、見せたいものへの焦点の当て方」など、細かな積み重ねによってブランドの印象が形成されていることを改めて実感しました。
また、本サイトではプロフェッショナルさや高い技術力をしっかりと伝えており、BtoBサイトとしての信頼設計も非常に参考になりました。
私自身、このサンフロロシステム株式会社様のホームページの世界観や空気感がとても好みでしたため、「なぜこのデザインがかっこよく感じるのか」を分析することで、多くの学びを得ることができました。
また、今回特に参考になった余白設計やフォント設計、写真表現については、実際に模写をしながら、自分の制作にも落とし込んでいきたいと思います。
今回はここまでにさせていただきます！
引き続き、デザインの言語化学習に努めていき、自分の引き出しを増やしていきます！
これからは、50回まで継続を目標に続けていきます！
引き続き何卒よろしくお願いいたします。
