ホームページ案件受注～納品までに必要なスキルと手順のすべて - 「あんこ＆ちゃんこ」の子育て・Webデザインブログ

①ディレクター経由で仕事の内容を整理する
②工数計算してディレクターに報告
③ディレクターの作るスケジュールに問題がないか確認する
④ディレクターの作る画面構成を見て不明点があれば確認する
⑤デザイン制作
⑥レンタルサーバー契約、設定
⑦コーディング、サーバーアップ

⑤～⑦だけの仕事になると思われた方もいらっしゃるかもしれませんが、実は他にもやることがあります！

①～④は意外と苦手な人もいますが、習得すれば効率が良くなり、作業時間が増えて、最終的にはホームページのクオリティが高まります。

⑤のデザインパートが得意な人だけど、⑥～⑦のコーディングパートが苦手な人は、コーダーやマークアップエンジニアと呼ばれる職種の人と組めるなら問題ありません。

では、①～⑦のスキルについてさらに詳しく説明します。

①ディレクター経由で仕事の内容を整理する

以下の項目を確認しておくとデザインが進めやすくなると思います。

✔コーポレートサイト、ブランドサイトなどサイトの種類は何か

✔下層ページはどんなページを作るのか（コンセプト、会社概要、お問い合わせとか）

✔WordPressを使うなど何か投稿機能、更新機能を入れる予定か

✔レスポンシブサイトなのかPC／SPでHTMLファイルを分けるのか

✔クライアントの修正は多そうか、ブランドチェックが厳しそうか

✔現時点でどんなデザイン要望が出ているのか

✔納期の希望はあるか

✔どんなチーム体制でやるのか

②工数計算してディレクターに報告

仕事内容を確認したところで、デザインに〇時間、コーディングに〇時間と工数を見積もってみましょう。

工数の見積もりのコツは、

✔トップページのテンプレートデザインに〇時間 + 修正〇時間

✔Ａページのテンプレートデザインに〇時間 + 修正〇時間

✔Ｂページのテンプレートデザインに〇時間 + 修正〇時間

✔トップページのバナー１枚〇時間 × 〇枚 = 〇時間 + 修正〇時間

✔トップページのテンプレートコーディングに〇時間 + バグやIE対応〇時間

✔Ａページのテンプレートコーディングに〇時間

・・・

と細かい単位で時間を出してディレクターに報告することです。

出来る限り正確な見積もりが出せると自分が作業に入る時に楽になります。

また、テンプレートやトップページは修正が入る可能性が高いので何時間か時間をプラスしておきましょう。

もし経験が浅くてまともな工数にならない時は経験豊富な先輩に相談してみましょう。

③ディレクターの作るスケジュールに問題がないか確認する

工数を出した後はディレクターがスケジュールを作成します。

他の案件もあるから１日４時間でスケジュールを組んで欲しいなど希望があれば事前に伝えておきましょう。

組んでもらったスケジュールの中で、この日はこの稼働時間取るのが難しいなどがあれば、代わりにここの日に多く入るなど、ディレクターに調整の相談をしましょう。

ディレクターも不本意で納期が変えられない場合、制作スケジュールが全体的をタイトになっていることもあります。

１人で間に合わない場合は、２人体制にしてもらうなど事前にチーム編成をするか、予定している他の案件を先伸ばしにしてもらうような相談をすると良いでしょう。

④ディレクターの作る画面構成を見て不明点があれば確認する

ディレクターは性格・経験値・得意分野によってクオリティが変わりますし、単純に抜け漏れしてしまったなどの人的ミスもあり得ますし、構成が完璧ではない時もあるので過信しないようにしましょう。

ここ分からないな～

変だな～

と思った時は質問しましょう。

1)トーン＆マナーは決まっているか

制作するホームページが飲食系、美容系、雑貨系、ファッション系など業界によってデザインのテイストが変わってきます。

また、シニア向け、女性向け、男性向けなど読み手のターゲット層によってフォントサイズやコンテンツの出し方も変わってきます。

トーン＆マナーが決まっていないようであれば参考サイトを元にディレクターと話し合いましょう。

普段から様々な業界のホームページを沢山見たり、デザインが良いと思ったらURLをブックマークしたり、画面キャプチャを取ってストックしておくとこういう時に役立ちます！

2)サイトとして足りないページはないか

お問い合わせページの構成が無いなど一部忘れられていたり、簡単なページだから構成作ってないなどの理由で足りないページがあるかもしれません。

お互いの認識齟齬があると修正回数も増えてしまうので、他のサイトのキャプチャに赤入れする形でも良いので何かしら足りないページについてもイメージを共有してもらいましょう。

早めに指摘すればトップページをデザインしている間に構成を準備できるので問題にはなりません。

3)レスポンシブ化しやすい構成か

レスポンシブ化の要望があった時の話ですが、レスポンシブ化しやすい構成になっているかどうかデザインする前に確認しましょう。

コーディングの知識が無くて判断できない場合は、マークアップエンジニアに意見をもらう形で確認を取りましょう。

デザイン中もしくは終わった後に、レスポンシブ化出来ないデザインだと発覚してデザイン修正が入ってしまったら自分が大変になります。

