ISARA

【iSARA6期/Day 12】WEBディレクション講座

2019年12月11日

バンコクのノマドエンジニア育成講座『iSARA』の5期生で、フリーランスWEBエンジニア兼

iSARAの書記係（勝手に）のへぼちゃんずです。

Day 12は『WEBディレクション講座』です。

5期の『WEBディレクション講座（60分）』からアップデートされ過ぎたので、今回（なんと3時間！）別記事としてまとめました（※一部、内容が重複してます）。

» プログラミングスクール「iSara」に興味のある人が最初に見るべきブログ

TOTO
TOTO
クライアントの要望がイマイチ掴めない…
GIGLIO
GIGLIO
デザインの大幅な変更でなかなか作業ができない…

講師は、えーちゃん（@amazing8160）さんです。

1年以上フリーランスのWEBディレクターとして活動していましたが、

現在はMakersbankにてセールスを担当しています。

Makersbankとは…100名超のリモートワーカーを抱えるスタートアップWEB制作会社

この記事を読むメリット

  • WEBディレクターの業務が体系的に学べる
  • 労働時間が減り、収入が増える
  • ヒアリングから納品までの流れがスムーズになる
  • 継続案件がもらえる

WEBディレクション講座【iSARA6期/Day 12】

ディレクターへのステップアップ方法と必要スキル

  1. ステップ方法
  2. 心構え・大切なマインドセット
  3. 主なディレクション業務
  4. WEBディレクターになる手順
  5. ディレクションで使えるツール
  6. デザイナー/コーダーの集め方
  7. 実例紹介（オフレコ）
  8. 案件が制作途中で流れたら…

ステップ方法

WEB業界のフリーランス構造

画像引用元：StockSun株式会社の代表ブログ

コーダー ≒ デザイナー ‹ ディレクター ‹ UIUXデザイナー ‹ UIUXディレクター

と上のレイヤーに行くほど「労働時間を減らし、収入を増やす」つまり、効率的に稼ぐことができるようになります。

フリーランスとして生きていくなら、このレイヤーを上げていくことを強く薦めると、えーちゃんさんは言います。

そしてディレクターは開発者（デザイナーやエンジニア）のように専門スキルがいらないので、様々なビジネスに横展開できます。

心構え・大切なマインドセット

ディレクターのスキルで成果物の9割が決まる。

  1. クライアント・開発者・自身（自社）の価値を最大化し、全員の幸せと価値享受を最大化する
  2. クライアント・開発者に『尊敬・敬いある態度と発言をする』『相手の成功に尽くせる自分であるかを常に振り返ること』
  3. クライアントの期待値を超えて『満足』、期待値を大きく超えて『感動』、期待値を下回ることが『不満足』
    └ 絶対値ではなく、人の満足度は期待値との相対値。期待値を超える仕事を意識する

①全員の幸せと価値享受を最大化する

  • 対開発者：意義のある報酬とデザイン業務を提供して、彼・彼女らの生活や人生を豊かにする
  • 対クライアント：求める事業やデザインのゴールを支援して、プロジェクトの目標を達成する
  • 対自分：収益と実績（顧客満足）の最大化により、自身への価値還元（自己成長による他者への価値提供）を最大化すること。また、それによって自らの人生を豊かにすること

②尊敬・敬いある態度と発言をする

クライアントや開発者が『彼女の両親』だったとしても、その態度・発言・提案はベストか？違和感はないか？を常に振り返り、改善し続ける。

  • 対開発者：良いところは伝え、改善があれば真摯に伝える
  • 対クライアント：求める事業やデザインのゴールを支援して、プロジェクトの目標を達成する

やりたくない仕事を押し付けないようにしている、とえーちゃんさんは言います。

これは自分自身に対しても言えることで、フリーランスはワガママで（仕事を選んで）OKです。

また、良いモノには感謝やリスペクトを伝え、同時に成果物が要件に満たない場合はキチンと伝えましょう。


ビジネスライクになる必要はなく、適度に「絵文字」や「笑い」を入れても良いでしょう。

開発者の方から提案してもらう関係性を作ることが大切です。

