製造業のおしゃれなホームページデザイン19選｜目的別の事例

公式案内から比較できる点

外壁用・屋根用・下塗り用などの製品案内と、仕様書のダウンロード、OEMの相談先があります。水性塗料だけでなく弱溶剤の製品も扱うため、用途と種類を組み合わせて製品を探す構成を比較できます。

自社で取り入れる場合：製品ごとの用途、適用条件、資料の版を整理します。イメージ画像やCGで表す内容と、仕様書で確かめてもらう内容を分けてください。

公式案内から比較できる点

フッ素樹脂ライニングの製品情報と技術情報が分かれています。製品を探す入口と、材料・加工方法を調べる入口を別に用意した事例です。

自社で取り入れる場合：製品ページから必要な技術説明へ進めるように関連づけます。耐薬品性などの適用判断は、使用条件と技術担当者の確認を伴う説明にします。

公式案内から比較できる点

電力取引プラットフォーム、再エネプラットフォーム、調整力の事業案内に加え、IRや採用情報を用意しています。製品メーカーではなく、電力取引などの関連サービスを説明する参考例です。

自社で取り入れる場合：サービスの利用者、投資家、応募者が必要とする情報を分けます。抽象的な事業紹介に加えて、誰が何を相談できるサービスなのかを明記します。

公式案内から比較できる点

自社ブランドNAKATA HANGERと、アパレル・ホテルなどの業務用ハンガーの案内があります。個人の購入と法人の相談を分けて考えるための事例です。

自社で取り入れる場合：ブランドの製品紹介と、数量・仕様・納期を確認する法人向けの説明を区別します。製造工程の写真だけで価格や受注効果が伝わると決めつけないようにします。

公式案内から比較できる点

聖和セラミックスのタイルブランドです。商品ごとの形状・色・品番・寸法などを確認し、サンプルの注文へ進む構成があります。会社名とブランド名を区別して参照してください。

自社で取り入れる場合：商品を選ぶための属性を揃え、サンプルと本注文の条件を分けて示します。画面上の色や質感だけで最終仕様を判断させず、現物や仕様の確認方法も用意します。

公式案内から比較できる点

展示会の企画・デザイン・製作・施工などを案内し、実績には規模や業種などの分類があります。メーカーの製品一覧とは異なり、依頼に近い条件の施工例を探す参考になります。

自社で取り入れる場合：実績写真に会場、規模、担当範囲などの比較材料を添えます。相談時に必要な開催日・出展面積・希望内容を整理し、個別条件を確認する窓口を用意します。

公式案内から比較できる点

大光紙工が片面ダンボールの用途を紹介するサイトです。「包む」「折る」「巻く」などの使い方、商品購入先、個人・企業向けの案内、よくある質問を用意しています。

自社で取り入れる場合：素材の名称だけでなく利用場面から探せる説明を用意します。数量・寸法・色・用途など、相談に必要な条件を示し、購入と別注相談の入口を分けます。

公式案内から比較できる点

パブリックソリューション、エンタープライズソリューション、コンポーネントプロダクツ、EMSの事業案内があります。製品・サービスに加え、技術、企業情報、IR、採用など、利用目的の異なる情報を扱う事例です。

自社で取り入れる場合：事業紹介と具体的な製品・サービス情報の関係を整理します。各部門が更新する情報と、企業全体で管理する情報の担当を決めておきます。

公式案内から比較できる点

現行の公式社名はフジボウホールディングス株式会社です。研磨材、化学工業品、生活衣料などのグループ事業を案内し、会社概要では製造・販売を担うグループ会社を区別しています。

自社で取り入れる場合：持株会社の説明と各事業会社の担当範囲を混同しないようにします。製品の相談先、企業情報、IR、採用の入口を、それぞれの利用目的に合わせて案内します。

フジボウホールディングスの会社概要

公式案内から比較できる点

現在の社名は株式会社MEIHOUで、公式会社概要に旧社名「株式会社明邦空調」が記載されています。法人・個人のサービス案内、取扱機器、よくある質問、電話受付時間を設けています。

自社で取り入れる場合：対象顧客と工事・修理・保守などの相談内容を整理します。電話の受付時間、対応地域、保証の適用条件は、現行の運用に合わせて更新します。

MEIHOUの会社概要・旧社名

公式案内から比較できる点

製品・技術をカテゴリ、用途、キーワードから探せる案内があります。加工技術の説明と施工・製品の情報を組み合わせて、検討する対象へ進む構成を比較できます。

