カテゴリー: UI

マーコム・サポーターの椎名です。中小企業や個人事業主のマーケティング活動をサポートする傍ら、ライティング活動も行っています。今回は、「WEBサイトのデザイン」について取り上げます。企業イメージを一瞬で決定づけてしまうWEBサイト。どんなサイトにすればいいのでしょうか？テクノロジーの進化やデザインの流行をどこまで取り入れればいいのか迷う方も少なくないのではと考えます。

記事では、製造業のUIデザインとして参考にしたいサイトをご紹介します。

UIデザインの重要性

製造業のWEBサイトは、「企業の顔」となる存在です。単に製品情報を並べておくだけの場ではなく、いろいろな目的・役割のもとにつくられています。主なものとして以下があげられます。

• 製品や技術の認知度を上げて興味をもってもらう
• 企業のブランドイメージを確立し、信頼性を高め、企業としてのメッセージを発信する
• 製品を検討してもらいセールスにつなげる
• 製品を購入しているお客様に関連情報を提供し、顧客満足度をあげる

WEBサイトのデザインは、上記であげたサイトの目的、役割にそってユーザーが求める情報を適切に、わかりやすく伝えるためのものです。単純に見た目を美しくするのではなく、ユーザビリティを向上させる、ユーザーフレンドリーなデザインが求められます。

こうした役割をもと、製造業のWEBサイトで「良いデザイン」とされる条件はどのようなものがあるでしょうか？ここでは、いくつかの共通するポイントを5点ほどあげておきます。

• Webサイトに無駄な動きがないデザイン
• ユーザーが直感的に操作できるデザイン
• ユーザーを迷わせない導線設計、ナビゲーション、カテゴライズ
• 統一感があり、共通のメッセージ性を感じさせるデザイン
• 製品や企業イメージを連想させるデザイン”

つまり、製造業のWEBサイトのデザインは、サイトを訪れるユーザーが使いやすく、最短で目的の情報にたどり着きやすくためのサポートとしての要素が大きいのです。

見た目の美しさで、人を惹きつけることも必要ですが、ユーザビリティを損なうデザインは求められていません。あくまでユーザーのことを第一に考えた設計になっていることが重要なのです。

参考にしたい製造業サイト5選

ここでは、UIデザインで参考になるサイトを5つご紹介します。

原田産業株式会社

引用：https://www.haradacorp.co.jp/

グローバルの総合商社である原田産業株式会社は、造船・海洋事業、エレクトロニクス、日用品の製造まで、幅広く事業を手掛けています。製品ジャンルの数が非常に多いですが、シンプルな導線設計で情報にたどり着きやすいです。事業は大きく6テーマにカテゴライズされ、トップページから目的の事業まで3クリックでたどり着けるようになっています。各テーマに沿って体系的に情報が整理されており、わかりやすいです。全体イメージは、青みを取り入れ色調を抑えた写真画像と、明朝系のフォントを使用。落ち着きと信頼感を演出しています。

株式会社ミナミサワ

引用：http://www.minamisawa.co.jp/

株式会社ミナミサワはトイレの自動水栓の機器を手掛けるメーカーです。サイト全体としては、色使いとスペースの取り方のバランスがとてもよい構成となっています。ブルーグリーンを基調とした色使いが、トイレというより、インテリアを見ているような感覚を起こさせます。

導線もわかりやすく、初めての訪問でも感覚的に目的の場所に進めます。また、製品リストの表示にカードデザインを使っており、スッキリまとまっていて見やすい構成です。マウスオーバー時の切り替わる画像の色使いもよく、訪問者が迷わずにサクサクと進めます。

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

引用：http://ogawaspring.co.jp/

株式会社オガワスプリングはサスペンション用スプリングの開発・製造を手掛けています。同社のサイトは全体がすっきりしていて、スペースのバランスがよくとても見やすいレイアウトです。ダークグリーンとグレーの2色のカラーの色使いがよく、高性能・高品質の技術力の高さとマッチしています。同社は、製品であるバネを、メインビジュアルや、サイト各所にアクセントとして配置していますが、それがサイト全体の統一感につながっています。メインビジュアルの動きのあるバネは印象的で、技術力の高さの演出に一役買っています。また、トップへのスクロールのバネの絵も面白いです。

