Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
seminar_direction.pdf
Search
unitedrivers
June 08, 2019
Business
0
180
seminar_direction.pdf
Webディレクターとは?Webディレクターの仕事の進め方。
unitedrivers
June 08, 2019
Tweet
Share
Other Decks in Business
See All in Business
KADOKAWA Connected|会社紹介資料/Corporate Introduction
kadokawaconnected
4
50k
しくじり先生 〜ふりかえり手法はチームのイマとコネクトして〜
electricsatie
0
360
多職種で実施したふりかえりで基本的なことに気付かされた/Basic key learnings from the pretests conducted in multiple professions
k_takashiro
2
250
Nstock 採用資料 / We are hiring
nstock
20
160k
enechain company deck
enechain
PRO
2
68k
エンジニア向け会社説明資料
staffrecruiter
2
380
HRBrain|26卒 新卒向け|会社説明資料
hrbrain
2
520
【新卒採用】BuySell Technologies会社紹介資料
buyselltechnologies
0
140k
エムスリーキャリア エンジニア採用資料 / M3C Engineer Guide
m3c
1
76k
【株式会社Amazia】採用資料(エンジニア)
amazia200910
1
1.2k
#CMC_Meetup コミュニティの主体がCSからマーケに変わって気づいた良さの違い
ktkn1129
0
250
Pictoria 会社紹介・採用資料
pictoria
3
480
Featured
See All Featured
How to name files
jennybc
65
93k
Faster Mobile Websites
deanohume
299
30k
Docker and Python
trallard
34
2.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
What the flash - Photography Introduction
edds
64
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
YesSQL, Process and Tooling at Scale
rocio
164
13k
A better future with KSS
kneath
231
16k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.9k
Happy Clients
brianwarren
92
6.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Transcript
WEBディレクション マスター講座 現場もクライアントも気持ちよく進行する秘訣
目次 • WEBディレクターとは • WEB制作プロジェクトの全体像 • WEBサイトの企画と設計 • WEBサイトのデザインと開発
自己紹介 • 松山 佳代子 • フリーランスのWEBディレクター • クーポンサイト、求人サイト、クックパッドのディレクターをしていまし た •
老舗の制作会社でセールスもやってました • ディレクターの仕事は独学と現場で覚えたタイプです(だいたいみん なそう) • デザインは「良し悪しの言語化ができる」、コーディングは「書いてあ ることの修正ができる」くらいのレベルです
皆さんの今の役割と、 これからやっていきたいことがあれば教えて下さい Q.
WEBディレクターとは
ディレクターにもいろいろいる
業種によってディレクターの役割が変わる • 自社サービスを作っている会社のディレクター • 制作受託会社でクライアントのサイトを作っているディレクター • 広告代理店でプロモーションサイトを作っているディレクター • メディアの記事を編集・執筆しているディレクター 今回
基本のスキルを3つだけ
① リリースから逆算して スケジュールを組む
①リリースから逆算してスケジュールを組む • 案件の打診がきたらいちばんに確認するのがリリース日 • 作りたいものの規模感を把握して、リリース日までの営業日数×工数で制作できる かを確認する • ペライチのLPで2・3週間〜、コーポレートサイトのような静的サイトで3ヶ月〜、大 規模サイトなら6ヶ月〜は欲しいところ •
無茶なスケジュールはミスや遅延を生むので、制作メンバーを守るためにもきちん と交渉しておく • 営業がいれば営業に交渉してもらうこともある
②優先順位をつけて、 「やりたいこと」と「できること」を調整する
②優先順位をつけて、「やりたいこと」と「できること」を調整する • WEBに詳しくないクライアントの場合、工数がどれくらいかかるのか想像できないことがほとんど • そして「やりたいこと」はどんどん出てくるのが普通 • 「やりたいこと」が「できること」=「工数」を上回ってしまったら、「やりたいこと」に 優先順位をつ
ける ◦ 「やりたいこと」によって得られる効果は? ◦ 「やりたいこと」にかかる工数はどれくらい? ◦ 「やりたいこと」は別の手段で代替できないか? ◦ クライアントにとって「やりたいこと」の重要度はどれくらい? • 要望をのむ場合は、「ここまではできますが、ここからはできません」、「これを優先する場合、こ ういったリスクがあります」と事前に握っておくのがとても大事
③ 学び続ける
③学び続ける • WEBの技術は日進月歩、トレンドも移り変わる • ディレクターは技術者ではないのでデザイナー・コーダー・エンジニアに技術的な知 識では勝てない。それでも彼らに仕事を振らねばならないのがディレクター • だから、学び続ける姿勢が大事 • もはや「調べる」→「判断する」がディレクターの仕事かもしれない…
• わからないことはとりあえずググってみる • 新しい技術は皆も初めて触るから、やったもん勝ち
ディレクターの基本スキル3つ 1. リリースから逆算してスケジュールを組む 2. 優先順位をつけて、「やりたいこと」と「できること」を調整する 3. 学び続ける まとめ
WEB制作プロジェクト の全体像
WEB制作の流れ 提案と受注 企画・設計 デザイン コーディング 運用 受 注 提 案
提 案 ア ッ プ テ ス ト 今日お話する範囲
WEB制作のステークホルダー クライアント (現場担当) クライアント (意思決定者) ライター デザイナー コーダー プログラマー クライアント
制作チーム 営業 (プロデューサー) ディレクター
クライアントコントロールのコツ • 最終意思決定者を見極める • 現場担当者が社内で顔が立つようにする • WEBに詳しくないクライアントの場合は、専門用語を使わずわかりやすく説明する • 説得したいときは、メリット・デメリット、代替案を用意しておく •
クライアントの要望に譲歩する場合、できることとできないことの線引き・リスクの明 示をして握っておく • できるだけ文書で記録を残す
制作チームに気持ちよく動いてもらうコツ • 制作チームがディレクターに求めていることは「決めてくれる」こと • クライアントの要望と、技術や工数の都合が食い違うことはよくある • クライアントの要望や制作チームからのフィードバックを相手方にそのまま伝えるの ではなく、自分の中で天秤にかけて結論を出してから、調整を行う • 度重なる修正はメンバーの心理的な負担になるので、ときにはストッパーとなって
チームを守る • クライアントが修正依頼をしてくる理由を見極めると吉
ディレクターは常に板挟み 調整がうまくいったときの達成感 でメンタルを保つ
WEBサイトの企画と設 計
WEBサイトの企画とは?
作る成果物から考えると やることがイメージできる
①ヒアリングシート
ヒアリングシートとは • クライアントの初期要望を聞き出してまとめたもの • サイトを作る目的、方向性を決める第一ステップとなる • 「WEB制作 ヒアリングシート」とかで検索するとフォーマットが落ちてたりする • 受注の段階ですでにヒアリング済のこともあるが、キックオフMTGの際に顔合わせの意味も含めてディレクターから不明
点のヒアリングを行うことが多い
クライアントのビジネス構造を理 解する • 上場会社であれば、IR情報のページから決算説明資 料(パワポ形式のもの)を読むのがいちばん • 「どんな顧客」に「何を」売っているのかを把握するだ けでも、どんなサイトを作るべきか見えてくる • わからないことはクライアントに聞く
• 現状のサイトも一通り見ておき、サイトの課題の仮説 を立てておくと質の良いヒアリングになる ヒアリングの前に… https://www.amazon.co.jp/dp/B073PSGWDK/ref=dp-kindle-redirect?_e ncoding=UTF8&btkr=1
サイトの目的・KPI・ターゲットを定める • サイトの目的とKPIを決めていないと、リリースした後に「なんのためにやったんだっ け?」となり、効果測定ができない • 効果測定ができないと、サイト制作のROI(投資対効果)が出せない、運用が続かな い…となりがち • ターゲットを明確に定めることで、そのユーザーの行動やニーズを解像度高く想像 できるようになり、「刺さる」サイトになる
KGIとKPIとは • KGI(Key Goal Indicator)が最終目標 で、KPI(Key Performance Indicator) はKGIを達成するための中間指標 •
例えば、ECサイトにおけるKGIが売上 だとしたら、KPIは顧客数や顧客あたり の売上金額になる • 要はそのサイトが追っている数字が何 なのかを把握できればOK 画像出典 何が違う?KPI、KGI、そしてOKR 目標達成のための設定のコツとは? https://data.wingarc.com/what-is-kpi-kgi-3956
ペルソナと カスタマージャーニーマップ • ユーザーの特徴を超具体的に書き出してみるとそのユーザー の思考や行動を追体験できるので、コンテンツの精度を高め ることができる • 年齢・性別・職業・年収・家族構成・趣味をはじめ、インター ネットの使用状況といった細かな行動も書き出してみる •
対象となりそうなユーザーにインタビューを行ってみるのも効 果的 • ユーザーがその商材と出会い、行動を起こすまでの一連の過 程を表にしたものがカスタマージャーニーマップ • 昔よりもユーザーとの接点が複雑化してきているので、ユー ザーの行動を点でなく線で捉えるようになった 画像出典『はじめてのカスタマージャーニーマップワークショップ』著者が語るマップ作成のポイントは https://markezine.jp/article/detail/29298
②要件定義書
要件定義書とは • 制作するWEBサイトの仕様を詳細にまとめたも の • おおまかに、サイト要件・機能要件・システム要 件などがある • この定義書から漏れているものは原則として実 装されないものとして、文書の変更履歴まで管
理される(こともある) • こちらも「要件定義書 テンプレート」とかで検索 すると落ちてたりする
要件定義書の項目(抜粋) • サイト要件 ◦ Webサイト制作の背景 ◦ Webサイト制作の目的 ◦
ターゲットユーザ ◦ ターゲットブラウザ・OS • 機能要件 ◦ ユーザー向け機能 ◦ 管理者向け機能 • システム要件 ◦ インフラ要件 ▪ 本番環境・開発環境について ▪ サーバ構成やドメインについて ▪ データベースについて ◦ セキュリティ要件 ▪ SSL ▪ パスワード管理 ▪ 脆弱性対策 ◦ 非機能要件 ▪ ユーザビリティ・アクセシビリティについて ▪ 品質・性能要求について • 開発手法 ◦ 開発言語について ◦ ソフトウェアについて ◦ バージョン管理について • プロジェクト管理 ◦ スケジュール ◦ 会議体 ◦ 納品物・納品場所・受け渡しについて ◦ プロジェクトメンバー • 画面遷移図(サイトマップ) • 保守・運用 ◦ システムダウン ◦ 更新頻度
全部は大変なので…
これだけやります • サーバーとドメインとは ◦ WEBサイトが表示される仕組み ◦ ドメインとは ◦ HTML・CSSとプログラミング言語の違い
◦ ではWordPressは? • 画面遷移図を作る ◦ サイトマップとの違い ◦ ツールを活用して時短する
サーバーとドメインとは
WEBサイトが表示される仕 組み 1. ユーザーが、ブラウザから閲覧したいサイトをリ クエストする 2. 閲覧したいサイトが格納されているWEBサー バーが、HTMLファイルやCSSファイルをユー ザーのブラウザに返す 3.
ブラウザが受け取ったファイルを処理し、ページ を表示する 出典 国民のための情報セキュリティサイト「ホームページの仕組み」 http://www.soumu.go.jp/main_sosiki/joho_tsusin/security/basic/service/03.html
ドメインとは • HTMLファイルをもらうためには、サーバーの 住所が必要 • サーバーの住所は「IPアドレス」と呼ばれ、も ともとは「124.124.124.124」のような数字の羅 列 • 数字の羅列だと人間が覚えにくいので、文字
列にしたのがドメイン • ドメインと本来の住所(数字の羅列)をつなげ ているのがDNS(ドメインネームシステム) blog . example . co . jp / diary サブドメイン サードレベルド メイン セカンド レベル ドメイン トップ レベル ドメイン ディレクト リ
HTML・CSSと プログラミング言語の違い • HTMLとCSSは、正確には「プログラミング言語」ではない • プログラミング言語は何かしらのデータを制御することが できるが、HTMLやCSSは「文書構造」を示したり「装飾」 するだけ • プログラミング言語は、JavaScript・PHP・Ruby・javaなど
• 様々なWEBサイトは、プログラミング言語とHTML・CSSの 組み合わせで作られている SNSの投稿はわかりやすい 「データ」の例
ではWordPressは? • WordPressはサイト作りが簡単にできるパッケージの名称 • PHPというプログラミング言語がデータベースとのやり取りを担 当する • 「投稿」データや「ユーザー」データを格納しているのがデータ ベース
• PHPによってやり取りされたデータを、HTMLとCSSで見た目を整 えて表示している 記事のデータく ださい 記事読みたい 記事ページの ファイル送りま す はい、 これ本文とタ イトル はい、HTML とCSSファイ ル 投稿ペー ジ表示し ます
画面遷移図を作る
サイトマップとの違い • 画面遷移図はサイトを作っている人が見るもの、 サイトマップはユーザーが見るもの • 画面遷移図はページとページのつながりを見える 化し、作るべきページ・機能を把握するのが目的 • サイトマップはユーザーが見るので、目的とする ページがどこにあるのかをガイドするのが目的
• なお、SEO目的で設置するsitemap.xmlというファ イルはまた別にあります 画像出典 「Sketchで簡単に画面遷移図が作れるプラグイン、 UserFlows」 https://bagelee.com/design/sketch/create_userflows_with_sketch_plugin/
ツールを活用して時 短する • パワーポイントでも書けるが、AdobeXDや Sketchといったツールを使うとテンプレートが 充実していてかなり時短できるので積極的にマ スターしたい • 画面遷移図に必要な情報は、ページの名称・ ページ遷移を表す矢印・アクションとトリガー
(例:メール送信と送信ボタン) • 主要なページ(例:記事カテゴリトップと記事詳 細)を優先する • 同時にナビゲーションも考えておくとワイヤーフ レームの段階で手戻りがない
③ワイヤーフレーム
ワイヤーフレームを描いたことがある✋
ワイヤーフレームとは • そのページに載せる情報を実際のページの大きさに合わせ てレイアウトしたもの • ワイヤーの段階でクライアントの確認をとることで、いきなり デザインに入るよりも手戻りを少なくできる • デザイナーの手腕によっては、載せたい情報とエリアだけ 指定すればよしなにレイアウト&デザインしてくれることも…
• ディレクターは、そのページに載せるべき情報が何かを気 にしておく • できるだけ実際に近いダミー文言を入れると、情報の過不 足や最適な文字数に気づける
ワイヤーフレームを描く3つのコツ
①ナビゲーションパーツを先に置く 1. PCの場合はページレイアウトを決める(シングルペー ジ/カラム/タイル) 2. ヘッダー・フッター・グローバルナビゲーションなど、ほ ぼすべてのページで共通して使われるエリアを配置す る 3. 画面遷移図を見て、ページ間の遷移が成立するように
リンクを配置する 4. メインエリアに載せる情報を洗い出し、整理して配置す る 画像出典「はじめてのUIデザイン」P.29 吉竹遼・坪田明・池田拓司・上ノ郷谷太一・元山和之・宇野雄 著
②情報アーキテクチャの概念を知る • ユーザーに的確に情報を伝えるために、情報を 整理し、導線を設計する技術 • 情報を整理する軸として有名なのがLATCH法 出典「IAシンキング WEB制作者・担当者のためのIA思考術」P.32 坂本貴史 著
料理レシピを分類する切り口を考えてみる Q.
材料は? 誰が作る? 栄養は?
ユーザーがクリックしたくなるラベル名をつけてみる Q.
None
情報の切り口がラベルになり、 ナビゲーションになる!
③他社サイトを見る • デザインをまとめたサイトを眺めてみる • 作ろうとしているサイトと似ているビジネスをし ている会社のサイトは特に参考になる • 他社サイトのページを見たままトレースしてみる と、なぜその情報がそこに配置されているのか 考えるきっかけになる
• 他社サイトのサイトストラクチャを書き起こして みると、カテゴリや導線がつかめる 出典「IAシンキング WEB制作者・担当者のためのIA思考術」P.65 坂本貴史 著
デザインは 「センス」ではなく「ロジック」
「なぜこうした方が良いのか」を 言語化できれば、 クライアントも納得する
WEBサイトのデザイン と開発
デザインカンプを 起こす
デザインの修正をなるべく少なくしたい
イメージに合う他社サイトを列 挙する • カンプ制作後に「イメージと違う」となった場合、デザイ ン工数にもデザイナーのメンタルにもダメージを与える • クライアントの頭の中にあるサイトのイメージを引き出 すため、参考にしたい他社サイトを教えてもらう • 参考にしたいサイトと、「これは避けたい」というサイトを
両方挙げてもらうと良い • 参考にしたい点を言語化し、「こういう点を取り入れたい のですか?」と確認しておくと更に良い • ギャラリーサイトは検索するとたくさん出てくる 出典 I/O3000 https://io3000.com/
デザインの方向性を言葉で表 してみる • ロゴを制作するときにも使える手法 • そのサイトのイメージを言葉で表してみます • 形容詞でも名詞でもOK • 例 「かっこいい」⇔「かわいい」
• 例 「洗練された」⇔「素朴な」 • 例 「格調高い」⇔「ポップな」 • 言葉から連想される画像をPinterest等で探してムード ボードを作成してみるのも良い 画像出典「なるほどデザイン」P.86 筒井美希 著
❏ レイアウト ❏ ファーストビューに重要な情報が含まれているか、 もしくはページを読み進めたくなるか ❏ 視線がFの字を描くように動くことを意識しているか ❏ レスポンシブサイトの場合、スマホ(とタブレット)表 示を考慮にした構造になっているか
❏ (コンバージョンがある場合)コンバージョン導線が わかりやすいか ❏ ユーザビリティ ❏ クリック(タップ)できる箇所はクリッカブルに見える か、ホバー時のデザインがあるか ❏ 「詳しくはこちら」のような抽象的なラベルではなく、 「商品詳細」のような具体的なナビゲーションになっ ているか ❏ 文字 ❏ フォントサイズは適切か ❏ デザインに合ったフォントを選択しているか、そのフォ ントが実装可能か、可読性がたかいか ❏ タイトル・見出し・本文で文字ジャンプ率が適切に設 定されていて、サイト全体で統一されているか ❏ 文字量が適切か、改行が行われていて読みやすい か ❏ 文字数が標準範囲内の時だけでなく、短い場合・長 い場合も考慮されているか ❏ データがない(記事が0件など)場合のデザインが用 意されているか ❏ 色 ❏ 色数が多すぎないか ❏ 注目したい箇所が目立つ配色になっているか デザインをチェックするポイント
コーディングする
コーディング指示 • デザインカンプは静的ファイルなので、動的な動きを実現 したい場合は追加で指示をしておく • 原則として、デザインカンプを見ただけでは想像できないよ うな挙動に対して指示をしていく • コピーしたデザインファイルに直接指示を書いてOK(指示 したい場所が伝わりやすい)
• JavaScript等で動きをつけたいときは、参考にしてほしい 動きを含む他サイトのURLや、実装方法を解説したサンプ ルのページを共有しておくと伝わり易い • それでも指示漏れやすり合わせることが後から出てくるこ とはよくある。コーダーさんに「実装にあたって疑問がでて きたら遠慮なく質問してください」と伝えておく 出典 コーディング指示書の書き方!Web制作の入稿前にディレクター・デザイナーが確認したい5つのこと https://fastcoding.jp/blog/all/direction/codingspec/
テストする
テストでチェックするポイント • ここでいうテストとは、サイト上の挙動が想定 通りかどうかを確かめること • 正常系・異常系という概念を知っておく • どんなテストをしたのか、そのテストの結果
がどうだったかをまとめてクライアントに納品 する • テストでバグが発覚したらバグ管理表に記 載し、影響度が大きい順に直していく • コーダーやエンジニアがテストをしているも のの、最終納品前にはディレクターもなるべ くテストに参加したい ❏ テスト環境 ❏ デバイス ❏ ブラウザ ❏ テスト環境か、本番環境か ❏ ディレクターがよくやるテスト内容 ❏ リンクの遷移先は正しいか ❏ JavaScriptが意図通り動いているか ❏ 投稿や問い合わせフォーム ❏ 最小/最大文字入力数の前後で正しい挙動を するか ❏ エラー判定が機能しているか(半角/全角、記 号、機種依存文字) ❏ エスケープ処理が行われているか ❏ URL ❏ パラメータを削除したり、存在しないパラメータ を入力したときに意図した挙動になるか
本番環境にアップ する
最後にもう一度テスト • 開発環境・ステージング環境では問題な かった挙動が、本番環境にリリースして みると思わぬバグが発生した、というこ とはよくある • クライアントに報告して「ここ動いてない よ」と言われるのはつらいので、リリース 連絡をする前にもう一度全体の動きを確
認する クライアントにバグを指摘されると息が止まりそうになる
おすすめの参考図書1 • 『WEBディレクション標準スキル』 https://amzn.to/2Hc1ofX 2012年出版なので情報がちょっと古いのですが、ディレクターに必要な知識が網羅されています。今回の セミナーにあたって最も参考にしました。 • 『IAシンキング
Web制作者・担当者のためのIA思考術』 https://amzn.to/2HdNV7r 情報アーキテクチャについての解説本です。これ一冊読めば情報設計できるようになります。実践で役に 立ちそうなところだけ拾って読んでも大丈夫です。 • 『ユーザ中心ウェブビジネス戦略 顧客心理をとらえ成果を上げるプロセスと理念』 https://amzn.to/2LwT0vq こちらも古いのですが、「ユーザーありきでサイトを作る」という、忘れがちだけれど一番大事なことを教え てくれる本です。ユーザーインタビューやユーザーテストのやり方が詳細に載っているのも良いです。
おすすめの参考図書2 • 『なるほどデザイン』 https://amzn.to/2VlYdL8 タイポグラフィや色など、デザインの要素の基礎が学べます。「そこが知りたかった!」というポイントを実 践的に解説してくれているので、仕事ですぐに応用できます。 •
『伝わる、WEBテキストのつくりかた -知っておきたい文字情報デザインテクニック』 https://amzn.to/2LyqeLb こちらも古くて恐縮ですが、よくある分かりづらい文章のどこがまずいのかを具体的に指摘してくれます。 実践ですぐに役立ちます。 • 『入門 ウェブ分析論――アクセス解析を成果につなげるための新・基礎知識 増補改訂版』 https://amzn.to/2vN3DzD 今回の範囲からは外れますが、サイトを運用するフェーズで必ず必要になるアナリティクスの使い方を丁 寧に解説している本です。