デザイン分析日記29
Webサイトから学ぶ、デザイン分析
こんにちは。デザイン歴1年ほどのひよっこですが、本業と両立しながら、心を動かされたデザインを分析・発信していきます。週1〜2回のペースで続けていきます！（熱がこもりすぎると続かない気がするので…！）
→私ごとで大変恐縮ですが、恋人と別れてモチベーションが下がってしまい、少しペースが下がります、、、すみません。
今回ご紹介するのは、松尾工務店様（https://www.matsuo-komuten.co.jp/）です。
① サイトをどのように感じたのか？
このサイトを見たとき、真っ先に感じたのは、
「かっこよさ」「110年続く伝統性」「質の高さ」「洗練された印象」、そして「未来への将来性」でした。
なぜそのように感じたのか？
まず、ファーストビュー（FV）の演出が非常に印象的でした。
背景には、ロゴカラーである青・緑・赤を基調としたグラデーションが流動的に移り変わる表現が用いられています。この“流れ”のあるグラデーションは、単なる装飾ではなく、
110年という歴史の積み重ね
時代を超えて続く企業の歩み
伝統と革新の両立
を象徴しているように感じられました。また、その情緒的で洗練された色の変化が、「重厚感」や「かっこよさ」につながっていると考えました。
写真表現について
使用されている写真も印象的でした。
人と建物をつなぐ企業であることから、人と建築が関係性を持つシーンが選ばれており、事業内容が直感的に伝わる構成になっています。
さらに、写真全体にはやや淡く、フィルムカメラで撮影したような質感が施されていました。このトーンによって、
歴史や時間の積み重ねを感じさせる
過去を大切にする企業姿勢を表現する
同時に、トレンド感のある“おしゃれさ”も演出する
といった複数の印象を同時に成立させていると感じました。
フォント選定から感じたこと
フォントは「Reckless Standard」と「しっぽり明朝」を組み合わせて使用されていました。Reckless Standard は、モード、ラグジュアリー感をを持つ書体でありました。一方で しっぽり明朝 は、繊細さ、静けさ日本的な情緒を感じさせる書体です。
この2書体の組み合わせによって、伝統（日本的な静けさ） × 前衛性（モード感）
という二面性が成立し、伝統を重んじながらも計算されたバランスで設計されていると考えました。そのため、単なる老舗企業ではなく、「歴史 × 現代性 × 洗練」を兼ね備えた印象を与えています。
また、その印象が「110年続くが、未来も見据えている企業」という印象につながっていると考えました。
単に「かっこいい」のではなく、
「歴史のある企業が、未来へ進んでいる姿」を視覚で表現できている点が、このサイトの大きな魅力だと考えます。
② このサイトはどのターゲットに向けて作られている？（仮説）
本サイトは、主に20代後半〜50代・60代の男女をターゲットに設計されていると考えられます。
20代後半〜30代：採用を検討している求職者層
50代・60代：協力会社の役員層や、建設を依頼したい企業担当者といった、立場の異なる複数のターゲットに向けて発信されていると感じました。
このサイトは単なる企業紹介ではなく、「企業の信頼性を伝える」、「採用への魅力を訴求する」、「問い合わせや案件相談につなげる」といった目的を持ち、松尾工務店様のブランド価値を総合的に伝える設計になっていると考えました。
なぜそのデザインがターゲットに刺さるのか？
110年という長い歴史を持つ企業である以上、「伝統」や「実績」は大きな強みです。しかし、それを強調しすぎると、保守的・古いという印象を与えてしまう可能性もあります。
そこで本サイトでは、モダンなフォント選定・洗練されたビジュアル表現・流動的なグラデーション演出など、現代的なデザイン要素を積極的に取り入れています。
これにより、歴史と実績のある安心感・今の時代に適応している柔軟性・未来へ進み続ける企業姿勢を同時に伝えることに成功していると感じました。
求職者層にとっては「古い企業」ではなく「挑戦できる企業」と映る
発注側にとっては「実績と信頼がありつつ、洗練された企業」と映る
という二方向への訴求が可能になっている為、幅広いターゲット層に刺さる理由だと考えました。
③気になったセクション分析
1.FV
ファーストビュー（FV）の表現
ファーストビューは、「将来性」と「歴史」の両方を感じさせるデザインだと感じました。
まず印象的なのは、背景に用いられている動的なグラデーション表現です。色がゆるやかに移り変わる演出は、時代とともに変化してきた企業の歩みを象徴しているように感じられました。また、使用されている色は松尾工務店様のロゴを基調とした原色で構成されており、ブランドのアイデンティティをしっかりと視覚に落とし込んでいる点も印象的でした。
中央に配置された写真の構図も非常に意味深いものだと感じました。人物の背後には街並みが広がっており、「110年にわたって街をつくり続けてきた企業」であることが直感的に伝わる構成になっています。
人物が上を向いていること
→ 未来を見つめる姿勢・将来性の象徴
人物がややぼかされていること
→ 主役は“個人”ではなく、“街や社会”であることの表現
といった演出から、「人と街をつなぐ企業」というメッセージが視覚的に伝わってくるように感じました。
また、キャッチコピーである
「可能性を実現する、技術と人。」
という言葉も印象的です。
実現できそうでできなかったこと
理想として描いていた未来
を、技術と人の力で形にできる企業である、
という力強いメッセージとして機能していると感じました。
このファーストビューは、
色の移ろいで「時間と歴史」を表現し
写真構図で「街と人の関係性」を伝え
コピーで「未来への可能性」を提示する
という、非常に計算されたブランディング設計になっていると考えました。単にビジュアルとしてかっこいいだけでなく、「110年の歴史を持ちながら、未来へ向かう企業像」を明確に描いている点が、このFVの強みだと感じました。
2.セクション
このセクションでは、全体としてシンプルな構成でありながら、どこか洗練された印象を受けました。
２つ理由があると考えました。
① ホバーアニメーションによる「現代性」
まず印象的だったのは、マウスホバー時のアニメーションです。
ホバー前は非常にシンプルで、やや静的・単調にも見える構成ですが、マウスホバーをすると各要素に対応した写真が表示される仕様になっています。この動きは、近年のWebデザインでよく見られる表現手法であり、トレンドを取り入れた設計であることがうかがえます。
その結果、
静的な印象に動きを加える
ユーザーの能動的な操作を促す
「今っぽさ」やモダンな印象を与える
といった効果が生まれていると考えました。シンプルなレイアウトだからこそ、こうした動きがより際立ち、「洗練された現代的な印象」につながっているのだと感じました。
② ABOUT US下部の説明文の文字組
もう一つ印象的だったのが、「ABOUT US」下部に配置された説明文の文字組です。
一般的なWebサイトでは、段落の文頭は空けない、もしくは1文字分だけ行頭を取るケースが多いですが、このサイトではおそらく2文字分程度の空きが設けられていました。
この処理には明確な意図があると感じました。文頭を広めに空けることで、視線が自然に内側へ誘導されるといった効果が期待できます。
単なる装飾ではなく、「目線の流れ」を意識して設計された文字組である可能性が高いと考えました。
3.セクション
このセクションで印象的だったのは、写真がスライドショー形式で切り替わる演出や、写真のトーンや人物の表情、そしてキャッチコピーが組み合わさることで、企業の「本気度」や「熱量」が強く伝わってきました。
特に、人物が将来を見据えるような構図で撮影されている点は、採用情報との相性が非常に良いと感じました。
上を向く視線
前を見据える姿勢
動きのある写真演出
これらが合わさることで、「未来をつくる会社」「これから挑戦する場所」というメッセージが自然に伝わる構成になっていると考えました。
タイポグラフィ設計の分析
数値面を分析してみると、以下のような設計になっていました。
キャッチコピー：72px
キャッチコピー下の余白：30px
テキスト本文：20px
キャッチコピーと本文のサイズ差は約2.4倍、余白との関係性で見ると約3.6倍のジャンプ率が生まれています。
この明確なサイズ差によって、
情報の階層がはっきりする
一瞬で重要なメッセージが伝わる
視線の流れが迷わない
といった効果が生まれていると考えました。また、余白がしっかりと確保されていることで、熱量のあるコピーでありながらも圧迫感を感じさせず、読みやすさと視認性が両立されています。
「ここで働く未来」を想像させるセクション設計になっている点が、とても参考になるポイントだと思います。
4.セクション
最後のフッター部分に関しても、抜け目なくデザインが設計されていることが見て取れました。まず印象的なのは、フッター上部に配置された「M」のモチーフです。この「M」を建物の屋根に見立てたデザインが施されています。
そしてその下部の右上には「MATSUO」のロゴ表記と、「指定請求書ダウンロード」ボタンが設置されています。これは実務的に重要な情報であり、利用頻度の高い導線であることが推察できます。
一方、左側にはサイトマップ関連の情報が整理され、下部には電話番号が配置されています。さらに右下最下部にはプライバシーポリシーへのリンクが設けられています。
このレイアウトを視線の流れで見ると、
右上（ロゴ・ダウンロードボタン）
左側（サイト情報）
左下（電話番号）
右下最下部（プライバシーポリシー）
という順にZの順番で自然と目線が誘導される構図になっています。
単なる情報の羅列ではなく、優先順位が、レイアウトによって明確に整理されていると考えました。
制作者としての学び
今回のサイト分析を通して、制作者として特に学びになったポイントは大きく3つあります。
① 「歴史 × 未来」はデザインで同時に表現できる
110年という歴史は、それだけで強いブランド資産です。
しかし、伝統を前面に出しすぎると「古さ」につながるリスクもあります。
本サイトでは、流動的なグラデーション（動き・未来性）・モード感のある欧文フォント（現代性）・明朝体による静けさ（伝統性）
を組み合わせることで、「歴史がある」＝「進化し続けている」
という印象へ昇華させていました。
② 写真の構図はメッセージそのもの
FVの写真構図では、人物が上を向いている（未来）・背景に街並みが広がる（社会・建築）・人物はややぼかす（主役は街）という設計がなされていました。これは単なるビジュアルではなく、企業理念を視覚化した構図設計です。
③ フッターまで設計が細かく設定されている
Mの屋根モチーフ・Z型の視線誘導・実務導線の明確化がこのサイトのフッターには設計されておりました。
多くのサイトはフッターは最後まで設計が続かずになってしまう（私もフッターは曖昧にしてしまうことが多いです、、、。）
その為、神は細部に宿るをもとに気を抜かず最後の最後までやり切ることを
改めて頭に叩き込みます。
今回はここまでにさせていただきます！
引き続き、デザインの言語化学習に努めていき、自分の引き出しを増やしていきます！
30回まで目標に続けていきますため、何卒よろしくお願いいたします。
