紙ワイヤーフレームとは? 紙ワイヤーフレーム作り方を解説
紙ワイヤーフレームとは言わば紙状で、Webサイトやスマホのアプリの設計図を書く事なのですが、それ以上でもそれ以下でもないかと考えます。 ワイヤーフレーム作成ツールがあれば、設計図から一歩以上踏み込んだものが作成できるのです。
Part 1: ペーパーワイヤーフレームとは
ペーパーワイヤーフレームとは
ペーパーワイヤーフレームとは紙で出来たワイヤーフレームの事です。 と言ってもそのワイヤーフレーム自体が何か分からない人が多いと思うので説明すると、ワイヤーフレームはWebサイトやスマホのアプリの試作段階や設計図を作る事です。 最初に大きな骨組みを作って、『ここにメニュー一覧があるのは分かりづらい』『画像の大きさはちょうどこれで良い』など確認が取れます。 通常はワイヤーフレームもソフトを使って作成するのですが、紙ワイヤーフレームではまさに紙上に定規と鉛筆を使って作成するのです。 またUI Stencilsのような定規やステンシルがあったり、方眼紙やテンプレートを用意されているなど、ペーパーワイヤーフレームを書く手段は意外に豊富に用意されています。 またProttなどペーパーワイヤーフレームを撮影して、そのままソフト上で作成の続きが出来るツールも数多くあるので、紙ワイヤーフレームからWebサイトやアプリの構想を打ち立てるのは、よく選択される一つとして取り上げられます。
紙ワイヤーフレームの長所
まずワイヤーフレームの作成ソフトに慣れなくても、ペーパーワイヤーフレームなら簡単に作れる事です。 多くのワイヤーフレーム作成ソフトは直感的に作れるようにはなっていますが、それでも不安材料はあるかと思います。 紙ワイヤーフレームなら大幅に変えたいなら消しゴムで消すか元の紙を捨てるだけです。またソフトウェア開発側でなくても議論に参加できて、新しいアイディアが誕生する期待が紙ワイヤーフレームなら持てます。 またかなりの低コストで作れるのも、ペーパーワイヤーフレームならではの良さです。
紙ワイヤーフレームの短所
細かなディテールまでは伝えづらい欠点が、ペーパーワイヤーフレームにはあります。 マージン指定が難しかったり、動画など動的な部分を載せるのは不可能ですし、使用フォントを紙上で再現できる人も中々いないと思います。 続いてオンラインに頼れない欠点もペーパーワイヤーフレームにはあります。紙ワイヤーフレームを撮影してそれをオンライン上で見せて、指摘部分を書くとなったら結局は「作成ソフトでワイヤーフレームが作れた方が早くない?」みたいな事になるはずです。 また数が膨大になればなるほど管理が難しくなりますし、特にメニューから別ページに飛ぶと言ったサイトの飛び方の説明は、複雑になるほどペーパーワイヤーフレーム上だけでは無理が発生しやすくなります。
Part2: 紙ワイヤーフレームを作成する方法
ペーパーワイヤーフレームを作る前に、まずはどのようにページを見せたいか?など構想から始めていきましょう。 構想が出来たらどんなページ構成で、どんな風にリンクで飛ぶのか?決める必要があります。 またどんなページを作るにも、ファーストビューなど見せるWebページの基礎的考えを知っておいても良いか?と思います。 さらにページ一枚で済むペラページで完結するか? 複数のリンクにユーザーに飛んでもらうようにするか? 楽天市場やアマゾンみたいに検索機能は充実した方がいいのか?など、方針をきちんと立てておきましょう。 そうでないと内容がめちゃくちゃな紙ワイヤーフレームになるはずです。 このように決めたらMarvelと言う場所から、無料でプロトタイピング用紙が公開されているので使用します。 またペーパーワイヤーフレームは、ワイヤーフレーム作成ツールのように作り込むのには向いていません。 『ここにメニュー一覧があるのは分かりづらい』みたいな課題点を早く見つけるのに、紙ワイヤーフレームは向いているのです。 それと完成形みたいに色を付けるのはワイヤーフレーム作成ツールが良いに決まっているので、色もあまり塗らないでください。 （指定強調で色を付けすぎるとどの色がこれだとか、見た人の理解に時間がかかります）
Part3: オンラインワイヤーフレーム作成ツールMockitt
オンラインワイヤーフレーム作成ツールWondershare Mockitt は、オンライン共同でワイヤーフレームを作成するに向いたツールです。 ドラッグアンドドロップ機能で簡単に画面構成が作れますし、もちろん実際のWebサイトやアプリに載せたい画像を載せたりも出来るのです。 ワイヤーフレーム作成ツールよりも、紙ワイヤーフレームで作るほうがいまいちイメージが湧かない。 もしくはペーパーワイヤーフレームから卒業したい方は、是非ともオンラインワイヤーフレーム作成ツールMockittを試して下さい。
コンピューター関連のものを作る際に、紙ワイヤーフレームのような紙上で作る気持ちは分かりますし、コンピューターの処理が重くて開きづらいなとか煩わしさが感じたら、ペーパーワイヤーフレームを使うのも手段だと思います。 しかしどちらにしろペーパーワイヤーフレームだけで、完成形に近いものは作れません。 色んな考えがあると思いますが、Wondershare Mockittのようなオンラインワイヤーフレーム作成ツールも視野に入れてもらえると幸いです。
