WEBサイト作成においてページデザインは非常に重要です。しかしいきなりデザインを作って、デザイン完成後にやっぱり修正したい…という事がままあります。それは非常に無駄な時間です。

そんな無駄な時間を消費しないためにもワイヤーフレームで設計してからデザインを作りましょう。

ワイヤーフレームとは

普段はワイヤーなんて呼ばれていますが、言葉そのままで、枠の線で書かれた絵です。手書きやアプリなど何を使って書いても良いのですが基本として画面のどこに何を置くか分かるように作ります。

僕も手書きワイヤーはよく書きます。手書きで考えをまとめた後にIllustratorなどのベクターアプリでテキスト入のワイヤーを仕上げています。この参考画像はもっともシンプルなワイヤーだと思います。このようにページの推移を視覚化するものよくされます。

ワイヤーフレームの書き方

まずいくつか実際に僕が書いたワイヤーを紹介します。

クリックすると拡大します。1、2枚目は遥か昔に作ったSNSのワイヤーです。3枚目はこのサイトのワイヤーになります。SNSの方は仕事で作ったやつなのでそこそこ気合を入れていますが、自分のサイトの場合はめちゃくちゃ簡素に書いています。

ワイヤーの基本パーツ

WEBページのパーツに当たる箇所を枠で囲みます。そこへ画像やテキストを示す記号を置いていきます。

これをいくつも組み合わせていくと下のようになります。

まずはこれくらいのシンプルなワイヤーでWEBサイトの全体を想像していきます。各ページとの導線を考えならがサイト全体の流れが上手く言っているか一通り検証してみます。もし決まっているテキストがあればワイヤーに記述していきましょう。ただしまだレイアウトが決まっていないのに全てのテキストを記述してしまうと編集が大変になるので見出しだけ書くなど最低限の記述にします。

ある程度形が決まったら先程紹介したこのSNS用のワイヤーの用に具体的に記述していきます。ワイヤーの最終的な目標はデザイナーが見ればデザインを起こすことができる設計図になることです。

ワイヤーフレームを書くツール

何をデザインすれば良いのか分かれば手書きでも良いのですが効率を考えるとパソコンを使って作る方が良いです。

パソコンでワイヤーを作るには実に様々なアプリが存在します。手近なアプリでならエクセルやスプレットシートです。図形ツールを使ってワイヤーを作れます。
最近は少なくなったかもしれませんがIllustrator系も非常にワイヤー作りに適しています。その他にもワイヤーを書くためのアプリやウェブアプリが存在します。今はスマートフォンにもアプリでありますね。ページめくりも非常に楽に実装できて楽です。

ワイヤーも作ることが出来るアプリと、ワイヤー専用のアプリを分けていくつか紹介しますので参考にしてみてください。

ワイヤーも作れるアプリ

ワイヤー系専用のアプリ

「ワイヤーも作れるアプリ」と違うのはワイヤー用のUIが始めから準備してあることです。図を書くというよりはUIパーツを組み合わせて作れるアプリになります。

最後に

ワイヤー作成のコツはどのようなコンテンツをユーザーに効率的に見せ、様々なコンテンツに上手く推移できるか確かめるのに重要な工程です。このワイヤー段階でWEBサイトの成功が決まると断言できます。

なかなか難しいですがクライアントとWEBサイト制作の打ち合わせをする際に、このワイヤーの段階で煮詰めることができれば良いサイトが完成しやすいです。ほとんどのクライアントがワイヤーの重要性を理解せずに「よくわからないからデザイン見せて」と言ってきます。その辺りはバランスを見ながらWEBサイト作成を進めましょう。