プロジェクトマネージャー（以下PM）のchakiです。私はデザイナーとコーダーを経験した後、PM（設計書の記載までを担当することの多い、開発PM）へキャリアチェンジしました。
サービスのシステム開発を行う場合、エンジニアはデザイナーから提供される表層デザインを理解した上で、基本設計書や画面設計書を書き起こします。その際にデザイナーからこんな情報も提供してもらえたらスムーズだなと感じるポイントがあるので、ご紹介していきたいと思います。
デザイナーが作成する説明（ASIS）
今となってはもう記憶が曖昧ですが、コーダー経験がないデザイナーの私はこんな説明を書いていました。
エンジニア観点で考えること
これを開発PMとなった今の私がみた時、それぞれの要素について脳内にはこんなことが浮かびます。 これらをクリアにするために質問や情報収集をすることになります。
共通ヘッダー
- 共通ヘッダーだがカテゴリページならではの制御はないのか、例えばすべての製品がフォーカスされている状態になるとか
- ログインしている時に表示が変わる要素はないのか
- html上のheader要素で可変なものはないか
- titleタグ、description、metaタグ、カノニカル
- カテゴリ毎のURLはどのようになるのか、カノニカルの指定は、必要なURLパラメーターはなにか
キーワード検索
- 複数ワード検索を行えるようにするのか
- 検索の速度を配慮したい
- どんなワードで検索する想定なのか
- 何も入力せず検索ボタンを押した時にどうなるのか
- 入力フォームや検索ボックスはフォーカスした時に装飾を変えるのか
- プレイスホルダーは設定するのか
- 検索した場合はキーワード検索結果に遷移するのか
カテゴリ情報
- カテゴリの構成とカテゴリの数はどのくらいあるのか
- 製品は複数のカテゴリに関連づくのか
- カテゴリ毎に画像を用意するが、画像がないカテゴリもあるのか
- カテゴリ毎に画像を用意するが、画像サイズやファイル形式は一定なのか
- カテゴリの名称は一番長いものと短いものとどのような名称があるのか
- カテゴリの名称は正式名称と略名と種類があるのか
- カテゴリ毎にカテゴリ説明を用意するが、説明がないカテゴリもあるのか
- カテゴリ毎にカテゴリ説明を用意するが、改行ありの説明なのか、一番長い説明と一番短い説明とどのようなものがあるのか
製品一覧と検索数
- デザインに説明ないけど・・？
- カテゴリ名が先頭に入る表記だが、カテゴリ名が存在しない場合もあるのか
- 24件と表示されているが、0件の時はどのような表示か
- 24件と表示されているが、1000件の場合、カンマ付きの表示にするのか
おすすめ順（ソート）
- プルダウンになっているが、おすすめ順の他にどのような選択肢が必要なのか
- おすすめ順の場合、製品一覧にはどのような順で製品を表示するのか
- 売れている製品順なのか、よく見られている製品順なのか、同列の場合は何を優先して表示するのか
- 閲覧者によっておすすめ情報の表示順ロジックはどうなるのか
カテゴリ毎の製品一覧
- 8件の製品が表示されているが、7件の場合は表示は左詰めで良いのか
- 8件の製品が表示されているが、0件の場合はどのような表示になるか
- 検索に時間がかかるかもしれないので、読み込み中のような表示を行うか
- 1カテゴリあたり、何製品くらいヒットするものなのか
- 製品の情報は写真を表示するようだが、写真がない製品もあるのか
- 製品の写真は1製品あたり複数写真あるのか、ある場合はこの画面にどの写真を表示するのか
- 製品の写真は長方形のようだが、製品写真はすべて長方形になるのか、長方形の場合は縦横比が同じか
- デザインでは綺麗に縦の高さが揃っているが、縦の高さは揃うように実装するか
- 製品の写真のファイル形式は一定か、動画ファイルもあるのか
- 製品名称は改行が入ることもあるのか、一番長い名称と一番短い名称とどのようなものがあるのか
- 製品価格は0円のものがあるのか、最大金額はいくらなのか、金額はカンマ付きで表示するのか
- 製品の評価を星で表示するようだが、星が0の場合や5の場合で色やデザインが変わったりしないか
- 製品の評価の数を表示するようだが、評価数が0の場合や最大数はどのくらいになるのか
- 製品の評価の数は何をカウントするのか、評価コメント数か、コメントがなく星が1つでもついているものをカウントするのか
- 製品が完売中や在庫切れの場合でも表示するのか、表示するならどんなデザインか
- カートマークがあるが、在庫切れの場合はカートはアクティブにできないので、非アクティブの場合はどんなデザインか
- カートマークを押下した際に、カートに入れましたなどの表示を行うのか
- 製品詳細ページに遷移するのか、タップする範囲はどこなのか
もっと見る
- 8件の製品が表示されているが、1ページあたりの表示は8件なのか、もっと見るを押下すると+8件ずつ表示が増えるのか
- 1000件ヒットした場合に、ページ送りがないので、もっと見るだけだと使いづらくないか
- ページャーの設置は不要なのか
- もっと見るを押した時にデータ読み込みが行われるが、ロード中の表示を設置するか
エンジニア観点まとめ
まとめると、仕様書を書く上でエンジニアはこれらの情報を得たいと考えていることがわかります。
- Webページを構築する上で必要な情報があるか（タイトルタグ系、SNS拡散）
- 遷移先の情報がわかるように記載されているか
- 動的に変化するところはどこなのか
- 特定の条件での制御が必要か
- 動的に変化する箇所はデータの形式や長さが固定ではないが、それに対応できるデザインであるか
- データ量は画面表示や検索速度に影響するので、どのくらいになるのか
- アニメーションや挙動のふるまいはどのようになるのか
デザイナーが作成する説明（TOBE）
エンジニア観点を踏まえ、ASISで紹介した説明をupdateしてみました。
キーワード検索
カテゴリ情報
カテゴリ毎の製品一覧
最後に、画像での説明がわかりにくかった方もいると思います。Figmaファイルを公開していますので詳しくみたい方はこちらからご参照ください。
まとめ
デザイナーの私はデザインを作ることで満足していました。しかし実装されたデザインを確認すると思っていた動きと違うことがよくありました。それは私がこう動いて欲しいという内容を伝えきれていなかったからでした。コーダーを経験し、開発PMを経験し、どんな情報が足りていなかったのかわかるようになりました。
何をどう伝えたら良いかわからないデザイナーへ、少しでもヒントになれば幸いです。プロジェクトパフォーマンスを上げていきましょう！！
