» BASE91詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら

WEBサイトができるまで。WEBサイト制作の流れ

知識と経験|2018年11月07日

2018年11月07日
  • このエントリーをはてなブックマークに追加

今回は、WEBサイトの作り方について、お伝えしていきます。
といっても、HTML×CSSのような技術の話ではありません。
WEBサイトの依頼を受けて、制作し、納品するまでの具体的な流れについてです。
案外、どうやってWEBサイトを企画し、制作するか、ご存知無い方も多いのではないでしょうか。

実際、WEB制作をする時に、いきなりコーディングから始めるわけではありません。
なにも無いところから突然Photoshopでデザインするわけでもありません。
それらはむしろ、半分より先の工程と言っても過言ではないのです。

WEBサイトは企画段階で5割近い時間を使います。
そして、原型が見えてきてから実際の制作に入ります。

では、どのようにして企画は進んでいくのでしょうか。

本日は実際にプロがWEBを受注し納品するまでの過程をご説明していきます。
何からWEBサイトを作って良いか分からない方も多いと思いますので、ぜひ目を通してみてください。

受注したらまずはヒアリング

WEB案件の仕事が来たら、まずはクライアントさんにヒアリングをします。
どんなサイトを作りたいのか、意識をあわせていくんですね。

大切なのは、実際に作りたいサイトのイメージが、共通しているということです。

お互いに完成イメージがバラバラだと絶対にトラブルになります。
あらゆる手段を使って、お互いの完成イメージを一致させていきましょう。
このスタート地点が、最もWEBサイト制作で大事だったりします。

では、具体的にどんなことをヒアリングすれば良いのでしょうか。
項目を下記にまとめて見ましたので、参考にしてみてください。

  • サイトを作る目的とゴール
  • もっとも押し出したいコンテンツ
  • 絶対に必要なページ
  • メインカラーとサブカラー1色ずつ
  • 格好いい、可愛いなどの印象
  • カラーや印象にあわせた参考サイト3サイト(提案しながら一緒に選ぶ)
  • ブログ機能(WORDPRESS)の有無
  • メールフォームの有無
  • ソーシャルネットワークで活動していくか(それに伴うサイト提案)
  • できれば今回の予算感
  • 納期はいつか
  • サーバーやドメインの管理はどこでするか
  • 写真や文章素材はあるか

なかなか多いな、と思ったかもしれません。
でも、このくらい詰めて、やっとお互いの意思疎通が出来てきます。

逆に抜けていたら、あとからトラブルになる可能性のあるものばかりです。
少し時間とってしまうかもしれませんが、じっくり聞いていきましょう。

参考サイトはどれを見る?

WEBデザインリンク集という便利なサイトがあり、そこからサイトを選んでいきます。
僕の場合、下記の3つを使っていますので、ぜひ参考にしてみてください。

色やテイスト別で、様々なサイトを見ることができます。
クライアントさんと一緒に、参考サイトを見ながらイメージの合うサイトを選びましょう。
ヒアリングしたテイストにあわせて「これはイメージに近いですか?」など話ながら伝えていきます。
クライアントさんの反応を見ながら、少しずつ、テイストを絞り込んでいきましょう。

サーバーやドメインの管理はどこでするか

基本的にはクライアントさんにサーバーやドメインは用意してもらいます。
例えば、自分がWEB制作を辞める時や、クライアントさんが別パートナーを見つけた時の作業が面倒だからです。

おまけに、何かサーバーで障害が起きたりしたら、常に問い合わせ対応をしなければなりません。
そのための管理費用をもらっても良いですが、僕は経験上面倒だったので、おすすめはしないです。

もしクライアントさんがサーバーやドメインについて知らなければ、一緒に取ってあげましょう。
クレジットカードなど必要なものがあれば、予め伝えておいてください。

写真や文章素材はあるか

基本的に写真や文章などは、クライアントさんに用意して頂きます。
もし、写真が存在しない場合はフリー素材を代用することが多いです。
僕は主に下記のフリー素材サイトを利用しています。

