STAR SPARK

CONCEPT WORK — 製造業(機械・金属)

製造業(機械・金属加工)のホームページ制作

金属部品加工のメーカーを想定して作ったデモサイトです。相見積もりの候補として見られることを前提に、「何ができるか」「どこまでの精度か」を上から順に置いています。

最終更新日:

公開日:

株式会社アオイ精機のデモサイトのトップ画面。工場のミニチュアを俯瞰した映像を背景に、「一分の狂いなく、明日をつくる。」のコピーが白いカードに置かれている
デモサイトのトップ画面です

想定した企業: 株式会社アオイ精機(架空)

本デモは架空企業のコンセプトワークです。実在する企業・団体とは関係ありません。掲載している社名・所在地・実績の数字はすべて架空のもので、写真は用意したイメージ素材です。

デモサイトを開く →

デザインの意図

濃紺1色に、赤を1点だけ

見るのは取引先の技術担当・購買担当の方です。色数を絞ったぶんを情報の密度に回しました。赤は問い合わせボタンと、数字の単位にだけ使っています。ページのどこにいても「押すところは赤」と分かる状態を保つためです。

読ませる前に、一覧で見せる

製造業のサイトでは「その加工ができるかどうか」が最初の判断になります。文章で説明を始める前に、対応工程を6枚のカードで並べました。1枚ずつは短く、探している工程が視界に入るかどうかだけで判断できる形にしています。

数字は独立したセクションに置く

加工精度・対応素材の種類・取引社数を、本文の中ではなく単独の帯として置いています。数字は文章に混ぜると読み飛ばされますが、独立させると比較の材料として残ります。実際の企業様のサイトでは、裏付けの取れた数字だけを載せます。

ヒーローの演出

工場の中をカメラが通り抜けていくフライスルー型のモーション映像です。入口から入り、加工機が並ぶラインに沿って奥へ進みます。

設備の写真を並べるより、ラインが一続きにつながっている様子を見せるほうが、「社内で一貫して作れる」という強みを説明せずに伝えられます。文章では6行かかることを、映像は数秒で済ませてくれます。

映像の上には白いカードを重ね、キャッチコピーとリード文を置いています。映像が主役になりすぎて、何の会社か分からないまま終わることを防ぐためです。スクロールすると映像が進み、そのまま次のセクションへ溶けていきます。

ページ構成の考え方

  1. ヒーロー

    何を作る会社かを映像で。コピーは白いカードで確実に読ませます。

  2. 製品・加工技術

    切削・板金・金型・表面処理・組立検査・試作の6枚。対応範囲を並べきることが受注の理由になります。

  3. 数字で見る

    加工精度・対応素材・取引社数。

  4. 選ばれる理由

    短納期対応・一貫生産体制・品質保証の3つ。

  5. 採用情報

    技術の継承という切り口で、働く人の写真とあわせて。

  6. 新着情報

    展示会への出展やお知らせ。動いている会社であることが伝わります。

  7. 会社概要

    所在地・設立・事業内容に加えて、主要設備の一覧まで書きます。

  8. お問い合わせ

    加工の相談と見積もりの依頼を1つの窓口で受けます。

このサイトは、多くの場合ほかの数社と並べて見られます。そのとき最初に確かめられるのは会社の理念ではなく、頼みたい加工に対応しているかどうかです。

そこで対応工程を2番目に置き、数字と選ばれる理由でその裏付けを取り、会社の紹介は後ろに回しました。主要設備を会社概要に書いているのも同じ理由で、設備の型は技術担当の方にとって最も具体的な判断材料になります。

ほかの業種のデモサイト

実際にご依頼いただいて制作したサイトは制作実績にまとめています。

本デモは架空企業のコンセプトワークです。実在する企業・団体とは関係ありません。掲載している社名・所在地・実績の数字はすべて架空のもので、写真は用意したイメージ素材です。

Web制作・AIO対策のご相談から、Tesiaの法人導入まで

まずはお気軽にご相談ください。2営業日以内にご返信いたします。

お問い合わせ