こんにちは。パルミーという会社で代表兼プロダクトマネージャーをやっているTakahironです。

このノートでは、僕らの会社で新しい機能を開発する際に、実際に作っているワイヤーフレームを公開しつつ、作成時に気をつけている点を紹介していきます。

普段、他社のプロダクトマネージャーが作ったワイヤーを見る機会も少ないと思うので、特に今プロダクトマネージャーをやっている方に、一参考として見てもらえると嬉しいです。

1.実際のワイヤーフレームはこちら

早速ですが、これが僕が作ったワイヤーです。

このページはパルミーで取り扱っている教育動画の販売ページです。その販売ページをリニューアルするため、上記ワイヤーを作成しました。
パルミーではこういったワイヤーを作成して、エンジニア・デザイナーと開発要件をすり合わせています。

補足：そもそものリニューアルの必要性や、リニューアル前ページの課題点など、ワイヤー化の前段階の情報は別途Googleスプレッドシートにまとめてチームですり合わせをしています。
その後、どういうものをつくるのか？という工程に進んだ際に作成しているのが上記のワイヤーになります。

2.ワイヤー作成時に気をつけている3つのこと

1.情報設計はプロダクトマネージャー(PM)がやる
これはチームによって方針は様々かと思いますが、パルミーではPMが情報設計をやります。

これはユーザー体験において重要な情報設計部分を「ふわっと」させたままプロジェクトを進行させないためです。チームによってはデザイナーが責任を持っている領域でもあると思います。
そこはチームメンバーの個性や能力に応じて様々あると思いますが、パルミーではまずユーザーの代弁者でもあるPMがしっかり考えてワイヤーに落とし込むことにしています。

どのくらいの粒度で情報設計をやるかというと、こんな感じです。

上図は販売ページの一部分ですが、「こんな人にオススメ」「時間割」といった「ブロック」の順番を指定しています。
さらに、各ブロック内でのレイアウトについても、文字の大きさや挙動なども踏まえて書き込んでいきます。
(細かな点としては、見出しテキストのhタグを指定したりします)

2.何をキーに出し分けるか、DBに情報あるかを考慮する
当たり前のことではあるのですが、ページに表示したい情報がすでにDBにある情報を使って出せるかどうかや、何をキーにしてページを出し分けるのかを考えてワイヤー化していきます。

例えば、先ほどの図であれば、チャプター内に「◯分◯秒」という時間が表示されていますが、これはすでにある情報なのか、ないとして人力以外の方法で取ってこれそうな情報なのかを考えておきます。

また、下図(カオスってますが..)では、様々な出し分けを行っている箇所ですが、例えば会員のステータスがAかBか、商品タイプが1か2かというように、何をキーにして判定し出し分けるのかをまとめていきます。
(動的に表示した方がよさそうな箇所があれば、それも書いておきます)

さすがに出し分けがカオスでわかりづらいな...という時は、より判定がわかりやすいようにこんな感じでまとめたりします。

3.「実態」と「将来」に合うワイヤーをつくる
ワイヤーを作る際、絶対に考えるべきことはそのワイヤーが実態と合っているか、将来的のサービスの状態に堪えうる状態になっているかを考える必要があります。

例えば、パルミーのあるページでは新着商品を表示する箇所がありますが、右上に「もっと見る」や「一覧へ」といったボタンはついていません。

ボタンの有無は些細なことに思えますが、ボタンをつけるかどうかは、この「新着講座」という枠に表示するカード数を考慮すれば、必要かどうかを選択できます。

仮に「新着講座」枠に表示する講座の要件を、講座の公開日から60日と指定する場合、「1ヶ月に5個の講座が出るとして、この枠は最大でも10件程度しか講座が表示されないな」「最大10件なら、1スライドで4講座表示するUIだからせいぜい2スライドしかしない。一覧はいらないな」といった選択ができます。

逆に今の実態に沿っていても、近い将来「新着枠に表示する件数が50件くらいになる」ということが見えているなら、一覧をつけていないと大変です。もしくは新着枠自体の見せ方から考える必要もでてきます。

実態と将来を想像しながら、運用に堪えうるワイヤーを作っていくことが大事になってきます。

補足：さらに一点。ワイヤーを作る側からすると「もっと見る」ボタンをつけることは、ワイヤー上では些細な話でしかありません。
ただ、実際にページをつくる側からしたら、わざわざもっと見るページを新規で用意しないといけなくなります。
もしいらない要素であれば、事前に消し去ってあげることで、自分のチームメンバーに余計な負担を強いることがなくなるので、このあたりもワイヤーを作る上では考えたい点です。

以上が、パルミーのプロジェクトマネージャーが考える、ワイヤー作成において大事な3つのことでした。

3.最後にお知らせ

パルミーではマーケティングを担う1人目のマーケターを募集中です！
クリエイター支援やC向けサブスク事業に興味のある方、少し話を聞いてみたいという方は、ぜひお気軽にコンタクトしてみてください。僕の方から折り返しご連絡します！