あんこ&ちゃんこブログ

夫婦でWebデザイン・子育て・デートレポを発信するブログ。

ホームページ案件受注~納品までに必要なスキルと手順のすべて

ホームページを作る仕事で必要なスキルと手順

 

どうも、現役Webディレクターの「あんこ(夫)」です!

今回は「ホームページ案件受注~納品までに必要なスキルと手順のすべて」についてです。

デザインやコーディング以外にもWebディレクターとのやり取りなども含めて紹介します。

 

 

【未経験者~中級Webデザイナー向けのシリーズ記事】
第1弾:Webデザイナーとはどんな仕事?未経験でも大丈夫?将来性は?すべて答えます

第2弾:Webデザイナーが就活・面接で内定をもらうために絶対押さえておきたい6つのポイント

第3弾:面接で好印象・内定確率を上げるポートフォリオの作り方

第4弾:給料・年収の不安を解消!お金に困らずにWebデザイナーをやる方法

第5弾:Webデザイナーが「残業無し・定時あがり」で仕事をするコツ

第6弾:デザインの表現力を格段に上げるたった2つの習慣!

第7弾:このデザイン最初からやり直し!と言われないようにする方法

第8弾:デザインセンス不要!「デザインが不得意な人向け」Webデザイナーの必勝法

第9弾:Webデザイナーもコーディングスキルは必要?どのレベルまで覚えれば良い?に答えます

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

第11弾:ホームページ案件受注~納品までに必要なスキルと手順のすべて

第12弾:Webデザイン好き、という最強の武器があれば何も心配いらない説(2018/11/14 公開)

  

では、本題へ入ります!

 

ホームページを作るにはどんなスキルが必要か

コーポレートサイトやブランドサイトなどのホームページ制作案件を受注~納品するまでに必要なスキルをリストアップします。

 

①お客さんへのヒアリング
②見積もり作成
③スケジュール作成
④画面構成
⑤デザイン制作
⑥レンタルサーバー契約、設定
⑦コーディング、サーバーアップ

 

フリーランスになればこれら制作以外の業務も全て自分でやるか、誰かとチームを組んで業務分担をして仕事をします。

 

企業に勤める場合は一般的にはディレクターからデザイン、コーディングの仕事を振ってもらって対応するため、①②などを経験することは少なくなります。

 

次はWebデザイナー兼マークアップエンジニアとして、ホームページ制作をするために必要なスキルをリストアップします。

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

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

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

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

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

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

✔納期の希望はあるか

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

 

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

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

 

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

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

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

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

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

 

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

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

・・・

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

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

 

ここ分からないな~

変だな~

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

 

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

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

 

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

 

嫌ですよね。

事前に回避しましょう。

 

⑤デザイン制作

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

2)画像加工

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

 

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

 

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

 

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

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

 

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

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

 

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

 

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

 

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

 

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

 

4)バナー作成

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

✔作業環境の確認

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

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

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

 

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

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

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

 

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

 

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

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

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

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

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

 

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

 

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

 

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

 

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

 

【お知らせ】

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

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

 

おわり!あんこ(夫)