黒木テック工業株式会社

引用：http://www.kurokitec.com/

黒木テック工業は、遊園施設の乗り物の製造・設置を手掛けています。乗物製作では日本唯一の専業メーカーです。同社は製造業ですが、遊園地ということもあり、遊びたくなるようなワクワクする楽しいデザインとなっています。

しかしながら、華美な装飾はなく、サクサク動き、各種情報にもたどり着きやすい構成です。いたるところに従業員の顔がみえる写真素材を使っており、親しみやすく雰囲気をかもしだしています。

ふくべ鍛冶

引用：https://fukubekaji.jp/

ふくべ鍛冶は、石川県能登町の老舗鍛冶店。包丁やアウトドアナイフの製造販売を行っています。うほか、ネットで注文できる包丁研ぎの宅配サービスも手掛けています。同社の製品は、日本古来の製鉄法で作られた和鉄を使ったもの。古来の和鉄と鍛冶職人による匠の技を、黒の中の黒を基調としたサイトと縦置き文字でうまく表現しています。フレームの見せ方、ボタンのデザインやマウスオーバー時のエフェクトなど細部に渡って工夫されており、切れ味が鋭いシャープな外観を際立たせる効果を高めています。

まとめ

製造業のWEBサイトは、認知喚起やブランディング、セールス、顧客満足度向上といろいろな目的のもとに制作されています。サイトのデザインは、見た目の美しさというより、ターゲットの操作性向上を補助する役割を担っています。

今回、事例としてあげたサイトは、シンプルでユーザーが直感的に操作でき、導線設計の工夫がこらされています。企業のブランドイメージを伝えるため、ロゴやアクセサリー素材、フォント、スペースや色使いなどの細部にこだわって丁寧に制作されているものばかりです。

テクノポートはWEBサイトの企画、制作、コンサルティングまで一貫して対応いたします。これからWEBサイトのリニューアルをお考えの方は、ぜひご相談ください。

こんにちは、テクノポートの永井です。

Webサイトのデザインが日々進化し続けている中で、自社サイトのデザインをどうすればいいか悩まれている方も多いのではないでしょうか。普段目にするBtoC向けのサイトでは、動画を入れたりキャラクターが動いたりと、作り込んだWebサイトが多くなってきました。では、製造業などBtoBのWebサイトのデザインはどこまでこだわればよいのでしょうか？

今回は製造業におけるWebサイトの位置づけから、Webサイトのデザインについてご紹介します。

製造業のWebサイトでもデザインは重要

Webサイトのデザインは重要です。というのも、貴社を知らない企業は、貴社が信用できるかどうかWebサイトを見て判断します。最終的な判断材料は会社概要の設立年、資本金、取引先企業、取引先銀行など、企業としての情報かもしれません。しかし、Webサイトのデザインも見ています。

これは「人は第一印象で決まる」という感じに似ています。BtoCのように作り込む必要はありませんが、ある程度きれいなWebサイトのほうが印象は良くなります。

デザインはターゲットに合わせて調整する

「最初の1ページを見て、それ以上見る価値があるかかどうかを判断する」と言われているほど、Webサイトの見た目は大切です。多くの製造業の場合、Webサイトを使って問い合わせを増やすという明確な目的があります。

そのため、Webサイトを作るときに決めた「ターゲット」に興味を持ってもらうためのデザインにすることが大切です。

製造業のWebサイトデザインについて

技術を伝えるためのデザイン

ターゲットを開発設計者や技術に困っている方にした場合、技術の高さをひと目で伝えられるようなデザインが求められます。技術を伝えるためには、華やかなデザインではなく技術を正確に伝える内容が重要です。そのため、製品技術が理解できる内容を全面に出したり、キャッチコピーを工夫したりすると伝わりやすくなります。

