Webデザイン

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

o_wani
この記事は作成から8年以上経過しているため、内容が古くなっている可能性があります。

web-wireframe

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.デザインのイメージをふくらます

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

1. 自分の分野のデザインをチェック

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

2. 競合サイトのデザインをチェック

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

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

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

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

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

STAFF
o_wani
o_wani
スタッフ
大学卒業後、15年間WEB業界で働く。現在はマネジメントに従事していますが、ChatGPTの登場に触発され、このブログを再開。AIをパートナーに、自分で手を動かして実装する楽しさと喜びを再発見中。時代が変わりつつある中でも、陳腐化しない情報発信も目指しています。
記事URLをコピーしました