日本システムテック様
- レスポンシブ
- コーポレートサイト
- 企業･団体
ホームページ制作の流れ
ここでご紹介するのは、お客様視点のお問い合わせ～公開までの流れのご紹介ではありません。
CUBEがどのような流れで制作を行っているかをご紹介します。
お客様が普段目にすることのできないCUBE社内の様子をお伝えできたらと
このコンテンツを作りました。
-
お客様よりお電話、
メールにてお問い合わせを
いただきます。お客様からは、電話またはメールでお問い合わせをいただきます。その際、業種などから判断しお客様に相応しい担当者が電話窓口となります。そして、簡単にサイトの目的や方向性など、ご要望やお考えをヒアリングしています。
-
オンラインまたは面会での
ヒアリング電話またはメールでお知らせいただいた概要を元に、オンラインもしくは対面で詳しくお話をお聞きします。
担当者からのコメント
お客様とお顔を合わせてお話しすると、やはりたくさんのことを知ることができます。
例えば電話で「カッコイイサイトが良い」というご要望をいただいたとき、お客様の仰る「カッコイイ」は一体何なのか…、それが直接ヒアリングをしていくと感じとることができ、理解できます。
また、お客様が事業にかける想いや、思い描く将来像、現状の任務など、さまざまな視点をお伺いできるため、より良い方法や将来を見込んだ方法を企画し提案するための、とても大切な材料となります。
お客様を知ることは、企画する上で最も重要だと感じています。 -
企画のための
社内ミーティングヒアリングを行った担当者がお客様のご要望をまとめ、社内のディレクター・デザイナーを交えてミーティングを行います。
ここで複数人のアイデアが出ることによって、斬新なアイデアが出たり、後々のプロジェクト進行にも、滞りのない情報共有が可能となります。担当者からのコメント
エンジニアも常々Webサイトの流行りやユーザービリティ・マーケティングなどの情報収集に対してアンテナを張り巡らせていますが、ここでこそやはり複数人が集まって話し合ったり、デザイナーならではの視点を発言してもらうことで、幅広い柔軟な発想が生まれます。
使用する技術も、よりよい見せ方も、便利な使い方も、新しいツールも、みんなの情報次第でたくさんのアイデアとなります。
ここで社内ミーティングがあることで、プロジェクト化したときには全員が「すでに知ってる」状態であり、非常にスムースな進行となります。 -
提案書、構成書、見積書の
作成お客様の業種や、お客様の持っていらっしゃるWeb業界の情報量に合わせて、見せ方や言葉遣いを変えて提案書を作成します。
よりシンプルに・より分かりやすい資料の作成をいつも心がけます。担当者からのコメント
単純にプランを「説明」するわけではなく、聞いてて楽しい「夢が持てる」、そんな想像力を掻き立てて聞くことができる提案書を作ることが大切だと考えています。
そのためには、ありのままを淡々と並べた提案書ではなく、見ていてワクワクできる新しい要素が詰まった提案書であるべきだと考えており、提案書の作成だけでも半日以上のボリュームを要することがあります。
しかし、その提案書は、プレゼンが終わっても捨てることのできない、愛着の湧いた大切な資料の一つとなります。 -
資料のご提出
お客様に提案資料・構成書・見積書を提出します。
ご提案内容は、ご説明しながら確認いただいています。
お顔を合わせてやりとりをすることで更に深いヒアリングが可能となります。担当者からのコメント
お客様に資料を提出するタイミングは、プレゼンテーションのタイミングです。
私たちの企画がどのようにお客様にマッチするか、毎回楽しみなタイミングでもあります。
私たちの企画がたたき台となり、更なるアイデアやご要望がお客様から出てくることも少なくありません。
私たちとお客様の考えが共有でき一つになることができるステップとして、この場で作成する議事録にはいつもより力が入ります。 -
社内ミーティング
（仕様決め・スケジュール
策定）受注に至るまでの、案件概要・プレゼン内容・お客様のご要望・提案内容を一通り共有します。
デザイナー・技術者・ディレクターを交えて、Webサイトの仕様を固め、制作スケジュール案を策定します。担当者からのコメント
受注に至るまでのお客様とのやりとりや、発注を決めていただいたきっかけになった提案内容には、色々な意見やアイデアや想いが詰め込まれています。
それをこれから制作に関わるメンバーにきちんと共有することで、チームの想いを一つにし、また、想いを共有することでここから先どのように制作するか、クリエイティブなアイデアが生まれてきます。
スケジュール案を策定しプロジェクトの成功に向かって走り出す、とても大切なステップのミーティングだと感じています。 -
ワイヤーフレームの制作と
お客様へのご説明ワイヤーフレーム（サイトの設計図）を制作し、どのページにどの情報を載せるかのミーティングを行います。
サイトの目的に合う構成にするためにこの段階で設計を固めていきます。担当者からのコメント
ワイヤーフレーム制作の段階では、まだデザインが施されていないため、お客様によっては判断材料としてはピンと来ない場合も見受けられます。
その場合にはできるだけ色を付けたり、写真を載せたりと見やすくなる工夫をし、直接全てのページをご説明します。
端末によって変わる見せ方や、JavaScriptによるアニメーションや動きがある場合もありますので、この段階でお客様と認識を共有することがとても大切です。気軽に質問いただき何でも遠慮なく言っていただけると、以降の制作がスムースに進みます。 -
トップページのデザイン制作
ワイヤーフレーム（サイトの設計図）に基づいて、お客様の強みや想いや色をデザインにしていきます。
サイトの基本となるトップページのデザインを一番に固めるステップです。担当者からのコメント
デザインを制作する際には、同業種や他業種のサイトをたくさん比較します。
またWebサイトだけではなく、あらゆる雑誌やモノを見ながら、いかに表現するかを練りながらデザインを作りだしていきます。
Webデザインの楽しさは、動きがあることでデザインに変化を付けることができる点です。動き方を加味しつつも、更新のしやすさやコンバージョンへの導線の強化ができるよう、単純に色を塗るだけのデザインではありません。
お客様に見ていただくまでには、デザインリーダーチェック・フロント担当者チェック・プロジェクトリーダーチェックが待っています。 -
お客様との
デザインミーティング制作したトップページデザインについて、お客様とデザインのミーティングを行いお客様のお考えと相違がないかをチェックし、お客様のご要望を更に引き出していきます。
担当者からのコメント
お客様にデザインをお見せする瞬間は、一番緊張します。
しかし、気に入っていただけた時には、疲れも吹き飛ぶ快感があります。
Webサイトもアクセスしてから3秒で運命が決まるように、この初回のパッと見た感想は、非常に大切な感覚になります。
ですのでお客様には、できるだけユーザーの気持ちになって見ていただくことをお伝えしています。
色の使い方や写真の使い方、仕組みの話なども踏まえて、デザインの説明をしています。 -
セカンドページの
デザイン制作決定されたトップページのデザインを元として、セカンドページのデザインを作っていきます。
各ページの導線がきちんと配慮されたデザインになっているかどうかがポイントです。担当者からのコメント
セカンドページのデザインは、トップページでデザインテイストが固まっているため、デザイン企画はあまりないのですが各ページが変わり映えしない単純なデザインにならないよう、ストーリー性を意識してデザインを制作しています。
このページを見るユーザーはこういう人だろう、こういう気持ちだろうという仮説を元に、導線を意識したデザインになるように考えます。
ウェブ解析士スタッフの意見や、先輩デザイナーの意見が非常に勉強になるステップです。 -
社内ミーティング
（デザインチェック）一通り制作が完了したデザインをもって、プロジェクトメンバー全員でミーティングを行います。全体的なデザイン、仕様、予定通りのデザインになっているかどうかの確認を行います。
また、コーディングメンバーとも動きや仕様を確認しながらミーティングを進めます。担当者からのコメント
見た目部分でのほぼ最終的な段階だけあって、全体を全員に見せるところはやはりドキドキする面もありますが、ここまできたら、お客様の想いも具体的になり、サイト目的に合う導線になっているかどうかについても、ユーザー視点でのチェックバックがもらえます。
またコーディングメンバーとも仕様を確認しながらのミーティングになるため、複雑な仕様になれば、勉強になることもしばしば。
誤字のミスや、更に改善できる内容もこの段階で見つけていきます。
次はいよいよお客様にご説明するステップです！ -
お客様へ
セカンドデザイン提出デザイン一式を全て提出し、お客様に見ていただくステップです。
デザインの意図や目的を理解していただけるよう、わかりやすく論理的な説明を心がけています。担当者からのコメント
お客様に全体を見ていただく時、私たちが心がけているのは、客観的視点を持って使いやすさ・分かりやすさを重点に見ていただくことです。
サイトを使うユーザーさんが、迷わず分かりやすくサイトを閲覧できて、且つ、お客様の意図する内容を明確にできていてきちんと導線ができているかどうか。
デザインの一つ一つをご説明しながら確認していくミーティングですが、お客様のご意見やご要望も、私たち作り手にとっては斬新であったりと新たな発見につながることも多々あります。
最終的に細部を調整してデザインは完成となります。 -
コーディング・
プログラミングデザインを忠実に、HTML化していく作業です。
繊細な動きやSEO対策に有利な美しい作り方はコーダーさんの腕の見せ所です。
CMS化したり、PHPなどのプログラミングもこの段階で行います。担当者からのコメント
デザインデータの段階では、一枚の画像としてページの模型がある状態ですが、コーディングすることにより、リンクができたり動きが出たりと、まさに自由自在のWebサイトに仕上がっていきます。
ご要望通りの動きを実装するために、ひたすらトライ＆エラーを繰り返すことも多いですが、思う通りに動いた時の感動は疲れも吹き飛びます。
出来あがったWebサイトを、プロジェクトチームの皆にも早く見せたいし、お客様にも早く触ってほしいと思う気持ちで、次々とページをコーディングしていきます。文法チェックも忘れずに！ -
動作確認・ブラウザチェック
対象のブラウザで、ズレなくきちんと表示できているか、仕様通りに動作しているかどうかをチェックする作業です。
一人だけの目に頼らず、必ず二人以上・タイミングや規模次第では社内全体で行っています。担当者からのコメント
動作確認を行うブラウザは、PCだけではなくスマホやタブレットも行っています。
最新バージョンのブラウザでチェックを行い、表示が崩れていないか確認しています。 -
操作説明・納品
CMSやECサイトなどの更新作業をお客様でできるシステムについては、操作説明会を開いています。また納品後も不明点がある時などにお気軽にご連絡いただける体制を取っています。
担当者からのコメント
納品時は、弊社メンバーもお客様も、ホッとした気持ちと共に、これからが本番！という意欲の時となります。
ホームページは作って終わりではなく、それをきちんと事業に活かしてこそ価値が出ます。何度も打ち合わせを重ね、心をこめて制作したホームページに価値を感じて使っていただけるように、私たちは公開後にもお客様にアドバイスをしながら運営をサポートし続けています。
社内で更新、広告で集客、新商品のキャンペーンなど、お気軽にCUBEにご連絡ください。
0120-829-943
相談・お見積依頼
担当者からのコメント
お問い合わせをいただいた際、お客様にはできるだけ話しやすく感じていただけるように、気を付けて応対しています。
初めてホームページを制作されるお客様、リニューアルをご希望のお客様、Webに関する専門的な知識が豊富なお客様、全くわからないとおっしゃるお客様など、本当にさまざまな業種のさまざまなお客様がいらっしゃいます。
きちんと、お客様の想いやご要望を伝えていただけるように、私たちも電話やメールのコミュニケーション力向上に努めています。