そのために普段から「イケてるサイト」や「新しい海外のサービス」などをシェアして、一緒に価値観をアップデートしておきましょう。

ディレクション業務（対開発者）

  • コミュニケーションスキル：提案を引き出しやすい関係性作り
  • 仕事のアサイン：案件性質から適切な人選を行う
  • 品質管理：クライアントの期待値まで引き上げる
  • スケジュール＆タスク管理：クライアントの期待値までを上回る

③人の満足度は絶対値ではなく、期待値との相対値

対クライアント

  • 相手の求めている期待を超えることが仕事において必須
  • 豊富なデザイン知識やディレクション経験以上に『期待値を超えられるコミュニケーション・アウトプットができるか』

満足度の原点は『相手が何を期待しているか』を常に考えることです。

相手が求めているデザインイメージを参考サイトなどで明確化し、

相手が求めている『アウトプット × スピード』を意図的に超えることで、クライアントの満足度も100%を超えます。

また、クライアントのリテラシーにあった言葉選びが基本です。

  • WEBサイト → ホームページ
  • レスポンシブ → スマホ対応
  • ワイヤーフレーム → デザインのレイアウト

『相手に負担をかけさせない』という意味では、

  • ヒアリングしながら、こちらでヒアリングシートを埋める（相手に書かせない）
  • ヒアリングシートを書いてもらう場合も、すでに知っている項目はこちらで記入しておいたり、不要な項目を非表示にして渡す

徹底的に相手の立場に立った言動を心掛けています。

ディレクション業務（対クライアント）

  • 期待値/認識の調整：ヒアリング力
  • 要件定義：デザイン/コーディングしやすい定義
  • 進捗報告：小まめな現状共有と業務連絡
  • 提案：判断力（軌道修正）と提案力
  • スケジュール＆タスク管理：クライアントの都合で遅延させない
  • コミュニケーションスキル：対話/通話/チャット

主なディレクション業務

ディレクション業務（永久保存版）

  1. 契約書締結＆請求書発行
  2. 要件確定
  3. デザイナー/コーダー調整＆決定 → 着手
  4. スケジュール＆タスク策定
  5. デザイン初稿チェックバック → 提出
  6. デザイン修正（多くて2回ぐらいまで）
  7. デザイン確定
  8. コーディング初稿
  9. コーディング初稿チェックバック → 提出
  10. コーディング修正（多くて2回ぐらいまで）
  11. 最終確認（修正点/エラー・ブラウザ表示・動作確認など）
  12. 納品

えーちゃんD的Tips

スケジュール管理

  • 進捗報告はここまでやるか、ぐらいやった方が良い（フリーランスは信用されてない）
  • 『即回答』は無理でも、『即レス』はできる
  • デザイナーには期限を3営業日ほど前倒しで伝えておく
  • 納期の1週間前に上げるのを基本とする
  • たとえクライアントの都合で作業が遅れても、納期は遅れさせない

品質管理

  • 求められている要素を可能な限りビジュアルで把握＆ログ（証拠）を残す
  • それを具現化できるデザイナーの選定は必須であり、妥協しない
  • 常に期待値を超える基準で意思決定を行う
  • 名前で呼ぶ、感謝を伝える、顔文字を入れる。など相手に適したコミュニケーションを心掛ける
  • 大幅に変更させない『提案力』 and 『断るスキル』 or 『追加請求する力』

ちづみさんは、デザインが上がってきた時に「良いの上がってきましたよー！」と先手を打ち、

クライアントに「たしかにそうですねー」としか言わせないようにするディレクターと組んでいたそうです。これもテクニックですね。

WEBディレクターになる手順

  1. 案件を受注する
  2. デザイナー/コーダーへ外注する

これだけです。

仕事を獲って、誰かに振ればディレクターになれます。

えーちゃんさんの場合は、

iSARA2期を卒業した後『自分はコーディング向いてない・仕事を獲る方が向いている』と自覚しながらも

半年はがむしゃらにコードを書くと決めて、ディレクターに回るための準備をしたそうです（同期にデザインを外注したりしていた）。

具体的な目安

  • 半年は開発者としての経験を積む
  • ディレクション込みの案件を10件やる

