TYRANNO CREATIVE ARTS(ティラノ・クリエイティブ・アーツ)サービスの価値を最大限
発掘するWEB制作会社

BLOG

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

2022.6.10

WEBサイトのコツ

ワイヤーフレーム

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

パワポでつくるメリット

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

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

印刷が簡単

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

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

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

無骨な感じがいい

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

共感顧客でいっぱいのブランドをつくる
ホームページ発注3つの成功法則・無料メール講座はじめました!

ホームページを業者に発注する前に、
必ず、自社で固めておくべきことがあります。
ぜひ、効果の高いホームページを手に入れるためお読みください。
ホームページ発注3つの成功法則・無料メール講座はこちら

毎月3社限定<無料>個別相談会受付中!

中小企業の経営者、ご担当者、個人起業家の方向けに、個別相談会を開催しております。
現在、無料で行なっておりますので、この機会をぜひ、ご利用ください。
個別相談会の詳細はこちらから

お問い合わせはこちら

無料メール講座はこちら

共感顧客でいっぱいのブランドをつくる
3つの成功法則