ワイヤーフレームの記事を書こう
こんにちは。半年前からリクガメを飼いはじめたUXデザイナーです🐢
業務の中で、機能要件検討からワイヤーフレーム作成に関わることが多いので、ワイヤーフレームのことについて書こうと思います。
まずはワイヤーフレームのお困りごとについて調べてみる
Google検索のサジェストからユーザーのお困りごとの声の多さを調べることがあります。
今回は「ラッコキーワード」というGoogle検索のサジェストをいい感じに表示してくれるサイトを使います（ラッコかわいい）
↓「ワイヤーフレーム」のGoogleサジェスト結果
ふむふむ...ワイヤーフレームの作り方や使用ツール、あとはXDやFigmaといったデザインツールでどうワイヤーフレームをかくのかが知りたい...と。
↓ワイヤーフレームの作り方とツールに絞ったサジェストはこんな感じ
無料で頑張りたい人が多いイメージ。Photoshopのワイヤーフレーム作成はなかなか大変そうだな...
今回は無料でワイヤーフレーム作成を頑張りたい人向けに、おすすめツールと使い方、ワイヤーフレームを作るときの考え方を紹介したいと思います。
Miroでワイヤーフレームで書いてみよう
サジェスト結果からしたら、XDやFigma、パワポでのワイヤーフレームの作り方を...と言いたいところですが、
XDやFigmaはおすすめしません。
XDやFigmaといったデザイナーがよく使うデザインツールは、自由度が高く、うまく使いこなすには学習コストが高いので、慣れない方が使うと膨大な時間を要します。（うまく機能やプラグインを使うと便利なんですけどね）
オンラインホワイトボードツールのMiro
基本無料かつ日本語対応。
実はワイヤーフレーム用の機能もあります。
左のメニューの「>>」から「Wireframe」または（日本語表示だと）「ワイヤーフレーム」と検索すると、ワイヤーフレーム用のツールがヒットします。
もしヒットしない方は、「Get more app」から追加でアプリを入手してください（無料）
ワイヤーフレーム用のオブジェクトがたくさん出てきます。
あとはこれをドラッグアンドドロップするだけ。
ボタンや入力フォームといったものから、カードやテーブルといったよく使うデザインは大体揃ってます。
ワイヤーフレーム作りで大事なこと
いかに爆速で作り、完成イメージを具体化できるか
ワイヤーフレームで求められることは、プロダクトの完成イメージを構造・骨格レベルで捉え、要件（誰に何をどのように）を具体化することです。
目的のために不要な要素は削ぎ落としましょう。そのために、重要なことや簡単なテクニックをご紹介したいと思います。
細かく数値を指定しないこと。文字サイズは多くても5種類に絞ること
爆速ワイヤーフレームにおいて細かい調整は悪です。一度細かく数値を設定してしまうと、全体のバランスが気になり出してきます。思い切って手札を捨てましょう。
Miroは64px,48px,36pxと文字サイズが何段階か選べるので積極的に使いましょう。
色はモノトーン以外使わないこと。黒・白・グレー以上！
文字と同様に、色が増えれば増えるだけ考えることが増えてノイズになります。
初めは黒と白だけでいいと思います。さらに情報に強弱をつけたい場合はグレーを使いましょう。
できるだけありもので楽をすること。ワイヤーフレーム用の図形や、参考にしているUIがあればスクショを貼り付ける。
四角や丸を組み合わせてUIのオブジェクトを作ると膨大な時間がかかってしまいます。
ワイヤーフレーム用の図形をできる限り多用し、よくあるデザインであれば思い切って他のサイトやアプリからスクショをとって貼りましょう。
カレンダーアプリであれば、四角や表を組み合わせて作成するのは悪手です。iOSのカレンダーアプリのスクショを使えば5秒でイメージは完成します。
消したい要素については、画像をトリミングしたり白い四角を重ねることで、簡単にカスタマイズできます。
ワイヤーフレーム用のMiroテンプレートも公式が出していたりします。
慣れないうちはゼロからデザインしないこと
同じような機能を持っている他のサイトやアプリのデザインを参考に横に置きましょう。
まずゼロから作ると、一画面でどのくらいの情報量が入れられるかがよくわからなくなります。
我々が思っている以上に、小さいスマホ画面の中には要素をたくさん詰め込めますし、一画面でできることは少ないはずです。
ワイヤーフレーム作成で大事なことは、素早く叩きを作るために余分な要素は削ぎ落として爆速で作ること。
そして、形にできたら周りの人に積極的に共有してブラッシュアップしましょう。Miroを使っているので、コメント機能や付箋を使ってフィードバックをもらうのもいいと思います。
おわりに
今回はMiroで作るワイヤーフレームの使い方、考え方をご紹介しました。
ワイヤーフレーム作成で大事なことをお伝えしましたが、もっともっと大事なことは、誰に対して、何を、どういう優先順位で伝えるのか、そういった要件を考えることです。要件がぼんやりしている場合は、ワイヤーフレームを作りながら考えてもいいと思います。
こまいテクニックが好きなので、もっとテクニック系記事を書こうと思ったんですが、いつの間にかエントリー寄りの記事になってしまいました。次はもっとテクい記事にチャレンジしようと思います🐶