では、WEBサイトの作り方について、お伝えしていきます。
今回は全体の流れを把握するだけなので、読むだけでOKです。
作り方と言っても、技術の話ではありません。
WEBサイトの依頼を受けて、制作し、納品するまでの具体的な流れについてです。
どうやってWEBサイトを企画し、制作するか、ご存知無い方も多いはずです。
WEB制作をする時に、いきなりコーディングから始めるわけではありません。
なにも無いところから突然Photoshopでデザインするわけでもありません。
それらはむしろ、中盤以降の工程と言っても過言ではないのです。
WEBサイトは企画段階で5割近い時間を使います。
そして、原型が見えてきてから実際の制作に入ります。
では、どのようにして企画は進んでいくのでしょうか。
本日は実際にプロがWEBを受注し納品するまでの過程をご説明していきます。
何からWEBサイトを作って良いか分からない方は、ぜひ目を通してみてください。
受注したらまずはヒアリング
WEB案件の仕事が来たら、まずはクライアントさんにヒアリングをします。
どんなサイトを作りたいのか、意識をあわせていくんですね。
大切なのは、実際に作りたいサイトのイメージを合わせることです。
お互いに完成イメージがバラバラだと絶対にトラブルになります。
あらゆる手段を使って、お互いの完成イメージを一致させていきましょう。
このスタート地点が、最もWEBサイト制作で大事だったりします。
では、具体的にどんなことをヒアリングすれば良いのでしょうか。
項目を下記にまとめて見ましたので、参考にしてみてください。
- サイトを作る目的
- もっとも押し出したいコンテンツ
- 絶対に必要なページ
- メインカラーとサブカラー1色ずつ
- 格好いい、可愛い、などの抽象的イメージ
- カラーや印象にあわせた参考サイト3サイト(提案しながら一緒に選ぶ)
- ブログ機能(WordPress)の有無
- メールフォームの有無
- ソーシャルネットワークで活動していくか(それに伴うサイト提案)
- できれば今回の予算感
- 納期はいつか
- サーバーやドメインの管理はどこでするか
- 写真や文章素材はあるか
なかなか多いな、と思ったかもしれません。
でも、このくらい詰めて、やっとお互いの意思疎通が出来てきます。
逆に抜けていたら、あとからトラブルになる可能性のあるものばかりです。
少し時間とってしまうかもしれませんが、じっくり聞いていきましょう。
参考サイトはどれを見る？
ヒアリングの途中で、参考サイトを見ながらイメージを合わせましょう。
でも、どうやって参考サイトは見つければいいのか、迷いますよね。
そこで登場するのが、WEBデザインリンク集です。
WEBデザインを集めた便利なサイトがあり、そこからサイトを選んでいきます。
僕の場合、下記の3つを使っていますので、ぜひ参考にしてみてください。
色やテイスト別で、様々なサイトを見ることができます。
クライアントさんと一緒に、参考サイトを見ながらイメージの合うサイトを選びましょう。
ヒアリングしたテイストにあわせて「これはイメージに近いですか？」など話ながら伝えていきます。
クライアントさんの反応を見ながら、少しずつ、テイストを絞り込んでいきましょう。
サーバーやドメインの管理はどこでするか
サーバーとは簡単に言えば、データの置き場所です。
小型のハードディスクがたくさん置いてある場所と考えてください。
たくさんのサーバー会社があります。
僕たちはそれらの会社からサーバーの一部を借ります。
借りた一部の領域にデータを置かせてもらうのです。
WEBサイトは、データをサーバーにアップすることで公開できます。
なので、大抵の場合、サーバーは必須です。
ドメインとは、URLとも認識されており、WEBサイトの住所のようなものです。
ドメインを貸し出してくれる会社があり、それらの会社からドメインを取得できます。
もちろん、すでに取得されているドメインは、取得できません。
ドメインは、レンタルしたサーバーに繋ぐことで、サーバーの中身を見れるようになります。
逆にドメインがなければ、サーバー内のデータをブラウザから見ることはできません。
このようにWEBサイトを公開するにはドメインとサーバーが必要なのです。
もっと詳しく知りたい方はこちらのページからご覧ください。
基本的にはクライアントさんにサーバーやドメインは用意してもらうケースが多いです。
WEB制作を辞める時や、クライアントさんが別パートナーを見つけた時、引き継ぎ作業が面倒だからです。
また、何かサーバーで障害が起きたりしたら、常に問い合わせ対応をしなければなりません。
そのための管理費用をもらっても良いですが、WEB制作をメインで進めていきたいなら、おすすめはしません。
もしクライアントさんがサーバーやドメインについて知らなければ、一緒に取得してあげましょう。
クレジットカードなど必要なものがあれば、予め伝えておいてください。
写真や文章素材はあるか
基本的に写真や文章などは、クライアントさんに用意して頂きます。
もし、写真が存在しない場合はフリー素材を代用することが多いです。
主に下記のフリー素材サイトを利用すると良いでしょう。
フリー素材に目的の写真が無かった場合は、有料素材集を使ったりもします。
下記の有料素材集も安く、役立ちますので参考にしてみてください。
高額ではない単価で、素晴らしい素材が手に入ります。
もし素材集で物足りない場合はカメラマンにお願いします。
こういう時のために、カメラマンの友人がいるといいですね。
文章に関しては、ライターさんを呼んでくることが多いです。
または自分自身で書くことも多いですが、その場合は相応の費用を請求しましょう。
見積もりと簡単な資料をつくる
ヒアリングが終わったら、もらった情報を持ち帰り、簡単な資料を作ります。
資料は「ヒアリングの内容をまとめた資料」と「サイトマップ」の2つ。
まず、ヒアリングを元に「WEBサイトの企画」を作っていきます。
- 競合の分析とやっていること
- 市場やユーザーの傾向
- 上記にともなうWEBサイトの基本コンセプト
- トップページのみ簡単なワイヤーフレーム
- 外部からの集客動線設計
- スケジュール
- こんなのも作りませんか的アップセル
規模にもよりますが、ざっくり、このくらいあれば良いと思います。
ヒューリスティック分析や、4P、3Cといったフレームワークを使うと説得力が増します。
なお、まだ見積もりが通る前段階なので、作り込む必要はありません。
額が大きい場合は別で、時間をかけて企画を作る価値はあります。
例えば10ページで20万円〜40万円程度の金額であれば、ざっくりでOKです。
50万円〜100万円以上もらうのであれば、気合いを入れて作っても良いでしょう。
サイトマップとは、WEBサイト全体のページ数や構造を把握できる図です。
全体のページ数をしっかり把握できるようにしましょう。
ページ数の少ないサイトであれば、こんな感じになります。
あとは見積もりです。
基本的に、どれだけの時給で、どれだけの時間動くかを考えてみてください。
例えば時給5,000円の人が50時間動くのであれば、25万円です。
会社の場合、さらに人件費や設備費用などかかるので、2〜3倍することが多いです。
ここが個人と会社の差でもありますね。
外注さんにお願いする場合は、見積もってもらいましょう。
そこに自分の作業料金を上乗せして請求する形になります。
見積もりと簡単な資料を作ったら、クライアントさんに説明して、最終調整をします。
互いの要望などを厳密にすり合わせたら、いよいよ制作開始です。
ワイヤーフレームを作る
企画と見積もりが通ったら、今度はワイヤーフレームを作りましょう。
ワイヤーフレームとは先程も出てきましたが、WEBサイトの設計図のようなものです。
デザインは入っておらず、レイアウトと文章だけを配置します。
イメージとしてはこんな感じですね。
サイトマップにあるページは全ページ作りましょう。
予算が多い場合はPC版とスマホ版、安い場合はどちらか片方だけ作ればOKです。
ただ、予算が少ない場合、どちらか片方のワイヤーフレームやデザインは作りませんが、そのまま最後まで作らないわけではありません。
コーディングの際に直接作るのです。
例えばスマートフォン版のワイヤーフレームやデザインはしっかり作ります。
コーディングの際、まずはデザインを見て、スマートフォン版を作ります。
そのままスマートフォン版を元として、コーディングの際にPC版を直接作るのです。
当然デザインはありませんから、コーダーさんにお任せします。
なので、コーダーさんもこうした依頼に耐えられるよう、多少なりともデザインを知っておく必要はあるでしょう。
今の時代、どちらか片方が無いという選択肢はまずあり得ません。
ちなみにワイヤーフレームを作るツールは主にXDが基本です。
色々なツールが生まれていますが、やはりAdobe XDがワイヤーフレームを作る上で便利です。
PhotoshopやIllustratorでも良いですが、やはりXDを使いこなせたほうが、速度も速くなりますね。
ワイヤーフレームが完成したら、準備完了です。
クライアントさんと打ち合わせして全体を確認しましょう。
互いにレイアウトに関して抜けてるコンテンツが無いかどうか話あって、OKであれば先に進んでください。
デザインをしてからレイアウトの変更があると直すのが大変です。
ワイヤーフレームでOKが出たら、レイアウトは基本、変えられないことを伝えましょう。
WEBサイトをデザインする
ワイヤーフレームがOKとなったら、次はデザインです。
ただ、最初からすべてのページをデザインするわけではありません。
トップページのみデザインをして、テイストを確認するところからはじめましょう。
最初からすべてのページをデザインして「違う」となれば、全て作り直しです。
それでは2度手間になってしまうので、まずトップページだけ作り、確認してもらいます。
トップページだけを見せてOKが出たら、全ページ作り、提出しましょう。
ここまでくれば、もうコーディングを残すのみなので、あまり修正は無いはずです。
デザインは、一度作ると修正が大変です。
少しの色の差や、テイストの変更で、全体的に修正する必要さえ出てきます。
だからこそ、慎重に相手の反応を確認しながら進めていきましょう。
それが、最短でデザインを進めていく方法です。
コーディングする
デザインが終わってすべてOKが出たら、今度はHTML×CSSでコーディングします。
システム開発もWordPress化も、コーディングが終わらなければできません。
WEBサイト制作の流れの中で、コーディングまでくればあとは作業です。
淡々と、デザイン通りコーディングをして、まったく狂いなくデザインを再現しましょう。
よく「再現率」が「低い高い」なんて言葉で言われます。
コーディングで大事なのは、どれだけデザイン通りに作れたかです。
せっかくここまですべてクライアントにOKをもらったのです。
再現率が低ければ、意味がありません。
動きがある場合は、実際にクライアントに見せてチェックしてください。
WEBサイトにも様々な動きを導入するケースが増えてきました。
サイトを使う上での「触り心地」が重視されるようになってきたのです。
スマートフォンのアプリも、使っていて気持ちのいい動きがあるアプリも多いです。
動きは実際に作ってみなければわかりませんし、見せて調整するしかありません。
少しずつ見せて、微調整前提で作ってみましょう。
WordPress化やシステム開発をする
スケジュール上、しわ寄せが来やすいのがこちら。
他のスケジュールが遅くなり、かつ納期がずらせなかった場合。
最後のフェーズである開発にしわ寄せがいくパターンも多々あります。
そうならないようにスケジュールを調整するのは、ディレクターの必須スキルですね。
というわけで、最後のフェーズであるWordPress化やシステム開発。
仕様書通りに開発を仕上げ、これでようやく納品までたどり着けます。
もちろん、システム開発やWordPress化が無い場合は、今回のフェーズはありません。
納品までのスケジュールはなるべく余裕を持っておきましょう。
例えば、1週間くらいはスケジュールが遅れた場合の調整期間をつけるなどです。
こうした余分な時間をとっておくことによって、遅れても対応することが可能です。
すべての開発が終わったら、クライアントさんに使い方を伝え、納品しましょう。
確認し、OKだったら、請求書を出して終わりです。
大抵、WEB制作や開発の報酬が振り込まれるのは、締めた月の翌月末払いです。
長いところで、2ヶ月先というところもありますので、確認しておきましょう。
まとめ
以上が、基本的なWEBサイト制作の流れになります。
最初はゆっくりと確認しながら進めてみてください。
重要なポイントが抜けたり、コミュニケーションの不足があれば、すぐトラブルになります。
1つ1つ確認しながら、一歩ずつ進んでいきましょう。
受託でのWEB制作のポイントは、スキルもそうですが、制作の進め方にあります。
中でも、完成形をお互いにイメージ出来ていることです。
制作していくなかで、互いにイメージにブレが無いかを確認していきましょう。
こまめにコミュニケーションをとり、お互いに納得できるものを作ることが重要です。
また、無理なことは無理、出来ることは出来ると、しっかり意思表示をしてください。
クライアントさんは、要望があれば何でも言ってきます。
そのまま受け取っていくと、要望は無限に出てきますので、一生納品はできません。
何をやって何をやらないかを明示して、納品までたどり着きましょう。
思考を整理してあげることもまた、WEBデザイナーやディレクターの役目です。
馴れるまで、難しいことも多いかと思いますが、ぜひ、挑戦してみてください。
最初の作品を納品できた時、改めて仕事の面白さを実感できるはずです。