ワイヤーフレームとは、Webサイトの設計図のことです。
具体的な内容や考え方などについては、企業・個人の考え方によって異なってくる部分があります。
まだ経験の浅いディレクターの方であれば、結局どうしていけば良いのか分からないって方も多いと思います。

今回はそのような方へ、今までの経験からTANE-be（たねび）がワイヤーフレームを作る際に、大切にしている事を紹介したいと思います。

ダメなワイヤーフレームの例

何も知らない方がよくやりがちな例で、ダミーだらけorダミーが多い状態で作られているケースです。

• ダミーなのでイメージできない
• そもそも設計がちゃんとできているのか？
• クライアントが理解しにくい

矛盾が生じたり、クライアント側がイメージしずらく、後々の修正コストが増えるというケースは珍しくありません。

原稿はクライアント側で入れてください。

って企業様もおられると思いますが、専門性が高い内容であっても0から原稿を考えるのと、たたき台がある状態で考えるので、考える側のイメージやコストが全然変わってきます。

大切にしてること

こちらはワイヤーフレーム以前の問題も関わってきますが

• サイト制作の目的
• サイトを制作する上での制約

お問い合わせ数を増加させたいのか？
リブランディングを通して会社のイメージを一新したいのか？
採用にて応募者の質を改善させたいのか？

目的によって、構成や掲載する情報、デザインテイストは大きく変わってくるため、サイト制作の目的の把握は必須です。

また、サイトは自由に理想を追いかけられるわけではありません。
案件にはそれぞれ制約があります。
予算、納期、サーバー、関係各所とのあれこれ…etc。

ワイヤーフレームの制作段階から、制約は案件の念頭においておく必要があります。

コンセプト立案

TANE-beでは、案件の全体像が掴めたならコンセプトを作っていきます。

サイトで表現したいことを言語化するイメージです。

言語化のカタチは案件によっては案件によって変えています。
キーワードをピックアップすることもあれば、キャッチコピーを作り込むこともあります。

ここで決めたコンセプトに沿っているか否かがワイヤーフレーム、デザイン、コーディングの是非を議論するための判断基準となります。
コンセプトがブレブレだと、制作中に建設的な議論は生まれず、どこかで見たことあるような参考サイトをただオマージュしただけのようなサイトになってしまうので注意が必要です。

案件概要（目的と制約）＞抽象イメージ（コンセプト）＞具体化（ワイヤーフレーム）の順に落としていくイメージです。

ワイヤーフレームの作るうえで抑えておくポイント

事前準備

• 目的・目標をより具体化
• ターゲットの明確化
• サイトマップ（サイト全体像の整理）
• 仕様面についての整理
• コンセプト立案

ワイヤーフレームを作る前に全体的なこと、トップページの方向性など自分なりに整理しておく事が重要となります。
この際に流入経由や要素の優先順位決めたりと、必要な事を言語化・資料化しておく事がおすすめです。

ワイヤーフレーム制作

作るツールについて、どこの企業も今はAdobe XDで作ってるケースが多いと思います。
TANE-beでは殆どの資料をXDで作ってます。

正直重要なのは、事前準備の内容だと考えており、
こちからワイヤーフレームに落とし込む事は難しいことではないと思います。

長いので一部抜粋してますが、自社サイトを作った際のWFです。

レイアウトなどは、人によってはそこまで作り込まない方が良いという方もおりますが、ここは企業様によって色が変わってくると思います。

社内会議

TANE-be（たねび）では、必ず全案件クオリティ会議を行なっております。
担当以外にその他ディレクター、デザイナー、エンジニア、それぞれの視点から意見を出し合い、ブラッシュアップを行います。

その意見をもとにブラッシュアップを行い、クライアントとの打ち合わせを行います。

まとめ

経験の浅いディレクターの方って、ワイヤーフレームといえば見た目のレイアウト設計などを中心に目がいきがちですが、ここを一番に考えてしまうとズレが生じたり、内容が薄いワイヤーフレームになりがちです。

その為説明した通り、事前準備で目的など明確化していると

• なぜこうしたのか
• この順番にしているのか

がクライアントに関わらず社内でも、きちんと説明する事ができる。
これが説得力の向上にも繋がってくると考えてます。

明確な目的をクライアントが考えていないパターンもあるので、その際はヒアリングはきちんと行っておきましょう。

何もりもヒアリング力・言語化がワイヤーに関わらず、ディレクターとして必要不可欠な能力だと思います。

今回説明したのは、あくまでTANE-be（たねび）の考え方なので参考程度にしてください。