エウレカ&グッドパッチのデザイナーに聞くワイヤーフレームの作りかた！
先日、エウレカさんとグッドパッチのデザイナーで第一回合同勉強会を開催しました。今回のテーマはワイヤーフレームです。この勉強会は、ワークショップを通してナレッジの共有をし合い、個々のデザイナースキルを上げる目的があります。エウレカさんのレポートはこちらです。合わせてご覧ください！
目次
１.ワイヤーフレームを作る意味とは
ワイヤーフレームを作る意味についてお話をしてくれたのは、エウレカ原さんです。案件を進めるときにまずすること、ワイヤーフレームはなぜ必要か、ワイヤーフレーム制作で意識するポイントについて解説していただきました。
ワイヤーフレームを書く前に
案件を進めるとき、まずすべきことはプロダクトの目的とゴールの再確認です。
最終的に作っているものの方向性を見失わないようにするために、
- 何が目的でそれを実装するのか？
- なんで必要なのか？
- それを作ることによって何を解決するのか?
を考える必要があります。変更や議論を重ねる中で、何を優先すべきなのか、何のために作っているのかを意識せず進めていくと、どんどん本来の目的から外れたデザインになってしまいます。まずは、目的とゴールを確認し、迷ったときは立ち帰れるようにしましょう。
ワイヤーフレームはなぜ必要か
ワイヤーフレームが必要な理由は情報整理と認識合わせです。
ワイヤーフレームで①必要な情報を洗い出し、②ページで必要なものを定義、③それを元にチームメンバーと認識合わせをします。
情報を整理し、認識合わせを行うことによって、
- 仕様や機能を早い段階で明確にできる
- 工数把握(早い段階でスケジュールが引ける)
- 事前にコミュニケーションをとるのでロスがくなる
などのメリットがあります。
想定漏れによる追加工数の発生、伝えたつもりになりエンジニアと揉めるなどのトラブルの原因は認識のずれにあります。実際のデザインに入る前にワイヤーフレームで確認をすることは、その後実装まで円滑に進めるためにも必要と言えます。
気をつけること
ワイヤーフレームではビジュアルデザインはしません。
少しでもビジュアルデザインをした要素をいれると、チームメンバーに共有するとき、ビジュアルに引っ張られ、 本来議論したいことができなくなるためです。 上記のようなワイヤーフレームにしないためには、色をつけずに作成するのがポイントです。ただし構成要素のサイズバランスは、画面構成や全体の設計をみるときに大きく影響を与えるものなので、意識して作成する必要があります。
２.ワークショップ
説明の後は、各自で実際にワイヤーフレームをつくるワークショップが行なわれました。お題と参加者の回答を載せているので、ぜひ皆さんもお題に取り組んでみてください！
お題
架空のアプリ「Good Shops」にショップ情報ページを追加してください。
【Good Shops概要】
「現在、開発を進めているオンラインショッピングができるサービス「Good Shops」。出店店舗から「もっと自分の店舗を知ってほしい、情報掲載をしたい」という要望が多く上がり「ショップ情報」を追加することになった。クライアント提案の前に、まずは社内検討するため、方向性の確認は先輩に入ってもらうことになった。」
【掲載可能な情報】
- 店舗名
- 店舗説明
- 店舗イメージ
- 住所
- 店舗の商品一覧
- 店舗の最新商品一覧
3.エウレカデザイナーの回答
渡辺 智保子さん
【作成プロセス】
- お題アプリの目的やビジネスを大まかに想定 ユーザーがこのアプリに求めることや、ショップ側の希望など、課題からわかる要素を洗い出し、プロジェクトを自分のなかに落とし込む
- 自分がユーザー心理に近づかないとアイディアが出せないと思い、類似のアプリを改めて触り、各タイミングの心理状況や感じ方を探る
- そこから、いくつかアイディアをもらい、課題のアプリに組み込み、設計、Prottでプロトタイピング
【ポイント】
今回の課題「お店情報の掲載」は、お店側からの要望。 しかし、それを掲載することがお店側からの一方的なモノとなってしまい、ユーザー体験を邪魔してしまったらダメ。さらに言えば、ただ「載っている」というだけでも勿体無い。掲載することで、ユーザーを「さらに良い体験」に導けるようなものを考えました。 そこで、まずはユーザーが「この商品を扱っているお店ってどこなんだろう？」と、気になるタイミングにあわせて導線を設けました。 あくまで自然にお店情報にアクセスできるようにしたいと思い。 その後の、お店情報ページはお店の世界観が伝えられるようなレイアウトとし、ユーザーがお店の「ファン」になるように、という視点で作りました。 しかし、あくまで自然に流入したユーザーが「お店の世界観」でファンになるのか、という点などがまだ掘り下げられていないので、このページはちょっと課題が残ります。
渡辺 智保子さんのプロトタイプ
進 真穂さん
【作成プロセス】
- アプリの目的と、このアプリを使うユーザーの目的や動きを考える（とにかくユーザー心理や、作成者の狙いを紙にかく）
- 1に沿ったUIを考える
- 手書きでイメージをつくる
※普段もワイヤーフレームはクライアントに出さない限り、社内向けでは手書きが多いです
【ポイント】
下記全てを考慮した上で考えました。
- アプリの目的：商品を売る
- ユーザーの目的：特定の商品を買う、何かいいものないかと探す→買う、別に「お店」を探している訳ではない（お店はたまたま得る情報、家が近かったら行ってみようかなぐらい）
- クライアントの目的：商品を売る、お店を知ってもらう。店舗を詳しく知ったところで、家が近くなければ店舗には行かない。
→商品を買ってくれればOK、また戻ってきて再購入してくれればOK
↓
★商品ページにレコメンドを入れる（この商品を見ている人はこんなのも見ている）。アルゴリズムでレコメンドを表示。
→多くの商品を見て回るきっかけ→売り上げアップ
★「この店舗」の他の商品枠。商品を並べて見せる。店舗自体の情報ではなく、その店の商品でお店を知ってもらう。
→他の商品をみるきっかけ、お店を気に入ってもらうきっかけ（このお店いい）
★お店情報に地図を表示をのせることで「近いから行ってみよう」になる。
(反省点)
- お店の商品一覧ページも作りたかった・・（もっと見るの先）
- お店の「お気に入り登録」入れたかった。
進 真穂さんのプロトタイプ
酒匂 ひな子さん
【作成プロセス】
- 仕様、今あるデザインを確認
- ユーザーがどう見ているか、全体の体験を考えて紙に書く→紙でワイヤーをざっくり書く
- ketchでワイヤーを起こす
【ポイント】
- 商品の上部に目立つようショップアイコンとショップ名を追加した。
- お客様が商品をアプリで直接購入しやすいことを第一に考え、ショップへの動線はシンプルにした。
- 店舗の商品画面・店舗詳細は１つの画面に収める情報をシンプルに設計した。
- お店側の目的を、オンライン購入＞店舗の認知＞リアル店舗に行くことを3つに分類・優先度を考えた。
酒匂 ひな子さんのプロトタイプ
亀谷 長翔さん
【作成プロセス】
- 最終的な提出物のゴールを簡単にイメージ
- 必要になるであろう作業内容を洗い出し
- 大体の工数を作業内容ごとに算出
- サービス提供側としての意図・狙いと契約相手(店舗側)の要望をそれぞれ洗い出し
- 上記2つ観点のクロスポイントを見つける
- それを実現するような参考となるUIの前例を探す
- 参考を元にkeynoteでワイヤーを書いていく<
- 簡単にワイヤーを作成したらprottに入れてみる
- 足りない要素がないか確認
- あれば再度keynoteで追加して8へ(繰り返し)
【ポイント】
サービス提供側としての意図・狙いと契約相手(店舗側)の要望をどうクロスさせてお互いにとってウィンウィンなアウトプットに落としこむかを考えました。
グッドパッチデザイナーの回答
瀧本 優
【作成プロセス】
- 仕様、今あるデザインを確認
- ユーザーがどう見ているか、全体の体 験を考えて紙に書く→紙でワイヤーをざっくり書く
- Sketchでワイヤーを起こす
【ポイント】
必要以上にショップページへの導線を付けるという訳ではなく、まずは商品を見て貰って商品自体に興味を持ったユーザーにショップページへ遷移して欲しいという意図があったため、商品詳細ページからショップへの遷移を追加しました。またそのショップの他の商品への回遊率を高めるために、商品ページ下部に他の商品への導線も追加しています。ショップページにはマップへのリンクも追加してすぐに地図で位置を確認できるようにしました。
山口 真朝
【作成プロセス】
- 手書きでハイレベルサイトマップ的なのをつくる
- 対応が必要な画面にメモを書く
- 手書きで詳細を書いていく（時間があれば画面に起こしたかった。。。）
【ポイント】
- 全体感を俯瞰する
- 何画面対応が必要になるか/追加画面は何画面か
- 遷移が変わるところが発生するかしないか
- 開発が難しい・時間がかかりすぎるものはさける
- どうしたら利益が上がるか
日比谷 すみれ
【作成プロセス】
- 紙に、アプリの目的、ターゲットユーザーなどコンセプトを書き出す
- ユーザーの心理・行動を踏まえたユーザーシナリオを書く
- 紙にラフ書く
- Sketchで紙のラフをざっくりしたパーツに置き換えて行く
【ポイント】
- 遷移と構成に漏れがないこと
- 要素をどうレイアウトするかが伝わること
三橋 正典
【作成プロセス】
- 紙に、アプリの目的、ターゲットユーザーなどコンセプトを書き出す
- ユーザーの心理・行動を踏まえたユーザーシナリオを書く
- 紙にラフ書く
- Sketchで紙のラフをざっくりしたパーツに置き換えて行く
【ポイント】
- クライアントが求めるものに対し目的とゴールを明確にし、解決策をワイヤーで理解できるレベル(部分的ではなく全体的にどうか検討できるもの)に持っていくこと。
- ワイヤーでは、決めたゴールに対し達成できるかを何回も繰り返すので、すぐ作り直せるレベルというのを意識して制作しました。
3.ワイヤーフレーム作成のポイント
ワークショップ後は、各自で自分のワイヤーフレームを振り返ります。グッドパッチ小林が振り返るときに注意すべきポイントを解説しました。
状況に応じたワイヤーフレームをつくる
ワイヤーフレームをどこまで細かく作り込むかは段階によって変える必要があります。どこまで詳細に作成するかは
- 目的は何か
- 提出先はどこか
を考慮して入れる情報を選定しましょう。必要最低限の情報で作成することで、作る時間をへらすことができ、認識合わせの時間が増えます。
ワイヤーフレーム制作のスピードアップ
ワイヤーフレームは素早く作りブラッシュアップさせる必要があります。短時間で、効率良く作成するにはsketchが便利です。
- シンボル(同じシンボルのオブジェクト同士は、連動して変更が反映する)
- レイヤースタイル(色、塗り、線、シャドウなどのスタイルを登録できる)
- テキストスタイル(テキストのフォント、サイズ、色を登録できる)
- プラグイン(仮の画像を入れられる、カラーパレットを簡単に作成できるなど)
- UI Template(ステータスバーや、キーボードなどのオブジェクトが用意されている)
の機能を利用して手間をかけず効率的にワイヤーフレームを作成しましょう。
ワイヤーフレームを動かしてレビュー
Prottなどのプロトタイピングツールを利用すると、スマートフォン上で動くワイヤーフレームを作ることができます。実際に触って体験してみることで、よりユーザー視点に立ってレビューすることができます。そして、プロダクトの価値の検証や設計上の課題に気付くことができ、専門知識のないクライアントにも設計の共有がしやすくなります。 
まとめ
ワイヤーフレームを作る際は、
- ビジュアルデザインはしない
- 段階や提出先を考慮して適切な情報量を載せる
- Sketchなどのツールを活用し短時間で効率よく作成する
- Prottなどのプロトタイピンングツールを使い操作できるワイヤーフレームまで落とし込む
ことを意識して作成しましょう。
今回が第一回目の合同勉強会でしたが、同じ課題に取り組むことで、自分のワークフローの良い点と改善点が明確になり、学びの多い勉強会になりました。今回はワイヤーフレームについての勉強会でしたが、次回はまた違うテーマで定期的に勉強会を開催する予定です！