Facebook Twitter RSS
工業系(製造)ウェブサイト制作で参考になるデザインまとめ20選!

工業系(製造)ウェブサイト制作で参考になるデザインまとめ20選!

この記事のタイトルとURLをコピーする
工業系(製造)ウェブサイト制作で参考になるデザインまとめ20選!
https://webkikaku.co.jp/blog/webdesign/manufacturing-industry-websitedesign/
facebook twitter hatena Pocket

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

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

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

株式会社キャタラー

株式会社キャタラー
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/

斜め斜め斜めな斬新レイアウト

斬新なレイアウトもそうですが、ギミックが散りばめられていて、しかもそれが力強さを感じさせます。全体が斜めに構成されているのですが、グローバルナビゲーションをオンマウスすると出現するビッグドロップダウンメニューは初めて見ましたが、デザインとよく馴染んでいて違和感なく利用できます。

日本特殊陶業株式会社

日本特殊陶業株式会社
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.sanki.co.jp/

お客様の気持ちを考えて製品を探しやすく

このウェブサイトでは、お客様が最も行う行動を商品の検索だと考え、メイン画像からいきなり製品ページへの導線が作られています。また探し方も「施設から探すのか」「要望から探すのか」「事業から探すのか」などお客様が探しやすいような導線が3種類用意されているため、使いやすいサイトになっています。

岐阜工業株式会社

岐阜工業株式会社
http://www.gifukogyo.co.jp/jp/index.html

パネル形式で気持ちいい動きをします

全体がパネル形式になっており、ブラウザ幅に応じて並び順が変わる構成になっています。並び順が変わる際は、動きを伴って位置を移動しますので、色々試していると、面白くてついつい何度もブラウザを伸縮させてしまいます。またサイドバーのメニューを選択すると選択したカテゴリのパネルだけが出現するという仕組みにもなっています。

ダイハツ工業株式会社

ダイハツ工業株式会社
http://www.daihatsu.co.jp/

クリップ機能が便利!

言わずと知れたダイハツ工業さんのウェブサイトです。グローバルメニューにオンマウスすると、それ以外の部分が少し暗くなってメニューがとても見やすくなる工夫は是非参考にしたいですね。

右側に現在閲覧中の車をクリップ(お気に入り)する機能があるのですが、これはなかなか斬新な発想ではないでしょうか。実際にやってみると、とても工夫されているコンテンツということがわかりますよ。

長谷川工業株式会社

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

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

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

ロンシール工業株式会社

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

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

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

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

理想科学工業株式会社

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

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

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

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

まとめ

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

この記事のタイトルとURLをコピーする
工業系(製造)ウェブサイト制作で参考になるデザインまとめ20選!
https://webkikaku.co.jp/blog/webdesign/manufacturing-industry-websitedesign/
facebook twitter hatena Pocket

東京・名古屋を中心に、中小企業に特化したホームページ制作会社。マーケットやビジネスモデルに合わせ一社一社に合わせたウェブ制作・リニューアルのご提案しています。
1000サイト以上のウェブマーケティング支援で獲得したノウハウで、リニューアル後に過去最高の成果を生み出したお取引先は多数。勘ではなくロジックに基づいたホームページ制作と柔軟な対応力で多数のお客様にご評価頂いております。

どのようなお悩みでも構いません。ホームページを有効的に活用できていないと考えているご担当者の方、まずは一度弊社にご相談くださいませ。

ご提案依頼・ご相談はこちら
公式facebook、twitterから情報を受けとる
いいね!する フォローする
前のページ
次のページ
ページトップ