【製造業におすすめ】参考ホームページデザインをご紹介!

製造業や工場のホームページをじっくり見比べたことはありますか??
レイアウトやアクセントの色など、どんなデザインが人気なのか傾向が見えてきました!!
重厚感があったり清潔感があったり、似ている職種でもwebデザインはさまざまです。

ワークス株式会社

https://works-m.co.jp/
(制作:マーケティングプラス名古屋)

樹脂、プラスチック素材の加工を行っているワークスのホームページです。

目の前で現場を見ているような臨場感が味わえるトップ動画!
機械だけでなく手作業のシーンもあり、より丁寧な制作工程がうかがえます。
アクセントの色は群青のような濃い青だけですが、目立たせたいお問い合わせにはロゴと合わせた緑が使われています。
定番のすっきりとしたレイアウトや整列された写真たちは見やすいですね!!

森松株式会社

https://www.morimatsu.com/
(制作:マーケティングプラス名古屋)

ビニールシートやPVC、プラスチック製品の製造をしている森松のホームページです。

製造業ではあまり見られない柔らかいフォントや、マスコットのようなキャラクターが使われています!
写真やバナーの角が丸くなっていたり、色使いも緑やベージュが中心で温かみがあり、全体的に親しみやすい印象ですね。
手がアップで映っている写真も多く、手作業のぬくもりが感じられます。
優しい色味で統一することで、特徴である製品の豊富な色展開が映えています!

株式会社タグチ工業

https://www.taguchi.co.jp/

建物解体のためのアタッチメントを製造している、タグチグループのサイトです。

製品紹介やお知らせを兼ねているトップのスライド画像はインパクト大!
サイト全体は白い背景ですが、黒と赤を配色しているので機械特融のスタイリッシュさがあります。
薄いグレーや色味を抑えた画像でスペースが分けられていたり、余白も多く見やすいレイアウト!
製品情報はオンラインサイトのようになっており、カラーで画像アイコンもついているのでより分かりやすく案内してくれます。
製品一つ一つの紹介も詳しく、3D動画になっているものも!!
シリーズ別ページの、実際に解体をしている大胆な動画がとても印象的です!

三甲株式会社

https://www.sanko-kk.co.jp/#1

プラスチック製の物流資材業界ナンバー1のアイテム数を誇る、三甲株式会社のホームページです。

大きなロゴが固定されたトップページのスライドは、製品情報も伝わりつつオシャレな印象!!
どちらの情報もしっかり視界に入るバランスが絶妙です。
赤がたくさん使われており、青、オレンジの配色がカラフルに見えますが、トーンが抑えられていて目がチカチカしません!
事例紹介は、①課題・要望 ②解決方法 ③得られた効果 と簡潔にまとめられていて、より製品を探しやすく手助けしてくれます。
YouTubeの動画や画像もふんだんに使われているので、より情報がわかりやすいですね!

株式会社マッハゴム工業所

https://mahhagum.jp/

自動車などに使われるゴム部品の加工を行っている、マッハゴム工業所のホームページです。

こちらのトップ画面は筆で書いたような文字と、手が映っている写真が多く「職人」なイメージ!!
インディゴや濃いめの青がメインに使われています。
お問い合わせについてのバナーには明るいイエローが使われて、パッと視界に入ります。
目立たせたいところだけ、反対色や明るい色を使うのは効果的ですね!!
製品紹介の写真は真上から撮られていて影も少なく、どのような形状に加工しているのかがよく伝わります。
オシャレな置き画にも見えてきました!

千代田工業株式会社

https://chiyoda-kogyo.com/

主に自動車シート用の部品を製造している千代田工業のウェブサイトです。

まず目に入るロボットアニメを彷彿とさせるゲージやエフェクトが、メカ好きの心をくすぐるメインビジュアル!!
そこから実際に使われている機械が動いている様子が映し出され、なんだかわくわくしてきました!
アクセントに使われているブルーは少しグリーンがかっている色も多く、誠実さと爽やかな印象。
本社以外の工場の紹介や各部門の紹介は、それぞれレイアウトが同じパターンになっておりすっきりまとめられています。
写真の枚数や配置、文字数が揃えられていると見やすいですね!
各ページのメイン画像も薄い青色のフィルターがかかっていて、統一感があります。

株式会社大栄鉄工所

https://daiei-ironworks.co.jp/

鉄骨分野で事業を展開している大栄鉄工所のホームページ。

鉄をイメージさせるような、黒や濃いグレーがメインに使われていてとても重厚感があります!!
文章は白い背景ですが、どのページも黒と鉄をイメージするくすんだ薄茶色がふんだんに使われています。
工場内の写真も暗くしてあり、火花をあえて目立たせているようでかっこいいですね!!
メニューが多めで迷子になりそうですが、各ページへのリンクが細かくなっているので、すぐに目的のページへとぶことができます。
どのページもスクロールが少な目なので、途中で飽きることなく読み進められます。

エフ・アイ・ティー・パシフィック株式会社

https://www.fitpacific.com/

自動車の安全性のテストや校正サービス、福祉用具の開発などを行っているエフ・アイ・ティー・パシフィックのサイト。

トップの動画は全部ピクトグラムのようなイラストで、色もブルー系統のみに絞られていているのに、ここまで表現できるのかと圧巻です!!
サイト内も同じ色味で統一されていますが、カラフルなテクスチャーの装飾がアクセントになっていて、ワンパターンに見えません。
製品によって細かくページが分かれており、それぞれお問い合わせページが設置されているのは、お客様にも担当者にもわかりやすいですね!

株式会社エクシール

https://www.exseal.co.jp/

ウレタンゲル製品の開発、販売を行っているエクシールのホームページ。

「爽やか」「清潔感」を連想させる水色と白を基調としたウェブサイトで、写真も明るく全体的にクリーンな印象です。
クリーンルーム内での製造や徹底した品質管理に力を入れているそうで、サイトのイメージもぴったりです!
余白の多いレイアウトは文字も見やすく目移りしませんし、文字色が紺色なので目に優しく感じます。
製品紹介の動画も長すぎず簡潔で、必要な情報が収集しやすくなっています。
サイト内にたまに登場するゲルボール人形?がコミカルで、ひっそりとファンなりました!


全体を通して特に青色を使用しているウェブサイトが多数でしたね!!
「クール」「大人」「清潔」「知的」「信頼」こんなイメージが青色にはあるんじゃないでしょうか。
黒で「重い」「伝統」を足したり、白で「衛生的」「公正」を強調したり・・・。
レイアウトだけでなく、色によっても印象がガラッと変わります。
皆さんはどんなイメージのサイトが作りたいですか?

マーケティングプラス名古屋では、細かい色の相談も承っております。
ぜひお気軽にお問合せください!!