Flow of creating Webサイト制作の流れ

ここでご紹介するのは、お客様視点の問合せ~公開までの流れのご紹介ではありません。
キューブがどのような流れで制作を行っているかをご紹介します。
お客様が普段目にすることのできないキューブ社内の様子をお伝えできたらとこのコンテンツを作りました。

STEP01 お客様よりお電話、メールにてお問い合わせを頂きます

お客様からは、電話又はメールでお問い合わせを頂きます。
その際、業種などから判断しお客様に相応しい担当者が電話窓口となります。
そして、カンタンにサイトの目的や方向性など、ご要望やお考えをヒヤリングさせていただいています。

担当者よりひとこと

お問い合わせを頂いた際、お客様にはできるだけ話しやすく感じていただけるように気を付けて応対をさせていただいています。
初めてホームページを作成されるお客様も、リニューアルをご要望のお客様も、Webに関する専門的な知識が豊富なお客様も、また、全くわからないとおっしゃるお客様も、ほんとうに様々なお客様・様々な業種がいらっしゃいます。
きちんと、お客様の想いやご要望を伝えていただけるように、私たちも電話やメールのコミュニケーション力向上に努めています。

STEP02 面会でのヒヤリング

電話またはメールでお知らせいただいた概要を元に、実際に面会頂き詳しくお話をヒヤリングさせていただきます。

担当者よりひとこと

お客様に実際にお会いすると、やはり沢山のことを知ることができます。
例えば電話での「カッコイイサイトが良い」というご要望を頂いた時
そのお客様の仰る「カッコイイ」は一体何なのか…、それがお会いすると感じることができ理解できます。
また、お客様が事業に掛ける想いや、思い描く将来像、現状の任務など、様々な視点をお伺いできるため、より良い方法や将来を見込んだ方法を企画し提案できる、とても大切な材料となります。
お客様を知ることは、企画する上で最も重要だと感じています。

STEP03 企画のための社内ミーティング

ヒヤリングを行った担当者がお客様のご要望をまとめ、社内のディレクター・デザイナーを交えてミーティングを行います。
ここで複数人のアイデアが出ることによって、斬新なアイデアが出たり、
後々のプロジェクト進行にも、滞りのない情報共有が可能となります。

担当者よりひとこと

フロント側の担当者も常々Webサイトの流行りやユーザービリティ・マーケティングなどの情報収集に対してアンテナを張り巡らしていますが、
ここでこそやはり複数人が集まって話し合ったり、デザイナーならではの視点を発言してもらうことで、幅広い柔軟な発想が生まれます。
使用する技術も、よりよい見せ方も、便利な使い方も、新しいツールも、みんなの情報次第で沢山のアイデアとなります。
ここで社内ミーティングがあることで、プロジェクト化したときには全員が「既に知ってる」状態であり、非常にスムースな進行となります。

STEP04 提案書、構成書、見積書の作成

お客様の業種や、お客様の持っていらっしゃるWeb業界の情報量に合わせて、見せ方や言葉遣いを変えて提案書を作成します。よりシンプルに・より分かりやすい資料を作成できるかを毎回チャレンジしながら作成します。

担当者よりひとこと

単純にプランを「説明」するわけではなく、聞いてて楽しい「夢が持てる」、そんな想像力を掻き立てて聞くことができる提案書を作ることが大切だと考えています。
そのためには、ありのままを淡々と並べた提案書ではなく、見ていてワクワクできる新しい要素が詰まった提案書であるべきだと考えており
提案書の作成だけでも半日以上のボリュームを要することがあります。
しかし、その提案書は、プレゼンが終わっても捨てることのできない、愛着の湧いた大切な資料の一つとなります。

STEP05 資料のご提出

お客様とご面談頂き、提案資料・構成書・見積書のご説明をさせていただきます。
提案内容は、やはりきちんとお会いしてお伝えするようにしております。
お会いすることで更に深いヒヤリングが可能となります。

担当者よりひとこと

