フリーランスのためのWEBディレクターの仕事について（まとめ）

■ WEBサイトのディレクションとは　（概要説明）

サイト制作のスケジュール管理、クライアントとの折衝などがメインで、WEBサイト制作の全般を管理するお仕事です。
場合によっては実際に制作の作業を行う場合もあります。（小規模なプロジェクトでは自分で手を動かすことが多いです。）

ここで紹介するスキルをなるべく身につけていると良いと思います。
（ただし、全部自分でできなくても良いです。最低限の知識は身に付けたいところです。）

仕事のやりがい（良いこと）

すべての作業が自分がイニシアチブをとってできる。
極端なこと言うと自分がやりたいようにできる。
場合によってはチームメンバーも自分で決められる。

仕事の苦労話（大変なこと）

WEBサイト制作の責任者なので、問題（お金とか納期とか）が発生した時に真っ先にお客さんに怒られる。
制作関係者（味方）にもどうなってるんだと責められる。
まさに中間管理職。

注意事項

• ここで書かれている通りにする必要はない。自分も相手見ながら制作の流れや見積もりを変えてます。（会社の規模や担当がどんな人かによる）
• 資料作りのテクニックとかコミュニケーションのテクニックとかはそれぞれ自分の個性に合わせて工夫が必要。
• この記事はWordPress（PHP）の利用を前提とした箇所が多々あります。
• 自分はデザイナーだからとか、プログラマーだから関係ないと思うかもしれませんが、フリーランスならディレクターほどではないにせよ、今回紹介するようなタスクをいくつか担当するケースは多々あります。
• 最終的にサイトが無事に公開できればOK！

■ 制作の流れ

1. 依頼を受ける
2. 概要のヒアリング
3. 見積もり（提出時に見積もりの根拠の説明）
   見積書以外にラフデザインとサイトマップ（サイト設計図）などをつける場合もある。
   ラフデザインを作るのが負担の場合は参考サイトを提示したりします。
4. 制作
   1. ヒアリング
   2. サイト構成の確定
   3. デザインの確定（後ほど書いていますが、クライアントの責任者の了承を得ます。）
   4. ローカル（自分のPC）でコーディング（HTML&CSS&JS）
      トップページと内部ページ１つくらい
   5. サーバ準備/コーディング（WordPressの設定）
   6. コンテンツ作成・入力
5. お客さんの校正
   下層ページの文章のチェックが主になります。
6. サイト設定のチェック
   公開に向けてCMSの設定のチェックをします。（CMSの設定head内の設定や、アクセス解析の設定など）
7. 公開（DNS切り替え・BASIC認証解除）

■ ディレクターに必要なスキル

• ヒアリング
• 見積もり
• デザイン
• ライティング・コピーライト
• フロントエンド、バックエンドの知識
  • HTML & CSS & JavaScript
  • PHP（Ruby,Pythonなどでも可）
• サーバの知識
  • WEBサーバの知識（Apache）
• DNS（ドメイン管理）
• アクセス解析
• 法律関係の知識
• スケジュール管理
• ドキュメント作成
• コミュニケーション

備考

• 細かいことは知らなくても良いし、自分で作業できなくてもなんとかなります。ただし、それぞれ基本的なことを抑えておくと、それぞれの見積もりがしやすかったり、進捗状況の把握もし易いです。 （プロジェクトに問題が発生した場合、何が原因でどれくらい時間とお金がかかるか、素早く見積もり、お客さんに説明が必要になります。）
• だいたいできると最悪自分で巻き取れると便利！

■ 制作のポイント・注意点（時間とお金の見積もり方法）

必要スキルで紹介した項目をそれぞれ詳しく説明していきます。

ヒアリング（見積もり前）

例として下記のようなことを確認し、書類にまとめ見積もりと一緒に提示する。

