「伝統ある職業の魅力を伝えたい。でも、若い人にも興味を持ってもらえるサイトにしてほしい」

左官工事を手がける従業員約50人の建設会社から、コーポレートサイト制作のご依頼をいただいたとき、最初に伝えられたのがこの言葉でした。

伝統の重みと若者への親しみやすさ。この2つは一見すると相反する要素です。重厚感を出せば堅くなり、カジュアルにすれば軽く見える。どちらかに寄せれば、もう片方が犠牲になりかねません。

この記事では、この「相反する2つの要望」をどのようにデザインで両立させたのか、カラー設計・フォント選定・アニメーション・写真撮影など、具体的な判断プロセスをお伝えします。建設業のホームページ制作を検討されている方の参考になれば幸いです。

クライアントからの要望：「伝統の重みと、若者への親しみやすさを両立してほしい」

左官という職業は、日本の建築文化を支えてきた伝統ある仕事です。漆喰や珪藻土を使った壁塗りの技術は、何百年もの歴史があります。

クライアントはこの伝統に強い誇りを持っていらっしゃいました。一方で、業界全体の課題として若手人材の不足がありました。

「左官の仕事は本当に素晴らしいものなんです。でも、若い人たちにはその魅力がなかなか伝わらない。ホームページを見て『ここで働きたい』と思ってもらえるようなサイトにしてほしい」

つまり、求められていたのは以下の2つでした。

• 伝統・格式：左官という職業の歴史的な価値や技術の奥深さを表現すること
• 若者への訴求：20代・30代が「かっこいい」「この会社で働いてみたい」と感じるモダンさ

この2つを同時に満たすことが、今回のサイト制作における最大の課題でした。

コンセプト設計：全ての判断基準を1つの哲学から派生させる

デザインの方向性がぶれないようにするために、まず1つのコンセプトを明確にしました。

それは「伝統のコンテンツを、モダンな器で届ける」という考え方です。

写真やテキストなどの「中身（コンテンツ）」は、左官の伝統・技術・歴史をしっかりと伝える。一方で、それを見せる「器（デザイン・動き・レイアウト）」は、現代的で洗練されたものにする。

このコンセプトさえ定まれば、あとは全てのデザイン判断をここから派生させることができます。

• カラーは？→ 伝統を感じさせつつ、重くなりすぎない配色
• フォントは？→ 格式がありつつ、読みやすさも確保
• アニメーションは？→ 伝統的なコンテンツにモダンな動きを加える
• 写真は？→ 本物の職人の姿を、プロの技術で美しく撮る

デザインの一貫性は、1つの明確なコンセプトから生まれます。これは建設業に限らず、あらゆるWebサイト制作に共通する原則です。

カラー設計：「黒を使いすぎると硬くなる」というクライアントの一言

「伝統」を表現するカラーとして、最初に検討したのは黒をベースにした配色でした。和の格式、職人の重厚感——黒はこれらを最も直接的に表現できる色です。

しかし、デザイン案をクライアントに提示した際に、こんな言葉をいただきました。

「黒を使いすぎると、ちょっと硬くなりすぎる気がするんですよね。もう少し柔らかい印象にできませんか」

この一言は非常に重要でした。まさにコンセプトの「若者への親しみやすさ」に関わる指摘だったからです。

そこで、カラー設計を以下のように調整しました。

• ベージュ：左官で扱う漆喰や土壁を連想させる温かみのある色。「伝統」と「柔らかさ」を両立
• ゴールド：格式と高級感を表現。黒ほど硬くなく、上品な印象を与える
• 白：清潔感と現代的な印象。余白を活かすことでモダンさを演出
• 黒：完全に排除するのではなく、テキストやアクセントとして限定的に使用

結果として、「和の伝統を感じさせながらも、明るく開放的」なカラーパレットが完成しました。黒を主役から脇役に変えたことで、若い世代にも抵抗なく受け入れられるトーンになったのです。

フォントと縦書き：和の格式をモダンに表現する

フォント選定も、コンセプトに基づいた重要な判断でした。

求められたのは、洗練されつつも硬くなりすぎない書体です。明朝体は格式がありますが、使い方によっては「古めかしい」印象になりかねません。逆にゴシック体はモダンですが、伝統的な雰囲気が薄れます。

最終的に、見出しには洗練された明朝体系のフォント、本文には視認性の高いゴシック体を採用しました。見出しで「格式」を、本文で「読みやすさ」を確保する組み合わせです。

さらに、サイトの一部では縦書きテキストを取り入れました。日本語の縦書きは、それだけで和の雰囲気を強く打ち出すことができます。ただし、全体を縦書きにすると読みにくくなるため、キャッチコピーやセクション見出しなど、限定的なポイントで使用しました。

この「部分的な縦書き」が、サイト全体に和の空気感を加えつつ、モダンなレイアウトとの調和を保つ鍵になりました。

アニメーションが「古さ」を「新しさ」に変える

今回のサイトで最も効果的だったのが、GSAPを使ったモダンなアニメーションです。

GSAP（GreenSock Animation Platform）は、Webサイトに滑らかで高品質なアニメーションを実装するためのJavaScriptライブラリです。スクロールに連動したアニメーションや、要素のフェードイン・パララックス効果などを実現できます。

なぜアニメーションが重要だったのか。それは、伝統的なコンテンツをモダンな動きで見せることで「古臭さ」を完全に払拭できるからです。

具体的には、以下のようなアニメーションを実装しました。

