ワイヤーフレームってなに？
今回は、ワイヤーフレームについて少し記事を書きたいと思います。
「WEBサイト・ECサイトのキモはワイヤーフレームにあり」なんてたいそれたタイトルですが、そもそもワイヤーフレームって何のこと？というところから触れていきます。
ワイヤーフレームはWEBサイトのレイアウト案
画像を入れる場所・テキストを入れる場所・大きさの目安・写真と文字のバランスなど、デザインする前に作る大まかな骨組みです。
この時点で何を一番伝えたいのか？更新する部分はどこか？など、サイト全体の動きや動線もまとめておく必要があります。
ワイヤーフレームさえきちっと作っておけば作業効率が良くなります。
ワイヤーフレームが大事な理由
ワイヤーフレームは「サイトを作る前の骨組み」とお伝えしましたが、どうしてそんなに大事なのでしょう？
ここからはワイヤーフレームの重要性を少しご説明していきます。
ワイヤーフレームは商品（サービス）を知っていないと作れない
ワイヤーフレームは、何を一番伝えたいか？ファーストビューで何を見せたいか？など、商品やサービスの特徴を見やすく整頓する作業です。
サービスや商品の魅力を引き出すためには、それについての知識や理解が不可欠なのです。
ワイヤーフレームを作る前の事前調査は十分に必要です。
事前調査の段階でサービスや商品の新しい魅了に気がつけたり訴求ポイントが明確に見えてくることもしばしばあります。
伝えたいことが伝わるか再確認できる
ワイヤーフレームは、場合によってはコピーや簡単なライティングを入れながら作ります。
メインの画像にどんな文字をどれくらい入れるかなど、大まかな枠と合わせて文章を入れてみることで見た目の印象やファーストビューを擬似的にみることができます。
メイン画像が大きすぎていないか？コピーの文字数が多すぎないか？
一旦全体を形にしてみることで伝えたいことが伝わるかどうかを再確認することがでます。
制作依頼者と制作者の意図のすり合わせができる
ワイヤーフレームは制作依頼者と制作者の意図が合っているかどうかを確認する時にも役に立ちます。
後になって「やっぱりメイン画像はいらなかった」「メニューの位置はここじゃない方が良いかも」
などなど、デザイン全体を見直さなければいけないような修正にならないように、ワイヤーフレームの段階でしっかりと意見をすり合わせる事ができます。
大まかな枠組みだけではイメージしにくいとしっかり見てもらえないような時には、実際のサイトと照らし合わせながらでも配置をしっかりと決めておくとデザイン以降の作業がとてもスムーズになるでしょう。
WordPressやASPのテーマを使う場合のワイヤーフレーム
最近多くなってきた事例です。
ホームページをWordPressで作成したり、既存のECサービス（ShopifyやBASE）で構築しようとした時にベースになるテンプレートからあまり変更を加えず使いたい時のワイヤーフレームの考え方です。
テーマをそのまま利用してサイト制作をするメリットとデメリットを簡単にご紹介してからワイヤーフレームはどうするの？と言う問題について書いていこうと思います。
テーマをそのまま利用するメリット
- スピーディーな対応ができる
- 価格を抑えられる
- 後々テーマを変更しやすい
- サイトの表示速度が安定する
テーマをそのまま利用するデメリット
- レイアウトの変更が難しい場合がある
- 同じテーマを使っている人とデザインが同じになる
- 訴求力に限りがある
- 写真頼みのサイトになりがち
テーマを生かしたワイヤーフレーム
テーマをそのまま使った場合のメリットデメリットを紹介しました。
とにかくコストを抑えてリリースまで急ぎたい方にはテーマそのまま案件は非常に相性が良いのは確かです。
スピード感重視の依頼者さんと一緒にテーマを生かしたサイト作りをする場合のワイヤーフレームの考え方をまとめていきます。
テーマでできるレイアウトパターンを調査し簡易的なワイヤーに
どんなレイアウトができるのかパターンを把握して、パターンの中でどこに何を配置するか決めていくと良いでしょう。
実際に組み込む前に話し合いをする事で、本当はもっと見せたい方法があることに気がつけるかもしれません。
ちなみにつなぐデザインのこのサイトはCocoonと言う無料テーマを使って作られています。
充実したカスタマイズ機能を搭載しつつ自由度の高い変更が可能なフリーテーマの先駆けだったのではないかと思います。
用意されたカスタマイズ機能を最大限に利用しながら個性を発揮したい、さらにコストを抑えてサイトを作りたい人にはおすすめです。
ワイヤーフレームは依頼者と製作者にとって最初のすり合わせ
ワイヤーフレームを作ることなくデザインに取り掛かってしまう制作者さんもいるかもしれませんが制作依頼者の作ろうとしているサービスや商品の良さを最大限に引き出そうと考えると、ワイヤーフレームは作るべきではないかと思います。
低コストにスピーディーにサイトを作成したい場合でも、既存のテーマを生かしたワイヤーフレームで目標を持って制作したいものですね。
つなぐデザインでは、先に少しお話しさせていただいたCocoonを使ったカスタマイズはもちろん ０ からのスクラッチ開発も行なっております。
お客様の見せたいものを最大限引き出せるよう頭を使って、ユーザーの気持ちになって提案させていただきますのでお気軽にご相談ください。