自社で取り入れる場合：製品名を知る人と、用途だけが決まっている人の両方を想定します。技術説明には適用範囲と相談先を示し、画像だけで性能や対応可否を判断させないようにします。

公式案内から比較できる点

法人・個人を問わない部品製作を案内し、見積り依頼ページに図面の記載項目や送付方法をまとめています。図面がない場合の採寸・図化・設計には別途費用が生じることも説明しています。

自社で取り入れる場合：数量、材料、寸法公差、後加工、必要書類など、自社で見積もりに必要な項目を定義します。図面が未完成の場合の相談方法と費用の扱いも明記します。

公式サイトの画面で確かめられる点

右半分に加工中の機械の写真が円形に切り取られて入り、左に大きな見出しが置かれる。

見出しの下に「0.01mm」など、加工精度の数字を含む文が並ぶ。

背景は方眼紙のような淡い青で、図面の線が薄く重なる。

右上に電話番号と黄色の「ものづくりご相談」ボタンがあり、画面右端にも同じ丸いボタンが固定されている。

自社で取り入れる場合：加工中の写真と精度の数字を最初の画面に置く。相談の入口は電話番号とボタンの両方で見せる。

公式サイトの画面で確かめられる点

6枚の写真を格子状に並べ、シャワーヘッド・ミスト・洗顔・泡の水中写真などが見える。

中央右に白い四角の枠があり、「小さな泡を、大きな力に。」の1行が薄い青の文字で入る。

上部の細いバーに、宿泊施設・メディアの方へ、販売店一覧、オンラインショップの入口がある。

メニューの右端にお問い合わせのボタンが青灰色で置かれる。

自社で取り入れる場合：製品の写真と使われている場面の写真を混ぜて並べる。宿泊施設やメディアなど、相手ごとの入口は上部の細いバーに分けておく。

公式サイトの画面で確かめられる点

背景は暗い色で、3Dの測定データのような緑とオレンジの形が画面全体に広がる。

ロゴの文字が画面の半分近い大きさの白字で置かれる。

その下に「どんなかたちにも、なってやる。」と英語の1文が続く。

メニューは英語表記で、Promotion Videoだけ青いボタンになっている。

自社で取り入れる場合：製品そのものを写さず、測定データや加工の画像を背景に使う方法がある。短いコピーと大きなロゴで、画面の主役を絞る。

公式サイトの画面で確かめられる点

背景全面にさまざまな大きさのベアリングが重なる写真が使われている。

写真には紫がかった色が乗り、その上に白い英字で「Bearings are CERABEA」が大きく入る。

英字の下に、日本語の短い説明が2行ある。

右上に、黒の製品カタログダウンロードと赤のお問い合わせの2つのボタンが並ぶ。

自社で取り入れる場合：製品を数十点並べた1枚の写真を用意し、大きな英字のコピーを重ねる。カタログと問い合わせの2つのボタンを上部に常に出す。

公式サイトの画面で確かめられる点

竹林の中で機械が竹を粉砕する合成写真が最初の画面を占める。

「竹刈無双」の筆文字と、新製品の名前が黄色の大きな文字で重なる。

国土交通省のNETISの登録マークが写真の中に置かれる。

画面の下に小さな点が並び、複数の写真が切り替わることが分かる。

自社で取り入れる場合：新製品を使う場面を1枚の写真で見せ、製品名と認証のマークを同じ画面に置く。切り替わる写真は5枚程度までにする。

公式サイトの画面で確かめられる点

左に磨かれた金属部品、右に作業中の職人の写真が重なる。

「研磨で世界へ」が大きな文字で入り、「研磨」と「世界」は金色で表されている。

右下に「SINCE 1918」の文字が入り、創業年が分かる。

上部のメニューは黒の帯に白字で、右端のCONTACTだけが青い。

自社で取り入れる場合：加工した製品と作業する人を同じ写真に入れる。創業年は大きな文字で見せ、メニューの色でお問い合わせだけを分ける。

公式サイトの画面で確かめられる点

溶接の火花が散る作業の写真が全面に使われている。

左下に白い箱で「ものづくり、人づくり、幸せづくり。」が3行で入る。

左上にロゴ、右上に電話番号とメールのアイコン、メニューのボタンがある。

右端に縦に並ぶ点があり、1画面ずつ切り替わる構成だと分かる。

自社で取り入れる場合：作業の瞬間が分かる写真を全面に使い、理念を白い箱の大きな文字で重ねる。電話番号を最初の画面に置く。