事業内容が設備名の羅列になりやすい
専門外の担当者には、自社の課題と技術の関係が分かりにくい。
自主制作・架空企業のケーススタディです。実在企業の実績、成果数値、WordPress導入実績を示すものではありません。情報設計とWeb実装の対応範囲をご確認いただくためのサンプルです。
PROJECT OUTLINE 見た目より先に、
見た目より先に、
誰が何を判断するかを整理。
- 想定業種
- 精密加工・生産設備・BtoB製造業
- 想定目的
- 新規相談、技術理解、採用、更新負担の軽減
- 制作範囲
- 情報設計、コピー、UI、Astro実装、レスポンシブ、CMS操作デモ
- 公開ページ
- 7ページ＋ブラウザ内CMS更新デモ
ASSUMED PROBLEM 01 02 03 04
想定した四つの課題。
導入事例が成果だけになりやすい
検討者が知りたい判断の過程や確認方法が抜けやすい。
更新情報と固定情報が混在する
事例や製品を追加するたびに、ページ全体の編集が必要になる。
問い合わせで機密情報を求めすぎる
相談前の心理的・情報管理上の負担が大きくなる。
DESIGN DECISIONS
課題に対して決めたこと。
製品名より、課題から入る
初見の担当者が自社の相談先か判断できるよう、「量産」「品質」「工程」の入口を先に置きました。
成果より、判断根拠を見せる
架空の改善率は使わず、課題・変更・確認方法を順番に説明する事例構成にしました。
更新する情報を分離する
導入事例、お知らせ、製品情報を投稿型で管理できる想定にし、固定ページと分けています。
問い合わせで機密を集めすぎない
図面や顧客情報を最初から送らせず、用途・数量・困りごとだけで相談を始められる設計です。
INFORMATION ARCHITECTURE
7ページに役割を分ける。
トップだけへ情報を詰め込まず、顧客の課題、技術、事例、会社、採用、相談をそれぞれ独立させました。
- 01トップ事業理解と相談入口
- 02課題解決顧客の困りごと起点
- 03技術・製品加工・治具・検査
- 04導入事例課題・変更・確認
- 05会社情報方針・実在性
- 06採用情報仕事理解と見学
- 07お問い合わせ機密配慮と相談整理
CMS EDITING CONCEPT
更新担当者の画面も、制作範囲として考える。
導入事例のタイトル、業種、課題、対応内容を編集し、公開イメージをその場で確認できる操作デモを用意しました。
- 入力とプレビューを同時表示
- ブラウザ内に下書きを保存
- サーバー送信なしの安全なデモ
導入事例 / 編集治具と作業順を見直し、確認手順を共通化
VISUAL SYSTEM
信頼、改善、行動を色で分ける。
ネイビーを技術と信頼、青緑を改善と案内、オレンジを問い合わせなどの明確な行動に限定しています。
#142432信頼・本文
#1B6A70案内・改善
#D8602F行動・注意
#EEF4F3情報の区切り