コンテンツ企画段階でどのようなコンテンツを投入するのかが決まったら次はWEBサイトのワイヤーフレーム制作を行います。ワイヤーフレームとは、実際にコーディングをする前にどのようなイメージでサイトをデザインするのかを実際に設計することです。仮の形なので骨格などがわかれば十分です。
Webサイトのワイヤーフレームの役割とは
WEB制作においてワイヤーフレームはどのような役割を果たしているのかをご説明します。
ワイヤーフレームはWEB制作の設計図
ワイヤーフレームとは簡単に説明するとWEB制作における設計図のことを指しています。設計図を制作しておくことで、「どこに何を設置するか」ということが明確になります。WEB制作はなんとなく進めても成功しません。それぞれが異なった理解で制作を進めてしまうからです。それに対してワイヤーフレームという設計図があることでWEB制作がスムーズに進みます。
ワイヤーフレーム制作の目的は、私たちと貴社担当者の方とのイメージのずれをなくすこととコーディングをする際の業務の効率化です。事前にどのようなサイトデザインになるのかを形にしておけば、完成後にイメージと違うということを避けることができます。また、コーディング時にワイヤーフレームがないとデザインを考えるところから始めなければならず時間が掛かってしまいます。このようにサイト制作においてワイヤーフレームの作成は必須だと言えます。
理論的なデザインができる
UI設計など理論的なWEB制作を進める会社も増えてきています。ただ、いくら理論的に正しいデザインでも目に見えるものがなければ実感が湧きにくいのも事実です。そこで、ワイヤーフレームを制作しておくことで理論的なUI設計などが可能となります。
理論的に人間が理解しやすいUIや印象の良くなるUIと呼ばれるものは研究が続けられています。これらデザインに関する理論を踏襲できているかどうかを判断しやすくなります。場合によってはワイヤーフレームがあることで上司などにデザイン面の説明をしやすくなるかもしれません。
WEB制作でワイヤーフレームを制作する流れ
WEB制作の現場でワイヤーフレームを作るためにはなにをすればよいのでしょうか。簡単にワイヤーフレーム制作の流れをご紹介します。
ワイヤーフレーム制作に活用できるツール
ワイヤーフレームをイチから作るのは現実的ではありません。手間がかかりすぎてしまいます。そこで以下2つのツールを利用して作成することをおすすめします。
- Cocoo
- PowerPoint
数あるツールの中でも特におすすめしているのは「Cacoo」です。ワイヤーフレーム制作のために提供されているツールですので使いやすいことが特徴です。また、日頃から使い慣れているツールを利用したいと考えているのであれば「PowerPoint」を利用するのも一つの手段です。ワイヤーフレーム制作に特化したツールではありませんので多少操作性は慣れが必要です。ただ、慣れてしまえばこちらを利用したほうが日頃利用するツールということで利便性が高い可能性もあります。
Cacoo
参考：https://app.cacoo.com/
ワイヤーフレームを作るのにcacooと呼ばれるオンラインサービスを活用します。グローバルナビゲーションの配置、サイドメニューの配置、メインコラムのデザインなどを決めます。TOPページ、カテゴリーページ、投稿ページなどいくつかのページで作成します。大本のデザインを作成しておけば他のページにも応用できるからです。ほぼ完成形まで持っていく場合もあれば、ただ配置などの確認を行うために行われる場合もあります。
ヒアリングやブレストを中心に進める
ワイヤーフレーム制作ではヒアリングやブレストを中心に進めることが重要です。一人で考えて煮詰めるのではなく、他者の意見を集めることから始めましょう。どうしても個人の意見だけで進めると独りよがりなものが完成してしまいます。ワイヤーフレームは設計図ですので独りよがりなものを作ってしまうと全体に影響する可能性があります。そのような問題を引き起こさないようにするためにも、ヒアリングやブレストでまずは情報を出し合って進めましょう。
得た情報はグルーピングしてワイヤーフレームに落とし込む
ヒアリングやブレストで出た情報はグルーピングしましょう。似た情報を別々の場所に配置するのはワイヤーフレームの考えから逸脱してしまいます。ワイヤーフレームでは似た情報はまとめてUI/UXを高めることが重要です。同じような情報を別々の場所に配置するのは利便性が悪くなります。ただ、申込みボタンなどコンバージョンにつながるものを意図的に複数の場所に配置するのはこの限りではありません。
ワイヤーフレーム制作のコツ
ワイヤーフレーム制作では2つのコツがあります。これからワイヤーフレームを初めて制作する人も以下の2つを意識しながら進めてみましょう。
アイデアをしっかりと出してから設計図にする
アイデアを出し切ってからワイヤーフレームを作成することが大切です。アイデアを練っておくことで手戻りを減らせます。ワイヤーフレーム制作の初心者は思いついたことをなんでもワイヤーフレームに取り込もうとします。しかし、これをやってしまうと後から手戻りになる可能性が高まります。これは避けなければなりませんので事前にアイデアは練っておきましょう。また、アイデアの正解が分からない場合には競合他社のサイトを参考にしてみるのも一つの手段です。そうすることで何かしらの正解が見えてくる可能性があります。
ワイヤーフレームで必須のパーツを理解する
ワイヤーフレーム制作には必須のパーツがあります。例えば以下のものです。
- ヘッダー
- パンくずリスト(ナビゲーション)
- フッター
これら必須のパーツを理解しておくことでワイヤーフレーム制作をスムーズに進められます。例外的にこれらのパーツを使わないサイトも存在しています。例えばLPがこれに該当します。根本的にワイヤーフレームの考え方が異なるサイトもあると理解しておくと良いでしょう。
WEBサイトの設計図がWEB制作を成功に導く
WEBサイトの設計図がワイヤーフレームです。この設計図があることでWEB制作がスムーズに進み成功に導かれることは言うまでもありません。言い換えるとワイヤーフレーム無しではWEB制作が失敗する可能性もあります。アイデアを練って制作したワイヤーフレームベースで作業を進める意識を持ちましょう。
私たちの仕事を見る
| 戦略 | 制作 | 運用 |
|---|---|---|
 ・業界分析 ・競合分析 ・キーワード分析 ・ペルソナ策定 ・KPI策定 |  ・サイト構造考案 ・コンテンツ企画 ・ワイヤーフレーム ・コーディング ・WEBサイト翻訳 |  ・アクセス解析 ・A/Bテスト ・SNS運用 ・LP制作 ・広告出稿 |
お問い合わせ
各種サービスのお見積りやご質問などございましたら弊社にお気軽にお問い合わせください。
SEOコンサルティングからウェブサイト制作まで、貴社にとってベストなご提案をさせていただきます。