はじめまして、ヴォラーレ株式会社開発室WebデザイナーのSumireと申します。

最近ちょくちょく知り合いからWebデザインを教えて！と聞かれることがあります。私自身も学生時代そうだったのですが、Webデザインって独学で始めやすいものの、一体どういうフローでやるのが良いのかってなかなか掴みづらいですよね。実は現在、今お読みいただいている当社の開発室ブログももっと良い設計に出来るかもしれないという再検討をしており、リニューアルが進んでいます。そこで今日は簡単にですが、本ブログのリニューアルの背景を事例に、ユーザー視点に立ったWebデザインのフローを紹介しようと思います。

目次

1. Webサイトのコンセプトを固める
2. ユーザーシナリオを考える
3. ワイヤーフレームを書く
4. 仕上がりイメージを作る
5. コーディングする
6. ユーザーテストやアクセス解析で検証

1.Webサイトのコンセプトを固める

最初のステップでは、そのサイトで達成する目的と、どんなユーザーに来て欲しいのかといったターゲットユーザーを明文化することから始めます。
目的とターゲットユーザーが違えばサイトの階層構造やリンクの位置、デザインテイストまで全て変わってきますよね。そこでまず初めにこの大前提となる目的とターゲットユーザーを明確にすることは非常に大切です。

ブログなどを作る際は簡単に、以下の7点について明確にするようにしています。

1. サイト運営の目的：そのサイトを何のために作り運営するのか、ビジネス的な目標
2. サイト運営の目標：その目的が達成された時の状態を表す数字等
3. ターゲットユーザー：狙いたいユーザー像
4. ターゲットユーザーの目的：ユーザーは何を目的にこのWebサイトを訪れるのか
5. Webサイトのニーズ：ユーザーはこのサイトで何を必要としているのか
6. 競合：ユーザーニーズを埋めるような競合は既に存在するか
7. このサイトの強み：ニーズと競合から、自社にしか提供できない「強み」とは一体なんだろうか？

自分のサイトを作る際は上記の項目を全て自分で考えればいいのですが、
会社や学校、プライベートワークといった自分以外の人が関わるサイトの場合には、必ずそのプロジェクトのオーナーに細かくヒアリングをして上記項目を明確にし共有する必要があります。
また大規模サイトの場合はこの時点でWebサイト自体の仕様も一緒に決めてしまいましょう。（IE対応、Retinaディスプレイ対応、スマホ対応、等）

2.ユーザーシナリオを考える

Webサイトのコンセプトが決まったら次はユーザーシナリオを考えましょう。

先ほど決めたサイトコンセプトより次の2点を再度持ってきましょう。
このステップで考えるユーザーシナリオとは、ターゲットユーザーがどのようにしたらサイトの目的を達成するかという理想的なストーリーのことです。

当社のデザイナーはユーザーシナリオを以下のステップで作成しています。

1. ユーザーの行動ステップ
2. その行動ステップを取るときのユーザーの心理状態はどんなものか
3. その心理状態目標をとるとき、ユーザーはどんな行動をとるか
4. その行動をとらせるために、サイトを作る上でどのような戦略をとるべきか？

今回開発室ブログのユーザーシナリオは以下のように作ってみました。（以下のキャプチャは一部です）

大切なのは、サイト運営の目的を達成するにあたって、ターゲットユーザーはどんなステップを踏んだら目的を達成するか？という理想的なストーリーを考え明確にすることです。デザイン側で目的達成のためにできることもあれば、そもそもそのサイトのコンテンツから協力を得なければいけないこともあると思います。こういったユーザーシナリオを共有し、ディレクター、デザイナー、エンジニアみんなで設計、開発、サイト運営を行うことが目的達成への近道かなと考えています。

3.ワイヤーフレームを書く

弊社ではデザイナー以外も編集や閲覧、共有が簡単にできることからCacooでワイヤーフレームを作成しています。

今回はブログということですごいラフなのですが、2.で決めたユーザーシナリオに沿って作成しています。
※エンジニアもがっつり関わるプロジェクトの場合は、遷移や仕様まで書き込んだワイヤーフレームを作成します。（キャプチャは現在私が開発中のアプリのひとつの画面のワイヤーフレーム）

簡単なサイトの場合、ワイヤーフレームと仕上がりイメージを一緒にPhotoshopで作ってしまうこともありますが、最初からPhotoshopで作るとどうしてもフォントサイズや色など気になってきてしまうので、まずは最初にCacooや紙などで構成物の大きさやレイアウトなどを決めてしまうことをおすすめします。

4.仕上がりイメージを作る

ワイヤーフレームが完成したらそれを元に仕上がりイメージを作ります。仕上がりイメージを作成する際に使うソフトは、Photoshopを使用することがほとんどですが、IllustratorやFireworksを使うこともあります。（要は形ができればokです）

ボツになってしまった案ですが、現在リニューアル進行中の開発室ブログの仕上がりイメージの一例です。

5.コーディングする

さて仕上がりイメージができたらいよいよコーディング！今回はコーディングに関する具体的方法は割愛します。ブログの場合はwordpressを使うことが多いと思いますが、その際はまず静的なページを作成→その後wordpressのタグで置き換えていきます。
エディターはSublime textを使っている人が多い気が。プロジェクトによってはSassもGruntも使ってます！

6.ユーザーテストやアクセス解析で検証

実際にサイトを作成したらUI検証としてユーザーテストやアクセス解析で検証を行います。

駆け足になりましたが、簡単に上記6ステップでサイト作成がひと通り完了です！

弊社ではただきれいなデザインを作成すればいいのではなく、いかにユーザー視点に立つかというのを重視しており、最初の設計をしっかりすることがとても重要です。
Webサイトの設計に関しては以前私がセミナーを行った時のスライドをアップしているので若し良ければご参照ください！（少し前のセミナーなので今回紹介したものと若干内容が違う部分があります。）

そんなこんなで現在この、ヴォラーレ株式会社開発室ブログは絶賛リニューアル作業が進行中です！6月頭にはお披露目できるかと思いますので、お楽しみに！
また弊社ではこのようなユーザー視点にたったデザインをしたい！というWebデザイナーを絶賛募集中です。興味がある！という方は是非採用サイトをチェックしてください！:)