例えば、株式会社長野サンコー様はキャッチ画像に金型、キャッチコピーに「絞り加工技術のパイオニア」を入れて、シンプルですがもっている技術がひと目でわかるような工夫をされています。

株式会社長野サンコー：https://www.naganosankoh.jp/

頼みやすさを伝えるためのデザイン

試作単品など少量を気軽に発注したい方や短い納期で依頼したい方がターゲットの場合、気軽に頼める雰囲気を伝えることが大切です。デザインが洗練され過ぎていると、費用が高いイメージが相手に伝わってしまい、敬遠されてしまう可能性があります。気軽に問合せしたいニーズに対し、職人っぽいイメージが先行しすぎると問合せのハードルが上がるかもしれません。そのため、オレンジなどの温かみのある色を使ったり、社員さんの笑顔を出して安心感を与えたりするのも効果的です。

例えば、株式会社旭スプリング製作所様は「下町のバネ屋さん」という親しみのあるキャッチコピーを使い、カラーバネを入れてポップな雰囲気にしています。

株式会社旭スプリング製作所：http://asahi-spring.co.jp/

また、 株式会社富士産業様は「小口、特急喜んで！」をかわいいいフォントで入れつつ、社員さんの笑顔を大々的に出すことで頼みやすさを演出しています。

株式会社富士産業：https://www.fujisanngyo.co.jp/

紹介した事例のようにターゲットによってデザインを変えることで、「Webサイトを使って問い合わせを増やす」をという目的を達成しやすくなります。

優先するのはデザインよりUI（情報の探しやすさ）

製造業のWebサイト制作においてデザインは重要であるものの、他にもこだわるべきものがあります。それはUIです。UIは「ユーザーインターフェイス（User Interface）」の略で、Webサイトの操作性による使いやすさや見た目のことを意味します。

デザインにこだわってばかりで、重要な「使いやすさ」を見落としてしまうと本末転倒です。Webサイトのデザインを決める際には、全体の見やすさや情報の探しやすさにもこだわってみてください。

BtoCの場合、必要のないものでも「ほしい」と思ってくれれば購入につながるため、記憶に残るデザインが求められます。

しかし、製造業のWebサイトの閲覧者は「必要な情報を求めている人」でしょう。そのため、デザインよりも、求めている情報にすぐに辿り着けるような動線が必要です。

例えば、下記のような場合が挙げられます。

• 技術情報を見たいが、どれを見ていいかわからない
• 強みを知りたいけど、何が強みかわからない
• 設備情報を見たいが、見つけられない

閲覧者はサイトをくまなく見てくれるほど親切ではありませんし、貴社だけが技術をもっているわけでもありません。せっかく訪問してくれた方が気持ちよく情報にアクセスできるような、おもてなしの心が重要です。

最低限のデザイン、UIはどんなもの？

「Webサイトを使って問い合わせを増やす」という目的を達成するためには、最低限のデザインとUIが必要です。では、「最低限とはどんなもの？」というところですが、弊社が提供するwordpressテーマのTP-Basicを参考にしていただけたらと思います。TP-Basicは製造業のためのWordPressテーマです。情報過多にならないよう、シンプルなデザインにしています。

簡単な操作（画像と文字を入れるだけ）でWebサイトを作れますので、Webサイトのデザインでお悩みでしたらぜひお試しください。

TP-basicデモページ：http://wpdemo2.techport.co.jp/
販売ページ：https://marketing.techport.co.jp/tpbasic/

まとめ

製造業のWebサイトは「Webサイトを使って問い合わせを増やす」という明確な目的があるため、ターゲットに合わせたデザインづくりが重要です。時間や費用をかけて制作する必要はありませんが、閲覧者が求めている情報にすぐにアクセスできるようなUIを心がけましょう。

Webサイトのデザインでお悩みでしたら、テクノポートのwordpressテーマTP-Basicをご検討してみてください。

テクノポートはWebサイトの企画、制作、コンサルティングまで一貫して対応可能です。これからWebサイトのリニューアルをお考えの方は、ぜひ弊社へご相談ください。