Webサイト解説してみたvol.03【ワイヤーフレーム】

こんにちは。デザイナーのロッタです。

前回のサイト解説では「ロゴ制作」のお話でした。

今回は「ワイヤーフレーム」についてお話していきたいと思います。

Webサイトには欠かせないワイヤーフレームですが、ちゃんと作ってますか?

サイトがうまくできないって人はもしかしたらワイヤーフレームを見直してあげると改善するかもしれません。

それくらい、Webサイト制作においてワイヤーフレームは大事です。

「何で作ればいいかわからない…」
「思っていたより時間がかかってしまう…」

そんな方にぜひ使ってほしいワイヤーフレーム作成サービス等もご紹介しますね♪

ワイヤーフレームとは?何のため?

一言でいうと「デザインの設計図」で、↓のようなもの。

これは今回の架空ページのワイヤーフレームになります。

主にクライアントさんとのデザインの共有で使われます。
「こんなデザインになる予定です!」みたいな。
この共有がとても大事で、これを怠ると完成した後にどんでん返しなんてことも…!

お互い気持ちよく仕事するためにも、出来る限り共有はしたほうが良いと思います。

また、複数人で役割分担してサイトを作る場合も、ワイヤーフレームがないと大変なことになってしまいますね!

もちろん、クライアントさんの案件だけでなくポートフォリオのサイトであってもワイヤーフレームは作る癖をつけてくださいね。

作りながら考える人も中にはいるかもしれませんが、方向性がずれる・クライアントと意思疎通ができない・時間がかかる等、デメリットばかりです。

ワイヤーフレームの作り方

コレ!っていう正解はないです。
今までいろいろなデザイナーさんとお仕事させていただきましたが、人それぞれです(笑)

だからといい好きに作っていいわけではなく、あくまで「設計図」なので、相手に伝わるモノを作るという意識は忘れないでくださいね。

ワイヤーフレームを作るときに気を付けたいこと

情報をかき集める

最初からワイヤーフレーム(デザイン)に入る人がいますが、これはダメです。

前々回?の記事でも書きましたが、デザインするためには「そのデザインの意味」が必要です。(コンセプト等)

そのためにも情報をたくさん集めることから始めてくださいね。

誰が見てもわかりやすい

結構見落としがちなのですが、実際ワイヤーフレームを見る人・OKを出す人はクライアントさんです。

多くのクライアントさんは当たり前ですが、デザインの知識は少ないです。
ですので、デザイナーが見てわかるワイヤーフレームでは失敗なのです。
デザインがわからない人にも、「こんなデザインになるんだ!」と想像させるワイヤーフレームにしないといけません。

全部のデザインに説明を

まず考えてほしいのは、なぜデザインする必要があるのか?

クライアントさんは「目的」があってデザイナーさんに依頼しています。

例えば…
・もっとブランドイメージを出したい
・商品が多いから探しやすくしたい
・ターゲットを狙ったデザインにしたい
などなど。

ただただおしゃれにしたいという依頼ではないです。

ですので、1つ1つのデザインに意味を持たせてあげてくださいね。
そうすることでクライアントさんからも愛されるデザインになるはずです!

(全部の説明をワイヤーフレームに書く必要はありませんが、説明できるようにはしておいたほうがいいかもしれません。)

頭の中を整理する

レイアウト・カラー・コンテンツなど、頭の中でぐちゃぐちゃになっているイメージを書き出します。

自分の中で納得のいくワイヤーフレームが出来れば、いざモックアップを作るときも悩まず進めたりするかも。

「こういうモノをデザインしたい」と一番最初に出すものなので、とことんこだわってくださいね。

でもワイヤーフレーム作るのって難しくない?

コンセプトよし!イメージよし!いざワイヤーフレーム!

となると手が止まってしまう人も少なくないはず。

そんな時はひたすらサイトを見てください。
とにかくデザインをデザイナー視点で見てください。

イメージを形にするのは難しいかもしれませんが、ここがデザインの面白さだ!と私は思います。
1つのイメージでも人それぞれ形にするものは違ったり…!

ワイヤーフレームももちろんデザインですから、たくさんデザインに触れたほうが上手になると思います♪

ワイヤーフレームからサイトに

今回の架空サイトもワイヤーフレームを作って制作しています。

ただ私はワイヤーフレームは手書き派なので(提出するときはちゃんと作ります!!焦)、しかもめちゃくちゃ殴り書きなので…。

簡単に作ったものですが、実際のサイトと見比べてみてください。

おすすめ!ワイヤーフレーム作成ツール

先程申し上げた通り、私はワイヤーフレーム手書き派です。

ですが、クライアントさんに私の殴り書きをお見せするわけにもいかないので、ちゃんとワイヤーフレームは作るようにしています。

その時に使っていて、便利だなあと思うサービスがあるのでご紹介します!

Photoshopやillustrator等で作り慣れない人は、「ワイヤーフレーム作成ツール」で作るといいかも!

Cacoo


https://cacoo.com/ja/

私も普段はこれをよく使っています!
図形ツール、ボタン、アイコンなども充実しており簡単に作れます。
複数人で共有するときも便利です!

moqups

https://moqups.com/

これもcacooと同じように、図形ツール等が充実していて作成が簡単!

ほかにもいろいろツールはあるのですが、余談なのでここまでで。

最後に

ワイヤーフレームの大事さは伝わったでしょうか?

せっかくいいイメージをしていても相手に伝わらなければ意味がありません。
ワイヤーフレームはなあなあにしがちですが、デザインに少なからず影響します!
是非この機会にワイヤーフレームも上達してくださいね。

最後まで読んでいただき、ありがとうございました。

スポンサードリンク