お客様に資料を提出するタイミングといえば、プレゼンテーションをさせていただくタイミングということになります。
私たちの企画がどのようにお客様にマッチするかが毎回楽しみなタイミングでもあります。
私たちの企画がたたき台となり、更なるアイデアやご要望がお客様から出てくることも少なくありません。
私たちとお客様の考えが共有でき一つになることができるステップとして、この場で出た議事録にはいつもより力が入ります。

STEP06 社内ミーティング(仕様決め・スケジュール策定)

受注に至るまでの、案件概要・プレゼン内容・お客様のご要望・提案内容を人と鳥共有します。
デザイナー・技術者・ディレクターを交えて、Webサイトの仕様を固め、制作スケジュール案を策定します。

担当者よりひとこと

受注に至るまでのお客様とのやりとりや、発注を決めていただいたきっかけになった提案内容には、色々な意見やアイデアや想いが詰め込まれています。
それをこれから制作に関わるメンバーにきちんと共有することで、チームの想いを一つにし、また、想いを共有することでここから先どのように制作するかのクリエイティブなアイデアが生まれてきます。
スケジュール案を策定しプロジェクトの成功に向かって走り出す、とても大切なステップのミーティングだと感じています。

STEP07 ワイヤーフレームの作成とお客様へのご説明

ワイヤーフレーム(サイトの設計図)を作成し、どのページにどの情報を載せるかのミーティングを行います。
サイトの目的に合う構成にするためにこの段階で設計を固めていきます。

担当者よりひとこと

ワイヤーフレーム作成の段階では、まだデザインが施されていないため、お客様によっては判断材料としてはピンと来ない場合も見受けられます。
その場合にはできるだけ色を付けたり、写真を載せたりと見やすくなる工夫をし、直接全てのページをご説明させていただきます。
端末によって見せ方が変わるレスポンシブや、Javascriptによるアニメーションや動きがある場合もありますので、この段階でお客様と認識を共有させておくのは、とても大切です。気軽に質問いただき何でも遠慮なく言って頂けるのもこの頃からが多いかもしれません。

STEP08 トップページのデザイン作成

ワイヤーフレーム(サイトの設計図)に基づいて、お客様の強みや想いや色をデザインにしていきます。
サイトの基本となるトップページのデザインを一番に固めるステップです。

担当者よりひとこと

デザインを作成する際には、同業種や他業種のサイトを沢山比較します。
またWebサイトだけではなく、あらゆる雑誌やモノを見ながら、如何に表現するかを練りながらデザインを作りだしていきます。
Webデザインの楽しさは、動きがあることでデザインに変化を付けることができる点です。動き方を加味しつつも、更新のしやすさやコンバージョンへの導線の強化ができるよう、単純に色を塗るだけのデザインではありません。お客様に見ていただくまでには、デザインリーダーチェック・フロント担当者チェック・プロジェクトリーダーチェックが待っています。

STEP09 お客様とのデザインミーティング

作成したトップページデザインについて、お客様とデザインのミーティングを行い
お客様のお考えと相違がないかをチェックし、お客様のご要望を更に引き出していきます。

担当者よりひとこと

お客様にデザインをお見せする瞬間は、一番緊張します。
しかし、気に行って頂けた時には、疲れも吹き飛ぶ快感があります。
Webサイトもアクセスしてから3秒で運命が決まるように、この初回のパッと見た感想は、非常に大切な感覚になります。
ですのでお客様には、できるだけユーザーの気持ちになって見ていただくことをお伝えしています。
色の使い方や写真の使い方、仕組みの話なども踏まえて、デザインの説明をさせていただいています。

STEP10 セカンドページのデザイン作成

決定されたトップページのデザインを元として、セカンドページのデザインを作っていきます。
各ページの導線がきちんと配慮されたデザインになっているかどうかがポイントです。

担当者よりひとこと

セカンドページのデザインは、トップページでデザインテイストが固まっているため、デザイン企画はあまりないのですが
各ページが変わり映えしない単純なデザインにならないよう、ストーリー性を意識してデザインを作成しています。
このページを見るユーザーはこういう人だろう、こういう気持ちだろうという仮説を元に、導線を意識したデザインになるように考えます。
ウェブ解析士スタッフの意見や、先輩デザイナーの意見が非常に勉強になるステップです。

