【最新】工業系(製造)Webサイト制作で参考になるデザインまとめ20選!

ウェブデザイン 最終更新日:2021/07/29 公開日:2016/08/30

工業・製造系ウェブデザインまとめ

工業の中でも製造業は、取扱い製品が多くページ数も多くなりがちです。たくさんのページをお客様に迷わず見やすいと感じていただくためには様々な工夫が必要となります。また製品の魅力だけではなく、会社の技術力や信念なども同時に伝えていかなければなりません。

今回は工業系(主に製造業)のウェブサイトで、デザインや構成、ユーザービリティーに優れたサイトをピックアップしてみました!

株式会社キーエンス

株式会社キーエンス
https://www.keyence.co.jp/company/

様々なステークホルダーに対して「探しやすい」を配慮

キーエンスさんのように様々なステークホルダーに閲覧してもらう可能性のあるホームページは「なにを」「どこに」配置するかというのは非常に難しい問題となります。そしてそれを見事に解決した導線のホームページとなっているのではないでしょうか。

会社の顔であるページではあるものの、既存顧客や潜在顧客に対して製品情報をPRしたい、ですからトップページに導線を設置しつつも絶妙に「顔」を邪魔しないボタンサイズにしています。そして株主や採用希望者に対して、会社のことが簡単にわかるようなコンテンツをその後にしっかり配置していらっしゃってそのバランスが素晴らしいです。

株式会社河合電器製作所

株式会社河合電器製作所
https://www.kawaidenki.co.jp/

いやらしくなくキャッチコピーを見てもらう仕掛け

どのような思いでモノづくりに取り組んでいらっしゃるのか、それはどの企業でも想いのあるものではないでしょうか。その想いを効果的に伝えるために、まず最初に表示されるキャッチコピー、そしてその後に緩やかに現れるグローバルメニュー、とても自然にキャッチコピーを見させられてしまいハッとしてしまう仕掛けとなっていました。もちろんこの仕掛は最初の一度にしか現れないようになっていて、リピートして訪れるユーザーはスムーズにホームページを閲覧することができるようになっています。

株式会社キャタラー

株式会社キャタラー
https://www.cataler.co.jp/

動画がたくさん!優れたユーザービリティーも

動画を積極的に使用している株式会社キャタラーさんは、いたるところに動画再生を気軽にしてもらえるような工夫がされています。動画の再生はイヤホンが必要な環境であったりすると再生が難しいなどのハードルがありますが、こちらのサイトではついつい再生したくなってしまうような仕掛けになっています。

またサイト閲覧中にブラウザ右側に常に表示されている「お問い合わせ」「カタログ請求」はクリックするとページ遷移するのかと思いきや…こちらにもユーザービリティーに優れた仕掛けがありました。

大福製紙株式会社

大福製紙株式会社
http://www.daifukuseishi.jp/

製造業らしからぬデザインなのに丁寧な仕事ぶりが伝わる!

パッと見では製造業のサイトとは思えないような柔らかな雰囲気のあるサイトデザインの大福製紙株式会社さん。ウェブサイトの最上部にはロゴが掲載されていることが一般的ですが、こちらでは大胆にもロゴはメイン画像の部分のみしか最初は表示されません。しかしその分、すっきりと見やすい印象です。

全体的にシンプルなデザインですが、ところどころにオンマウスで動きがあったりなど、小粋な工夫もされています。こういった工夫は、なんとなくですが会社の丁寧な仕事を印象付けるような気がいたしますね。

株式会社モリヤマ

株式会社モリヤマ
http://www.ms-moriyama.co.jp/

一連のサービスをわかりやすく伝えている

株式会社モリヤマさんのサービスは練る工程から押出しの工程までをサービスとしているのですが、その工程のうち、どんなことをサービスとしているのかをトップページで非常にわかりやすく説明しています。動きもあって、リッチな印象ですね。

また個人的には練りだした後、最後にロゴが出来上がるという仕掛けは、とてもにくいアイデアではないでしょうか。

一陽染工株式会社

一陽染工株式会社
http://www.ichiyosenko.jp/

こだわりが伝わる写真の使い方

