「製造業 ホームページ デザイン」で検索すると、かっこいいサイトの事例集が並びます。参考にはなりますが、自社のサイトで何が効くのかは分かりません。この記事では、見た目の好みではなく、見に来る人が判断に使っている要素から、製造業のホームページのデザインで効くものと効かないものを分けます。写真の撮り方は「工場の写真の撮り方」の記事に、ページの構成は「製造業のホームページに必要なページ」の記事にあります。
見る人は、何で判断しているか
大手メーカーの開発設計者4名への聞き取り調査では、外注先のサイトで最も重視するのは製品や取引先の実績で、ISO認証はさほど重視されていませんでした。デザインについての回答は3つ。製品写真は1点ずつより集合写真を好む。技術の実績はグラフなどで図示してあるとよい。検索結果ではタイトルだけでなく説明文も読んで開くかを決める（テクノポート調査、MONOist 2024年4月）。製造業専門の制作会社も「画像、イラスト、グラフ、表、動画など、できるだけ文字以外の情報を入れて、見るだけで伝わるように」と書き、技術の詳細から始めて最後に解決できる課題を書くページを失敗例に挙げています。
求職者側も同じで、学生500名の調査で好感度が高い採用サイトの共通点は「情報が整理されて読みやすい」「募集要項が見つけやすい」でした。凝ったデザインは、どちらの調査にも出てきません。
設計者が「集合写真」を好む理由
製品写真を1点ずつきれいに撮ったページより、種類の違う製品を20個並べた1枚のほうが好まれる。理由は、設計者が知りたいのは「この会社は何をどこまで作れるか」で、対応の幅が一目で分かるのが集合写真だからです。1点の美しい写真は、その1点しか伝えません。
同じ理由で、技術の実績は文章よりグラフや表が好まれます。「幅広い材質に対応」ではなく、材質×加工の対応表。「高精度」ではなく「この形状で±何ミクロン」の数字。製造業のポータルを運営する会社の担当者が、強みは定量で書けと話していたとおりです（「製造業のSEOは『材料名×加工名』から」の記事）。
効く5つ
- 写真の質。明るく、ピントが合い、過度な加工がない現場の写真。通路、設備、作業中の手元、製品の集合、人。制作会社の撮影術に「派手な私物やケーブルを片付けすぎると仕事場のリアルさが消える」とあったとおり、きれいすぎる写真は信用されません
- 数字の見せ方。精度、サイズ、ロット、納期を、文章に埋めず、数字が目に入る大きさで。表にできるものは表に
- 表。材質×加工の対応表、設備一覧（型番と加工できるサイズ）、実績一覧。設計者は表を探しています
- 探しやすさ。メニューに「加工」「実績」「設備」「採用」「見積依頼」が見え、3クリック以内で目的のページに着く。トップの画像の下に、3種類の入口（加工を見る／実績を見る／採用を見る）
- スマートフォンでの表示。設計者も求職者もスマートフォンで見ます。横にはみ出さない、表が読める、フォームが送れる
効かない5つ
- トップページの動き（スクロールで要素が飛んでくる、数字がカウントアップする）。見る人の時間を使うだけで、判断の材料になりません
- 全画面の動画背景。読み込みが遅くなり、スマートフォンでは止まります。動画は、社員が自分の言葉で話す1分のものを、採用ページに1本
- 英語の見出し（「OUR STRENGTH」「WORKS」）。設計者は日本語の材料名と加工名で探しています
- 抽象的な写真（握手、青空、歯車のイメージ画像）。自社の現場の写真1枚に負けます
- 凝ったフォントと薄い文字色。数字と表が読めなくなります
Googleの公式ガイドは、見出しの順番はランキングに直結しないと書いています。デザインで検索順位は上がりません。上がるのは、ページの中身と、ページの分け方です。
配色は、作業服と看板に合わせる
配色で迷ったら、自社の作業服と看板の色を使います。理由は2つ。求職者が面接に来たとき、サイトで見た色と現場の色が同じだと、同じ会社だと分かること。展示会のブースやパンフレット、名刺と揃えられること。紺の作業服なら紺、緑の看板なら緑。2色までで、残りは白と黒。配色に時間を使うより、写真を1枚増やすほうが効きます。
まとめ
- 見る人が判断に使うのは、実績、写真、数字、表、探しやすさ。配色や動きではない
- 設計者は製品の集合写真と、図示された技術実績を好む。対応の幅が一目で分かるから
- 効くのは、写真の質、数字の見せ方、表、探しやすさ、スマートフォン表示
- 効かないのは、動き、動画背景、英語見出し、抽象写真、凝ったフォント
- 配色は作業服と看板の色。2色まで
製造業の会社のためのホームページ制作サービス「製造WEB」では、デザインの打ち合わせを配色の相談ではなく、現場の写真と数字の表から始めます。写真は担当者が現場で撮り、実績の集合写真と対応表を用意します。事例集を見て「どれがいいか分からない」で止まっている会社は、ご相談ください。