web系に関わる情報を 専門家が毎日発信!

ワイヤーフレームの作り方をwebデザイン歴5年が解説【サンプル無料】

 

ワイヤーフレームというwebデザインで必須スキルの作り方を解説します。僕はwebデザイン歴5年で企業コンサルも受けているので結構知識あります。またワイヤーフレームの作り方のサンプルやツールも公開します。初心者でもwebデザイン(CVR)改善担当になったばかりの人にも参考になると思います。

 

 

今回の記事の信頼性というと、僕はwebデザインやUXデザイン歴が5年で今も現役のwebディレクターです。企業コンサルで毎月10万円以上稼げているので実績もありますので信頼性は高いと思っています。ちなみに実績の一部はこちらです。

 

 

 

ワイヤーフレームとは

 

ワイヤーフレームの作り方を解説する前に、知っておきたい概念を解説します。これを知らずにワイヤーフレームの作り方を覚えても、ある意味頭は動いてないのに手だけ動いていてただの作業になるのでスキルアップに繋がりません。webデザインやワイヤーフレーム作成で稼ぐのであれば必ず覚えておきたい知識です。それはIA(情報構造、英語だとInfomation Architecture)です。webデザイン全般の独学方法は、下記で解説しているので参考程度の読むといいかと思います。

 

参考:webデザイン初心者向け独学方法【UXデザイン歴5年の僕が解説】
参考:webデザイン初心者におすすめな本7冊【分野網羅、行動が大事】

 

IA

 

IAとは情報構造のことを刺すのですが、何かと言うとどんな情報をどのように表示するか、その構造的な関係性をさす概念ですね。なぜIAが大事なのかというと、結局webデザインは2次元での情報表現になるので、それを分解すると、①どんな情報を②どう表示するか(構造定義するか)、ということになります。

 

そのためwebデザインやワイヤーフレームに置いて非常に重要な概念何ですが、IAもビッグIAとスモールIAの2つに分かれます。それぞれ解説します。

 

ビッグIA

 