STEP11 社内ミーティング(デザインチェック)

一通り作成が完了したデザインをもって、プロジェクトメンバー全員でミーティングを行います。
全体的なデザインの確認、仕様の確認、 予定通りのデザインになっているかどうかの確認です。
また、コーディングメンバーとも動きや仕様を確認しながらミーティングを進めます。

担当者よりひとこと

見た目部分でのほぼ最終的な段階だけあって、全体を全員に見せるところはやはりドキドキする面もありますが、ここまできたら、お客様の想いも具体的になり、サイト目的に合う導線になっているかどうかについても、ユーザー視点でのチェックバックがもらえます。
またコーディングメンバーとも仕様を確認しながらのミーティングになるため、複雑な仕様になれば、勉強になることもしばしば。
誤字のミスや、更に改善できる内容もこの段階で見つけていきます。
次はいよいよお客様にご説明するステップです!

STEP12 お客様へセカンドデザイン提出

デザイン一式を全て提出し、お客様に見ていただくステップです。
デザインの意図や目的を理解していただけるよう、わかりやすく論理的な説明を心がけています。

担当者よりひとこと

お客様に全体を見ていただく時、私たちが心がけているのは、客観的視点を持って使いやすさ・分かりやすさを重点に見ていただくことです。
サイトを使うユーザーさんが、迷わず分かりやすくサイトを閲覧できて、且つ、お客様の意図する内容を明確にできていてきちんと導線ができているかどうか。デザインの一つ一つをご説明しながら確認していくミーティングですが、お客様のご意見やご要望も、私たち作り手にとっては斬新であったりと新たな発見に繋がることも多々あります。
最終的に細部を調整してデザインは完成となります。

STEP13 コーディング・プログラミング

デザインを忠実に、HTML化していく作業です。繊細な動きやSEO対策に有利な美しい作り方はコーダーさんの腕の見せ所です。
CMS化したり、PHPなどのプログラミングもこの段階で行います。

担当者よりひとこと

デザインデータの段階では、一枚の画像としてページの模型がある状態ですが、コーディングすることにより、リンクができたり動きが出たりと、まさに自由自在のWebサイトに仕上がっていきます。
ご要望通りの動きを実装するために、ひたすらトライ&エラーを繰り返すことも多いですが、思う通りに動いた時の感動は疲れも吹き飛びます。
出来あがったWebサイトを、プロジェクトチームの皆にも早く見せたいし、お客様にも早く触ってほしいと思う気持ちで、次々とページをコーディングしていきます。文法チェックも忘れずに!

STEP14 動作確認・ブラウザチェック

対象のブラウザで、ズレなくきちんと表示できているか、仕様通りに動作しているかどうかをチェックすする作業です。
一人だけの目に頼らず、必ず二人以上・タイミングや規模次第では社内全体で行っています。

担当者よりひとこと

動作確認を行うブラウザは、PCだけではなくスマホやタブレットも行っています。ブラウザバージョンごとのチェックも行い、それぞれの見え方に違いがないかどうか確認しています。
ブラウザのシェア率なども常々確認をしていて、ターゲットユーザーの年代にもよって、対象ブラウザの提案も行います。

STEP15 操作説明・納品

CMSやECサイトなどの更新作業をお客様でできるシステムについては、操作説明会を開かせていただきます。
また納品後も不明点がある時など気軽にお問い合わせいただける体制を取っています。

担当者よりひとこと

納品時は、弊社メンバーもお客様も、ホッとした気持ちと共に、これからが本番!いう意欲の時となります。
ホームページは作ったから終わりではなく、それをきちんと事業に活かしてこそ価値が出ます。
何度も打合せを重ね、心をこめて制作したWebサイトに価値を感じて使っていただけるように、私たちは公開後にもお客様にアドバイスをしながら運営をサポートし続けています。
社内で更新・広告で集客・新商品のキャンペーン、様々な内容でお気軽に弊社にご連絡ください。

サイト運用の流れ