とりあえずワイヤーフレームを描いてみよう

唐突ですが、機能実装の際にデザインがない場合がありますよね
初期画面設計から追加実装が必要になった時に追加の画面デザインが必要な場合にチームに専属デザイナーがいない場合やデザイナーが他の仕事をしていてラグがある。。。

それなら自分でやればいいじゃん！！

って事でとりあえずワイヤーフレームを描いてみましょう。

ワイヤフレームって何

ざっくりいうとレイアウトを大まかに示したものです。　ここで大切なのは大まかに示したものなのであくまでレイアウトでこんなことがやりたいよっていうレベルで大丈夫です

雑でも良いからとりあえず描いてみる

例えば承認ボタンを押した際に最終確認ダイアログが出る画面の実装をしているとして、
必要そうな要素を洗い出してみると

• 承認ボタン
• ダイアログ
  • 最終確認のメッセージ
  • 最終確認に対しての応答ボタン
    多分最小でこんな感じで実装できますね

これを雑にワイヤーフレームにしてみると

こんな感じになります。

めっちゃ雑だし何がどうなるのか動きがわからないのでわかりづらいですね。　
でもワイヤーフレームなんてこんな感じでよかったりします。
この段階でやりたいのは
①とりあえず思いついたものをざっくり描いてみる
②描いたものを見直して自分が何がしたいのかが伝わるか俯瞰してみる
この２つだけです。　
細かい装飾や修正は一回雑に描いてから考えましょう。

動きをわかりやすく明示してみる

描いたワイヤーフレームを振り返ってみると
１枚でUXまで表現しようとしているせいでボタンを押したらダイアログが出るという動作がわかりづらいです。
一番早く表現できそうな文字を追加しみましょう

ここでは表現方法にこだわる必要は全くないです。
とりあえずさっきよりわかりやすくなっていてやりたい事がわかるようになればオッケーです

一旦まとめ

• ワイヤーフレームの時点ではしっかり作り込む必要はない
• まずは書き出してみる！
• 動きは文字で伝える
• 細かい所を作り込むのは次の段階で！

次の記事では作ったワイヤーフレームを元に細かいデザインを詰めていこうと思います。

次の記事はこれ！
ワイヤーフレームからデザインしてみる