新しい取引先を探す企業担当者
事業、技術・設備、製品例、品質の考え方を確認し、相談できる会社か判断できることを目指しました。
FICTIONAL CORPORATE WEBSITE / CASE STUDY
技術・設備・現場・人を、 短時間で理解できる 企業サイトへ。
AERION Precisionは、航空宇宙・精密製造分野を題材に制作した架空企業サイトです。このページでは、情報の組み立て方、デザインの意図、実装した内容を紹介します。
AI-generated visual / Fictional manufacturing scene
PROJECT OVERVIEW
作品について
航空宇宙・精密製造分野のBtoB企業を想定し、新規取引先が「何をしている会社か」「どのような現場や技術があるか」「相談できそうか」を順番に理解できるTOPページを制作しました。
AERION Precisionと、掲載する事業・製品・品質管理モデルは、ポートフォリオ用に設定した架空の内容です。
- 制作物
- 架空企業のコーポレートサイトTOPページ
- 想定業界
- 航空宇宙・精密製造
- 主な目的
- 技術・設備・現場・人を分かりやすく伝える
- 想定閲覧者
- 新規取引先の企業担当者／求職者
- 対応画面
- PC／タブレット／スマートフォン
PURPOSE / AUDIENCE
企業の強みを、見つけてもらえる構成へ。
今回設定した課題は、専門的な情報が多い製造業サイトで、初めて訪問した人が「何を相談できる会社なのか」を短時間で把握できるようにすることです。詳しい説明をすべてTOPページへ詰め込まず、判断に必要な情報を順番に配置しました。
製造業の仕事を知りたい求職者
設備だけでなく、加工・検査・出荷準備に携わる人と作業風景を見せ、仕事を想像できる構成にしました。
INFORMATION ARCHITECTURE
判断する順番に合わせて、情報を並べる。
企業側が説明したい順番ではなく、初めて訪問した人が確認したい順番を基準にTOPページを構成しています。
- 01何の会社か会社の役割と3つの事業を理解する
- 02何ができるか顧客へ提供する仕事を知る
- 03技術・設備事業を支える現場を見る
- 04製品・加工例仕事の結果を具体的に確認する
- 05品質確認と記録の考え方を知る
- 06相談する問い合わせデモへ進む
TOPページの役割
全情報を詳しく説明するページではなく、会社の全体像を理解し、関心のある情報へ進むための入口として設計しました。
VISUAL DIRECTION
精密さと現場感を、 静かなデザインで伝える。
白と濃紺を基本に、Technical Tealを限定的なアクセントとして使用しています。航空宇宙分野の先進性を意識しつつ、過度なSF表現や装飾は避けました。
会社概要図、非対称な事業レイアウト、大きな工場写真、製品ギャラリー、品質工程フローなど、情報の性質に合わせて見せ方を変えています。
Deep Navy#0B1F33／信頼感と技術企業らしさ
White#FFFFFF／情報を整理する余白
Technical Teal#006D78／重要な導線のアクセント
PHOTO DIRECTION / AI VISUALS
写真を装飾ではなく、仕事の説明として使う。
掲載写真にはAI生成画像を使用しています。架空企業の設定と整合するよう、人物、作業着、設備、加工物、工場環境の見え方を調整しました。写真内の人物・工場・設備・製品は実在するものではありません。
SF的な工場、宇宙空間、過度な青色演出を避け、日本の製造現場として違和感の少ない表現を目指しました。
RESPONSIVE VIEW
情報の順番を保ったまま、画面幅に合わせて再構成。
完成したTOPページを1440px・768px・390pxで表示し、横スクロール、画像切れ、要素の重なりがないことを確認しました。
IMPLEMENTATION
制作範囲と実装内容
現在のファイルと実装内容から確認できる範囲を掲載しています。制作期間や公開後の成果など、確認できない情報は含めていません。
本作品で行ったこと
- ターゲットとページ目的の整理
- TOPページの情報構成と主要導線の設計
- 企業設定に合わせた文章の整理・編集
- 配色・文字・余白・写真比率の設計
- AI画像の用途設計・選定・WebP最適化
- HTML・CSS・JavaScriptによる実装
- PC・タブレット・スマートフォンの表示調整
- キーボード操作と動きに関するアクセシビリティ改善
使用技術
- HTML5
- CSS3
- Vanilla JavaScript
- CSS Grid / Flexbox
- Responsive Web Design
- WebP / srcset / sizes
- Semantic HTML / ARIA
- AI-generated visual assets
ACCESSIBILITY
実装済みの配慮
特定の適合レベルをうたうものではなく、現在のコードで確認できる実装内容です。
- 本文へ移動するスキップリンク
- 内容の階層に合わせた見出し構造
- キーボード操作時に見えるフォーカス表示
- 意味のある画像への日本語alt
- モバイルメニュー内のフォーカス循環と復帰
- Escapeキーによるモバイルメニューの閉鎖
- prefers-reduced-motionへの対応
- JavaScriptが無効でも本文を表示するreveal設計
- デモフォームの入力内容を保存・外部送信しない処理
VIEW THE WEBSITE
完成した企業サイトを見る
AERION PrecisionのTOPページで、情報設計と写真の見せ方をご確認いただけます。