制作サイドで経験を積むことによって、『要件定義』がわかるようになります。

ただ、前述したようにディレクター自体には専門スキルはいらないので、

WEB制作未経験で100万円規模の案件に指名されるディレクターも『Makersbank』には在籍しています。

案件をこなす中で、自分は『調整役に向いている』と感じたら移行しても良いでしょう。

デザイナー/コーダーの探し方

  • クラウドソーシングで発注する
  • Twitterで募集する
  • コミュニティ内で探す

フォロワーが1000人以上いるなら、TwitterなどのSNSで告知するだけでも集まります。

ディレクションで使えるツール

ブラウザ一括管理 Biscuit（今ならコレ！日本語対応）
Station（えーちゃんさん愛用）
Franz
ビデオ会議 Zoom（安定性が一番高い）
Whereby（URL渡すだけなのでリテラシー低め層）
Skype（オールマイティ）
進捗管理（タスク管理） Asana
Trello（マナブさんもオススメ）
Jooto（ガントチャート作成）
Googleスプレッドシート
チャット Slack（対クライアント）
Chatwork（自社内用）
素材選定 Elements
Unsplash
Shutter stock
PIXTA（日本人画像）
Adobe Stock
契約書類 クラウドサイン（契約書締結）
misoca（請求書発行）
データ管理 Notion（オススメAll in One神アプリ）
Pinterest（ショーヘーさんもオススメ）
dribbble（招待制の海外デザイナー専用SNS）
Googleドライブ→ 重いデータはURLでシェア
資料作成 Googleスライド（修正指示）
Adobe XD（ワイヤー作成）
Loom（動画説明）
Prott（プロトタイプ作成）→ 動きも再現できる
その他 Bitly（URL短縮化）
Clipy（コピペ効率化）→ 定型文を保存しておく
Automator（Mac標準アプリ/自動化レシピ作成）
Full Page Screen Capture（Chrome拡張機能/ページ全体スクショ）

実例紹介（オフレコ）

実際にえーちゃんさんが初めてのディレクション業務で『デザインの要件定義』を見誤った（甘かった）実例を

「クライアントに提案する前に止めたデザイン」と「実際に公開されたデザイン」を交えて紹介してくれました。

これ、5期の時にはやるの忘れていたそうです。←へいへいへーい！

答えはシンプルに『大切な人に勧められないものを作らない』ことでした。

よくある失敗事例

  • 制作物クオリティが期待値を下回る
  • 修正や制作漏れがあるまま提出してしまう
  • 納期が遅れる
  • 認識ズレが原因で水掛け論になる（追加費用問題など）

案件が制作途中で流れたら…

ケース・バイ・ケースケ

デザイナーとコーダーを抑えて、デザインも1/3くらい進めていたのに、流れた案件があった（コーダーは1行も書いてない）。

開発者にとってのクライアントはあくまで自分なので、両者に全額払った（そう決めている）。

着手金として50%もらっていたので、それでも黒字（残りの50%は納品時にもらう契約を結んでいた）。

まとめ

誰もが1度は炎上案件を経験するが、誠実な対応をすれば大抵は許される。

スケジュールと心の余裕が大切。

講座終了後、6期メンバーから一切質問がなかったのですが、おそらくまだイメージがつかないからだと思います（5期の時の僕もそうでした）。

しかし、

『エンドクライアントと仕事をする（一次請け） ＝ ディレクション業務も請け負う』

ことになるので、駆け出しのデザイナー/コーダーにとっても決して未来の話ではありません。

『ディレクション業務の重要性』『デザインの要件定義』の難しさは、この半年で痛いほど分かりました。

この『えーちゃんのWEBディレクション講座（6th ver.）』を教科書にしてください！

「しばらくアップデートしなくていいモノができた」と本人も言っていましたよ。

また、基本的にディレクターは常駐です（しかも残業多い）。

リモートOKのディレクターを募集しているのは『Makersbank』でしか見たことないそうです（ディレクター以外も募集してます）。

人気記事えーちゃんのWEBディレクション講座（5th ver.）

人気記事【全46本】プログラミングスクール『ISARA』ブログまとめ

-ISARA