フリー素材に目的の写真が無かった場合は、有料素材集を使ったりもします。
僕の場合、下記の有料素材集を使っているので参考にしてみてください。
そんなに高額ではない単価で、素晴らしい素材が手に入ります。

もし素材集で物足りない場合はカメラマンをアテンドします。
こういう時のために、カメラマンの友人がいるといいですね。

文章に関しては、ライターさんを呼んでくることが多いです。
または自分自身で書くことも多いですが、その場合は相応の費用を請求しましょう。

見積もりと簡単な資料をつくる

ヒアリングが終わったら、もらった情報を持ち帰り、簡単な資料を作ります。
資料はヒアリングの内容をまとめたものと、サイトマップの2つ。
まず、ヒアリングを元にWEBサイトの企画を作っていきます。

  • 競合の分析とやっていること
  • 市場やユーザーの傾向
  • 上記にともなうWEBサイトの基本コンセプト
  • トップページのみ簡単なワイヤーフレーム
  • 外部からの集客動線設計
  • スケジュール
  • こんなのも作りませんか的アップセル

規模にもよりますが、ざっくり、このくらいあれば良いと思います。
ヒューリスティック分析やらよくある4P、3C的なフレームワークを使うとそれっぽくなります。
MECEなど、よく使いますが、個人的には状況整理できる程度であまり意味は無いかなとは思っていますが。
なお、まだ見積もりが通る前段階なので、そこまで作り込む必要はありません。

額が大きい場合は別で、それだけ時間をかけて企画を作る価値はあります。
例えば10ページで20万円〜40万円程度の金額であれば、ざっくりでOKです。

そして、サイトマップは全体のページ数をしっかり把握できるようにしましょう。
ページ数の少ないサイトであれば、こんな感じになります。

あとは見積もりです。

基本的に、どれくらいの時給の人がどれだけの時間動くかを考えてみましょう。
例えば時給5,000円の人が50時間動くのであれば、25万円です。
会社の場合、さらに人件費や設備費用などかかくので、2〜3倍することが多いです。
ここが個人と会社の差でしょうか。

外注のデザイナーやエンジニアさんにお願いする場合は、しっかり見積もってもらってください。
そこに自分の作業料金を上乗せして請求する形になります。

見積もりと簡単な資料を作ったら、クライアントさんに送って説明して、最終調整をしましょう。
互いの要望などを厳密にすり合わせたら、いよいよ制作開始です。

ワイヤーフレームを作る

企画と見積もりが通ったら、今度はワイヤーフレームを作りましょう。
ワイヤーフレームとは先程も出てきましたが、WEBサイトの設計図のようなものです。
デザインは入っておらず、レイアウトと文章だけを配置します。

イメージとしてはこんな感じですね。
サイトマップにあるページは全ページ作りましょう。

予算が多い場合はPC版とスマホ版、安い場合はPC版だけ作ればOKです。
予算が低い場合、そこまで時間をかけられないので、コーディングの際にスマホ版も同時に作ります。
レスポンシブであることは基本なので、無いという選択肢はまずあり得ません。

ちなみにワイヤーフレームを作るツールは主にXDが基本です。
色々なツールが生まれていますが、やはりAdobeのXDがワイヤーフレームやプロトタイプを作る上で最上級です。
PhotoshopやIllustratorでも良いですが、やはりXDを使いこなせたほうが、速度も早くなりますね。

ワイヤーフレームが完成したら、クライアントさんに見せて打ち合わせしましょう。
互いにレイアウトに関して抜けてるコンテンツが無いかどうか話あって、OKであれば先に進んでください。

デザインをしてからレイアウトの変更があると直すのが大変です。
ワイヤーフレームでOKが出たら、レイアウトは基本、変えられないことを伝えましょう。

WEBサイトをデザインする

ワイヤーフレームがOKとなったら、次はデザインです。

ただ、最初からすべてのページをデザインするわけではありません。
トップページのみデザインをして、テイストを確認するところからはじめましょう。

最初からすべてのページをデザインして「違う」となれば、全て作り直しです。
それでは二度手間になってしまうので、まずトップページだけ作り、確認してもらいます。

トップページだけを見せてOKが出たら、今度は全ページ作り、提出しましょう。
ここまでくれば、もうコーディングを残すのみなので、あまり修正は無いはずです。