嫌ですよね。

事前に回避しましょう。

⑤デザイン制作

ここまで来るのに色々な工程を踏んで長いなと思った方もいると思いますが、あまり確認せずいきなりデザインに入ってしまうと後が大変です。

こうじゃない、ああじゃないと言われ修正の荒しになったり、デザインがとっ散らかっていてクオリティが低くクライアントが不満に思うかもしれずデメリットだらけです。

ですので、しっかり準備が整ったところで以下のデザインに取り掛かりましょう。

1)分かりやすい＆見やすいデザイン

ホームページのデザインをする時は、閲覧目的（＝お問い合わせさせるなど）を果たすためにデザインする必要があり、文字・バナー・ナビゲーションなどにデザインをあてる時は可読性、視認性を高める工夫が必要です。

ユーザービリティ―改善とかＵＩデザインなどとも言います。

例えば、以下のような「分かりやすくなる＆見やすくなる」デザインテクニックがあります。

✔ターゲットや用途に応じて適切なフォントサイズを選ぶ
✔目立たせたい重要なボタンはコントラストを強めにする
✔キャッチコピーなどの目立たせたい文字はジャンプ率を高めに設定する
✔グルーピングをつかって要素の配置を整理する

使いにくい＆見にくいサイトはデザイナーとして１番まずいので、まずはこのテクニックを駆使して形にしましょう！

また、構成段階でボタンなどの配置が決められていたとしても、明らかに位置を変えた方が使いやすければ、ディレクターと会話しながらデザインで調整するのも良いと思います。

2)画像加工

Photoshop（フォトショップ）を使って画像加工をします。

背景に使用するテクスチャを作成したり、人や商品などの写真の見栄えが良くなるように補正したり、必要な部分だけ画像を切り抜くトリミングを行って、バナーやサイトへの飾り付け素材として使います。

Webデザインの表現を磨いていくにはこのフォトショップでの加工技術は必須です。

以前書いた以下の記事が参考になると思います。

★デザインの表現力を格段に上げるたった２つの習慣！

3)イラスト作成、アイコン作成

Illustrator（イラストレーター）を使ってイラストやアイコンを作ることがあります。

僕は絵が得意ではないし、作るにしても慣れてないので時間もかかって割に合わないので、極力素材サイトからダウンロードして使っています。

普段から素材サイトをまとめておいてどんな素材があるか見ておくと良いと思います。

また、社内でイラストやアイコン制作が得意な人に頼むか、個人に仕事を依頼できるWebサービスも充実しているので、外部に発注するのも手かなと思います。

外注の場合はディレクターと要相談しましょう。

4)バナー作成

サイトが出来上がって来てからになりますが、必要に応じてサイト内に貼るバナーや、外部メディアに広告として貼るバナーの作成をすることがあります。

バナーについての構成書やデザインレギュレーションが決まっていなければ、考えるのが大変になるので、どんな写真を使うか、どんなキャッチコピーを使うか、何を目立たせたいかなど不明点をディレクターから指示をもらったり、相談しながらデザインしましょう。

バナー１枚作るにしても構成が決まっていないと時間がかかってしまうので要注意です。

⑤レンタルサーバー契約、設定

ホームページをネット上で公開するにはレンタルサーバーの契約が必要で、ディレクターやさらに上の決裁権のある上司が契約することになります。

レンタルサーバーを契約するとサイトにアクセスする時のURL（ドメイン）が手に入ります。

ただし、この時のURLは仮のURLであって、通常だと独自ドメインというものを別途契約してサイトのURLとして使います。

通常は次の内容から関わることになると思います。

FTP情報やサーバー管理画面へのログイン情報などをもらって、

✔作業環境の確認

✔ファイルのアップ方法確認

✔ベーシック認証をかける（サイトにアクセス時ログイン画面を出す）

くらいの対応になると思います。

⑥コーディング、サーバーアップ

コーディングとその勉強方法については以前の記事に書きました。

★Webデザインとコーディングの両方をやりたい人におすすめの勉強法

おおまかにコーディング作業を分けると以下のようになります。

✔CSSのことは考えずにHTMLでマークアップする

✔各エリアにidやclassをつける

✔デザインしたものをスライスして画像にしておく

✔idやclassとCSSを紐付けていきレイアウトを組む

✔各ブラウザで確認して崩れているブラウザがあれば修正する

作ったHTML/CSS/画像などのファイル一式は、レンタルサーバーへアップします。

WinSCPやFFFFTPなどの無料ファイルアップツールにてFTP情報を設定すればレンタルサーバーにアップ出来るようになります。

アップ出来たら各ブラウザで崩れていないか確認して問題なければ納品となります。

長くなりましたが、「ホームページ案件受注～納品までに必要なスキルと手順のすべて」でした！

【お知らせ】

ツイッターではWebデザイナー、Webディレクター、マークアップエンジニア向けに呟いていますのでフォロー頂けると嬉しいです( ´▽` )ﾉ

あおさん@Webディレクター (@anko_aosun)

おわり！あんこ（夫）