web制作のプロが失敗しないWeb制作のフローを紹介！
こんにちは！
ITエンジニア・webディレクター・webデザイナーなどのIT人材の自立・キャリアを支援するITプロパートナーズのCTOの柳澤（やなぎさわ）です。
弊社は、独立精神旺盛な優秀なエンジニアの方々の独立・起業サポートや、フリーランス支援を行っている会社です。
こちらの弊社運営サイト、「スタートアップ開発ラボ STaP（スタップ）」では、企業の新規事業開発担当者の方や、システム開発責任者の方、事業責任者の方達に向けて、事業開発のコツや、自社プロダクトやWebサービスを立ち上げる際にポイントや注意点について、弊社ノウハウを包み隠さずにお伝えしています。
今回は、Web制作のフローをご紹介いたします。
「どのようなフローでWeb制作をしていけばいいのか？」
こういったお悩みをお持ちの方も多いのではないでしょうか？
この記事を読めば、基本的なWeb制作の流れを理解して、次のステップに進むことができるでしょう。
Web制作のフローの前に決めること
まずは、手を動かすよりも先に頭を動かします。
これから実際にWeb制作をおこなうにあたってのターゲットやペルソナ、全体のゴールを設定しましょう。
ペルソナとは、ターゲットよりもさらに踏み込んだ、具体的なユーザーのイメージのことです。
Webサイトのペルソナやゴールの設定
ペルソナについて
念のため、ペルソナの説明です。
例えば、「20代後半のネットサーフィンが趣味の男性」だけでは単なるターゲットですが、
「20代後半で大手出版会社に5年間務めており、多忙のため休日には外出することは少なく、ネットサーフィンが趣味の◯◯さん」のように、
ターゲットよりもさらに「どのようなユーザーか？」ということを具体的にイメージをしたものをペルソナといいます。
ペルソナは、そのユーザーを探せば、あたかも存在しているかのような具体性が求められます。
みなさんが想定しているペルソナを言語化して精査しましょう。
webサイトのゴールについて
ゴールのないマラソンなど存在しません。Web制作においても、ゴールを設定することは非常に重要だと言えます。
ゴールが定まっていないと、制作に携わるチーム全体の目的があいまいになってしまい、どこを目指したら良いのかがわからなくなってしまいます。
集客を強化したいのか、商品の認知度を高めるためなのか、ゴールを設定することが大切です。
以上のように、ターゲットやペルソナ、ゴールの設定はWeb制作を始めるにあたり非常に重要なことです。
コンセプトを決定して全体のことを決める
先ほど設定したターゲットやペルソナ、設定したゴールをもとに、ホームページのコンセプトを決定しましょう。
制作過程でのサイトデザインはもちろん、ローンチしてからしばらく経って、サイトリニューアルなどを考えた際にも、この全体としてのコンセプトが重要となってきます。
コンセプトが不明確だと、制作に携わるメンバー同士のイメージに相違があったり、リニューアルの際にどこをどう改善したら良いのかがわからなくなってしまいます。
わかりやすい例にするために飲食店を取り上げます。
例えば、飲食店のホームページ制作をする際は、
- 「恵比寿に構えるオシャレの代表格のお店」、
- 「新規のお客さんでも入ってきやすいようなお店」
- 「記念日利用の際などに、使いたくなるようなお店」
などコンセプトがはっきりしていると、そのホームページに対して、ユーザー目線と製作者目線が共通のものになります。
これはWeb制作においては非常に重要なことです。
ユーザーとの共通認識はもちろん、制作するチーム全体が同じイメージを持って制作に携われるためにも、コンセプトははっきりと決定しておきましょう。
では、次のステップについて見ていきましょう。
市場分析と調査を行う
ホームページの制作をおこなって参入する市場が、今どのような状態なのかを分析しておくことも重要なことです。
例えば、先ほどの例に挙げたような飲食店の昨今の市場は、
- 「インスタ映えする外観や内観、料理が求められる」
- 「ユーザー発信の写真や投稿によって新たなお客さんを呼び込める」
というような市場であることが推察できます。
これは「インスタ映え」という言葉が存在しなかった数年前とは、求められることががらりと変わっています。
必ず最新の情報を調査して、市場の分析をおこないましょう。
市場分析を怠ると、全く見当違いな方向に進んでしまう可能性が高くなります。
他者との差別化
また、競合他社とどのように差別化をするかという点も非常に重要となってきます。
差別化がうまくできないと、ユーザーとしては「どっちを選んでも同じ」と思われてしまい、せっかくホームページへ訪れたのに、アクションをせずに離れてしまうというような機会損失を招きかねません。
競合との差別化は明確であればあるほど良いので、そのためにも市場分析や調査はしっかりとおこないましょう。
ページの外観を決める
さて、ここからは実際にホームページ自体に着手する段階です。
「誰に何をどのように届けるか」というターゲット、ゴール、コンセプトが明確になったら、次はそのターゲットに設定したユーザーが少しでも長く滞在したくなるような、あるいは問い合わせたくなるようなページの外観を決めましょう。
そのためのステップをさらに細分化して見てみます。
Webサイトを制作する基本的な流れ
①サイトマップをつくる
まずはホームページ制作の柱となるサイトマップ（設計図）を作成しましょう。
例えば、実際に家を建てるというときなんかでも、設計図がないとイメージ通りの家が完成しませんよね？
Web制作においても、これと同じでサイトマップの作成は非常に重要なことなのです。
②ページのレイアウトを決める
ホームページの全体像となるサイトマップを作成したら次は、ページごとのレイアウトを決めます。
各ページに何を表示したいかというイメージのもと、ワイヤーフレーム（ページごとの設計図）をつくりましょう。
③導線を考える
サイトマップやワイヤーフレームを作成するにあたり重要なことは「どのような導線にするのか？」ということです。
導線とは、ユーザーがサイト内を見て回る道順のことです。
例えば、コンビニエンスストアなども利用者の導線を想定して設計されています。
あなたの自宅近くのコンビニエンスストアの内装を思い出してみてください。
多くのコンビニは入店した際、「雑誌コーナー→飲み物コーナー→食べ物コーナー」（あるいはその逆）という順で利用者の導線が考えられています。
そして、お店の中央にお菓子コーナーや筆記用具などのコーナーが設けられています。
「ついでに何か買っておくか」という意識を促すためです。
これらの導線はランチタイムなどにより顕著に表れます。
このように、普段何気なく利用するコンビニでさえ、きちんと利用者の動きを想定した導線が考えれています。
このように、導線を考えることはたとえWeb上であってもたいへん重要なことです。
パソコンの画面では、主にユーザーの視線は「左から右、上から下」に動きます。
また昨今では、スマートフォンの普及により「上から下」に視線を動かすといった導線が特に増えてきました。
パソコン表示とは別にスマートフォン用のページも必ず作成しましょう。
このように、ページの外観を決めるにあたっては、一番見せたいものを一番上に配置するなどの工夫が必要となってきます。
ユーザーが実際に使うときの動きを想定してレイアウトを組んでいきましょう。
これらを踏まえて、ターゲティングをした層が1秒でも長く滞在したくなるようなページの外観を作成しましょう。
総じて、いかにユーザーのことを考えて、ユーザー目線で捉えられるかがWeb制作においてキーポイントになります。
デザインの制作をおこなう
ここからはついに頭だけでなく、手を動かすことも必要になってきます。
先ほど作成したワイヤーフレームを元に、デザイン制作をおこなっていきましょう。
ホームページ内にロゴやバナーを取り入れる際は、
「そのデザインがどんな意味を持っていて、どのような効果を挙げてくれるか？」
ということを説明できるような明確な目的を持つことが重要です。
これらを考えることによって、
- 「ターゲティングをしたユーザーにリーチできそうか」
- 「ホームページのデザインを損ねていないか」
- 「ネガティヴイメージにつながっていないか」
などを客観的に見ることができます。
作成したサイトマップをもとにして、忠実なサイトデザインをおこなっていきましょう。
システム開発に着手する
次に、フロントエンドとバックエンドのシステム開発をしていきます。
一応簡単に説明します。（わかる方は次のステップに進んでください。）
フロントエンドとは？
サイト内の検索・サーチ機能や、サイトのデザインを含めたユーザー視点の視覚的要素を指します。
主にユーザーから見える視点（ユーザーインターフェース）などがフロントエンドと呼ばれます。
主に、HtmlやCSS、JavaScriptが使われます。
バックエンドとは？
バックエンドとは、ユーザーからは見えない顧客情報の管理や集計機能のことを指します。
フロントエンドの入力データをもとに結果の出力や、記録媒体に保存したりするなどの処理をおこないます。
ECサイトに例えるなら、ユーザーがサイトを利用する際に使う商品の検索機能や、お買い物リスト、ショッピングカートに入れるなどの機能をフロントエンドと言い、ユーザーからは見えない、開発者が管理している各ユーザーの顧客情報や、ページの閲覧履歴、おすすめ商品の紹介など、裏側で処理をおこなわれているシステムをバックエンドと言います。
このシステム開発はどちらもユーザーにとっては大切な部分ですので、抜け目のないようそれぞれの作業を並行して開始しましょう。
動作確認・検証をおこなう
最後に動作確認・検証をおこないましょう。
「このページからこのぺージをクリックしたらちゃんと飛べるか」
「バナーなどが正しい位置に表示されているか」
など、それぞれのページ・機能が正常に動いているかを確認します。
パソコンやスマートフォン表示はもちろん、それぞれのブラウザで動作確認をおこないましょう。
もう少し詳しく見てみます。
ブラウザのチェック
ブラウザはグーグルクロームやインタネットエクスプローラー、サファリなどさまざまなものがあり、それぞれでチェックします。
ユーザーによって利用しているブラウザは異なるので、複数のブラウザを通して、各ページが正しく表示されているか確認しましょう。
テストサーバーで確認する
ローカルの開発環境で開発した場合は、製作者しかアクセスできない状態になっています。
誰でも閲覧できる状態にするには、サーバーにアップロードをおこなってきちんとアクセスできるか確認しなければなりません。
ぶっつけ本番でいきなり公開状態にすると、リンクが切れてしまっていたり、違うところにアクセスしてしまったりする可能性があるため、必ずテスト環境のサーバーで正常に動くかどうかのチェックを行います。
ユーザーにとっては、一度訪れたサイトやホームページで不具合を感じると二度と訪れようとしません。
必ず複数のブラウザでチェック、テストサーバーで動作の確認をおこなってから公開状態にしましょう。
まとめ
いかがでしたか？
開発環境や、製作者の人数に応じて手順は多少変わってはきますが、一般的な流れは以上となります。
制作したWebページは開発者とユーザーの橋渡し的な場所です。
そのため、自分が作りたいホームページをつくっただけでは、開発者の自己満足で終わってしまいます。
システムの開発はもちろん、前段階のペルソナやゴールの設定、コンセプトの設定は非常に重要で、ここを曖昧にすると崖に向かってWebサイトの制作が進んでしまうことになります。
ユーザーにとって有益なサイトだと認知してもらえるような工夫を施し、より綿密にアイデアを組んで、ユーザーが何度も訪れたくなるような自分の思い描いたWeb制作を行いましょう。