デザインは、一度作ると習性が大変です。
少しの色の差や、テイストの変更で、全体的に合わせて修正する必要さえ出てきます。

だからこそ、慎重に相手の反応を確認しながら進めていきましょう。
それが、最短でデザインを進めていく方法です。

もし、まだデザインについて分からない方は、上記で練習してみてください。
何度も繰り返すことで、きっと良いデザインが出来るようになるはずです。

コーディングする

デザインが終わってすべてOKが出たら、今度はHTML×CSSでコーディングします。
システム開発もWORDPRESS化も、コーディングが終わらなければできません。

WEBサイト制作の流れの中で、コーディングまでくればあとは作業です。
淡々と、デザイン通りでコーディングをして、まったく狂いなくデザインを再現しましょう。
よく再現率が低い、高いなんて言葉で言われますが、大事なのはどれだけデザイン通りに作れたかです。
せっかくここまですべてクライアントにOKをもらっているのに、再現率が低ければ、意味がありません。

とにかく印象を変えず、再現率をあげていきましょう。

動きがある場合は、実際にクライアント交えてチェックしてください。
スライドショーやスクロールすると動くパララックスなど、様々な動きを導入するケースが増えてきました。

動きは実際に作ってみなければわかりませんし、見せて調整するしかありません。
少しずつ見せて、修正しやすいように作ってみましょう。

もし、まだコーディングについて分からない方は、上記で練習してみてください。
何度も繰り返すことで、再現率の高いコーディングが出来るようになるはずです。

WORDPRESS化やシステム開発をする

もっともスケジュール上、しわ寄せが来やすいのがこちら。
例えば、他のスケジュールが遅くなり、かつ納期がずらせなかった場合です。

こういったケースになると、最後のフェーズである開発にしわ寄せがいくパターンも多々あります。
そうならないようにスケジュールを調整するのは、ディレクターの必須スキルですね。

むしろ、それが何年やっても出来ないならディレクター辞めた方がいいと思います。
というより辞めた方がみんな幸せになれると思うんです。

というわけで、最後のフェーズであるWORDPRESS化やシステム開発。
仕様書通りに開発を仕上げ、これでようやく納品までたどり着けます。

もちろん、システム開発やWORDPRESSが無い場合は、1つ前のフェーズで終わりです。

納品までのスケジュールはなるべく余裕を持っておきましょう。
例えば、1週間くらいはスケジュールが遅れた場合の調整期間をつけるなどです。
こうした余分な時間をとっておくことによって、少しずれこんでもなんとか対応することが可能です。

すべての開発が終わったら、クライアントさんに使い方を伝え、納品しましょう。
確認し、OKだったら、請求書を出して終わりです。

大抵、WEB制作や開発の報酬が振り込まれるのは、締めた月の翌月末払いです。
長いところで、2ヶ月先というところもありますので、予め確認しておきましょう。

まとめ

以上が、基本的なWEBサイト制作の流れになります。
最初はゆっくりと確認しながら進めてみてください。

重要なポイントが抜けたり、コミュニケーションの不足があれば、すぐにトラブルになりがちです。
1つ1つ確認しながら、一歩ずつ進んでいきましょう。

受託でのWEB制作のポイントは、スキルもそうですが、制作の進め方にあります。
中でも、何ができるかをお互いにイメージ出来ていることです。

制作していくなかで、互いにイメージにブレが無いかを確認していきましょう。
こまめにコミュニケーションをとり、お互いに納得できるものを作ることが重要です。

また、無理なことは無理、出来ることは出来ると、しっかり意志表示をしてください。

クライアントさんは、要望があれば何でも言ってきます。
そのまま受け取っていくと、要望は無限に出てきますので、一生納品はできません。
何をやって何をやらないかを明示して、しっかりと納品までたどり着きましょう。
思考を整理してあげることもまた、WEBデザイナーやディレクターの役目です。

なれるまで、なかなか難しいことも多いかと思いますが、ぜひ、挑戦してみてください。
最初の作品を納品できた時、改めて仕事の面白さを実感できるはずです。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら