どどんぐりラボ

同じ人が作ったのに同じに見えない。業種別サイトを5つ作って気づいたこと

2026年8月 / Web制作・デザイン

カフェ・整体院・ジム・士業（コンサル）・美容室のホームページを、1週かけて5つ立て続けに作りました。あえて同じテンプレートを使い回さず、配色もフォントも「動き方」まで業種ごとに作り直しています。全部実際に開けるページとして公開しているので、先に見てもらったほうが早いと思います。

見比べると、同じ制作者が同じ週に作ったとは思えないくらいバラバラのはずです。それは狙って作った結果で、今回はその考え方の話です。

「業種に合わせる」を配色だけで済ませない

ホームページ制作でよくある進め方は、1つの型を決めておいて、業種ごとに色だけ差し替えるというやり方です。青にすれば誠実な雰囲気、緑にすれば健康的な雰囲気——たしかに間違いではないのですが、これだけだと「なんとなくそれっぽい」止まりで終わります。

実際にやっているのは、色より前の段階です。その業種の世界で本当に使われている道具・所作・空気を先に洗い出してから、そこから配色とフォントと動きを逆算します。カフェなら湯気とカップ、整体院なら呼吸のリズム、ジムなら鍛錬の反復——先に「その業種の身体感覚」を決めて、それをどう画面の動きに翻訳するかを考えます。

業種ごとの分解表

5サイトそれぞれ、何を手がかりにしたかをまとめるとこうなります。

業種	手がかりにした感覚	動きへの翻訳
カフェ	抽出を待つ間の静けさ	湯気がゆっくり立ちのぼる粒子アニメーション
整体院	施術中の深い呼吸	8秒周期で拡大・縮小する同心円（吸って吐くリズムと同じ長さ）
ジム	追い込む瞬間の勢い	数字が一気にカウントアップ、マーキーが途切れず流れ続ける
士業・コンサル	データに基づく静かな説得力	グラデーションがごくゆっくり漂う（速いと安っぽくなるので抑えた）
美容室	仕上がりを待つ贅沢な時間	金色の粒子が常に揺らめく、写真を使わず質感だけで魅せる

参考にしたのは「同業種の海外大手」であって、素材サイトではない

配色見本やテンプレート集は一切見ていません。代わりに見たのは、その業種で実際に世界的な支持を得ているブランドが、自社サイトでどんな「間」と「動き」を選んでいるかです。カフェならBlue Bottle Coffeeのような編集的な余白の取り方、ジムならNikeのような勢いのあるタイポグラフィ、士業ならStripeのような静かに漂うグラデーション——ジャンルは違っても、共通するのは「動きに理由がある」という点でした。飾りで動かしているところは1つもありません。

動きは「つけた方が印象に残る」ではなく「削れないものだけ残す」

5サイトとも動きの要素は1つか2つに絞っています。ジムのページなら数字のカウントアップとマーキー、それ以外は静止したままです。動きを足せば足すほど「AIっぽさ」も同時に増えます。本当に効くのは物量ではなく、その業種を象徴する動きを1つだけ丁寧に作ることでした。

技術的には、5サイトとも外部の画像ファイルを一切使っていません。湯気も、呼吸する円も、揺らめく粒子も、すべて<canvas>でその場で計算して描いています。画像がゼロなので表示も軽く、スマートフォンでも遅延なく動きます（画像を軽くする話は別の記事にまとめています）。

まとめ

1. 配色だけで「業種対応」を済ませない。その業種の身体感覚を先に言語化する
2. 参考にするのは素材集ではなく、その業種で実際に支持されているブランドの「動きの理由」
3. 動きは物量で足さず、象徴的な1つだけを丁寧に作る
4. 画像を使わず計算描画にすれば、動きを足しても表示は軽いまま

他の記事もどうぞ。サイトが重い原因の9割は画像、OBSのスティンガーと透過WebM、バトルマップの自動生成。