ワイヤーフレームとは

ワイヤーフレーム作成のポイント

ワイヤーフレームを作成しないWeb制作会社はないと思います。

このワイヤーフレームは一言で言うと、ページの設計図または線画になっており、ホームページで作成するすべてのページに対して、このワイヤーフレームを作成することで、適切な情報配置が行われた優れたWebデザインのホームページとなるのです。

そしてこのワイヤーフレームは基本的にはWeb制作会社が作成するのですが、お客さまによっては、お客さま自身で作成されることもあります。

ワイヤーフレームとは
ワイヤーフレーム作成ツール
その役割
ワイヤーフレーム通りにはならない
Web制作会社に任せるのが良いと思う

ワイヤーフレームとは

ワイヤーフレームとは、ホームページの設計図、または線画のことを言います。

実際にどのようなものになるかと言うと、こちらが弊社の旧トップページのワイヤーフレームになっております。

基本的にはワイヤーフレームは、Web制作の前にホームページで作成するすべてのページで用意する必要があり、この作業はWebデザイン作成前に実施されるものになっております。

このワイヤーフレーム作成をWebデザイン作成前に行うことで、Webデザイナーが、それぞれのページにどのような内容が掲載され、さらにはどのような配置が行われているのかを一目で理解できるものになっているため、非常に効果的なWebデザインを作成することが可能になっています。

また、弊社では、このワイヤーフレームの作成段階で原稿をご用意いただいており、ワイヤーフレームの作成段階で原稿をご用意いただくことで、例えば、もともとは文字数が少ないと思っていた箇所が、実際に原稿作成を行ってみると、文字数が多くなってしまった場合でも、適切なWebデザイン作成が可能になっております。

ただし、画像については、Webデザインを作成するページは、Webデザインを確認後でも良いですし、デザインを作成しないページは、テストアップ完了後でも問題ございません。

ワイヤーフレーム作成ツール

このワイヤーフレームを作成するためのツールは、非常にさまざまなものがリリースされておりますが、弊社がワイヤーフレームを作成するのはパワーポイントになっており、またお客さまからこんな感じでホームページを制作してほしいと言われる際にいただくのがエクセルになっております。

もちろん、パワーポイントやエクセル以外にもCacooやAdobe XDなど、優れたツールも多く提供されておりますが、弊社では昔からパワーポイントを利用していたため、現段階ではワイヤーフレームの作成はパワーポイントが最も効率的な作成ツールになっております。

基本的には、自分でワイヤーフレームを作成してWeb制作会社に渡したいという場合は、どのようなツールを利用していても問題はありませんが、パワーポイント以外の無料ツールが良い場合はCacooを推奨いたします。

Adobe XDは有料ツールになっているため、ホームページのワイヤーフレームを作成するだけであれば、あまりオススメはいたしておりません。

お客さま自身でワイヤーフレームを作成される際には、弊社ではどのようなツールで作成していたとしても、Web制作前であることとワイヤーフレームを見て理解ができることの2点さえ達成できていれば問題ないので、どのような形のワイヤーフレームであったとしても受け付けることが可能です。

その役割

ワイヤーフレームの役割としては、それぞれのページでどのような情報を配置させるのか、また情報の配置法はどのようになるのかを確認するためのものになっております。

どういうことかと言うと、基本的には賞を取るような優れたWebデザイナーが在籍しているWeb制作会社は非常に少なく、多くの場合は、デザイン知識に差はあるにしても、ぱっと見良いデザインを作成することはできたとしても、ある程度知識がある方が見れば、どのデザインも同じようなデザインでのWeb制作と言われてしまいます。

では、Webデザインはなんでもいいかと言うとそういうことはなく、基本的にはWeb制作会社では、ユーザのニーズに応えるために、どのページにどのように情報を配置するかを理論的に考えてWebデザインを作成しているのです。

この理論的な考えが集約されたのがワイヤーフレームになっており、例えばこのページには何を乗せるのかや、情報の配置は縦並びにするのか、横並びにするのかなど、細部までこだわってワイヤーフレームを作成し、理論的なWeb制作を行っているのです。

