プロジェクト概要
沖縄の製塩メーカー「株式会社 青い海（シママース本舗）」のコーポレートサイト構築プロジェクトです。Webディレクターとして参画し、クライアントの要望をもとにサイト全体の情報設計とシステム要件を定義しました。Figmaを用いてフロント側のワイヤーフレームおよびWordPress管理画面の仕様書を作成し、デザイナーやコーダーへの指示出しから進行管理までを担当しています。
基本情報
サイト名: 株式会社 青い海（シママース本舗）
サイト種別: コーポレートサイト
担当領域
Webディレクター
（要件定義 / Figmaでのワイヤーフレーム・管理画面仕様書の作成 / デザイナー・コーダーへの指示出し・進行管理）
プロジェクトの目的と課題
- 明確な設計図の作成: レシピの複合検索や多岐にわたるCMS化など、複雑なシステム要件を制作チーム（デザイナー・コーダー）が迷わず実装できる仕様書に落とし込むこと。
- 運用しやすい管理画面の設計: ユーザーが閲覧するフロント側だけでなく、クライアント側の担当者が迷わず更新できる裏側（WordPress）の入力ルールを事前に定義すること。
- チームの円滑な連携と品質管理: 職能の異なるメンバーへ的確に指示を出し、手戻りを防ぎながらスケジュール通りにプロジェクトを進行させること。
施策とこだわったポイント
1. Figmaを活用した網羅的なワイヤーフレーム作成
サイト全体のレイアウトや情報の優先順位を整理し、Figma上で全ページのワイヤーフレームを作成しました。レシピ、歴史、法人向け案内など、目的の異なる多様なコンテンツを整理し、デザイナーがビジュアル制作にスムーズに入れる土台を作っています。
2. 開発の手戻りを防ぐ、管理画面（CMS）の仕様定義
フロント側だけでなく、裏側にあたるWordPress管理画面の仕様もFigma上に詳細にまとめました。ブログ、FAQ、レシピなどの投稿タイプごとに、入力必須項目やカスタムフィールドの構成を事前に可視化することで、エンジニアの認識ズレや開発の手戻りを防いでいます。
3. 複雑な機能要件の言語化と的確な指示出し
「レシピページにおいて、料理ジャンルと使用商品の複合条件で検索させる」といったシステム要件を整理し、コーダーへ明確に指示を出しました。デザインから実装まで、プロジェクト全体が要件通りに進行するようディレクションを行っています。
成果・評価
システム要件を可視化し、チームを動かすディレクション能力
クライアントの要望を整理し、Figmaを用いた詳細なワイヤーフレームとシステム仕様書を作成することで、制作チーム全体を円滑に牽引しました。フロントエンドの表示から裏側のCMS構築までを見据えた論理的な設計を行い、プロジェクトを確実な形へと導くディレクションスキルを示す実績です。
