まだやってないの?ホームページの作成にとっても大切なワイヤーフレーム(設計)のこと。


梅雨が明けて本格的な夏到来ですね。
最近の週末はもっぱら海か山です、海というより琵琶湖に行くことが多い。
今日はどこへ行こう。

ホームページを作るときにワイヤーフレームって作っていますか。
ホームページを作る工程についてはこちらに書きました。

ホームページ制作フローを公開。納品までの作成の流れをまとめました。

今回はワイヤーフレームについていろいろと書きたいと思います。

ワイヤーフレームの役割

ワイヤーフレームって初めて聞く人もいると思いますが、
簡単に言うとホームページの設計書のようなものです。
主に大まかなレイアウトやキャッチや説明文言などのテキスト、
アイデアベースで意見を出し合えるし、俯瞰してホームページの内容を考えることができるのがメリットです。

モノを作るのには準備がとても大切です。
よくホームページは家を建てることに例えられます。
実際その例えをしてもお客さんは、家はお金かかるけどホームページはお金かからないでしょとか言われます。
いやいや、人件費むちゃかかってますよー!
家を建てるときに設計書を作らないところはありません。
なぜかというと、
「ねじが足りなかった・・・」
「あ、トイレのサイズちょっと小さかったかも」
って、そんな感じで進んだらあたりまえですが嫌でしょ。
ホームページだって、作りながら考えているとレイアウトとか決まらないままやっちゃうと、
何度もレイアウトをやり直したり、全体の統一感が無かったり、必要な写真を撮れてなかったりと
いろいろ問題が起きてしまいます。

よく「設計とかいいからとりあえず作って見せて」って言われますが、
作って見せて、「ここを変えたい」ってなったら追加でお金がかかりますよ。
いきなりコーディングレベルの話になると話が細かくなりすぎます。
設計の段階では上にあったものを下に移動したり、画像の数を増やしたりって比較的容易にできますが、
実際にHTMLでコーディングしてしまうと、デザインまで戻ってやり直しなので大変です。

絵を描くときにはじめはスケッチから初めて、どんどんと細かいところを作り上げていくのに似ています。
いきなり細かく書き出すと、全体のバランスとか構図がおかしくなってしまって、そのころにはもう修正するの大変です。
アウトラインから細部へという流れは絵をかくのも同じですよね。

良いものを作る、コストを抑えるのこの2点のためにワイヤーフレームはすごい重要なんです。

ワイヤーフレームってどんなの?

ワイヤーフレームはこのように作るという決まりごとはありません。
ツールも何を使ってもかまいません。
それぞれが良いと思うワイヤーフレームの作り方、使い方をしています。

実際のワイヤーフレームってこんな感じ。

ワイヤーフレーム

デザインが入る前に、どこに何が配置されるかを書いています。

ワイヤフレームが実際のホームページにどのようになっていくのか、
こちらのワイヤーフレームのサンプルサイトを見るととてもわかりやすい。

他にも、実際のワイヤーフレームを参考にするのにこのサイトも有名。

ワイヤーフレームを作るために使うツールは?

ワイヤーフレームを作るために使っているツールは様々です。
仕事を進めるうえで考えておきたいポイントは

・簡単に作れるもの
・情報共有しやすいもの
・お互いに編集しやすいもの

ワイヤーフレームはある程度自由に作れるものがいいです。
設計段階で作業が大変なものでは意味がないので、気軽に変更などができるものを使います。
また、複数人で情報を共有するためにも大切です。
いろいろな人が使うものではないので、できるだけ広く知られてるツールがいいと思っています。

手書き

ワイヤーフレームは必ずしもツールを使わないといけないというわけじゃなくて手書きでも構いません。
パソコンを作るよりも手書きの方が柔軟な発想ができるでしょう。
最終的にパソコンでワイヤーフレームを作る場合も、ワイヤーフレームの下書きとして手書きで書くことも多いです。
ホワイトボード上で、みんなでアイデアを出し合いながら作っていくのもいいですよ。
ただ、手書きはクライアントと情報共有するのに写真やスキャンをしてデータを送りますが、
クライアント側で書き換えることができず、プリントアウトして加筆して送り返すという手間になるので、
ワイヤーフレームを作る工程の一部として手書きを利用します。

Excel

弊社ではExcelを使用しています。
図を配置するのも簡単で、表データも別シートとして書き込むことができます。
1ページが長くなっても1シートにおさまります。
Office系ソフトは普段から使っているクライアントも多いので、
情報共有や編集についても使いやすいです。
メールでやり取りするのにも向いています。

PowerPoint

制作会社ではPowerPointを使っている人も多いです。
図やテキストを編集するのが簡単で、Office系ソフトで持っている人も多いです。
一般に使われるソフトなので、クライアント側でも編集しやすい。
Excelと同じような感じですが、ページのサムネイル表示ができるので、これがとても見やすい。
1ページの高さに限界があるので長いページだとページを分けないといけないことがあります。
メールでやり取りするのにも向いています。

ペイント系ソフト

PhotoshopやIllustratorなどのペイントソフトを使うところもあります。
デザインに強いこれらのツールは、デザイン的な情報も含めてやり取りする場合は便利ですが、
ファイルを開くのに時間がかかるのと、クライアントが編集できないことも多いのでやり取りには向いていません。

ワイヤーフレーム用アプリケーション

ワイヤーフレームを作るために用意されたアプリケーションやサービスもあります。
テンプレートパーツが用意されていたり、ワイヤーフレーム用に作られたソフトなので使い勝手もよいです。
使い方もシンプルで使いやすいものが多いので初めての人でもある程度使えるでしょう。
デメリットとしてはアプリをインストールしたり、サイトにアクセスしてログインしないといけません。
オフラインでは使えないものもあるので、そこは場合によっては大きなデメリットです。
普段使い慣れていないツールを使わないといけないというのは結構苦痛ですので、
クライアントによっては面倒くさいと感じてしまうことです。
無料では使える機能が限られているなど、いろいろとハードルは出てきますが、
そこを解消して、ルール化と意識共通化できれば専用のツールはとても便利です。

ワイヤーフレームを作るために便利なツールでメジャーなのがこちら。

他にもワイヤーフレームのツールはいろいろとあります。
こちらで見るとそれぞれ詳しく紹介されています。
Web制作に超便利な無料ワイヤーフレームツール4選 | 株式会社LIG
【無料で使える!】ワイヤーフレームの作成ツール10選 | Be My Style
初心者でも使える5つ厳選!無料でワイヤーフレームを作成できるツール
全部無料で試せる!厳選ワイヤーフレーム作成ツール10

いろいろと試してみて、
制作工程に合ったワイヤーフレームのツールを探してみましょう。

大阪のホームページ制作会社YCOMの制作サービスのご紹介