もちろん、Webデザイナーによっては、理論的な思考をしっかりと行える方もいるとは思いますが、人によって品質がコロコロ変わると言うのはあまりWeb制作会社としては良い状態ではないため、Web制作会社では基本的にはWebディレクターと呼ばれる職種の方が、お客さまのホームページで適切な情報配置を行うためにワイヤーフレームを作成しているのです。

ワイヤーフレーム通りにはならない

お客さま自身でワイヤーフレームを作成いただく際に、ご理解いただきたいことがあり、基本的にはWeb制作会社はお客さまのワイヤーフレーム通りにホームページを制作することはいたしておりません。

もちろん、ワイヤーフレームのままホームページを制作して欲しいというご要望がありましたら、実現することも可能ですが、基本的には以下の改定を行ったWebデザイン作成を実施しております。

面積比

作成されたワイヤーフレームの縦や横の長さを調整してWebデザインを作成しています。

例えば、ワイヤーフレーム上で、画面いっぱいに表示された横並びの3つの画像があった場合に、左右の余白を開けて、横幅いっぱいに見えないように、画像の横幅を少し縮めたデザインで作成することがあります。

このときに左右の余白がどれくらい空いていた方が良いかはWebデザイナーが最適なデザインとするために調整を行っており、御社のホームページがもっとも綺麗に見え、そしてその情報がリンクになっている場合は、リンクがクリックされやすいような調整を行ったWebデザインを作成しています。

ワイヤーフレームを作成する際には、Web制作前のワイヤーフレームのままホームページを制作すると言うことは基本的にはありませんので、面積比などはもっともベストな状態になると理解をすることで、より短時間でワイヤーフレームを作成することが可能になります。

位置の調整

よくあるワイヤーフレームでは、画像の下にテキストを配置することが一般的ですが、このときに画像の中にテキストを入れたほうが綺麗に見え、さらにその画像がリンクの場合はリンクがクリックされやすくなる場合は、デザイナーが画像の中にテキストを入れて調整を行ってくれます。

ただし、弊社では基本的にはワイヤーフレーム段階ですべてのページのテキストを弊社で作成しているので、その時に文字数が多くなるようなコンテンツについては、画像の中にテキストを入れると非常に大きな画像になるので、ワイヤーフレーム通り画像の下に配置させることが一般的です。

この位置関係などについては、自分でワイヤーフレームを作成する場合は、お客さまではなかなか理解ができないことが多いと思いますので、基本的にはWeb制作会社が指摘してくれるため、それほど意識をする必要がないかもしれません。

表現法の変更

Webデザイナーは、日々多くのWebデザインを確認しております。

そのため、この箇所は表現方法を少し変更させたほうが訪問者にとって見やすく分かりやすいと思われる箇所については、Webデザイナーの知識の中から最適な表現方法へと変更をしてくれます。

Web制作会社は、それぞれの職種ごとにホームページの知識を持っており、ホームページの表現方法を意識した知識をもっとも持っているのが、Webデザイナーになっているので、仮に変更をされたとしても、恐らくお客さまの期待以上のWebデザインになってくると思われます。

Web制作会社に任せるのが良いと思う

基本的にはワイヤーフレームはWeb制作会社が作成することが一般的です。

ただし、実際に弊社にお問い合わせをいただく際に、こんな感じでホームページを制作してほしいとエクセルでワイヤーフレームを作成していることがあります。

この場合は、もちろんWeb制作費を下げてお見積りを作成しておりますが、その際にこのワイヤーフレームのままホームページを制作するのを希望するのか、あるいはWebデザイナーが最適だと思う改善を実施して良いのかを確認しております。

10ページ以内のホームページであれば、お客さまがワイヤーフレームを作成しても問題が発生することはありませんが、20ページを超えるホームページの場合は、お客さまが作成したワイヤーフレームではよく整合性が取れないということがありますので、希望があればWeb制作会社に伝え、ワイヤーフレームの作成作業自体はWeb制作会社に任せることが良いと思います。