コーポレートサイト
Web Design / Coding
| 担当範囲 | デザイン / UIリニューアル / 不具合調査・修正 / イラスト・画像作成 |
|---|---|
| 使用ツール | Photoshop / Illustrator / HTML / CSS / JavaScript / VSCode |
Design Challenge & Solution
基板製品の部品ディスコン(生産終了)に伴う製品リニューアルに合わせ、Webサイト上の製品ページも大幅なアップデートを行いました。 既存サイトではトップのスライダーやメガメニューの挙動に不安定な箇所がありましたが、これらをデバッグし、あらゆる操作環境で安定して動作するよう改修しました。
また、製品の試作機開発の流れにおける「絵本のようなイラスト」がサイト全体のトーンと乖離していたため、最新の製品イメージに合わせたモダンなビジュアルへと一新。 技術的な不具合の解消と視覚的な調和を同時に実現することで、製品の信頼性をより高く伝えるサイトへと再生させました。
Key Points
基板製品のリニューアルに伴い、多岐にわたる製品ラインナップをユーザーが直感的に比較・選定できるよう、情報の「整理」と「可視化」を徹底しました。
デザイン面では、工業製品としての誠実さを伝える「クリーンな白」を基調とし、重要なアクションやアクセントには視認性の高いカラーを採用。 複雑なスペック情報が並ぶページにおいても、適切な余白設計と一貫したタイポグラフィを用いることで、情報の優先順位を明確にし、プロユースに耐えうる「迷わないインターフェース」を実現しました。
Production Process
- 既存サイトの不具合調査(スライダー・メガメニューの挙動デバッグ)
- 製品リニューアルに伴うグラフィック・イラストの再作成
- 情報設計(IA)の再定義とナビゲーションの改善
- レスポンシブ対応およびクロスブラウザテスト