IAの中でも1つありまして、1つ目はビッグIAです。ビッグIAとは、文字通り大きい情報構造です。何かと言うと例えば、とあるページをどのようなワイヤーフレームとするか、これはビッグIAです。ページの中に、どの位置にどのようなコンテンツを配置するかを考えるのがビッグIAですね。みんなが知っている食べログTOPページでいうと、こんな感じです。(参考:https://tabelog.com/)

 

 

サンプル:sample

 

このように大枠でどんなコンテンツがどの位置にあるべきかを定義するのがビッグIAです。

 

スモールIA

 

次はスモールIAです。ビッグの次のスモールなので、小さいIAになります。何かと言うと、先ほどの食べログのビッグIAを例に例えると、新着口コミのコンテンツの中にどんな情報がどのように配置されるかを定義するのがスモールIAですね。例えば、新着口コミのコンテンツを例にとるとこんな感じになります。

 

 

参考:sample_small

 

ワイヤーフレームの作り方

 

ざっくりとワイヤーフレームを作る上での重要な概念であるIA(情報構造)を知れたら、次は実際にワイヤーフレームの作り方を覚えましょう。ここでは、Stepとして7つのStepで解説します。重要なのは、なぜそのようなワイヤーフレームなのかを語れるようになることです。事実上、ワイヤーフレームを作るだけなら作業なので誰でも出来ます。スキルとして身に付けたいならばしっかりとこのStepが出来るようになりましょう。これは大手企業でも一連のStepになっているので、多くの企業で通用すると思います。

 

作る前にペルソナとビジネス目的を設定

 

まず最初のstepは、ペルソナとビジネス目的を考えることです。ビジネス目的とは、例えば服のECサイトを作って売り上げたい、とかそういう目的ですね。実際にはもっと詳細なコンセプトが必要ですが、意味としては先ほどの意味になります。そして、ペルソナとはあなたが作成したいwebサイトに訪れるユーザはどのようなユーザなのかという設定です。例えば、アパレルECサイトでも、太りすぎて店頭で購入するのが恥ずかしい、またはサイズがないユーザの課題を解決できるアパレルECサイトの場合は、ペルソナは太っている、サイズが気になる、人になりますよね。(すごい簡単に書いていますが、実際はもっと詳細化します)

 

競合サイトを分析

 

そしたら、類似しているwebサイトがあるかどうかリサーチします。これは市場分析にも近いですが、類似サービスを調べる意味は、参考になるとかベンチマーキングになるとかもありますし、競合対策の検討でも必要となるので絶対に必須です。

 

競合サイトの分析では、ワイヤーフレームを作るという観点では、①ビッグIAと②スモールIAの観点でどんな情報がどのように並んでいるかを整理します。これはエクセルでもいいですし、先ほどのようにPPTでもいいかと思います。なので、ほぼ先ほどと同じようなアウトプットができれば大丈夫です。

 

サイト設計

 

次にサイト設計です。これは場合次第で必要ないのですが、LPのような一枚のwebサイトであれば必要ないです。しかし、多くのwebサイトは複数のページからなるものが多いので、サイト設計も必要になります。サイト設計という言葉は、かなり曖昧な言葉なので定義をしておくと、ここでいうサイト設計とはどんな画面がどんな順番で必要かを構造化する作業と定義したいと思いますね。

 

例えば食べログを例にとると、ざっくりとこんな感じのサイト設計がされていますよね。最初はこれくらいの構造化された状態が可視化されているくらいで大丈夫です。

 

 

参考:sample_saitemap

 

ビッグIA(情報構造)の設計

 

ここまできたらあとは、どのページのビッグ IAを作るかがワイヤーフレームの作り方の大一番に入ってきます。ワイヤーフレームを作る時のビッグIAでのコツとしては、大枠でどのようなコンテンツがどのような優先順で重要かを考えることですね。

 

例えば、食べログでは、大目的は今は結果的にですが飲食店のネット予約がビジネス上の第一優先です。そして、ペルソナを考えると多くの飲食店探しをネットで行う場合は、行きたいエリアが決まっていて日付を考え中、あるいは行きたい飲食店が決まっているけど口コミを確認したい、というのが食べログに置ける大半のユースケースです。

 

なので食べログでは、TOPページの一番目に入る箇所に飲食店の検索ボックスを配置しています。気づくと思いますが、食べログのPCサイトでは、検索ボックスがスクロールされても追従されます。これはユーザがスクロールしてもいつでも検索できるようにしているためですね。おそらくABテストで改善されたものと推測しています。というか多くのwebサイトは実はそうなっていて鉄板の機能です。あとは、口コミサイトなので口コミの新着をその下に持ってきているとかそういう感じですよね。

 

スモールIA(情報構造)の設計

 

最後のワイヤーフレームの作り方のStepは、先ほどのビッグIAを元にしたスモールIAの作成です。先ほど事例を紹介しましたが、よりブレイクダウンしてどんな情報をどのような優先順位で表示するのか、を考えるのがこのStepになりますね。

 

基本的には、必要な情報を、ユーザーの視点をベースに、競合のサイト設計と比較して作っていきます。一番大事なのは、ユーザ視点でどんな情報がどんな順番で必要かを考えることですね。例えば、グルメサイトの食べログでは、普通は飲食店探しでは日付よりもエリアが先に決まっているはずなので、検索ボックスではエリアを最初に入力するような設計になっていますよね。そういう風に人間の思考のプロセスとか順序を意識するといいですね。

 

ワイヤーフレームを作るときのコツ

 

ではワイヤーフレームを作るときのコツを僕の経験で解説します。そもそも良いワイヤーフレームとは見た目が綺麗というよりは、ユーザーがどのように使うかを意識されている情報設計のされているワイヤーフレームが良いワイヤーフレームです。

利用シーンを考える

 

良いワイヤーフレームを作るコツの1つ目は、利用シーンで考えることです。この考えは非常に重要でして、webデザインやワイヤーフレームを考えるよりも上位概念としてUXデザインがあります。例えば、ほぼほぼスマホで利用するだろうwebサイトの場合は、スマホサイトやアプリのみ作ればいいです。これ結構大事です。

 

例えば、口コミアプリで最近有名なlipsでは、ユーザの多くは自宅で口コミ収集するか、コスメ売り場で欲しい化粧品を試しながらlipsの口コミをスマホで見ることが多いです。なので、アプリなんですよね。こういう考えができてくると、ユーザが使いやすいアプリやwebサイト、ワイヤーフレームが作ることが可能です。

 

ユーザは何をしたくて何から知りたいか・考えるかを考える

 

またワイヤーフレームは綺麗なワイヤーフレームを作ることが目的ではなくて、ユーザが何をしたいのか、何をさせたいのかを達成するための手段です。なのでユーザが何をしたいのかを考えることは非常に大事です。例えば、飲食店探しのサービスでは、デートで探すのが、日常使いなのか、合コンなのかでどんな店舗を紹介すべきかも変わりますし、店舗の情報も合コンに向いているとかそういうのがわかる画面がいいですよね。なので、ユーザが何をしたいかで同じ飲食店探しのサービスでも必要な情報が変わるということですね。

 

ワイヤーフレームを作ったらコーディング

 

webデザインのためにワイヤーフレームを作る場合は、ビジュアルデザインまでがアウトプットになるか、あるいはあなたがフロントエンドエンジニアであればHTMLやCSSを実装したwebサイトの開発が必要になりますね。基本的には、初心者がいきなりwebサイトをHTMLとCSSで開発するのは厳しいです。

 

しかし、ワイヤーフレームがあればざっくりでもどのようにHTMLで枠組みを作り、CSSで色使いをするかの方針が決まるので初心者でもwebサイトの開発がしやすくなります。webサイトの開発という文脈では、そのためにワイヤーフレームがありますね。なので、webデザインを作りたい、学びたいという場合もワイヤーフレームを作成するところから始めるのもいいかと思います。ちなみに、ワイヤーフレームだけで稼ぐのは正直厳しいと思いますが、webデザインで稼ぐための第一歩としては十分なので学び始める分野としてはいいかと思います。

 

参考:webデザインで稼ぐ方法【初心者からのロードマップを体験談付きで解説】
参考:webデザインの将来性は結論伸びる話とその理由【データあり】

 

まとめ

 

ということでワイヤーフレームの作り方を解説しました。ワイヤーフレームの作り方はそこまで大げさに言って難しいということはありません。ツールも有料である必要もないですし、パワポやエクセルでも十分です。まずはワイヤーフレームを作ってHTMLやCSSでwebサイトを作るところから始めるのがいいですね。

 

人気:webデザインスクールのおすすめと選び方【デザイン歴5年の僕が解説】

最新情報をチェックしよう!