モノコトワイヤーフレームを作っていて、何が正解か分からなくなっていませんか？
Webサイトを制作する上で、重要なドキュメントのひとつが「ワイヤーフレーム（画面設計）」です。
ワイヤーフレームがWebサイトの設計図となるため、より深く考えて作らなければなりません。
ワイヤーフレームを制するものは、Webサイトを制する。
と言っても過言ではないくらいです。
なぜなら、ワイヤーフレームをもとに、Webサイトにおける目的達成のための動線設計から、コンテンツ内容、デザインのタタキが出来上がっていくからです。
こんな方におすすめ
- ワイヤーフレームの作成で、どこから手をつければよいか分からない方
- ワイヤーフレームを上手く作れない方
- ワイヤーフレームに説得力がない方
- Webディレクターの方
上記のような初心者向けに、ワイヤーフレームの作り方についてお答えします。
わたしはWeb業界で20数年、働いているモノコト（@monokoto68）です。
これまで様々なWebサイト制作に携わってきました。
そんな現役Webディレクターが実際に行っているWebサイト制作のワイヤーフレームの作成方法を教えます。
この記事でわかること
- Webサイト制作におけるワイヤーフレームの作成方法
- ワイヤーフレームの作成ポイント
- ワイヤーフレームの作成ツール
しっかり読んで、ワイヤーフレームを理解してくださいね。
ワイヤーフレームの作り方（手順）
ワイヤーフレームとは画面設計図とも呼ばれ、ページ単位でどのような要素が入るのかを記載した図になります。
ワイヤーフレーム作成手順
- 全体像の把握
- 競合・他社調査
- ペルソナ設定
- レイアウト検討
- 手書きラフ案作成
- レビュー
- データ化
- 最終レビュー
- 補足
上記の流れをひとつひとつご紹介します。
１．全体像の把握
Webサイトの全体像を理解しなければ、良いワイヤーフレームは作成できません。
構築することになったWebサイトの企画書や提案書、その会社の現状Webサイトなど、あらゆる資料に目を通し、全体像を把握しましょう。
- Webサイトの目的や抱えている課題、解決しなければならない問題、コンテンツ内容を把握できていますか？
- ワイヤーフレームを作る際に、なんとなくという感覚で作っていませんか？
ワイヤーフレームをいきなり作成する前に、クライアント理解に努めましょう。
クライアントを知れば知るほど、ワイヤーフレームのクオリティは上がります。
２．競合・他社調査
競合・他社の調査は欠かせません。
同業他社のWebサイトや異業種で同じ役割を持つWebサイトを調査します。
同業他社ならば、Webサイトのコンテンツや配置も参考にしてください。
- 自社になくて他社にあるコンテンツはどうのようなものがあるか
- ナビゲーションなどのUIに特長はあるのか
- 各ページのレイアウトで参考になるものはないか
ワイヤーフレームを作成するにあたって、多くのWebサイトを見て、研究しましょう。
３．ペルソナ設定
ペルソナとは、商品・サービスを実際に使ってくれるであろうユーザー像のことです。
Webサイトは、どんな人に訪れてほしいですか？
ペルソナをしっかり決めて、その人がサイトを訪れたときにどういう行動を取るのか、またはどのような行動を取って欲しいのかを考えます。
ペルソナの心理を考えながら、コンテンツの配置など考えます。
ペルソナを設定しておくことで、主観によるワイヤーフレーム作成から、第三者目線での作成になるため、なぜその構成にしたのか説得力が増し、クライアントへの理解も得やすいです。
４．レイアウト検討
要素が決まると、レイアウトを検討します。
Webサイトのレイアウトは、ある程度、「型」が決まっているのはご存知でしょうか。
- メインビジュアル：画面いっぱい／動画／スライド etc.
- 写真中央1枚・2枚・3枚 etc.
ペルソナの行動を想像しながら、クライアントに合ったレイアウトを考えていきます。
５．手書きラフ案作成
要素、レイアウトが決まったら、「ワイヤーフレーム」の作成に入ります。
初心者の方は、いきなりツールで作成する前に手書きでラフ案を作成することをおすすめします。
細かい文字は必要なく、あくまでも大枠のレイアウトを手書きで作成すると、頭の中で整理ができます。
６．レビュー
手書きラフ案をレビューしてください。
自分がユーザーになったつもりで、ワイヤーフレームを眺め、目的の場所に誘導できるか、違和感はないかなど確認するのがよいでしょう。
他の人にも見てもらいながら、一緒に意見を出し合うと、ワイヤーフレームの質が上がるのでおすすめです。
７．データ化
大枠の構成が決まったなら、いよいよデータ化を行います。
データ化を行うと、手書きの時のサイズ感と変わってきたり、実際には細かい文字なども入れていくため、調整が必要になってきます。
ディテールを詰めていく作業となります。
８．最終レビュー
完成後にレビューを詳細に行います。
社内関係者や先輩のスタッフに見てもらいましょう。
いろいろな立場の人から意見をいただけると思います。
出来上がったワイヤーフレームが、Webサイトの重要な設計図となるため、クライアントに提出する前に詰めておきたいところです。
９．補足
ワイヤーフレームは、トップページ以外にも、各カテゴリートップや詳細ページも必要です。
また、PC（パソコン）版だけでなく、SP（スマホ）版のワイヤーフレームも用意する必要があります。
ワイヤーフレーム作成ツール
ワイヤーフレームを作るツールは、パワーポイント、Google スライド、Adobe XD、Figmaなどが多いのではないでしょうか。
ワイヤーフレーム作成ツール
無料で簡単に始めたいなら、Adobe XDやFigmaがおすすめです。
他にも以下のようなツールがあるので、自分に合ったものを選ぶとよいでしょう。
まとめ：【初心者向け】失敗しないワイヤーフレームの作り方
失敗しないワイヤーフレームの作り方は、すぐにパソコンのツールに頼って作り始めずに、現状の状況を把握し、他社を調査し、参考サイトを探し、ペルソナに寄り添い、手書きによるラフ案を作成することです。
レビューを実施し、ブラッシュアップ後にデータ化をします。
失敗しないためにも、事前の調査が重要になります。
ワイヤーフレームは、全体の設計図となるため、重要なドキュメントで奥が深いですが、Webディレクターとしてはやりがいのある作業となりますね。
