ワイヤーフレームって？
webサイトを作るとき、よし作ろう！といきなりデザインから取り掛かるわけでもないです。デザインを作る前に必要なこと＝ワイヤーフレームの作成があります。
ワイヤーフレームとは、画像や正式なテキストは入れず、このページのここにはどんな要素（画像や文章）を配置する、とか、簡単に言うとwebサイトの地図のようなものです。
似た用語でサイトマップと呼ばれるものも存在しますが、サイトマップは全体のページの構造を検討するもので、ワイヤーフレームは、各ページの中の細かい間取りまで指し示したもの、という感じです。
サイトのゴールを検討しよう
これから作るwebサイトのゴールは何でしょう？
例えば、今よりも売上を上げること、だとしたら、webサイトの場合は問い合わせをしてもらうことが目的になりますね。
ワイヤーフレームを作るときは、サイトのゴールを設定して、そのゴールに向かう為にユーザーはどんな行動をして、サイト内をどういう風にめぐって問い合わせまでたどり着くのか、架空のユーザーの行動パターンを想像して、その行動に合わせた作りにします。
ペルソナを設定する
より具体的に絞り込む
架空のユーザーの行動を設定するには「ペルソナ」を決めます。
作成するサイトに来ると想定されるユーザーや、ターゲットにしたいユーザーを具体的に詳しく、あたかも実在する人間かのように詳しく想定します。
30代女性と一口で言っても、本当に様々な30代女性がいますよね。
どんな名前で、何歳で、趣味は何でどんな仕事をしていて、何に関心があるのか…などなど、自社のサービスを利用しそうな架空の人物を作りあげます
ペルソナの行動パターンを作成する
ペルソナが決定したら、ペルソナの行動パターンを検討します。
webサイトにたどり着くまでに、ペルソナはどんな行動をして、何を思い、どういう経緯でwebサイトを検索したのか、閲覧したサイトでどんな情報が知りたくて、どんな情報を置いておけばユーザーが喜んでくれるのか…
ペルソナの行動パターンまで決められると、ワイヤーフレーム作成にどんどん近づいてきます。
そもそもですが、ペルソナの決定時に、実際のユーザー層とペルソナがかけ離れていると、求めているような効果が得られにくくなります。ペルソナを設定するときは慎重に、じっくり時間をかけて検討しましょう。
いざ、ワイヤーフレームを作成！
ペルソナを設定して、行動パターンまで決定したらいよいよワイヤーフレームの作成です！ワイヤーフレームを作成するにあたって、特にツールに指定はないですが、私はadobeXDをよく使用します。
実際にはソフトで作成する前に、紙に手書きでざっくりと書いてます。やっぱり紙の方が思ったことをパッと形にしやすいので…
XDで作成する際は、アートボードは1920×1080pxにしています。
これは、複数人でデータを共有する際に、フルHDサイズで作成していると、共有された人も最大サイズをイメージして確認出来るためです。
もっと小さいサイズのアートボードもあるので、例えば制作会社とかで指定があればそれに合わせますが、特になければフルHDサイズです。
画像は入れない、長方形でOK
ワイヤーフレームの時点では、画像を入れなくてOKです。
四角などで代用して、ここに画像、ここに動画が入ることがわかる程度でOKです。
文章も仮のテキストでOK
テキストも実際の文章でなくて大丈夫。
「ここに見出しが入ります」とかここにこんな内容が入りますよ、とわかる感じにしておきましょう。
私が作る時は、最大文字数分くらい仮でテキストをあてています。
コンポーネントを使って動きのあるボタンを作ろう
私がXDを使ってワイヤーを作る最大の理由はこれです！
XDではコンポーネント、ホバーステートを使って、ホバー時のデザインの変化や、ボタンをクリックした時にどのページに遷移するのか分かりやすくすることができます。
クライアントにこのボタンをクリックしたらこのページにリンクして…と口頭で説明しなくても実際に触ってもらうことで、完成形のページをイメージしやすくなるので、特に複数人でサイト制作に関わっている場合はXDを使うのがとてもおすすめです。
XDにはワイヤーフレーム用のパーツキットがある
XDでワイヤーフレームを作成する際には、パーツキットを使うのがおすすめ。
パーツキットのダウンロードはこちらからできます。
アプリデザインなど、いろんな用途に合わせたキットがダウンロードできるので、見てるだけでも楽しくなりますよ！
まとめ
ここまでの内容をざっくりとまとめてみました。
ワイヤーフレームとは、webサイトの間取り図のようなもの。
ペルソナを設定する
ペルソナの行動パターンを検討する
行動パターンに合わせた欲しい時に欲しい情報が得られるような構成にする
ワイヤーフレームの時は画像やテキストは仮のものを入れる
XDではページ遷移やボタンの動きが視覚的に共有しやすい
サイト制作において、ワイヤーフレームはサイトの骨組みになるのでとっても大事です。
じっくり時間をかけて検討していきましょう。
