コーポレートサイト

Web Design / Coding
コーポレートサイト
担当範囲 デザイン / UIリニューアル / 不具合調査・修正 / イラスト・画像作成
使用ツール Photoshop / Illustrator / HTML / CSS / JavaScript / VSCode

Design Challenge & Solution

基板製品の部品ディスコン(生産終了)に伴う製品リニューアルに合わせ、Webサイト上の製品ページも大幅なアップデートを行いました。 既存サイトではトップのスライダーやメガメニューの挙動に不安定な箇所がありましたが、これらをデバッグし、あらゆる操作環境で安定して動作するよう改修しました。

また、製品の試作機開発の流れにおける「絵本のようなイラスト」がサイト全体のトーンと乖離していたため、最新の製品イメージに合わせたモダンなビジュアルへと一新。 技術的な不具合の解消と視覚的な調和を同時に実現することで、製品の信頼性をより高く伝えるサイトへと再生させました。

Key Points

基板製品のリニューアルに伴い、多岐にわたる製品ラインナップをユーザーが直感的に比較・選定できるよう、情報の「整理」と「可視化」を徹底しました。

デザイン面では、工業製品としての誠実さを伝える「クリーンな白」を基調とし、重要なアクションやアクセントには視認性の高いカラーを採用。 複雑なスペック情報が並ぶページにおいても、適切な余白設計と一貫したタイポグラフィを用いることで、情報の優先順位を明確にし、プロユースに耐えうる「迷わないインターフェース」を実現しました。

Production Process

  • 既存サイトの不具合調査(スライダー・メガメニューの挙動デバッグ)
  • 製品リニューアルに伴うグラフィック・イラストの再作成
  • 情報設計(IA)の再定義とナビゲーションの改善
  • レスポンシブ対応およびクロスブラウザテスト