染色加工をメインの事業にされている一陽染工株式会社さんのホームページです。こちらのサイトの特徴は、とにかく写真が渋いこと。職人さんの技術やこだわりが、強く伝わってくるような印象的な写真の使い方が素晴らしいですね。

ホームページで写真が重要な事は、皆さん感じていらっしゃるところだとは思いますが、ウェブサイトのコンセプトに寄り添った写真を使用することができると、ここまで伝えられるんだ、といった事例ではないでしょうか。

株式会社クレハ

株式会社クレハ
http://www.kureha.co.jp/

信頼にプラスアルファが素晴らしい

一般的な工業系のウェブサイトのイメージだと、「カッチリ」という印象ですが、株式会社クレハさんのホームページでは、その中でも「斜線」を上手く利用し、アクティブなイメージを上手く伝えられているサイトです。何でもかんでも攻めた印象にすれば良いというものでもありませんので、こういったナチュラルな伝え方は参考になるのではないでしょうか。

個人的には会社の開発精神である「ナケレバ、ツクレバ。」というキャッチコピーがとても印象的でした。

株式会社ミノグループ

株式会社ミノグループ
http://www.mino.co.jp/

スライドの使い方がうまい!

印刷機器から特殊インキや資材までを取り扱う株式会社ミノグループさんのウェブサイト。

こちらのサイトではスライドをいたるころで、上手に利用しています。トップページの製品選択の部分でもそうですし、製品詳細ページでも「類似する印刷機」として関連度の高いページへの導線を確保している点など、とても参考になるのではないでしょうか。

製品詳細ページについては、製品カタログがPDFでダウンロードできたり、動画が見えたり、たくさんの製品がありますが、どれもしっかりとしたボリュームで作られており、製品への愛情やこだわりが感じられますね。

株式会社東亜

株式会社東亜
http://www.toa-nagano.com/

70年の歴史を感じさせないチャレンジ精神

株式会社東亜さんは創業70年以上と、とても歴史のある会社なのですが、クリエイティブな印象を与えるウェブサイトで、歴史に囚われず攻め続ける印象を受けました。どうしても歴史のある会社さんですと、保守的なデザインになってしまうことが多いのですが、こういったデザインの印象から企業が常に新しいことにチャレンジする姿勢などを伝えられることができる、という事例になるのではないでしょうか。

株式会社宇佐美

株式会社宇佐美
http://www.usami-tool.co.jp/

グローバルメニューが斬新!

製造業ではなく、機械・工具などを取り扱う商社である株式会社宇佐美さんのホームページです。とにかく印象的だったのが、グローバルナビゲーションの部分。ロゴのあたりをオンマウスすると、メニューが現れます。確かにトップページに訪れて、すぐに他ページに遷移する人は少ないですから、こういった魅せ方もありなのかもしれませんね!

株式会社オガワスプリング

株式会社オガワスプリング
http://ogawaspring.co.jp/

何を製造しているのか一発でわかるデザイン

サスペンション用スプリングの会社さんなんですが、なんといってもファーストビューで何を作っているのか一瞬にしてわかるのが素晴らしいですね。またスプリングの特徴をよく理解していて回転させると良い感じに見えるというアイデアとのコラボにも唸らされます。

株式会社タグチ工業

株式会社タグチ工業
http://www.taguchi.co.jp/

製品の魅せ方が独特でかっこいい!

製品の魅せ方がとにかくカッコいいです。その製品が良いか悪いかというよりも、かっこよくてなんか良さそうな感じが伝わってくるあたりが上手です。また製品1つ1つにもロゴを作っていらっしゃってそれもカッコいいです。BtoC商品であればそういったこともあるかもしれませんがBtoBでしかも工業でロゴを製品ごとに作っていらっしゃるのは珍しいのではないでしょうか。

日本特殊陶業株式会社

日本特殊陶業株式会社
https://www.ngkntk.co.jp/

ショートムービーを使用したインパクト重視デザイン

インパクトのあるショートムービーをメイン画像に使用したインパクトのあるデザインです。個人的には「製品・技術のあゆみ」というページが凄く面白くて、正直細かく見る気は全く起きないんですけど、とくにかく技術が多岐に渡っていて、しかも進化している、という印象を与えられました。

阪神精密発条株式会社

