「ワイヤーフレーム」というWebサイトの設計図を作りました

元ルーコみずの*

2012年05月22日 20:19

こんばんは、少し間が空いてしまいました。。が、モトハウスさんとのやりとりは続いていますよ!

ソーシャルとは少し離れますが、Webサイト制作の行程のひとつをご紹介します。「ワイヤーフレーム」というWebサイトの設計図を作りました。

と、そのまえにおさらいから

なにかしら、Webを使ってしようとする場合、最初にすることはお話を聞くことです。基本中の基本です。そこでまず目的を決めます。(した。)

その後、どんな情報をどこで発信しどうやって見せるかということを二人で話し合ったのが、このとき書いた内容です。

このときはプロトタイプ(試作)の作成をしました。おかんさんは具だくさんのとん汁みたいな(うまいっ)と表現されていたものですね(笑)

(今回の場合は、かなりラフです汗 念のため。。あと、今回はトップページのみなので1枚ですが、複数のページを作ることももちろんあります。)

紙で作ることのメリットには、こんなことがあります。

そして、これを、すっきりと見やすい形にするとこうなります。

新Webサイト ワイヤーフレーム

すごくシンプルですね。でも、これだけでも情報は伝わるので、機能的には問題ないかと思います。この段階で、機能的な部分に問題がないかをチェックする役割もあります。

ただ、「機能的には問題かもしれないけど、味気ないじゃん」という声が聞こえてきそうです。はい、そこで次のステップがあるのですね。

次の行程は??

次は、見た目(ビジュアル)をデザインする行程に入っていきます。

例えば、カワイイ、美しい、元気!、スタイリッシュ、暗めで落ち着いた・・などなど。機能的なものに人間味を持たせるといえばわかりやすいでしょうか。

黄色やオレンジを使っていれば、明るくて元気そうな印象がありますよね。緑は落ち着いたイメージ。形も丸っこくすればやわらかいイメージです。人間で言えば服装(やお化粧)ですね。

それを、まず話を聞いて、話し合って、言葉にして、からの、見える形にするという流れです。

さてさて、どんなキャラクター(人間味)を持ったサイトになっていくのでしょうか・・?


関連記事