【初心者向け】ワイヤーフレームとは？ 作り方やツールを徹底解説 市川莉緒 2021.07.30 2024/1/24 UI/UX UIUXWEBデザインサイト改善 ワイヤーフレーム (WF) とは ワイヤーフレームの作り方 ワイヤーフレーム作成時のポイントと注意事項 ワイヤーフレーム (WF) とは ワイヤーフレームとは、Webサイトの目的に応じて「何を・どこに・どのように」配置するかを表現した設計図です。「ワイヤー（導線）」と「フレーム（枠組み）」の言葉のとおり、シンプルに要素や情報だけを配置し視覚化したWebサイトの骨組みを指します。よく「ワイヤー」や「WF」と短縮して使われることがあるため、表現も覚えておきましょう。 ワイヤーフレーム、モックアップ、プロトタイプの違いは？ Web制作現場ではよくワイヤーフレームと一緒に「モックアップ」「プロトタイプ」という言葉が使われます。3つの違いはなんでしょうか？ ワイヤーフレームは構成、モックアップは色などのデザインを加えたもの、プロトタイプはボタンがクリックできるなどの動きを加えたものを指し、それぞれ検証する対象が異なります。 ワイヤーフレームは誰がなんのタイミングで作る？ ワイヤーフレームは一般的にディレクターが要件定義後に作成します。要件定義では「どんなターゲット」に「何を伝える」のか、「どのような結果を得たいか」を決めます。これをもとに入れるべき要素や順序、優先順位などをワイヤーフレームで設計します。 また、ワイヤーフレーム完成後は一般的にモックアップとプロトタイプを作成します。 以下の図はWebサイト作成やリニューアルの主要な工程を表しています。 ワイヤーフレームがある程度できた段階で、構成の評価を行うためにペーパープロトタイプと呼ばれる数枚の紙で作成したWebサイトの模型を作成することもあります。紙を手動で入れ替えてクリック遷移を表現するなど、Webサイト上で起こりうる動作を人力で表現し、評価の際に使用します。 UXデザインでは評価と改善のサイクルを何度か繰り返し、ユーザー目線のサービスを作ることが基本です。ユーザーのインタラクション（クリックや入力など）が多い場合は特に、頻繁にプロトタイプを用いて評価を行い、少しずつ修正を重ねてデザインや設計を固めます。 プロトタイプの作り方などはこちらの記事で解説しています。 ワイヤーフレームの作り方 ワイヤーフレームは一般的に抽象的なスケッチから始め、徐々に要素を具体化します。今回はミエルカヒートマップのサイトリニューアルで実際に行ったワイヤーフレームの作成手順を紹介します。 1. 事前準備（情報設計） 2. スケッチ 3. 清書 4. 要素詰め 順番に例を用いて解説します。 事前準備（情報設計） 事前準備段階では、ユーザーが求める情報や機能を整理し「何を」・「どこに」・「どのように」配置するかを考察します。 ミエルカヒートマップのサイトリニューアル時の事前準備を一部紹介します。事前のリサーチ／分析の段階でユーザー行動を可視化できるヒートマップを用いて、ユーザーが求める情報や機能を分析しました。 ヒートマップのデータから、料金プラン表で立ち止まっているユーザーが多くいることが判明しました。ここから、「ユーザーは料金と機能に興味を持ち、詳しく知りたがっているのでは？」と仮説を立て、これまでは要点だけを記載していた料金プラン表を概要と詳細に分けて設計しました。 このように、ユーザーがどういう内容に興味を持っているか、事前にしっかりと分析や調査をおこない、情報設計に活用しましょう。 その他にも目立つ位置にメニューを配置するなど、必要な要素の配置場所を考えましょう。ただし、配置できるスペースにも限りがあるので優先順位をつけ、取捨選択する必要があります。 また、情報設計時にはなぜその要素をそのように配置したのかなど、根拠をもとに説明できるようにしましょう。理由は詳しく後述しますが、構成を評価する際にこの根拠が重要になります。特にサイトリニューアルの際はヒートマップを使うと簡単にユーザー行動が分かり、根拠づけに役立ちます。 無料のヒートマップを使う 他のWebサイトを参考にする どんなデザインにしたいか事前に大まかなイメージをつけると、構成のヒントを得られ、スムーズにワイヤーフレームを作成できます。 Webサイト内でユーザーにどんな行動を取ってもらいたいか（ユーザーフロー）やWebサイトの階層（サイトマップ）を作成し、ある程度方向性が明確になったら理想のWebサイトを探しましょう。 理想のWebサイトのイメージが固まると、チームメンバーやクライアントとの認識を合わせやすく、後々の作業もスムーズに進みます。同じ業界業種のWebサイトを見ることもありますが、Web制作者向けの「まとめサイト」をチェックすると便利です。 オススメのまとめサイト ・Dribbble 海外のWebサイトやアプリが多く、最新トレンドを掴むのに便利 ・muuuuu.org 業界別、業種別、サービス内容や色別などで検索でき、国内のサイトも見られる スケッチ 設計した要素の配置や順番を簡単にスケッチして視覚化します。文字や画像は入れず、要素をグルーピングしたもので構いません。完成形からは遠いので低忠実度ワイヤーフレーム (Low-fidelity wireframe) と名付けられています。 目的は構成のイメージをつかむことなので、あまり凝らずにラフに描きましょう。先ほど立てた仮説と情報設計をもとに作成した料金表のスケッチの例を紹介します。 スケッチで大まかな流れや骨組みに問題がないか関係者にフィードバックを求めることもあります。大体の要素や構成が分かる程度に簡単に描きましょう。 清書 後からテキストや要素を入れやすいようにスケッチをもとに清書します。ここでは具体的なテキストや文章は入れず、スケッチを清書する感覚で要素を図形化して配置しましょう。 清書は手書きでもツールを用いても構いませんが、ツールの方が共有しやすく、編集も簡単でオススメです。ツールはAdobe XDやFigmaなど、無料から使えるものもあります。これらはチームメンバー間の共有も可能で、モックアップやプロトタイプの作成も続けて行えるため効率的です。簡単なWebサイトであれば、パワーポイントやエクセルで作ることもあり、どんなツールを使っても構いません。 清書の例とツールを使うその他のメリットも併せて紹介します。 ※例ではAdobe XDを使用 あまり時間をかけすぎず素早く作ることが大切なため、目的に応じて使いやすいツールを見つけましょう。 業務の効率化についてはこちらも参考にしてみてくださいね アプリやWeb制作に便利な無料のワイヤーフレームツール（ミロジャパン）。 要素詰め いよいよ清書したものにテキストや画像などの具体的な要素を加えます。完成形に最も近いため高忠実度ワイヤーフレーム (High-fidelity wireframes) と名付けられています。 色付けは不要ですが、テキストは実際に記載予定のものを使いましょう。実際のものを利用することで前後の繋がりを確認でき、構成の検証と評価を行いやすくなります。また、画像もなるべく挿入予定のものを入れることで関係者との認識を合わせやすくなります。 ここでも重要なのが、各要素や配置の理由を言語化しておくことです。構成の説明ができることで関係者の理解が深まるためフィードバックを得やすく、より良いワイヤーフレームへ磨き上げられます。 理由を次の章で詳しく説明します。 ワイヤーフレーム作成時のポイントと注意事項 ワイヤーフレーム作成時に、押さえておくべきポイントと注意事項を紹介します。 ・各要素に明確な理由と根拠をつける ・事前にリサーチや分析をしっかり行う ・デザイン作成ではなく情報設計を目的にする ・ワイヤーフレームはシンプルに作成する ・完成時のワイヤーフレームにはできるだけ実際のテキストを入れる 各要素に明確な理由と根拠をつける 「なぜユーザーにとってこの情報が必要か？」「ユーザー目線だと優先順位はこうなる」といったように、要素そのものと配置の理由を言語化しましょう。 主に2つの理由があります。 ・根拠をもとにした建設的な議論を行うため ・作成後に仮説の検証を行い改善につなげるため 根拠をもとにした建設的な議論を行うため クライアントやチームメンバーとの議論の際、主観的な意見が飛び交うことがよくあります。複数の意見が出た場合、根拠や理由がないとどの意見を優先すべきか検討しづらくなり、ユーザー目線ではないWebサイトになりかねません。 たとえば「ユーザーへのヒアリングを踏まえて、Aを目立つ箇所に配置した」というように、その場所に配置した意図や理由を説明できると説得力が増し、建設的な議論ができます。 作成後に仮説の検証を行い改善につなげるため Webサイト完成後は効果測定を行い、ワイヤーフレーム作成時の「仮説」が正しかったか検証します。Webサイト完成後は検証と改善を継続することが重要です。 作成時の仮説があれば、仮に誤っていてもどこを改善すべきか検討しやすくなります。 「なんとなくこっちがいいと思ったから」ではなく、常に理由や根拠を言語化することで関係者への説明に説得力が増し、認識のズレを解消できます。もし説明できない場合は要素詰めが甘いかもしれません。 また、説明は口頭で行うこともあれば、説明用の資料を別途作成することもあります。 ワイヤーフレーム作成時にはなぜその設計にするのか説明できるようにしましょう。 事前にリサーチや分析をしっかり行う なぜそのWebサイトを作るのか、リニューアルを行うのか、目的を明確にしましょう。目的が明確であれば他の関係者と意見が分かれても、何を優先すべきか決めやすくなります。 制作やリニューアルの目的は多岐にわたります。たとえば「ユーザビリティを改善して離脱率を改善する」や「ユーザーが求める情報をわかりやすく発信する」など様々です。 目的を明確にするには事前にユーザー行動のリサーチや分析を行い、現状の課題をはっきりさせることが必須です。 ユーザー行動がひと目でわかる無料のヒートマップを使えば、今のWebサイトのどこをユーザーが読んでいないか、どこで興味を失って離脱しているのかなど、ページ内の原因箇所を細かく突き止められます。 ヒートマップを使って分かるユーザー行動の例をひとつお見せします。 目的を達成するためのリサーチや分析は、「航海へ向かうための地図作り」です。効率的にゴールへ向かうための方策を、しっかりリサーチ／分析しましょう。 無料のヒートマップを使う デザイン作成ではなく情報設計を目的にする ワイヤーフレームは何をどこに配置するかなど、情報を設計することが目的です。 配置やレイアウトを考えているうちに、たとえばボタンは赤がいいか青がいいかなど、いつのまにか「デザイン」に着手してしまうことがよくあります。最初からデザインを作りこんでも根本の設計に変更があった場合、余計な時間がかかってしまいます。 ワイヤーフレームの作成段階では色使いなどのデザインは考えず、構成と情報設計を考えましょう。デザインは構成完成後、デザイナーが担当します。 ワイヤーフレームはシンプルに作成する ワイヤーフレームは簡単に変更できるようにシンプルに作成しましょう。一度で完成することはほとんどなく、関係者と議論を重ねたり、外部の人にフィードバックをもらい、多くの変更が加えられます。 議論を重ねることで構成の完成度が高まり、以後の改修コストを減らせます。あとから変更を加えられるようにまずはシンプルなワイヤーフレームを作成しましょう。 完成時のワイヤーフレームにはできるだけ実際のテキストを入れる 「ここにテキストが入ります」などの仮テキストを入れると、完成イメージとずれてしまいます。後半の行程で修正を加えると、時間や労力を費やし、大きな改修コストが発生するため、できるだけ実際の文章や画像を挿入し、完成イメージとのズレを抑えましょう。 ワイヤーフレームはWebサイトの骨組み Webサイトの作成、リニューアル時にはワイヤーフレームを作成して構成を固めましょう。 文中で紹介したヒートマップは、期間に制限なく無料で利用できるため、これからリニューアルを考えている方は是非使ってみてください。 無料のヒートマップを使う 今回紹介したポイントがワイヤーフレーム作成の参考になれば幸いです。 編集者情報 市川莉緒 大阪大学卒。新卒でFaber Companyに入社後、 300近くの会社のヒートマップ分析に従事。 現在はミエルカヒートマップのマーケティングを担当。 大学時代1年休学し1人で世界を放浪。 グレートバリアリーフでのダイビングが最高の思い出。 監修者情報 玉飼 真一 この記事をシェアする
