ウェブデザイン
自社サイト全面リニューアル

自社サイト全面リニューアル 自社サイト全面リニューアル

プロジェクト内容

コーポレートサイトの全面リニューアル(実施中)

業務内容

ドメイン配下のすべてのページのデザイン

担当フェーズ

ディレクション / ワイヤーフレーム作成 / デザイン /コーディング / デザインガイドライン策定

期間

2022年1月~2022年4月

2025年2月~現在(再リニューアル中)

使用ツール

XD Dreamweaver Illustrator Photoshop HTML CSS Javascript

デザインのコンセプト

1

クリーンでスタイリッシュな企業イメージ

企業の先進性と信頼性を視覚的に表現するため、余白を効果的に活用したクリーンなレイアウトと洗練されたビジュアル要素を採用しました。特に以下の点に注力しています:

  1. 必要な情報のみを簡潔に伝え、視覚的ノイズを排除
  2. 読みやすさと情報の優先順位を明確にする文字サイズと太さの設計
  3. 企業のアイデンティティを強化しつつ、重要なアクションへの注目を促進

これらの要素を組み合わせることで、訪問者に「先進的で信頼できる企業」という印象を瞬時に与えるデザインを実現しました。特に、ヒーローセクションでの大胆な写真使用と余白のバランスがこのコンセプトを体現しています。

2

これまで「企業」「製品」どっちつかずだったサイトを、SEOの観点・ドメインの理由から分離し「企業」サイトとして再構築

サイト構造を戦略的に再設計し、SEOパフォーマンスとユーザー体験の両方を最適化を目指しました。

特に「企業情報」「製品情報」「サポート」の明確な区分けと相互リンクにより、ユーザーの目的達成をスムーズにサポートする設計を実現しています。

3

見やすく、使いやすいを最優先

あらゆるユーザーが直感的に操作できるインターフェースを目指し、ユーザビリティとアクセシビリティを徹底的に追求しました:

  1. スマートフォンでの体験を起点に、あらゆるデバイスで最適な表示を実現
  2. 十分なコントラスト比、適切なフォントサイズ、読みやすい行間の確保
  3. ユーザーの思考プロセスに沿った情報の配置と明確な導線設計

ナビゲーションメニューの構造は詳細に検討しユーザーが迷うことなく目的のページにたどり着けるよう配慮しています。これらの工夫により、初めて訪問するユーザーでも迷うことなくサイトを閲覧できる環境を実現しました。

4

管理・更新しやすくするためのガイドライン、コンポーネント作り

サイト運用の効率化と品質の一貫性を確保するため、包括的なデザインシステムを構築しました:

  1. ボタン、カード、フォームなど、頻繁に使用される要素をコンポーネント化
  2. カラーパレット、タイポグラフィ、スペーシングなどの基本要素の使用規則を明文化
  3. ニュース記事、製品ページなど、定型コンテンツの構造とフォーマットを標準化

このデザインシステムの導入により、新規ページの作成時間が大幅に短縮されます。デザインの一貫性も大幅に向上しました。


工夫した点・実績

ナビゲーション:初めて訪問したユーザーにもわかりやすく

各ページ、階層のあるページの内容もわかりやすくするため、ナビゲーションメニューを改善。グローバルナビゲーションに一覧性の高いメガメニューを実装し、ユーザーの迷いを最小限に抑えるナビゲーション設計に特に注力しました。

分かりやすいナビゲーション

コンテンツファーストのビジュアル設計

情報の優先順位と視覚的魅力のバランスを最適化するため、コンテンツファーストのアプローチでビジュアル設計を行いました:

  1. 各ページセクションの役割を明確にし、最適な情報量と表現方法を選定
  2. 視線の流れを考慮したレイアウト
  3. 情報の区切りと強調を視覚的に表現し、読みやすさを向上
コンテンツファーストのビジュアル設計

デザインパーツのコンポーネント化

サイトで使用する各パーツをコンポーネントとして利用規則に沿じ、変更・ページの追加、管理・更新の手力を軽減。
効率的なサイト運用と一貫したブランド体験を実現するため、包括的なコンポーネントシステムを構築しました。

頻繁に使用される要素をすべてコンポーネント化し、サイト全体で統一感のあるデザインを実現しています。また、将来的なデザイン変更時にも、コアコンポーネントの修正だけで全体に反映できる拡張性の高い構造となっています。

デザインパーツのコンポーネント化