システム開発会社の企業サイトが時代遅れのデザインで信頼性を損ねていた課題に対し、UI/UXを重視した現代的なデザインへ全面刷新しました。
サイトリニューアルの品質が高く評価され、追加でイベントロゴ制作案件を受注。初回案件の成果が次の仕事に繋がり、クライアントとの継続的な信頼関係を構築しました。
プロジェクト概要
期間： 2021年8月〜10月
予算： 15万円
業務内容： 企業サイトのデザイン刷新、コーディング、イベントロゴ制作
クライアントの課題
システム開発会社のクライアントは、以下の課題を抱えていました。
1. 時代遅れのデザインが企業イメージを損ねている
- 2010年代初期のデザインがそのまま残っていた
フラッシュバナー、グラデーションの多用、狭い幅のレイアウトなど、古めかしいデザインがそのまま放置されていました。 - 「技術力のある会社」という印象を与えられない
システム開発会社であるにも関わらず、自社サイトが古いデザインのままでは、「最新技術に対応できない会社」という印象を与えてしまいます。
クライアントから「サイトを見て不安になった」という声もあったとのことでした。
2. スマホ対応が不十分
- レスポンシブデザインが未実装
スマホで見ると横スクロールが発生し、文字が小さくて読めない状態。
BtoB企業であっても、担当者の多くはスマホで情報収集をしているため、機会損失に繋がっていました。
3. 採用活動への悪影響
- 求職者がサイトを見て応募を躊躇
採用ページも古いデザインのままで、「この会社、大丈夫かな？」と求職者が不安を感じていました。
優秀なエンジニアを採用したいのに、サイトのせいで応募が来ないという悪循環が発生していました。
実施した施策
1. 現代的なUI/UXへのデザイン刷新
ヒアリングと競合分析
まず、クライアントへの詳細なヒアリングを実施し、以下を明確にしました。
- ターゲット： 中小企業の経営者、情報システム部門の担当者、求職者（エンジニア）
- 競合分析： 同業他社のサイトを10社以上調査し、「信頼感を与えるデザイン」の共通点を抽出
- 求める印象： 「技術力」「信頼性」「先進性」の3つをバランスよく表現
デザインコンセプト
- ミニマルで洗練されたデザイン： 無駄な装飾を排除し、情報を整理
- 視認性の高い配色： ネイビー×ホワイト×アクセントカラー（ブルー）で、信頼感と先進性を表現
- 大きな余白とタイポグラフィ： 可読性を重視し、文字サイズと行間を最適化
- アイコンとイラストの活用： サービス内容を視覚的に分かりやすく伝える
レスポンシブデザインの実装
- モバイルファースト： スマホでの表示を最優先に設計
- タブレット・PCでの最適化： 画面サイズに応じて柔軟にレイアウトが変化
- ページ速度の最適化： 画像の圧縮、CSSとJavaScriptの最小化
2. UI/UXの改善
ナビゲーションの最適化
- グローバルナビゲーションの再設計： 「サービス」「事例」「会社情報」「採用」の4つに整理
- ハンバーガーメニューの実装： スマホでもストレスなく操作できるUI
CTAの最適化
- 問い合わせボタンの配置： 各ページの目立つ位置に配置し、問い合わせへの導線を強化
- 採用ページへの導線： トップページから採用ページへのリンクを分かりやすく配置
ページ構成の見直し
- トップページ： ファーストビューで「何をしている会社か」を明確に伝える
- サービスページ： 技術スタック（使用している技術）を視覚的に表示
- 事例ページ： 実績を数字で表現し、信頼性を向上
- 採用ページ： 社員インタビューや社内の雰囲気を伝える写真を追加
3. コーディング
- HTML5/CSS3/JavaScriptでの実装： セマンティックなマークアップを意識
- アニメーションの実装： スクロール時にふわっと要素が現れるアニメーションで、モダンな印象を演出
- SEO対策： メタタグの最適化、alt属性の設定、構造化データの実装
4. イベントロゴ制作（追加案件）
サイトリニューアルの品質が高く評価され、追加でイベントロゴ制作の依頼をいただきました。
背景
クライアントが社内イベント（期間限定モバイル事業）を開催するにあたり、イベントのロゴが必要でした。
サイトリニューアルでのデザインセンスを評価いただき、「森岡さんにお願いしたい」とご指名をいただきました。
デザインプロセス
- イベントのコンセプトヒアリング： 技術交流、学び、成長
- ラフ案を3パターン提案： それぞれ異なるコンセプトで作成
- フィードバックを反映： クライアントの希望を取り入れて修正
- 最終納品： AI形式（ベクターデータ）とPNG形式で納品
成果
イベントロゴは社内外で好評を得て、イベントの告知ページやSNSでも使用されました。
クライアントから「ロゴのおかげでイベントの印象が良くなった」とお喜びの声をいただきました。
成果
1. 企業イメージの向上
- 「技術力のある会社」という印象を獲得
リニューアル後、クライアントから「サイトを見て問い合わせをしたいと思った」という声が増加しました。 - 採用への好影響
求職者からの応募数が増加。特にエンジニア職の応募が、リニューアル前の1.5倍に増加しました（クライアント報告値）。
2. 問い合わせ数の増加
- 問い合わせフォームからの問い合わせが月平均で20%増加（クライアント報告値）
- 問い合わせ内容も具体的になり、商談化率が向上
3. 継続案件の獲得
- サイトリニューアルの品質が評価され、追加でイベントロゴ制作案件を獲得
初回案件での信頼関係構築が、次の仕事に繋がりました。
これは、「クライアントの期待を超える品質を提供する」ことの重要性を実感した瞬間でした。
4. クライアントからの評価
クライアントからは、以下のような声をいただきました。
「古くさいサイトがコンプレックスだったが、リニューアル後は自信を持って見せられるようになった。デザインだけでなく、UI/UXまで考えてくれたことが嬉しかった。」
このプロジェクトで得たスキル・知見
1. UI/UXを重視したデザイン設計
単に「見た目を良くする」だけでなく、「ユーザーが使いやすく、目的を達成しやすいデザイン」を設計する力を身につけました。
- ターゲットユーザーの行動を想定した導線設計
- CTAの最適な配置とデザイン
- 情報の優先順位を明確にしたレイアウト
2. クライアントとのコミュニケーション力
ヒアリングを通じて、クライアントの潜在的なニーズを引き出す力を磨きました。
- 「なぜサイトをリニューアルしたいのか？」を深掘り
- 競合分析の結果を共有し、デザインの方向性を合意
- デザイン案を複数提案し、クライアントに選択肢を提供
3. 継続案件を獲得する提案力
初回案件で「期待を超える成果」を出すことで、自然と次の仕事に繋がることを実感しました。
- 「言われたことをやるだけ」ではなく、「こうしたらもっと良くなる」と提案
- 納品後もフォローアップを行い、クライアントとの関係性を維持
4. ブランディングの理解
企業サイトとロゴ制作を通じて、ブランディングの重要性を理解しました。
- サイトのデザインは「企業の顔」であり、第一印象を左右する
- 一貫性のあるデザイン（サイト、ロゴ、名刺など）が、ブランドイメージを強化する
コメント