Hojitsu コーポレートサイト

#Figma #Wordpress #Webデザイン
HANDLE

担当範囲

#Html/CSS #JS #UI/UX #アニメーション
PROJECT OVERVIEW

プロジェクト背景

【ユーザー体験を中心によるトップページの再構築:企業コミュニケーション効率の最適化】

コーポレートサイトは単なる情報窓口ではなく、ブランド価値を伝える核心的な拠点です。既存サイトの情報設計の不足といった課題を解決するため、自らリニューアルを立ち上げました。

コンテンツの優先順位を再定義し、情報の論理性を強化することで、パートナー企業や求職者にとってスムーズな体験を提供し、専門性と信頼性の向上を目指しました。

Visual

ビジュアルプランニング

ユーザーが短時間で企業背景を把握できるよう、スクロールが必要だった紹介コンテンツを、一目で要点が伝わるレイアウトへとデザインしました。明確なセクション分けにより、閲覧効率を大幅に改善しています。

また、実際のシーンを反映した写真を全面的に撮り下ろし、テキストと連動させることで、コンテンツの説得力と専門性を高めました。

Text

テキスト設定

本文には可読性に優れたゴシック体を採用し、情報をクリアに伝達。
見出しには装飾的なセリフを持つ明朝体を選定することで、フォーマルで専門性が高く、かつ温かみを感じさせる印象を与えています。

Color Palette

カラー設定

コーポレートカラーを軸に、1色のブライトトーンと2色のセカンダリーブルーを展開し、奥行きのあるレイアウトを構築しました。グレースケールには青みを含んだグレーを選定し、視覚的な一貫性を確保。

背景や余白には純白ではなく薄いグレーを使用することで、濃色とのコントラストによる視覚的負荷を軽減しました。黒の要素にはダークグレーを採用し、全体の調和を図っています。

アクセントとしてコーポレートカラーのグラデーションを配し、信頼感の中にも躍動感のあるデザインに仕上げました。

Icon

アイコンデザイン

サービス紹介セクションのレイアウトを刷新し、オリジナルアイコンをデザインすることで識別性を強化しました。また、アニメーションも加えることでリズム感を作り出し、工業関連の堅い内容をクリアで洗練されたスタイルへと変換しました。

Contact & Recriut

問合わせ&採用情報

「お問合わせ」と「採用情報」の2大セクションも大幅に最適化しました。ボタンの視認性と導線設計を強化することで、「パートナー企業の拡大」と「優秀な人材の獲得」という2つのコア目標をより明確かつ象徴的に提示しています。

関連作品

プロジェクト
背景