株式会社オーエスプランニング
コーディング外注対応／コーポレートサイト リニューアル
プロジェクト概要
プロジェクト概要
株式会社オーエスプランニングのコーポレートサイトリニューアルにおいて、コーディング外注としてフロントエンド実装を担当しました。
本リニューアルでは、制作会社を探すユーザーが最初に確認したい「制作物」をトップページに配置し、ひと目で制作実績が伝わる構成へ刷新。さらに制作カテゴリーをクリックすることで、目的の制作物にまとめて到達できる導線を整備し、相談前の段階でも検討を進めやすいポートフォリオサイトとして再設計されています。
実装では、実績一覧の視認性と回遊性を最優先に、カード型UIの情報設計（表示ルール・余白・タイポグラフィ）を統一。画像主体のサイトでもレイアウトが破綻しないよう、レスポンシブでの見え方や表示崩れを抑える実装方針で仕上げています。
※デザイン：株式会社オーエスプランニング（https://osplan.jp/）
制作のポイント
- 実績ファーストのトップ設計をUIとして成立させるため、実績カードの情報整理（写真／カテゴリ／案件情報の優先順位）と一覧性を重視してコーディング。ファーストビューで制作物が視界に入り、ポートフォリオとして直感的に判断できる見せ方を崩さない実装にしています。
- 制作カテゴリー導線（クリックで目的の制作物へ到達）は、閲覧者が迷わず次に進める“意思決定の導線”として扱い、PC／スマホ双方で操作しやすいサイズ感とレイアウトに調整。カテゴリが増えても破綻しにくい余白と視認性を優先しています。
- 画像主体のため、レスポンシブ最適化とレイアウトの安定性を最重要にして実装。表示崩れや読みづらさが出ないよう、ブレークポイントごとに一覧性・可読性・タップしやすさを再配分し、安定した閲覧体験を担保しました。
公開後の変化
トップで制作実績を俯瞰できる構成になったことで、初回訪問でも「この会社は何ができるか」が即座に伝わる状態に。サービス説明より先に成果物で比較でき、検討の入口が明確化されています。
カテゴリー起点で制作物に辿れるため、閲覧者は目的（ブランディング／Web／ロゴ等）に合わせて迷わず回遊可能。結果として、目的別に実績を追えるポートフォリオ構造が成立しました。
実績一覧を主役にした設計により、更新するほどサイト価値が積み上がる“運用型ポートフォリオ”になっています。実績追加時も見やすさを維持しやすく、継続更新に強い土台を整えました。