デザイン分析日記33
Webサイトから学ぶ、デザイン分析
こんにちは。デザイン歴1年ほどのひよっこですが、本業と両立しながら、心を動かされたデザインを分析・発信していきます。以前は週一で発信していましたが、自分のタイミングにて発信できればと考えております、、、。（甘えてしまっておりますが何卒。）
今回ご紹介するのは、株式会社peace put様（https://peaceput.com/）です。
サイトをどのように感じたのか？
このサイトを見たとき、「静かなる情熱」「クラシックなヨーロッパ感」「重厚感」、そして「モダンで洗練された印象」を受けました。
どのような要素で感じたか？
（モーション・レイアウト・フォント）
まず、ファーストビュー（FV）の映像演出から、株式会社peace put様の世界観が強く表現されていると感じました。映像全体は暗めのトーンで構成されており、真剣さや職人としてのこだわりを感じさせる演出になっています。
特に、朝焼けの都会の風景から始まり、パンやドーナツを生地から丁寧に手作りしている制作風景へと移り変わる構成・「制作過程」に焦点が当てられていました。これにより、ものづくりに対する真摯な姿勢や、静かでありながら強い情熱が伝わってくると感じました。
さらに、メッセージにもある「世界中の街に、ひとときの平和を置いていく。」というコンセプトに合わせて、商品を手にしたユーザーが笑顔になる様子が描かれており、「食」を通じて穏やかな時間や体験を届けるブランドであることが表現されていると考えました。
また、映像内では「:p」というロゴが街中に増えていく演出が取り入れられており、ブランドが世界中に広がり、「平和を置いていく」という思想を視覚的に表現している点も印象的でした。
映像終了後のヒストリーやビジョンのセクションでは、コラージュ表現を用いた紙面デザインが採用されており、歴史や文化性を感じさせる重厚感のあるを表現を感じました。
フォント面では、「Linotype Didot」が使用されており、クラシックな西洋の雰囲気やエレガントさを演出していると感じました。Didot系書体特有の繊細で上品な印象が、コラージュ表現とも調和しており、ブランド全体に高級感を与えています。
一方で、このフォントは現代向けにリニューアルされた書体でもあるため、クラシックになりすぎず、モダンな空気感も同時に保たれていると考えました。
また、サブタイトルの日本語には「しっぽり明朝」、本文には「Noto Sans JP」が使用されており、高級感や上質さを演出しながらも、可読性とのバランスが取られていました。明朝体によってブランドの世界観を強調しつつ、本文では読みやすいゴシック体を採用することで、バランスが取られていると考えました。ちなみにサブタイトルの日本語には「しっぽり明朝」は18px,
「Noto Sans JP」は12pxにて統一（行間：23.4px）でした。
※おそらく世界観(ビジュアル面)を第一であるため、写真や、文字要素が大きくなってしまうと情報過多になってしまうため、上記サイズにて調整が施されていると考えました。
さらに、4〜8px程度の控えめな角丸や、ホバー時のインタラクション、スクロール時の滑らかなモーションなども組み合わさることで、クラシックな世界観の中にも現代的な洗練さが加えられていると考えられます。
これらの要素が組み合わさることで、本サイトは「静かな情熱」と「洗練されたモダンさ」を両立したブランド体験を実現していると感じました。
このサイトはどのターゲットに向けて作られている？（仮説）
本サイトの主なターゲットは、20〜50代のパンやドーナツが好きなユーザー層であると考えました。また、今人気の「I’m donut？」などのブランドの世界観に共感する人々に向けて、「株式会社peace put」という企業そのものを知ってもらう目的もあると感じました。
その理由として、本サイトでは単に店舗情報を掲載するだけではなく、映像やデザインを通して、ブランドの思想や設立背景、今後のビジョンまでホームページ内の構成に組み込まれ、表現されていたからです。
特に、「世界中の街に、ひとときの平和を置いていく。」というメッセージを軸に、制作風景やユーザーの笑顔を映し出すことで、「食を通じて体験や感情を届けるブランド」であることが強く伝わる構成になっていました。
また、クラシックで重厚感のあるデザインや、洗練されたモーション表現を組み合わせることで、単なる飲食ブランドとの差別化「カルチャーや世界観を持ったブランド」として印象づけていると考えられます。
見ている人に対して「おしゃれなパン屋さん」「おしゃれなドーナッツ屋さん」を運営している会社という認識だけではなく、「ブランドの思想や価値観に共感するきっかけ」を与え、ファン化へつなげる狙いがあると感じました。
さらに、本サイトは採用目的の役割も担っていると考えられます。ブランド一覧を見ると、AMAM DACOTANやI’m donut？など、現在高い人気を持つブランドを複数展開しており、それらを統括する企業としての魅力を打ち出していました。
そのため、パン職人や飲食業界で働きたい人に対しても、「このブランドに関わりたい」「この世界観の中で働きたい」と感じてもらうためのブランディング設計がされていると考えられます。
このように、本サイトは「ブランドの世界観を伝えること」を軸にしながら、ファン化と採用ブランディングを同時に担うサイト設計になっていると感じました。
写真に注目
まず、History & Visionセクションの写真に注目すると、紙面のようなコラージュ表現が採用されており、白黒をベースにセピア加工で統一されていました。
セピア加工を施すことで、アンティークな世界観や歴史を感じさせる雰囲気が演出されており、ブランド全体に温かみや味わいを与えていると感じました。また、写真をよく観察すると粒状感のあるグレイン加工も施されており、紙のような質感やクラフト感をプラスで表現していると考えました。
さらに印象的だったのは、「パスタ食堂 ヒラコンシェ」の店名・営業時間看板のみ、セピア加工ではなくモノクロ加工で表現されていた点です。周囲との差異をあえて作ることで、ブランドの始まりとなった店舗であることを強調し、ルーツを印象づける役割を担っていると感じました。
また、各ブランド紹介の写真では、単に商品を見せるだけではなく、それぞれのブランドの空気感が伝わる構成になっていました。
例えば、
店内の広々とした空間を映すことでブランドの雰囲気を伝える
商品にフォーカスすることで魅力やこだわりを強調する
外観写真によって店舗の存在感を伝える
など、ブランドごとに見せ方を変えることで、それぞれの個性を表現していると考えられます。
人物写真についても、顔の向きや構図に統一感があり、全体として一つの世界観にまとまっている印象を受けました。また、どの人物も真剣に作業へ取り組んでいる瞬間が切り取られており、単なる「働く姿」ではなく、ものづくりに対する本気度や職人としての姿勢が伝わる写真表現になっていると感じました。
まとめ
「ブランドの世界観を一貫して設計すること」の重要性を学びました。
特に印象的だったのは、映像・写真・フォント・モーション・色味など、あらゆる要素が「静かな情熱」や「洗練された世界観」というブランドコンセプトに統一されていた点です。
ファーストビュー（FV）の映像では、制作過程に焦点を当てることで、職人としての真摯な姿勢や、ものづくりへの情熱が表現されていました。また、ユーザーが商品を手にして笑顔になる描写を加えることで、「食」を通じて体験や感情を届けるブランドであることも伝わってきました。
また、写真表現においても、セピア加工やグレイン加工を施すことで、アンティーク感や温かみ、クラフト感が演出されており、ブランドの歴史や空気感を視覚的に表現している点が印象的でした。
フォント設計においても、「Linotype Didot」によるクラシックで上品な印象と、「Noto Sans JP」による可読性を両立することで、世界観を保ちながらも情報の読みやすさが担保されていました。
さらに、採用やファン化も含めて設計されていることから、企業サイトは単なる会社紹介ではなく、「ブランドへの共感を生み出す場」であることも学びました。
studiodetailsさんが作成しているWebサイトは動画に作り込みがされていることから世界観に没頭できるWebサイトになっているため、参考になります。
今回はここまでにさせていただきます！
引き続き、デザインの言語化学習に努めていき、自分の引き出しを増やしていきます！
これからは、50回まで継続を目標に続けていきます！
引き続き何卒よろしくお願いいたします。