• 目的の確認（5W2H） 最低限誰が、誰に向けて（ターゲット）、どんな情報を提供するのか確認する。
• どのようなコンテンツが必要か
• どのような機能が必要か
  • CMSが必要か？HTMLのみの納品でOKか？
  • 新着表示をCMSで連携
  • WordPressの場合、カスタムが必要かなど。
  • 内部ページ（テンプレート）のサイドメニューのボタンをCMSと連携させる
  • トップページのスライドショーが必要とか、バナーボタンを動かすかなど。
  • スマホ対応をどうするか？
• どのようなデザインで表現するか（参考サイトの確認）
• 予算の確認（イニシャルとランニング）

ゴールの確認

サイト作って終わりか、公開後も改善を続けるのか？
また、サイトがどの状態になったら完成かをしっかり確認する。
WEBの場合、未完成でも公開する場合もあるので、一旦公開して、その後にページを追加したりする場合もあ利ます。
公開した時点で請求書が出せるように事前に確認しておくと良いです。（請求を2回に分けるなど）

見積

イニシャル（初期制作費）

以下、見積もり項目の例です。

• サイト企画・コンサルティング 打ち合わせの費用・交通費
• トップページデザイン
• トップページコーディング（HTML&CSS&JavaScript）
• レスポンシブ対応
  デザイン費用、コーディング費用
• WordPress 設定費用
• テンプレート設定
  デザイン費用、コーディング費用
• ヘッダー画像の制作費
• バナーボタン制作費用
• サーバ設定費用
• ドメイン取得・ドメイン移管手続き費用（DNS設定費用）
• メール設定
• 操作説明

備考・注意事項

• 対応ブラウザを明確にしておく
  例：　IE11, Edge（最新版）, Chrome（最新版）, Firefox（最新版）
  スマートフォンは 768px, 600px, 320pxをベースにレスポンシブデザインで対応する。
• JavaScriptをガッツリ書く場合は機能追加費用を別途見積る
• 細かい計算がお互いに大変な場合はトータル（例：デザイン一式）でいくらという形で提示するのもあり。
• チェックする画面サイズなど細かく詰めておくこと。
• 画像の使用範囲などを決めておくこと。（特にイラストのデザインをした場合の著作権など。）

ランニング（運用保守）

• サーバ利用料
• サイトデータのバックアップ
• 更新サポート（使い方の説明）
• セキュリティーサポート（例：サーバのアップデート、WordPressのアップデート）
• サーバのログ監視
• メールサポート

備考・注意事項

• サーバにお金がかかる概念がお客様もいらっしゃる。
• セキュリティーのアップデートに関する概念もない場合が多いです。
• 更新サポートとか、操作説明の費用はしっかりもらいましょう。
• 更新サポートの対応は電話よりもなるべくメールのみとかにした方がよいです。

見積もり全般の備考

• フリーランスの場合、保守の負担はなるべく軽く抑える方が良いです。
  （顧客が増えると保守ばかりになり新しい仕事が難しくなることがあります。）
• 逆に初期費用は抑えて、保守費用で儲ける考え方もあります。

ヒアリング（制作前）

• 見積もりと照らし合わせて、内容の最終確認。
• 追加で必要な作業が無いか確認。
  ここでもう一度サイトのコンセプトについて練り直す場合もある。
• デザインについて確認
  • デザイナーが直接ヒアリングしてイメージの共有するのが一番ありがたいです。
  • ディレクターが窓口になる場合、両方のイメージを理解できないといけない。
    お客さんのイメージを正しく理解し、デザイナーさんに正しく伝える必要があります。
  • WF（ワイヤーフレーム）を作る場合はデザイナーさんが作る場合もあるし、ディレクターが作る場合もあります。

デザイン

WEBデザイン、広告のデザイン、グラフィックデザインはそれぞれ違う
コンセプトに基づいた、なぜを説明できることが大事
説明ができないと、例えば意味不明な色変更を迫られる可能性もある。

デザイン案の提出数