• スクロール連動のフェードイン：セクションごとにコンテンツが滑らかに表示される
• パララックス効果：背景画像とテキストが異なる速度でスクロールし、奥行きを演出
• テキストアニメーション：見出しテキストが1文字ずつ表示される演出

左官の壁塗りの写真や、職人が作業する風景——これらの「伝統的な素材」が、モダンなアニメーションとともに画面に現れることで、「古い業界」ではなく「歴史ある、かっこいい職業」という印象に変わります。

技術面では、Next.js + GSAPの組み合わせで実装しました。さらに、画像はWebP形式に最適化し、表示速度も確保しています。美しいアニメーションがあっても、ページの読み込みが遅ければ本末転倒だからです。

プロの撮影とイラストで「本物の素材」を使う

デザインの器をどれだけ美しくしても、中身が伴わなければ意味がありません。今回は写真・動画・イラストの全てにプロのクリエイターを起用しました。

プロカメラマンによる2回の撮影

プロのカメラマンに依頼し、計2回の撮影を実施しました。

• 1回目：現場での作業風景。左官職人が壁を塗る手元、作業中の表情、完成した漆喰の壁の美しさ
• 2回目：会社の雰囲気やチームの様子。若手からベテランまで、スタッフの人柄が伝わるカット

素材写真やフリー画像では絶対に出せない「本物感」が、サイト全体の説得力を大きく高めています。

企業PR動画の制作

2回の撮影を通じて、静止画だけでなく企業PR動画も制作しました。動画はサイトのファーストビューに配置し、訪問者が最初に目にするコンテンツとしています。左官の作業風景が美しい映像で流れることで、言葉では伝えきれない職業の魅力を直感的に伝えることができます。

オリジナルイラスト

プロのイラストレーターと協力し、オリジナルイラストも制作しました。左官の道具や工程を分かりやすく伝えるために使用しています。写真だけでは説明しにくい内容を、イラストで補完することで、サイトの情報設計がより充実したものになりました。

このように、写真・動画・イラストという3つの視覚素材を全てオリジナルで用意したことが、サイトの完成度を大きく引き上げました。全ての素材がコンセプトに沿って制作されているため、サイト全体に統一感と本物の説得力が生まれています。

まとめ：デザインは「見た目」ではなく「戦略」

今回の建設会社のサイト制作を通じてお伝えしたかったのは、デザインとは「きれいに見せること」ではなく、「ビジネスの課題を解決するための戦略」だということです。

「伝統の重みを伝えたい」と「若い人にも響くサイトにしたい」。この2つの要望は、一見すると矛盾しています。しかし、明確なコンセプトを設計し、そこから全てのデザイン判断を派生させることで、両立は十分に可能です。

• カラー：黒に頼らず、ベージュ・ゴールド・白で伝統と柔らかさを両立
• フォント：明朝体とゴシック体の使い分けで格式と読みやすさを確保
• 縦書き：部分的な使用で和の空気感を加える
• アニメーション：GSAPで伝統的コンテンツにモダンな動きを加え、古さを払拭
• 素材：プロによる撮影・動画・イラストで本物の説得力を確保

建設業のホームページ制作でお悩みの方は、ぜひ一度ご相談ください。御社の強みや課題をヒアリングした上で、ビジネスの目的を達成するためのデザイン戦略をご提案いたします。

採用のためのホームページという視点

この建設会社のサイトは、単なる企業紹介ではなく「採用ツール」として設計しました。建築業界は慢性的な人手不足。求人票だけでは「この会社で働きたい」とは思えません。

ホームページで企業の魅力をビジュアルで伝え、応募への動線を作る。これが採用目的のHP制作です。

プロの写真・動画・イラストで「本物の魅力」を見せる

このプロジェクトでは、提携しているプロのカメラマンが2回の写真撮影と2回の動画撮影を実施しました。オリジナルイラストも提携イラストレーターと協力して制作。写真・動画・イラスト全て込みのフルパッケージです。

プロの素材を使うことで、求職者に「この会社はちゃんとしている」「ここで働きたい」と思ってもらえるクオリティを実現しています。

PR動画の力：Instagramで届ける採用メッセージ

別のクライアントでは、採用向けPR動画も制作しました。3分弱の本編1本と2分弱のショート版2本。オープニング・エンディング付きで、時系列に仕事の流れを紹介し、途中からインタビュー映像を挟む構成です。

動画制作で難しかったのは、外から見る企業の魅力と、社員・経営者が考える魅力が異なること。どちらの魅力も発信する必要がありました。テンポ・カラー・BGM・アニメーションの構成で、語りきれない部分——信頼感なのか、働きやすい雰囲気なのか、伝統なのか——を映像で表現しています。

この動画は会社説明会のスライド間に挿入する形で使用されるほか、適宜編集してInstagram用リールに転用されています。

制作費用の透明性：フルパッケージに何が含まれているか

「ホームページ制作にいくらかかるの？」は最も多い質問です。この建設会社のプロジェクトの場合、以下が全て含まれたフルパッケージでの制作でした。

• オリジナルデザインのコーポレートサイト制作（Next.js + GSAPアニメーション）
• プロカメラマンによる写真撮影（2回）
• 動画撮影（2回）
• オリジナルイラスト制作
• SEO内部対策・レスポンシブ対応

撮影・動画・イラストを別々の業者に頼むとコストが膨らみがちですが、ワンストップで対応することで全体の費用を抑えています。