Recommended
More Related Content
What's hot
What's hot (20)
Similar to Webディレクター用ポートフォリオテンプレート
Similar to Webディレクター用ポートフォリオテンプレート (20)
Webディレクター用ポートフォリオテンプレート
- 1. P.1 はじめに (1/2) このポートフォリオはブログ「笑顔を創りたい Web 屋の日常」の 筆者であり現役 Web ディレクターの toksato 作成のテンプレートです 。 Web ディレクターの地位向上？とかそんなことを狙ったようなそうでも ないような感じで公開しました。 コピーライトとかクレジット表記とか一切入れないで使って OK です。 ただし、二次配布したり、販売物に利用したりなど商用利用は禁 止します。 あくまで個人がポートフォリオ作成のために使うものとして配布 していますので、それ以外の利用はご遠慮ください。 利用方法その他ご相談あればブログにある連絡先までご連絡ください。 「まじかよクレジット表記なしでいいのかよ神か！」って思った人は気 が向いたら Twitter でお礼してくれたり、ブログをいっぱいよんでブック マークしてくれたりすると、 toksato はうれしゅうございますよ。 ※ ちなみにこのポートフォリオは徹夜して一晩でつくったので、マスターの つくりが雑とかそういうのはご容赦ください・・・ Twitter ： https://twitter.com/toksato ブログ ： http://toksato.hatenablog.com/ Facebook ： https://www.facebook.com/createsmileweb/
- 2. P.2 はじめに (2/2) このポートフォリオテンプレートには解説のようなものはいれていま せん。ブログでまあまあ解説しています（謎） 詳しい解説記事はこちら。 【 Web ディレクターの転職術：その２】ポートフォリオの作り方： http://toksato.hatenablog.com/entry/webdtenshoku2 詳しい解説をこのテンプレートに入れなかったのは、いざポートフォリ オをつくるときに邪魔になるのと、消し忘れが発生した場合に、ダイレ クトに採用選考に響くと思ったからです・・・。 次のページからがポートフォリオのスタートです。 ↓↓↓
- 5. P.5IDENTITY ”「 笑顔を創りたい Web ”ディレクター の大冒険」 戦闘力 ＝ PM × UX × 正義の心 誰かの笑顔を創れるＷｅｂディレク ターでありたい 「笑顔を創りたいＷｅｂディレクター」とは、 10 年続けてい ”るブログのタイトルに入っているものです（正確には Ｗｅｂ ”屋 ）。そして、私自身がＷｅｂディレクションをする上で常に 強く抱いている想いでもあります。 常に意識してきた「ＵＸ」 Ｗｅｂディレクターになって 12 年目、ＵＸに携わって 10 年目に なりますが、これまでずっと、どんなサイトを担当する時も 「これが誰かの笑顔に繋がるような、そんな働きをした い」と思ってディレクションを担当してまいりました。 世界中の画面の向こうの顔も見えない誰か。その誰かが、自分が 設計してつくったＷｅｂサイトによって、何かの問題が解決し、 笑顔になってくれるかもしれない。とてもとても忙しいＯＬさん が、帰宅後の深夜にアパレルネットショップをみることで、ひと ときのホッとする、楽しい時間がつくれるかもしれない。イン ターネットのそんな力に魅了され、「ＵＸ」という言葉がここま でもてはやされる以前から「果たして、これは本当に画面の 向こうにいる人の問題解決になるだろうか？」と常に考えて きました。 周りの人のために大切な「ＰＭ」 「笑顔を創りたい」というそれは、Ｗｅｂサイトのユー ザーだけではありません。プロジェクトにかかわるメンバーす べてがその対象です。カッコつけて青臭く言えば「ぼくのでぃ れくしょんにかかわるすべてのひとをえがおにしたい」。 プロジェクトマネジメントを担う者として、Ｗｅｂサイトで成果 を出すことで評価があがるであろうクライアント担当者やサイト オーナー、平穏な生活を送りながらスキルを発揮したいデザイ ナーやエンジニアなど、プロジェクトに関わる全ての人を「笑 顔にできるようなディレクターでありたい」と強く思っていま す。そのためには、プロジェクト全体を見渡し、体制を整え、方 向を示し、各メンバーに適切なタスクを渡し、各所で起きる問題 を未然に防ぎ、解決する力が必要です。私にとって「ＰＭ」とは 周りの人を笑顔にするために必要なスキルだと考えています ブレない「正義の心」 「正義なき力が無力であるのと同時に力なき正義もまた無力なの ですよ」 ” ”マンガ ダイの大冒険 に出てくるセリフです。どんなに正義 を謳ったところで力が無ければ意味がない、という意味ですが、 裏を返せば、力があっても正義の心がなければそれもまた無意味 なのだろうと思っています。 どんなにＰＭ力があろうと、誰かに媚びたり、クライアントに寄 り過ぎたり逆に敵視して内部メンバーを守り過ぎていては、結果 的に一番大切にすべきユーザーの笑顔がつくれず、そうなればプ ロジェクトメンバーすべての笑顔が失われてしまいます。 Ｗｅｂディレクターには「真っ当な判断ができる正義の心」 が必要だと思っています。クライアントに寄り過ぎてもいけない 、エンジニアを甘やかしてもいけない、「正しいことは何なの か」を常に考え判断をしていくことが、何よりも重要だと思って 疑いません。クライアントでも上司でもなくデザイナーでもなく 、プロジェクトに関わるすべての人が納得できる判断をする ための、「正義の心」が、ＵＸでもＰＭでも重要になると考えて います。
- 7. P.7WORKS 「〇〇コーポレートサイト リニューアル」 TVCM に間に合わせるため、 20 以上の CMS テンプ レートを持つ合計 900 ページ超の 4 サイトを 2~3 週間 で同時リリース。 URL ： PJ 期間 ： 2~3 週間 PJ 範囲 ：プロジェクトマネジメント／ CMS 導入・カスタマイズ／ HTML ・ CSS ・ JavaScript 開発 チーム体制 ：プロデューサー 1 名／アシスタントディレクター 1 名／フロントエンドエ ンジニア 2 名／ CMS テンプレート開発 2 名／テスター 2 名 このプロジェクトでは、とにかく「明らかに足りないスケジュールのなかで、どう やって記者会見までにサイトリニューアルを間に合わせるか」に集中して対策、対 応を行いました。様々な手段を講じ、ときにはクライアント側にまで負担を請け負って もらう提案をし、クライアントを含め全員が一つのチームとして動くことで何とか乗り切 りました。 また、社内調整で疲弊するクライアント担当者に対しても、常に明るく元気な対応 をすることで少しでも気分が軽くなるよう心がけ、のちに「それにかなり助けられ た」と担当者から言葉をいただきました。 デザインが来た時点で納期まで２週間しか残されていなかった クライアントも巻き込んで「（できない理由ではなく）できる方法」を提案 クライアント担当者がめげないよう、とにかく明るく笑顔の対応 ! 3 行でわかるポイント プロジェクト（ PJ ）概要 クライアント ：株式会社〇〇 サイト種別 ：コーポレートサイト 主な役割 ：メインディレクター 担当領域 ： WBS 作成、開発ディレクション サイトのスクリーンショット サイトのスクリーンショット
- 8. P.8WORKS 「 SPI 対策 スマホアプリ開発」 「〇〇君、このプロモーションサイトお願い」ｂｙ社長からの大逆転。 「これじゃ売れない・・・」とわかったときから、自腹でグループイ ンタビュー、デプスインタビュー実施を決意。結果的に広告ゼロでも 月間 1000 Ｄ L 達成 URL ： PJ 期間 ： 2 ヶ月間 PJ 範囲 ：ディレクション／グループインタビュー／デプスインタビュー／ＵＸ設計／プ ロモーションサイト設計／プレスリリース対応 チーム体制 ：ディレクター 1 名アシスタントディレクター 1 名、アプリ開発会社エンジニア 2 書籍連動企画としてＳＰＩアプリを社長直轄で開発していました（前職です）。プロモーショ ンサイトを任されましたが、ふたを開けてみれば全く差別化ポイント、提供価値が考えられて おらず、これは売れないと判断しました。そこで社内にいたアルバイトの子を伝って大学生を 集めてもらい、自腹で飲み会を開いてグループインタビュー、デプスインタビューを行いまし た。結果として「ネットで探していない」「勉強しんどい」という層が見え、そこへのアプ ローチとして「サークルで話題にあがるゲーム性を持ったＳＰＩアプリ」をコンセプトとし、 複数のニュースメディアにも取り上げられた結果、広告費なし（の割には）多数のダウンロー ドを獲得できました。 アプリのサイトつくってくれと社長より依頼を受けたが他社アプリに勝てるところ が一つもない 付加価値を考案するためにアプリ開発まで戻り、ターゲットとなる大学生を集めて グループインタビュー、一人にデプスインタビュー実施 ペルソナから「サークルで口コミ」「そもそも勉強したくない」を導き出し、ゲー ム性を持たせるアプリに変更 ! 3 行でわかるポイント プロジェクト（ PJ ）概要 主な役割 ： PM 、 UX 設計者 担当領域 ：ユーザー定義、 UX フロー設計、 UI 設 計 クライアント ：（自社アプリ） 種別 ：アプリ開発＆サイト制作 サイトのスクリーンショット サイトのスクリーンショット
- 9. P.9 サイトのスクリーンショットサイトのスクリーンショット WORKS 「株式会社〇〇〇求人検索サイト＆管理シス テム リニューアル」 「株式会社〇〇〇」の約 1 万件の求人案件が登録されてい る求人案件管理システムと、その案件を検索できる求人案 件サイトのリニューアル。 URL ： PJ 期間 ： 7 ヶ月間 PJ 範囲 ：プロジェクトマネジメント／機能＆非機能要件定義／ UI 設計／デ ザイン／ HTML ・ CSS ・ JavaScript 開発／システム開発 チーム体制 ：プロデューサー 1 名／プロジェクトリーダー 1 名／アートディレク ター 1 名／アシスタントディレクター 2 名／フロントエンドエンジニ ア 1 名／テスター 1 名 プロジェクト（ PJ ）概要 主な役割 ： PM 兼メインディレクター 担当領域 ： PM 、機能要件定義、非機能要件定義 UI 設計、開発ディレクショ ン クライアント ：株式会社〇〇〇 サイト種別 ：求人検索サイト＆管理システム 「〇〇不動産 Web サイト リニューアル」 「とにかくきちんと情報を整理したい」というご要望から のリニューアル。ユーザー分析により、各サービスで行動 動線が大きく違うことがわかり、サービスごとのマイクロ サイト設計。 URL ： PJ 期間 ： 5 ヶ月間 PJ 範囲 ：プロジェクトマネジメント／企画要件定義／ UX 設計／サイト設 計・ UI 設計／デザイン／ HTML ・ CSS ・ JavaScript 開発／システム開 発 チーム体制 ：プロデューサー 1 名／アートディレクター 1 名／アシスタントディ レクター 1 名／フロントエンドエンジニア 1 名／システムエンジニア プロジェクト（ PJ ）概要 主な役割 ： PM 、 UX デザイナー、 UI 設計者 担当領域 ： PM 、企画要件定義、 UX 設計、 UI 設計、開発ディレクション クライアント ：〇〇不動産株式会社 サイト種別 ：コーポレート兼物件検索サイト
- 11. P.11WRITING 個人ブログ、会社ブログの記事紹介 「中小企業や個人経営規模相手の Web ディレクションで気を つけている１５のこと」 http://toksato.hatenablog.com/entry/2010/10/02/171825 無名システム開発会社時代に、それまでの大手制作会社での手法がまったく通じないこと に悩み、試行錯誤した結果うまれたエントリーです。当時はてなブックマークの TOP 最 上位に掲載されました。 ※ 最近ブログを移転したため、ブックマークされたのは以前の URL （ http://b.hatena.ne.jp/entry/toksato.blog17.fc2.com/blog- entry-188.html ）です 「コンテンツマーケティングとて売り上げから逃げてはいけな い」 http://toksato.hatenablog.com/entry/2016/06/08/221037 昨今話題になるコンテンツマーケティングや、それを狙いとした記事の爆発的なバズです が、爆発的にシェアをされてもそれが最終的に売り上げや経営に貢献しなければ意味がな いと思っている、ということを記事にしたものです。 「インプットとアウトプットのわかりやすい捉え方」 http://toksato.hatenablog.com/entry/2016/03/18/013000 日々成長をしていくためには、本を読む、セミナーに参加するなどのインプットが大事と 叫ばれたり、そうではなくアウトプットが大事と叫ばれたりしますが、結局はその両方が 大事だし、何も考えずにそれだけを繰り返しても「意識高い系（）」といわれてしまうだ けだと思っています。 「「人の話を遮らない」ルールで得した３つのこと」 http://toksato.hatenablog.com/entry/2011/05/09/231652 大手制作会社や学校法人などそれなりに名前（看板）のあるところでＷｅｂの仕事をして いたのですが、そこからまったく無名のシステム開発会社に行き、クライアントも個人商 店クラスなどＷｅｂリテラシーの低い方になると、途端に話を聞いてくれなくなりました。 そのときに編み出したルールで、これは大企業相手でも有効でした。 「ドラクエ的世界観で Web 業界のキャリアを考えてみる」 https://www.ini.co.jp/blog/2013/09/career-tokunaga01.html https://www.ini.co.jp/blog/2013/09/career-tokunaga02.html 社内にて外部講師を招いて行ったキャリア勉強会に関するレポートブログです。実際の内 容がドラクエで例えられていたわけではなく、私自身で内容を解釈し「これはドラクエに 例えるとわかりやすいかもしれない」と思いつき書いたものです。 前編が 150 以上のブックマークを獲得しました。 「プロジェクト炎上を防ぐ 10 の法則 - WBS 作成の極意」 https://www.ini.co.jp/blog/2013/06/wbs10.html 社内にて外部講師を招いて行った WBS （スケジュール）作成講座をレポート記事として 自社ブログにアップしたものです。 WBS について学ぶ講座から、自身でポイントをピッ クアップし「炎上を防ぐ～」というスタイルにしたことで多くの PV を稼ぎ、現在も WBS 系のキーワードで多くの流入があります。（サイト全体のセッション数が月間 4500 程度 ですが、この記事だけで 2600 セッションの流入があります） 「いいね！はお金に変わるのか」 https://www.ini.co.jp/blog/2013/05/post-25.html ちょっと古い記事ですが、 Facebook ページが流行しだしたころ「いいね！」を多く獲得す ることばかりもてはやされる傾向にありました。なかには全く関係ないキャンペーンを 打って不特定多数の「いいね！」を獲得するというような施策まであり、それに違和感を 感じて書いた記事です。 「 Web サイトの集客に関するあれこれ」 https://www.ini.co.jp/blog/2012/10/web-1.html 現職に入社してすぐのころ、自己紹介も含めて書いた記事です。 Web サイトやインター ネットとて手段に過ぎず、苦手なことも、不向きなこともあります。大事なことはリアル や紙媒体など複数の手段のなかから目的に応じて適切な手段を選択し、組み合わせること だと、常に考えております。
- 13. P.13WORKFLOW 実践しているワークフロー プロジェクト設計 フェーズ 企画・要件定義 フェーズ サイト設計 フェーズ 開発 / テスト フェーズ 「なぜ、このプロジェクトを立ち上げるの か」 「どんな体制で推進するのか」 “ ”プロジェクトの全体像 を明確にします 「誰に」「何を」「どうやって」提供するの か “Web ”サイトのあるべき姿 を明確にします 「どんなサイト構造で」「どんな画面構成 で」 “Web ”サイトの詳細な構造 を明確にします 「このページが」「こんな形で」「ちゃんと動 く」 “Web ”サイトや裏で動くシステム を開発します フェーズ 実施すること 解決する問題 「このプロジェクトの目的は何？」 「なんのためにやる？」 「具体的に何をやるの？」 「目指すべきゴールは？」 「何をすれば成果が出そう？」 「具体的にどんなサイトになる？」 「どんな画面とコンテンツになる？」 「いつまでに何ができる？」 「どんなページになった？」 「ちゃんと動く？」 運用改善 フェーズ 「成果が出ているか？」「どこを改善？」など “ ”さらにビジネスに貢献するよう改善 を施します 「当初の計画通りにいってる？」 「あるべき姿へ近づいてる？」 「問題はどこ？改善策は？」
- 14. P.14 ドキュメントのキャプチャ ドキュメントのキャプチャ WORKFLOW プロジェクト計画フェーズで行うこと プロジェクト設計 フェーズ 「なぜ、このプロジェクトを立ち上げるの か」 「どんな体制で推進するのか」 “ ”プロジェクトの全体像 を明確にします フェーズ 実施すること 解決する問題 「このプロジェクトの目的は何？」 「なんのためにやる？」 代表的なアウトプット プロジェクト計画書 プロジェクトのキックオフに際し、なぜこの プロジェクトをやるのか。いつまでにやるの か、誰が何を担うのか、などを定義していま す。 多くの人がインターネットを使うようになり 、Ｗｅｂサイトも一般的な存在になって久し いですが、結果として「リニューアルが目的 化」することが多く見られてきています。 なぜ、リニューアルのするのか。目的は何か。 目標は何か、など、サイト戦略以前にプロ ジェクトをデザインする、そのための定義書 として提出します。
- 15. P.15 ドキュメントのキャプチャ WORKFLOW 企画要件定義フェーズで行うこと フェーズ 実施すること 解決する問題 代表的なアウトプット いわゆる、「Ｗｅｂサイトの企画」というも のをこのフェーズで行っています。 思いつきで提案するのではなく、ビジネスヒ アリング、ユーザーヒアリング、競合調査、 市場調査、ポジショニング定義、バリュープ ロポジションの定義、ユーザー定義、ＵＸフ ロー策定など、ビジネス・市場・ユーザーの 観点から様々な調査分析を行い、Ｗｅｂサイ トのあるべき姿を策定しています。 なかでも、私はＵＸ観点からのアプローチを とくに得意としております。 企画・要件定義 フェーズ 「誰に」「何を」「どうやって」提供するの か “Web ”サイトのあるべき姿 を明確にします 「具体的に何をやるの？」 「目指すべきゴールは？」 「何をすれば成果が出そう？」 ＵＸフロー ドキュメントのキャプチャ ペルソナシート
- 16. P.16 ドキュメントのキャプチャ ドキュメントのキャプチャ WORKFLOW サイト設計フェーズで行うこと（ 1/2 ） フェーズ 実施すること 解決する問題 代表的なアウトプット 前段の企画要件定義フェーズから導き出され たＷｅｂサイトのあるべき姿や設計方針をも とに、具体的にどんなサイト構造、画面構成 、コンテンツにするのかをこのフェーズで担 当しています。 もう 10 年以上この役割を担当しております ので、おそらく作成してきたワイヤーフレー ムは 10,000 ページを超え、結果として精度 とともにスピードにも自信があります。 また、思い付きで設計するのではなく目的、 ビジネス的な制約、優先順位の設定からレイ アウトへ進むなど「プロセスの体系化」にも 取り組んできたため、この部分においては教 育でも日々対応しています。 画面構成案ワイヤーフレーム サイト設計 フェーズ 「どんなサイト構造で」「どんな画面構成 で」 “Web ”サイトの詳細な構造 を明確にします 「具体的にどんなサイトになる？」 「どんな画面とコンテンツになる？」 サイトストラクチャ
- 17. P.17 ドキュメントのキャプチャ WORKFLOW サイト設計フェーズで行うこと（ 2/2 ） フェーズ 実施すること 解決する問題 代表的なアウトプット 多くの場合、サイト設計フェーズの手前で詳細な WBS を作成します。プロジェクト計画フェーズの段 階で作成することもありますが、その段階ではまだサ イト規模、機能などがかたまっておらず、また企画要 件定義フェーズまではほとんど 1 ラインで進めるため 作成をせずに進めることが多いです。 この WBS をどれだけ正確に、細かく、自力で組み立 てられるで、 PM としての力がわかると思っており、 ときに 200 行を超える WBS をひいてしまうこともあ りますが、そのおかげでメンバーが迷うことなく進め られる、一つの道標になっていると考えております。 いかに危険を予測し安全に進められる WBS がひける か、日々研鑽をつむべきタスクだと捉えております。WBS （スケジュール） サイト設計 フェーズ 「どんなサイト構造で」「どんな画面構成 で」 “Web ”サイトの詳細な構造 を明確にします 「具体的にどんなサイトになる？」 「どんな画面とコンテンツになる？」
- 18. P.18 ドキュメントのキャプチャ ドキュメントのキャプチャ WORKFLOW 開発 / テストフェーズで行うこと フェーズ 実施すること 解決する問題 代表的なアウトプット 実際にデザインを作成、ＨＴＭＬ /CSS やＰＨ Ｐ、ＣＭＳを開発するフェーズのため、私自身 が手を動かすことはあまり多くありません。 しかし、どんなに高尚なＵＸを叫ぼうとも、そ のものが開発、実現できなければすべては絵空 事と同じだと考えております。 私の具体的なタスクとしては開発の進行管理や クオリティ管理、そして技術仕様の策定やそれ にもとづいたテスト仕様書の作成、テスターの アサインなどを担っております。 一見するとＵＸとは直接関係ないフェーズに見 えますが、開発仕様書の作成やテスト仕様書の 作成など、実はクオリティを管理する上でとて も重要なドキュメントだと捉えており、これが つくれるかどうかはＵＸ設計者としても大切な ことだと考えます。テスト仕様書 / 結果書フロントエンド開発仕様書 開発 / テスト フェーズ 「このページが」「こんな形で」「ちゃんと動 く」 “Web ”サイトや裏で動くシステム を開発します 「いつまでに何ができる？」 「どんなページになった？」 「ちゃんと動く？」
- 19. P.19 ドキュメントのキャプチャ ドキュメントのキャプチャ WORKFLOW 運用改善フェーズで行うこと フェーズ 実施すること 解決する問題 代表的なアウトプット サイト公開後、リニューアル前に定めたあるべ き姿、設計思想、ＫＰＩに沿って、サイトの効 果測定を行っております。 方法はさまざまありますが、最も多いのはやは り GoogleAnalytics によるアクセス解析かと思いま す。 受託業ゆえ、一週単位、日ごと単位での改善提 案は行っておりませんが、１ヶ月、 3 ヶ月、 半年などの定期的なスパンでサイトをみなおし 、あるべき姿に向けて、また時間が経過したか らこその市場の変化も追うことで新たな提案を 行い、サイトの改善が進むよう尽力しておりま す。ユーザーテスト報告書 運用改善 フェーズ 「成果が出ているか？」「どこを改善？」など “ ”さらにビジネスに貢献するよう改善 を施します 「当初の計画通りにいってる？」 「あるべき姿へ近づいてる？」 「問題はどこ？改善策は？」 アクセス解析レポート
- 21. P.21MANAGEMENT 実践したこと：「目標管理の仕組み」 入社半年後にリーダーを任された、その数日後のあるとき、社長がこうぼやいていました。 結果として、全員がの● ● ●が少しアップしました。 ※ ここは統一レイアウトにこだわらず自由にわかりやすく構成
- 22. P.22MANAGEMENT 実践したこと：「夢を語る個人面談」 リーダーになって 2 年目、私は次の問題にぶつかりました。 モチベーションアップを狙い、雑談ベースの個人面談によって、さらに少し達成度 アップ ※ ここは統一レイアウトにこだわらず自由にわかりやすく構成
- 23. P.23PROFILE プロフィール / スキル / 経歴 プロフィール 氏名 苗字 名前 生年月日 / 年齢 19yy 年 mm 月 dd 日 /35 歳 住所 ダミーダミーダミー メールアドレス ほにゃらら @ 職業 Web ディレクター 趣味 サッカー観戦とお酒 スキル 得意なこと プロジェクトマネジメント、 企画要件定義、 UX 設計、 UI 設計、開発ディレク ション アプリケーション PowerPoint 、 Excel 、 Word 、 Ph otoshop 、 Illustrator 、 Dreamwe aver 、 InDesign 、 SubVersion 経歴 平成 11 年 03 月 ｘｘｘｘ高等学校卒業 平成 14 年 03 月 ｘｘｘｘ大学卒業 平成 14 年 04 月 株式会社あああ入社 平成 17 年 02 月 株式会社あああ退社 平成 17 年 02 月 株式会社ダミーに入社 平成 19 年 03 月 株式会社ダミーを退社 平成 21 年 04 月 無名システム開発会社 株式会社へ入社 平成 23 年 02 月 無名システム開発会社 株式会社を退社 平成 23 年 03 月 株式会社うううううへ 入社 平成 24 年 07 月 株式会社うううううを 退社 平成 24 年 10 月 わわわ株式会社へ入社