Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

サイト制作のスケジュール管理、クライアントとの折衝などがメインで、WEBサイト制作の全般を管理する人。
場合によっては実際に制作の作業を行う場合もある。
ここで紹介するスキル全てができると良い。
ただし、全部自分でできなくても良い。最低限の知識は身に付けたいところ。

大変なこと

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

良いこと

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

注意事項

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

■ 制作の流れ

  1. 依頼を受ける
  2. 概要のヒアリング
  3. 見積もり(提出時に見積もりの根拠の説明)
    見積書以外にラフデザインとサイトマップ(サイト設計図)などをつける場合もある。
    ラフデザインを作るのが負担の場合は参考サイトを提示する
  4. 制作
    1. ヒアリング
    2. サイト構成の確定
    3. デザインの確定
    4. ローカルでコーディング(HTML&CSS&JS)
      トップページと内部ページ1つくらい
    5. サーバ準備/コーディング(WordPressの設定)
    6. コンテンツ作成・入力
  5. 内部・お客さんの校正
  6. サイト設定のチェック
  7. 公開(DNS切り替え・BASIC認証解除)

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

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

備考

  • 細かいことは知らなくても良いし、自分で作業できなくてもなんとかなる。
  • ただし、サイトを公開するにあたり、最低限の知識は必要。
  • プロジェクトに問題が発生した場合、何が原因でどれくらい時間とお金がかかるか、素早く見積もりができることが重要(お客さんに説明が必要)
  • 最悪自分で巻き取れると便利

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

ヒアリング(見積もり前)

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

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

ゴールの確認

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

見積

イニシャル(初期制作費)

  • サイト企画・コンサルティング 打ち合わせの費用・交通費
  • トップページデザイン
  • トップページコーディング(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/

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away