ワイヤーフレームの書き方に悩むWebディレクター「ワイヤーフレームってどうやって書いたらいいんだろう？何となく好きなサイトを参考にしながら作っているけど、いい書き方ってあるのかな？」
ディレクターになったばかりの人や、サイトを作りたい人がワイヤーフレームを書く時って、このような疑問をお持ちじゃないですか？
今回は、このような疑問にお答えしていきます。
この記事を読むと、以下のことが分かるようになります。
- ワイヤーフレームの書き方シンプルなステップがわかる
- ワイヤーフレームの書き方がうまくなる方法がわかる
- ワイヤーフレームの書き方が学べる本が知れる
僕も、ディレクター業務の一環として、ワイヤーフレームはよく書いていました。
どちらかというと、人に見せるワイヤーフレームよりもトレーニングとして1人で書いていたワイヤーフレームの方を多く書きましたね。
よく、いろんなWebサイトを見て、模写のようなこともしていましたね。
今回は、経験則から導き出したノウハウをご紹介していきます。
それでは早速みていきましょう！
もくじ
ワイヤーフレームの書き方のステップ
何となくワイヤーフレームって、見よう見まねで作れそうな気がしませんか？
しますよね？
…甘い！
（笑）確かに、始めはまねごとから入って全然良いと思いますが、一応ワイヤーフレームの書き方の手順というのがあります。
ここでは、少し触れておきましょう。
ワイヤーフレームの書き方①：情報をピックアップする
まずは、Webサイトに掲載したい情報をピックアップアップしましょう。
例えば、以下のような感じですね。
トップページ
- ※各ページの各コンテンツへの導線
会社概要ページ
- 設立
- 資本金
- アクセス
- 社長名
- ビジョン/ミッション/バリュー
- 関連企業
サービス紹介ページ
- 他社との差別化・比較コンテンツ
- サービスの特徴
- お客様の声
- 導入事例
採用ページ
- 募集要項
- 先輩社員の声
- 会社の風景
- 社長からのメッセージ
お問い合わせフォーム
このような感じで、思いつく限りのコンテンツというか、入れたい情報をまずはざっくりとピックアップしましょう。
具体的なイメージがあれば、それを細かくピックアップしておくと良いです。
ワイヤーフレームの書き方②：情報を整理する
次に、情報を整理するところですね。
すでに、先ほどは各ページごとにどのようなコンテンツを入れるかまでを含めた情報を出しました。
このように、
- どこのページにどのコンテンツが入るか、
- 足りないコンテンツはないか、
- 他のサイトにあって今ピックアップできていない物
などを整理して必要な情報を盛り込んで行きましょう。
あるいは、似たようなコンテンツになった場合、統合しても良いかもしれませんね。
重要なのは、
「その情報を掲載してお客様に見てもらった時に、どのような行動をして欲しいのか」
が描けていることです。
いわゆる「コンバージョン」という物ですね。
- 資料請求して欲しい
- 採用の問い合わせをして欲しい
など、見てくれたユーザーにして欲しい理由はいくつか上げられるかと思います。
これらを明確にしておくことで、ただ迷いながらワイヤーフレームを構築することよりも、ゴールに向けてどのような道筋でコンテンツを用意すれば良いか、設計することがカンタンになりますね。
ワイヤーフレームの書き方③：レイアウトを決める
次に、レイアウトを決めていきます。
この辺りは、経験値を詰むまで、様々なサイトの構成やレイアウトを見続けて、学び続けることが大切になって来ます。
例えば、以下のような経験値がパッと浮かぶかどうかですね。
- 「求人サイトだと求人一覧はこういうレイアウトが多いな」
- 「動画サイトの動画のサムネイル付近のエリアはこういう見え方が多いな」
- 「ユーザーに何かを細かく検索させるときはこういうパターンがあるな」
このように、Webサイトのテーマやユーザーにして欲しい行動に応じて、レイアウトのパターンもいくつか想定できるようにしておくと良いですね。
その上で、どのようなレイアウトが全体で望ましいのか、検討していくと良いですね。
ワイヤーフレームの書き方がうまくなるシンプルな方法
ワイヤーフレームでの設計に置いて、良い設計をしていくためには様々なサイトを研究していくのが一番の近道です。
ただ、Webサイトを見ているだけではダメで、下記の観点が重要です。
WEBサイトをみるときの重要な観点
- このサイトで一番ユーザーにして欲しい行動ってなんだろう？
- このサイトの情報にはどんなものがあるんだろう？
- それぞれの情報の優先順位ってなんだろう？
- なぜこの配置（レイアウト）になっているんだろう？
このような観点でWebサイトを見てみて、自分なりの仮説を持ってみてみると良いですね。
その為の作業として、以下の事をしていくと、ワイヤーフレームも書きやすくなっていきますね。
ワイヤーフレームの上達にはたくさんのサイトを模写する
まずは、たくさんのサイトを模写するように、ワイヤーフレームを書いてみましょう。
単純に最初の頃は、書き写しでも楽しいですよ！
また、以下のようなジャンル分けをして、10サイトくらい模写してみるのも良いかもしれませんね。
- コーポレートサイト
- 採用サイト
- グルメサイト
- ECサイト
- 動画サイト
- アパレルのECサイト
- 比較サイト
- 採用メディア
- ニュースサイト
- クラウドファウンディングサイト
などなど。
このように、様々なジャンルのWebサイトを模写していくと、それぞれの傾向も見えてくると思います。
特に、売れているWebサイトや有名なWebサイトは、似てくるところも出てくるでしょう。
先ほど紹介した、WEBサイトをみるときの重要な観点に対して仮説もしっかりと持ちながら、Webサイトをみつつ、模写してみると、気づきや発見が多くなりますね。
ワイヤーフレームの上達には良いパターンを見つける
また、同じジャンルのWebサイトを見ていると、レイアウトパターンも発見できるようになってきます。
例えば、以下のような感じ。
- 「求人メディアでは一覧画面で必ず”詳細検索”の機能が出てくるな」
- 「クラウドファウンディングの案件の下には、いくら溜まっているかゲージがあるな」
- 「動画メディアには、必ず全体の再生時間が掲載されているな」
とかですね。
普段、何気なく使っているサービスなどでも、「こういうものだ」と自然と認識しているモノってかなりたくさんあります。
これらをしっかり意識的にキャッチアップすることも大切です。
その上で、良いレイアウトのパターンや表示のパターンを探していく作業を、ワイヤーフレームの模写の時にやっておくと良いですね。
これをしっかりしておくだけで、クライアントワークの際、かなり役立ちますよ。
ワイヤーフレームの作り方については、7つのステップで出来るワイヤーフレームの作り方でも詳しく書かせていただいているので、ぜひ参考にして見てください。
ワイヤーフレームを書くツール
ここでは、どのようなツールを用いてワイヤーフレームを書くかをご紹介していきますね。
ま、いわゆるよくあるツールでもあるので、サラッとご紹介。
紙
一番良いツールですね。
溜まっていくと自分自身のクリエイティブ感も増します（自己満足！）。
Webサイトを模写するには、紙のノートとかを使ってサササッと書くのが一番時間がかからなくて便利ですね。
また、誰かと打ち合わせとかしながら、紙にワイヤーフレームのドラフト案とかを書きながら説明すると、ちょっとカッコ良いですよね。
いろんなシチュエーションで紙は活用できますから、非常に有効活用できる一番良いツールですね。
AdobeXD
AdobeXDは、Adobe製品のプロトタイピングツールです。
僕の場合は、非常にこれに助けられましたね。
というのも、スマホのワイヤーフレームをこれで制作して、実際のスマホのアプリで動きをつけて見せられることが出来るからですね。
動きも非常にスムーズですし、細かい動きの設定もできます。
例えば、僕の場合は、クライアント先でずっと常駐していたのですが、クライアント先の意思決定者に対して、立ち話しながらスマホで説明するというシーンでとても活躍しました！
使い方もパワーポイントのような感じで使えますから、そんなに覚えるのも大変じゃないですね。
Studio
Studioは、最近出てきたWeb版のプロトタイピングツールです。
こちらも使いやすいです。
Web版ですので、少し環境によっては読み込みが遅かったりするのがデメリットではあります。
ですが、例えばスタートアップのプロジェクトでプロトタイピング、ワイヤーフレームを作るのであれば、こちらも有効に使えるツールではありますね。
Excel
最後に、地味にExcelも最強です。
作ったワイヤーフレームを、誰にでも共有できるのはやっぱりExcelですよね。
もともとExcelって、そのために作られたツールではないのですが、MicrosoftOffice製品はどんな方でも使っているでしょうから、クライアントワークにはとても有効じゃないでしょうか。
PowerPointも良いんですけど、エリアが決まっているので、少し個人的には使いにくいなぁ〜と思ってます。
ワイヤーフレームの書き方が学べる本5選
情報アーキテクチャ 第4版
情報アーキテクチャ 第4版 ―見つけやすく理解しやすい情報設計
こちらは鉄板中の鉄板の書籍です。
経験の少ないディレクターさんやデザイナーさんは必読の書籍だと思います。
業界の中では、「シロクマ本」と言われていますね。
専門的な内容ではありますが、Webサイトを図書館に例えるところから、情報の見せ方・考え方の基本が学べる書籍です。
分厚くて多少言葉も難しい点がありますが、1年後に読み返すとより理解が深まる本ですので、成長実感も湧くと思いますよ。
情報アーキテクチャ 第4版 ―見つけやすく理解しやすい情報設計
IAシンキング
こちらも、基本が学べる良書です。
少し内容は古くなってきていますが、クックパッドなどのレシピサイトにはどのような情報が必要かなど、事例が詳しく、各章の最後には演習課題もついていて、実践的に学べる本ですよ。
IA/UXプラクティス
IA/UXプラクティス モバイル情報アーキテクチャとUXデザイン
こちらは、IAシンキングの続編ですね。
モバイルに特化している内容で、モバイルのレイアウトパターンなども詳しく解説されている書籍です。
スマホファーストでの案件が多い人とかは、IAシンキングよりもこちらだけでも良いかもしれませんね。
一人から始めるユーザーエクスペリエンス
この本は、UXデザインについて書かれている本です。
ワイヤーフレームについては記載は少ないですが、サービス全体を設計する際に、ペルソナや調査の仕方、チェックポイントなど詳しくまとめられています。
また、UXデザイナーとしてどのように組織内で立ち回れば良いかについても書かれていて、実際にチームを動かす人にとっては学びの多い書籍だと思います。
専門性は他の本と比較すると下がりますが、読みやすくてポイントだけでも参考になりますね。
UXについては、UXデザインが出来るようになる簡単なトレーニング方法【参考あり】という記事でもご紹介していますので、気になる方は読んでみてください。
IA100
IA100 —ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計
日本の情報設計の権威でもある長谷川敦士のご著書ですね。
ワイヤーフレームの書き方を学ぶ以前に、どのようなプロセスを踏んで情報をWebサイトに落とし込んで行けば良いか、個人的には一番学びの多かった本です。
意外と読まれている人が少ないのが残念ですが。
こちらも、必要な箇所だけでも参考になります。
まとめ
いかがでしたでしょうか。
ここまでをまとめると以下のようになります。
- ワイヤーフレームの書き方にはステップがある
- ワイヤーフレームを書くトレーニングをつむ
- ワイヤーフレームのトレーニングを通じてパターンを見つける
一朝一夕では上達はしないかもしれませんが、1年くらい続けていると、かなりの専門性が身につきますよ。
ぜひ、日々コツコツとやってみてください。
きっと1年後にはWeb業界から重宝される人材になれますよ！（かも）。
おすすめ本５選
- 情報アーキテクチャ 第4版 ―見つけやすく理解しやすい情報設計
- IAシンキング Web制作者・担当者のためのIA思考術
- IA/UXプラクティス モバイル情報アーキテクチャとUXデザイン
- 一人から始めるユーザーエクスペリエンス
- IA100 —ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計
関連記事
それでは、今回はこの辺で。
TechAcademy 
TECH::EXPERT 
TechBoost 
