ターゲット Target
製造業の発注担当者・企業の購買担当者
detail DETAIL
コーポレートサイト制作
金属加工会社のコーポレートサイト制作しました。
Design
Coding
Responsive
プロジェクト概要 Project Overview
本プロジェクトはポートフォリオ用に制作した仮想案件です。
精密部品の加工を得意とする金属加工会社を想定し、
新規取引先の獲得と企業信頼性の向上を目的として制作しました。
製品情報や技術力が伝わる構成を意識し、シンプルかつ視認性の高いデザインで設計しています。
クライアント Client
業種
精密部品の加工を行う金属加工会社
対象
製造業の企業（法人向け）
強み
高精度な加工と短納期対応
現状
紹介中心でWebからの新規問い合わせが少ない
-
制作期間
2025年1月1日〜2025年1月31日(30日)
-
使用技術
HTML / CSS / javascript
-
担当範囲
デザイン / コーディング
-
サイトURL
目的 Objective
既存のサイトは情報が整理されておらず、必要な情報に辿り着きにくい状態でした。 信頼感の向上と問い合わせ増加を目的に、リニューアルを行いました。
Before
- 情報が散在していた
- スマホ表示が見づらく不便になっていた
- 会社の強みが伝わりにくい
After
- 情報設計を見直し、整理
- レスポンシブ対応でスマホでも見やすく
- 強みや実積を分かりやすく訴求
課題 Problem
- Webサイトの情報が整理されておらず、企業の信頼性が十分に伝わっていない
- 技術力や対応可能な加工内容が明確に提示されておらず、比較検討の判断材料が不足している
- 問い合わせまでの導線が弱く、Webからの新規案件獲得につながっていない
解決策 Solution
- 情報設計を最適化し、サービス内容や強みが直感的に理解できる構成に整理
- 加工事例や設備情報を掲載し、技術力と対応範囲を明確化
- 各セクションにCTAを配置し、問い合わせまでの導線を強化
ポイント Point
- 余白を活かしたシンプルで見やすいデザイン
- 視線誘導を意識したレイアウト
- スマホでも快適に閲覧できるレスポンシブ対応
- スクロールアニメーションで上質な印象を演出
デザイン Design
信頼感や技術力を伝えるために、白を基調とし、ネイビーをアクセントカラーに使用。 写真を大きく配置し、視覚的に訴求力のある構成にしました。
実装 Development
- モバイルファーストでコーディング
- Intersection Observerでスクロールアニメーション
- 再利用しやすい再利用しやすいクラス設計で保守性を向上
- 表示速度を意識した画像の最適化
成果 Result
仮想案件のため実測値はありませんが、Webサイトの目的に対して以下の改善を想定して制作しました。
- 情報整理により、事業内容や強みを短時間で把握しやすい構成に改善
- 信頼性の向上を意識し、実績・設備・対応範囲が伝わる設計に改善
- 問い合わせ導線を各セクションに配置し、新規相談につながりやすい流れを設計