ホームページ制作に欠かせない『ワイヤーフレーム』とは？

2016年 08月 9日

ホームページを制作するときに欠かせないのが、『ワイヤーフレーム』という物です。
ワイヤーフレームとは何ぞや？と言いますと、簡単に言えばホームページの下書きです。

column11_img1

どんなコンテンツをどんな風に並べたいか？ヘッダーやフッターはどのような形にするか？予め下書きのようにワイヤーフレームを作っておいて、それを基にデザインを組み立てていくのがホームページ制作の基本ですね。

今回はワイヤーフレームについて紹介しようと思います！

ワイヤーフレームの必要性とは？

まず、なぜワイヤーフレームを作るのか？そこまでワイヤーフレームは大切なのか？から説明する必要がありますね。
ワイヤーフレームは骨組ですので、具体的に使用する写真や色合いなどは決まっていませんが、どのようなコンテンツを配置したいか等を明確にしてワイヤーフレームを制作します。
このワイヤーフレームを作る事で作りたいホームページの内容が深く理解でき、何か抜けているコンテンツはないか？このコンテンツは他のページに掲載するべきではないか？と改めて確認する事が出来ます。
これが実際にデザインを作ってからではなかなかに直すのが大変なので……、ワイヤーフレームで作りをしっかりと確認する事が大切です。

また、ホームページの制作は制作者の意見だけではなく、依頼者の意見も大切な要素です。
ワイヤーフレームを作っておくとどのような作りになるのか視覚的に伝える事ができ、どのような意図でコンテンツを配置しているのか等も分かり易く、気になる点があれば依頼者が制作者に意見を出しやすくなります。
質の高いホームページを作るには制作者と依頼者の打ち合わせはとても重要なので、ワイヤーフレームの役割も大きなものになってきます。

ワイヤーフレームを作る上での注意点

ワイヤーフレームは基本的に依頼を受けた制作者が用意する事が多いのですが、時には依頼者がワイヤーフレームを用意して制作企業に依頼を出す事もあります。
その場合は依頼側の希望する形にデザインを作って貰えるのですが、あくまでワイヤーフレームは下書きであり、情報が不足していると考えていた理想とは違うデザインを渡されてしまうかもしれません。
そのような事が無いように、ワイヤーフレームを作る時にも注意しなければならない点があります。

掲載したいコンテンツの内容を整理する

ワイヤーフレームを作る前に必要な事は、どのようなコンテンツやページを作りたいのか、をしっかりと考える必要があります。

column11_img2

まずヘッダーにはロゴやお問い合わせの情報を記載する事が多いですが、住所は記載するか？電話番号は記載するか？営業時間や定休日の記載は必要か？など、ヘッダーだけでも考える事は多いですね。
全て記載しておけば良いのでは？と思われるかもしれませんが、無駄な情報や文字があるとデザインやコンセプトにブレが生まれ易くなってしまいます。
例えば電話での受付をしていないのに、大きく電話番号を記載していては利用者の混乱を招きますよね。

他にも例えば『代表ご挨拶』を掲載したい場合は個別のページを用意するのか、個別のページは作らずにトップページに掲載するのか、なども悩みがちな点ですが、ワイヤーフレームを作ればどちらが良いか提案しやすいですね。

マルチカラムにするかシングルページにするか

作りたい内容を決めたら、次はホームページのレイアウトですね。
今では画面をいっぱいに使ったり複雑な動きをするものだったり、ダイナミックな作りのホームページも増えてきていますが、やはり定石に沿ったレイアウトの方がデザインとしてはまとまりやすいです。

基本的な設計であれば、まずは『マルチカラム』か『シングルページ』かを決めると良いでしょう。

column11_img3

マルチカラムサイト参考：KUREHA公式ホームページ

マルチカラムとはカラムが複数あるサイトの事で、コンテンツの部分とサイドバーの部分で分かれているホームページですね。
カラムが2つの時は2カラム、カラムが3つあれば3カラムと言います。
マルチカラムのサイトはサイドバーがある為、ユーザーがどこからでも他のページにリンクしやすいのが特長です。
サイドバーがある分、メインコンテンツに使えるスペースは狭くなるのでダイナミックなデザインには出来ませんが、コンテンツスペースが狭い事で横書きの1行の文字数が多くなり過ぎず、文章が読みやすい利点もあります。

column11_img4

シングルページ参考サイト：hiro gardening

シングルページはマルチカラムサイトに対してサイドバーがなく、1つしかカラムが無いサイトの事です。
サイドバーが無いためコンテンツのスペースを横幅いっぱいに使え、ダイナミックでインパクトのあるデザインにする事が出来ます。
サイドバーの情報を別の所に記載する事になるので、縦に長いホームページになりがちです。
余りにスクロールが長いホームページでは途中で離脱されてしまう事も多いので、その点を考慮してデザインする必要がありますね。
尚、横幅いっぱいに使用したデザインはスマートフォンにも対応させやすく、カラムが複数あるマルチカラムよりもレスポンシブデザインにし易いメリットもあります。

他にもフルスクリーンやタイルというレイアウトもある

マルチカラムサイトとシングルページがホームページのデザインでは基本的なレイアウトなのですが、他にもフルスクリーンやタイルというレイアウトもあります。

フルスクリーンはパソコンの画面を最大限利用して、スクロールのしない1画面で構成したレイアウトになります。
タイルはコンテンツの1つ1つを細かく分けて、タイルを敷き詰めるように並べたレイアウトですね。

コンテンツとレイアウトが決まったらワイヤーフレームを作ろう

掲載するコンテンツとレイアウトが決まったら、ワイヤーフレームを作り始めましょう。
ワイヤーフレームを作るにはパソコンのソフトを利用する方法もありますが、使い慣れていない方は紙に鉛筆で書いたものでも立派なワイヤーフレームになります。
実際にホームページの制作を行っているプロの方でも、紙と鉛筆でワイヤーフレームを制作している方は多いですね。
紙と鉛筆で制作する場合は、一発で完璧を目指すのではなく、何度も書いたり消したりを繰り返してデザインを考えていきましょう。
何度も書き直す事になりますので、最初はフリーハンドで書いてある程度完成に近づいてから定規で清書すると良いでしょう。

因みに私は『FireWorks』というAdobeのデザイン用のソフトを使ってワイヤーフレームからデザインまで作っています。
FireWorksはホームページを作るにはとても便利なんですが、ソフトの価格が高いのと、FireWorksはすでに開発が終了していて今後サポートが打ち切られる可能性があるのが問題点ですね……。

他にもExcelでワイヤーフレームを制作している企業も多くあります。
ExcelはMicrosoftのオフィス用ソフトですが、セルに沿って罫線を入れたり文字を入力したり出来るので、ワイヤーフレームを作る際には役立ちます。
手書きのワイヤーフレームを改めてExcelで綺麗に作り直すのも良いですね。
欠点としてはあくまでワイヤーフレームを作る際に役立つだけで、実際デザインを作るには使えない点ですね…。

ワイヤーフレームについて　まとめ

今回はワイヤーフレームの必要性と、作るために必要な事をご紹介しました。
ワイヤーフレームはホームページの作りを理解する為に必要不可欠なもので、効率的にデザインを作成するために大いに役立ちます。

打ち合わせの時にも活用できますので、デザインを作る前に必ずワイヤーフレームを作る事を大切にしたいですね！