目次
ワイヤーフレームを作る事によって…
●情報が整理でき、方向性・構成意図について話し合うツールになる
●サイトの目的やユーザビリティについて確認することができ、制作にあたっての食い違いをなくすことができる
このように、制作の上の骨組みを考えていくものになります。
ワイヤーフレームをつくる手順
Step1 サイトマップを作る
❶必要になるコンテンツを一旦すべて出してみる
…参考になる似た業種のサイトを参考にしてみるとわかりやすいです。後はそれを取捨選択。
❷出したコンテンツをグルーピング
…似た要素のコンテンツをカテゴリー別に分けます。あとはディレクトリ階層を決めていきます。
❸サイトマップをつくる
…あとは見やすいようにまとめていきます。Excelが便利です。
Step2 必要な情報に合わせてカラムを決める
●シングルカラム
…見た目もすっきり、かつ、インパクトをだすことができます。LPもこのレイアウト。モバイルファーストにもとても相性がいいです。ただサイドバーがないため、コンテンツが多いサイトには向かないかもしれません。
●マルチカラム
…2カラム、3カラムとそれぞれヘッダー・サイドバー×２or3・フッターのレイアウト。オーソドックスなレイアウトで、見たい情報に辿りつきやすいため、コンテンツが多いコーポレート系はこのレイアウトが多いです。
●タイル・カード型カラム
…タイルを敷き詰めたようなレイアウト。ECやBlogサイト等にもよく使われています。多くの情報を一気に見れるレイアウト。ただ１つ１つのカードの大きさが同じ場合、埋もれてしまって何を推したいのかが伝わりにくい場合もあります。レスポンシブとも相性がいいです。
●フルスクリーン
…ファーストビュー一面にイメージ画像があるレイアウト。インパクトが強く、ムービーを使用するサイトも増えています。ブランディングイメージを押し出すことができるレイアウト。その分、使用するビジュアルによってはイメージが伝わらなかったりする場合も。
この段階で、使用する画像等決めなくていいので、制作サイトと相性がいいレイアウトを選びます。
Step3 ワイヤーフレームをつくります！
情報を整理、順位付けしたのち、どこに何を配置するかを決めます。
この際、どの程度決まっているかにもよりますが、極力シンプルなワイヤーフレームを意識します。デザイン要素(フォント、色など)は含まないものにします！
入る予定のテキストがある場合はいれてもいいですがデザイン要素は含まないようにします。画像も基本は不要です。クライアントが見た時に、こういったデザインのものが出来上がると勘違いを防ぐ意味もあります。
ワイヤーフレーム作成に使うツールは？
使用ツールはAdobe XD、PowerPoint等がおすすめ。Photoshopはビットマップデータのため出来ればベクターデータのソフトがおすすめです。
また、PowerPointはクライアントからもこうしてほしいなど記入することができるのが利点です。
おすすめワイヤーフレーム集
Wireframe Showcase：ワイヤーフレームの画像にカーソルをのせるとサイトの完成図を見ることができます。
I ♥ wireframes：様々なデバイス向けワイヤーフレームがあります。手書きのものも多いです。
とても便利！ワイヤーフレームテンプレート
Wires jp：Adobe XD用の日本語ワイヤーフレームUIキット。UIパーツからレイアウトパターン、モバイル用まで様々なテンプレートが入っています。見てるだけでも勉強になりました。
まとめ
今回はワイヤーフレームについてまとめてみました。いかがだったでしょうか。ワイヤーフレームは今後の制作方針を決めていく際、必須のものになります。作成時の注意点は、とにかく『凝りすぎないこと』。デザイン要素は要らないです。
実際に最初に作った際、フォントの大きさや字体を数種類使ったり、見出しに線など引いてしまった為「全てが中途半端でなにも伝わらない」との声が((；´･ω･)) つまりはそういうことなんですね…。ワイヤーフレームに求める方向性を間違わないようにしていきたいです！