ワイヤーフレームの作り方・ティラノ流

こんにちは。
ティラノ・クリエイティブ・アーツ株式会社の岡田です。

WEBサイトを制作するにあたって、ワイヤーフレームをつくる工程があります。構成ラフとか、ラフとか言うこともあります。

ワイヤーフレームとは、つまりWEBサイトにおける設計図のことです。例えば建築でも、設計図なしにいきなり建物を作り始めませんよね。

そのワイヤーフレームをもとに、本当にこのレイアウトでいいのか。ページ数や、情報の流れはこれでいいのか。入れる要素や機能は問題ないか。

ワイヤーフレームをつくることで、お客さんと事前にしっかり擦り合わせることが可能になるのです。ワイヤーフレームの通りにデザインができあがってくるんだな。という安心感も得られますよね。

そして、お互いに話し合い、要望や目的、制作者の経験や知識、そして提案力、企画力をじっくり組み合わせ、すり合わせていくことで、より素晴らしいワイヤーフレームが完成していくのです。

これは、だれでもできる簡単な仕事ではありません。情熱とノウハウと、そして裏打ちされた発想力がものを言うのです。

ワイヤーフレームづくりは１つの物語をつくるようなもの

お客さんとじっくりすり合わせ、同じ思考、立場に立てた時、はじめてワイヤーフレームに着手します。そのとき、ずっとPCの前に向かって、ときには空を見上げながら、じっと考えます。
ときには、深夜のファミレスで。ときには、サウナに入りながら、じっと考えます。

どんな人が見た時に、どんな気持ちになってほしいのか。ページを読み終わったあとの読後感は、どんなものがいいのか。サイトをぱっと見た時に何をいちばん伝えたいのか。わくわくする見せ方や仕掛けは入れられないか。

お客さんに見せた時に「わお！」ってときめきが巻き起こるか。じっと考えます。

これが苦しい。苦しいのです。そして、しばらくすると、雷が落ちたように「ぴかーん」とひらめくのです。

ティラノ流のワイヤーフレームの考え方

弊社ティラノ・クリエイティブ・アーツ株式会社のワイヤーフレームは、実はパワーポイントで作ることが多いんです。みんな大好きパワポです。

おそらく、他のWEB制作者さんから見たら、「え？いまどきパワポ？」と思うかもしれません。しかしパワポ。されどパワポ。

私も、いままでいろんなワイヤーフレームを作るために、いろんなツールを使ってきました。Adobe XDやCacoo、Illustrator、Figma。いろいろ試してみたのですが、うーんやはり、パワポに戻ってきてしまいました。

なぜパワポがいいのか。それは、ずばり、お客さんに見せたときの「躍動感」です。

パワポのスライド１枚を、実際の表示される画面に見立ててつくります。すると、画面との距離感をぐっと近づけることができます。

まず１枚目、
ワイヤーを開いた時に画面いっぱいに目に入るメインビジュアル。

キャッチコピーもあらかた、一所懸命考えて、書いておきます。メインビジュアルに入る背景写真も、イメージが湧きやすい写真をいれておきます。WEBサイトに訪れたときに、与える印象や情報が、そのままに入ってくるのです。

「おお！いいですね。これでいきましょう！」

１枚目を開いた瞬間、すでに、お客さんは満足、安心感に満ち溢れます。そして、メインビジュアルの下にはどんな内容がくるのか。

ぺらり。（印刷してリアルでミーティングするときは、ぺらりとめくってもらいます）

「ほほー。いいですね！さすが、もうティラノさん間違いない！」

ワイヤーフレームの時点で、お客さんは満足のご様子です。めくるほど、不安になっていくようなナンセンスな仕事ではなく、めくればめくるほど、ワクワクとそして、安堵感を味わってほしいのです。

ワイヤーフレームを一枚一枚、見せていくときに、お客さんはどんな反応をしてくれるだろうか。想像を超えるできになっているか。心を打つことができるだろうか。一枚一枚、魂をこめて設計していきます。

ただ、言われた内容を、整理してざっくりレイアウトするようなワイヤーはつくりません。

「すごい時間かかったでしょう」とよく心配されますが、はい。すごく時間かかってます。

パワポでつくるメリット

原稿をそのまま編集できる

パワポでつくると、お客さん側で、そのまま原稿の修正や入力ができます。なにせ、世界のパワポ、一家に一台ありますから、だれでも慣れた操作で、そのまま書き込めるわけですね。

印刷が簡単

パワポですから、そのまま印刷していただけます。パソコン上で、赤入れしたり、メモを書き込むのが苦手なお客さんも、印刷したワイヤーフレームに書くことができます。

現在、主流になっているAdobe XDなどのツールでは、この印刷はけっこう難儀なのです。やっぱり、打ち合わせしながら、紙の資料に赤入れしちゃいたいですよね。

もちそん、WEB上でコメントや赤入れ、ipadで赤入れもできます。世界のパワポですから。

無骨な感じがいい

デザインツールではないので、さらりと洒落た感じにはなりません。それがまたいい。味わい深い。それがまた、どんと目に入ってくる。距離が近い。

表現が難しいですが、専用ツールでだれでも綺麗にスマートにワイヤーがひけるものとは、また違って無骨さがいいんです。熱量といいますが、荒々しいエネルギーが宿る。

ワイヤーフレームをもとにデザイナーが緻密に組み立てていく

熱々のワイヤーフレームができて、お客さんも、われわれティラノ側も、みんな納得いく内容になったら、いよいよデザインに入ります。

デザイナーというのは、積み重ねていく経験のなかで、培われたセンスや勘、セオリーが体に染み付いています。１ピクセル、１ピクセル、精密にデザインを組み上げていきます。

キャッチコピーひとつレイアウトするのでも、フォントやサイズ、配置場所、色、文字間、などなど無数の選択肢の中から、絶妙に収まりのよいものを決めていく作業をしていくのです。それをすべてのページ、上から下まで、緻密に、ときに大胆に組み上げていく。

数万という絶妙な組み合わせを、こつこつ、こつこつと十字カーソルをたたきながら、精巧に組む。どんなに、美大出の天才でも、１０年現場で叩き上げてきた熟練のデザイナーには絶対に勝てません。

そんな緻密に組み上げて、はじめて成り立つクオリティの高いデザインですから、修正が入るのはできるだけ避けたい。

ティラノのワイヤーフレームは修正が入りづらい

デザインに入る前に、じっくりワイヤーフレーム上ですり合わせをしているので、大きな修正になりづらいのです。

• 何がどこに入るかが確定する
• 各ページで何を伝えたいか目的が明確になっている
• 大枠の原稿が見えているので、伝えたいことが共通認識になっている
• ターゲットやゴールが共通認識になっているのでずれがない
• デザインのテイストや配色などもじっくり固めているのでずれない

ここをすでに、固めています。

とくにティラノでは、コンセプト・ワークを事前に行なっているので、経営者や担当者、そしてティラノ側で、深いところで、認識が固まっており、決してずれることがない。

この状態で、さらにワイヤーフレームでじっかりぶれないようにさせていただいているので、デザインにおいてもほぼ、ずれることがないのです。

ティラノ・クリエイティブ・アーツでは、このワイヤーフレームをとにかく本気でつくります。