3案提出（三択の法則案）する。 -> クライアントに選択した責任意識が発生する。
（人間は一度に判断できる数が3つくらいが適当）
全てオリジナルで作る必要はない。レイアウトやパーツを少し変えたり、色を変えて見る程度でOK
何案だすとか直しはどれくらいまでとかしっかり決めておく。（しっかり見積する）

もちろん自信があれば一案でもOK

コーディングに入る前に伝えること

担当に方に最終責任者に確認を取るように伝える。
デザインのどこが変更できて、どこができなくなるか伝える。

デザインが確定し、コーディングが始まるとあとはメールとか電話のやりとりでもうまく進む場合が多い。
内部のページもしっかりデザインして作成する場合は、中のページをどうするかで再度打ち合わせする場合もある。

よくある要注意パターン

担当ではOK -> 最後に社長の一言でひっくり返る。
最終決定者（社長とか）に必ず確認をする。

ライティング・キャッチコピー

ちょっとデザインと似てるかも。。
「好き」という気持ちを「好き」という言葉を使わずに伝える。

• 語彙を増やす努力
• 普段からよく広告を観察する
• マインドマップ

フロントエンド、バックエンドの知識

HTML & CSS & JavaScript
最低限自分でコーディングした経験がないと辛いかも。（趣味のページでも良いので）
最近React.jsとかVue.jsとか聞くけど、どんなものか概要がわかるとコーダーさんと会話がしやすいかも。
コーダーさんに任せてSPA（シングル ページ アプリケーション）で作成するとSEO的に厳しくなる可能性もあるので注意が必要。
コーダーさんがどのような技術（メリット、デメリット）を使っているか把握しときたいところ。

PHP
多分WordPressを使用することが多いと思うけど、どこのサーバで誰が設定して誰が管理するか明確に。
お客さんで設定して管理となると、あとで色々と問題が出る可能性もある。
（最悪お客さんがデータを壊してしまう可能性もある。）
PC変えたら、ログインできない。。FTP繋がらない。。

サーバの知識

上記、PHPと同じ問題を意識する必要がある。
WEBサーバの知識（Apache）の知識はそういうものがある程度で良いかも。興味があれば説明します。

DNS（ドメイン設定）

新規ドメインだったら割と簡単
ドメインを移管（引っ越し）する場合は要注意（属性によって移行方法が異なる場合も）
ドメイン移行時には事前にTTLを調整し、短時間で切り替えできるようにしておくことが望ましい。
（DNSの切り替えの場合、最大24時間程度かかる）

アクセス解析

SEOの知識、SEMの知識（キーワード広告の知識）
GoogleAnalytics、GoogleOptimaize（ABテスト）

法律関係の知識

画像の権利を確認 -> ネットのフリー素材は本当に商用利用して良いか確認
有料の画像の利用範囲を確認（再配布禁止など）
イラスト描いた場合、著作権はどうなるかも決めておく。
場合によっては似たようなキャラを他で描いてもめることも。
人が写ってる写真の許可など。
個人情報保護法の知識（フォームなどで個人情報を取得する場合や、プライバシーポリシーのページが必要だったり）

サーバ設定後から公開までの注意事項

• 出来上がったところからお客さんに確認してもらう
  まとめてチェックしてもらうのはお客さんの負担になり、チェック漏れになる場合も。
• BASIC認証をかけておく。（何かきっかけでGoogleの検索に引っかかるようになる場合もある）

■ 便利なツール

お客様、プロジェクトチームと情報共有するのに便利なツールを紹介します。

タスク管理

Trello
https://trello.com/

Redmine
http://redmine.jp/

Backlog
https://backlog.com/ja/

チャットツール

Slack
https://slack.com/intl/ja/signin

ChatWork
https://go.chatwork.com/ja/

ドキュメント管理

Google Drive（ドキュメント、スプレットシート）
https://www.google.com/intl/ja_jp/docs/about/

Google ドキュメントを使うとリアルタイムで同時に編集できるのでMTGしながら使用すると便利です！