阪神精密発条株式会社
http://hanshin-seimitsu.jp/

スタッフさんが登場する安心・温かみの仕掛け

バネを製造していらっしゃる阪神精密発条株式会社さん。ホームページにはスタッフの方がたくさん登場するのですが、どのスタッフさんも優しそうで、依頼しても安心できそうな感じが凄く伝わってきます。工業系ですと、どうしても製品やこだわりがメインで掲載されていますが、スタッフさんを登場させることで、温かみや安心感を伝えるというのも、中小企業にとっては良いアプローチとなりそうです。

株式会社シンテックホズミ

株式会社シンテックホズミ
http://www.shcl.co.jp/

レスポンシブウェブデザインの参考に!

全体がレスポンシブウェブデザインで構成されているため、画面いっぱいを上手に使った構成になっています。クイズのようなコンテンツも用意されており、お客様に楽しんでもらいたいという精神が感じられます。最初にしばらくの間だけ表示される新卒採用ページへの導線が素敵です。

サンゴバン・ジャパン

サンゴバン・ジャパン
http://www.saint-gobain.co.jp/

いきなり検索させちゃうの!?

このサイトの特徴はなんといっても、いきなり検索させちゃうというGoogleみたいな構成になっているところではないでしょうか。グループサイトまでまとめて検索できる点は凄いです。最近はこういった、最初にお客様に検索を促すというサイトがちらほら出てきていますので、一度使い勝手を試してみてはいかがでしょうか。

株式会社ツキボシP&P

株式会社ツキボシP&P
http://www.tsukiboshi-pp.jp/

固定メニューでページ遷移をスムーズに

画面左側にメニューが常に出現しているタイプです。横に並んでいるメニューを見るよりも縦に並んでいるメニューを見るほうが見やすいですから、こういった構成も選択肢としてアリではないでしょうか。

長谷川工業株式会社

長谷川工業株式会社
https://www.hasegawa-kogyo.co.jp/

ウェブデザインは全てをオシャレに見せる

こういっては失礼かもしれませんが「脚立なのにオシャレ!」というギャップが素晴らしいです。また、カタログを閲覧することが出来るコンテンツが用意されているのですが、フラッシュ、HTML5、アプリという3通りの見方が用意されていて、お客様の環境に合わせて見てもらおうという姿勢が感じられますね。

ロンシール工業株式会社

ロンシール工業株式会社
https://www.lonseal.co.jp/

複合検索がとにかく使いやすい

床材の製造の会社さんです。こちらのウェブサイトでは、たくさんある商品の中から、スムーズに希望の商品を探してもらうために、複合検索が可能な仕掛けになっているところではないでしょうか。

条件設定の際は、選択肢がアイコンが用意されており、直感的に分かりやすい検索画面になっています。また価格をメーターで選択できるようにしているというのは面白い発想ですが、こちらも直感的で分かりやすいです。

理想科学工業株式会社

理想科学工業株式会社
http://www.riso.co.jp/

細かいユーザービリティーが光るウェブデザイン

一般的にグローバルメニューは全て同じ文字サイズで構成することが多いのですが、こちらのサイトでは重要度に応じて文字サイズを変えており、とてもユーザービリティーについて考えられています。

面白いのは、サイトの雰囲気とは全く異なった「かんたん会社案内」というコンテンツ。気軽に会社のことを知ることができるコンテンツとして有用なアプローチなのかもしれませんね。

まとめ

以上が工業系のウェブサイトを制作する際に参考になりそうなウェブサイトでした。それぞれの会社の特性に合わせてお客様が使いやすいサイトするという、制作会社の力が試されそうですね。

CONTACT

Webサイト制作のご相談やご質問、ご不明点などございましたらこちらよりお問い合わせください。
「ホームページ制作について」とお伝えください。担当者におつなぎいたします。

オフィス一覧へ

受付時間|9:00~18:00(土・日・祝除く)

※お電話にてお問い合わせの際はオフィス一覧からお近くのオフィスにご連絡ください

※全国対応

ホームページ無料診断 毎月10社限定

ホームページ制作のプロがユーザビリティ・SEO・競合などを多角的に分析し、
具体的な改善案をご提案します。

無料診断する