CASE STUDY / PUBLISHING

「堅い建設会社」を、
親しみやすく、伝わるかたちへ。

地域密着型の建設会社の「事業の幅」と「人柄」を、手描き風イラスト × AI 生成実写のハイブリッドで整理し、営業と採用の両方に使える 1 枚のランディングページ（全 10 セクション + 施工実績サブページ）にまとめました。実際に納品した LP と、60 秒の会社紹介ムービーをご覧いただけます。

制作の出発点

地域に根付いた建設会社は、「仕事の幅が広い」「依頼に柔軟に応える」という強みを持ちながら、企業サイトでは堅く見えてしまい、それが伝わっていない——というのがクライアントの初期相談でした。

• 工場、倉庫、事務所、店舗、医療福祉まで対応しているのに、ホームページではそれが伝わらない
• 「相談しやすい会社」のはずが、写真中心のサイトでは硬く見えてしまう
• 採用にも使いたいが、応募者が「この会社で何をするか」をイメージできない

60 秒で伝える、会社の世界観

LP の冒頭で流す会社紹介ムービー。手描き風イラストとリアル写真を交互に編集し、「地域の人と、地域の建物に向き合う会社」のトーンを 60 秒に凝縮しました。映像は Remotion（React ベースのプログラマブル動画）、ナレーションは Fish Audio の音声合成で制作。LP と同じイラスト素材を流用することで、クロスメディアでブランドトーンが揃います。

栃杜建設 60秒コーポレートムービー（サンプル） ・ YouTube で開く →

HEADs AI のアプローチ

実務の整理から AI を活用したビジュアル生成、コピー設計、ページ実装まで、一連の制作プロセスを一貫して支援しました。

営業と採用、両方に効く一枚に

LP は「営業ツール」と「採用エントリー入口」の両方として機能するよう設計しました。LP 単体ではなく、同じイラストアセットを SNS 投稿にも横展開することで、見込み顧客と応募者の両方に継続的にリーチします。

栃

栃杜建設

@tochimori_kensetsu · 2時間

業種別ソリューション、LP にまとめました🏗️ 工場・倉庫・事務所・店舗・医療福祉まで、業種を問わず対応。「うちの建物、これってお願いできる？」まずは気軽にご相談ください。

業種・業界、問わず

工場・倉庫・
事務所・店舗、
業種を問わず。

創業 32 年、地域で 500 件超の建物に伴走してきました。改修も新築も増築も、まず相談から。

対応領域 6 業種 ・ 鉄骨 / RC / 木造

TOCHIMORI CONSTRUCTION

For Sales

業種別ソリューション（工場・倉庫・事務所・店舗・医療福祉）を一覧できる LP に加え、SNS では現場の日々・納品物・施工事例を継続的に発信。商談前に「何をしている会社か」「最近の活動」が同時に伝わり、案件相談のきっかけを作ります。

栃

栃杜建設 採用

@tochimori_recruit · 5時間

#現場の声 シリーズ #02。入社 2 年目 A.T が語る「聞ける現場」の話。「最初は不安だったけど、先輩に何でも聞ける雰囲気がうれしい」 — 続きと、配筋検査の朝のエピソードは採用ページにて 👇

現場の声 #02

「先輩に何でも
聞ける雰囲気が、
ありがたい。」

「わからない」を、口にできる現場でした。週 1 回の現場ふりかえりも続いています。

— A.T / 入社 2 年目（2024 年新卒入社・建築学校卒）

TOCHIMORI / RECRUIT

For Recruiting

採用ページに飛ばす前に、SNS で「会社の空気」と「働く人の表情」を先に届けます。応募の心理的ハードルを下げる役割を担い、興味を持った段階で採用ページへスムーズに誘導する設計です。

※ 本サンプルでは独立した採用ページは未実装です。本番では「SNS 投稿 → 採用ページ → エントリーフォーム」の動線をご提案します。

ビジュアル戦略 — イラスト × 実写ハイブリッド

建設業の事例写真だけでは「堅い」「他社と差が出ない」という課題に対して、コミュニケーションシーン（相談・打ち合わせ・チームのやり取り）には GPT Image 2 で生成した手描き風イラスト 24 点を、施工実績・建物の質感には AI 生成のリアル写真 13 点を充てる、というルールを設計しました。イラストは白背景で生成し、CSS の mix-blend-mode: multiply で LP 側の任意の背景色に自然に溶け込ませる方式です。

• イラスト：会社の姿勢・人柄・働き方を、温度感をもって伝える（4–5 頭身キャラ、フラットカラー、手描き線）
• 写真：建物の質感、施工実績の説得力、現場のスケールを担保する
• UI 装飾：色チップとスラッシュリビール（斜線 clip-path ワイプ）で「設計図面っぽさ」を散りばめ、建設会社らしさを補強
• カラー：深グリーン（#1B4332）＋オフホワイト（#F5F3EF）＋ヘルメットオレンジ（#F5A623）のアースカラー設計

動きで伝える、信頼感と親しみ

派手な演出ではなく、「読む手を止めない」「読み手の視線を誘導する」ためのインタラクションを設計しました。

• スクロールフェードイン：IntersectionObserver で順次表示、staggered で視線を一段ずつ降ろす
• 施工実績マーキー：requestAnimationFrame で 7 件をシームレスループ、ホバーで一時停止 / 矢印操作で 4 秒ポーズ
• Sticky スクロールストーリーテリング：左テキスト固定 + 右コンテンツ順次表示で「相談 → 完成」の流れを体感させる
• Hero キャラバブル：丸抜きキャラ 7 個を浮遊配置、モバイルでは横スクロールティッカーに自動切替
• prefers-reduced-motion：全アニメーション無効化に完全対応、アクセシビリティ担保

詳細ページのデモ — 施工実績サブページ

LP の施工実績セクション（全 7 件）のうち、「北関東パーツ 製造棟 改修工事」については、Before / After 写真、工事概要、施工の流れまで掲載した詳細ページを 1 ページだけ用意しています。建設会社の事例ページとして、どこまで掘り下げて見せるかの参考としてご覧ください。

※ このサンプル LP では、施工実績セクションのどのカードをクリックしても同じ詳細ページに遷移します。実案件では案件ごとに個別の詳細ページを用意します。