webデザイン初心者のプログラマ-がワイヤーフレーム作成

Webサイトのワイヤーフレームをつくることになった。

PHPやRubyを使って普段仕事しているので、デザインから関わるのは初めて。
つくったことがなかったので、「ワイヤーフレームのこと」と「つくり方」を調べてみた。

ワイヤーフレームって

「Webサイトをつくるために必要なデザインの下書き」や「デザインの設計図」だそうです。
どういう情報をWebサイトに載せるかを話合ったうえで、情報を配置して、デザインしていきます。そのため、ワイヤーフレームを作る前にどんな情報をサイトに表示するかだいたい決めておく必要あり。

ワイヤーフレーム作成手順

1．市場・競合調査

自分たちの参入しようとしている市場の調査を行います。
そして自分たちの考えているサービスを既に提供している競合を調べます。
サービス内容・価格帯などだいたいおさえておくと参考になります。
（調べた情報はファイルにまとめておきます）

2．Webサイトに載せる情報をだいたい決める

考えていることや、調べた情報をもとに話合いましょう！

「なぜ」「なにを」「誰に」を中心のトピックに話をしているうちに
だいたい方向が決まってきます。

3．情報を整理する

5W2Hの考え方で情報を整理してみる。

1. What（何を）
2. When（いつ）
3. Where（どこで）
4. Why（なぜやるのか）
5. Who（対象）
6. How（どうやって）
7. How much（料金）

xmindを使って上記の5W2H情報を整理すると
より視覚的にわかりやすいです。

HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
ウェブさえ

4．デザインのイメージをふくらます

アピールするポイントはアイコンで強調し、よりイメージが湧きやすいように写真を入れ
押しやすいようにボタンのサイズを大きくするなどの工夫で見やすくなっていく。

        分野によって求められるデザインが違うのではと思うので、
        自分の分野で求められるデザインの基本を洗い出しておく。
        ⇒こういうテンプレートサイトの「Categories」で自分に合った分野をチェック

        3,4つの競合サイトをチェックする。
        ⇒共通点や必要な情報をチェック

5．prottでデザインをつくる

prott    高速でアイディアを動く形に、チームの力を最大限に活かすプロトタイピングツールです。

ワイヤーフレームをつくるのにさまざまなツールがありますが
自分はいろいろ試してみて、これが使いやすかったです。

以上です。話合った内容をツールを使って整理しながら、考えながらとりあえずつくってみます。実際に目で見える形にして、また修正しながらブラッシュアップしていくことで、よりイメージに近くなるのではないでしょうか。