Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司

18,289 views

Published on

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
http://schoo.jp/class/1611/room
ーーーーーーーーーーーーーーーーーーーーーーー

Published in: Business
  • Be the first to comment

快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司

  1. 1. 快適にWebデザインするための フリーランスの仕事の流れ プロジェクトマネジメント編 クリエイティブコーチ/ Webクリエイター 夏本健司
  2. 2. 2 プロフィール 夏本健司 クリエイティブコーチ/Webクリエイター。 個人事業主、スモールビジネスの経営者のク リエイティヴィティ向上させる専門コーチ。 東京芸術大学美術学部絵画科卒。1995年 以来20年間に渡りWebサイト制作と運営に携 わってきた。 一部上場企業のWeb戦略コンサルティングか ら町のお菓子屋さんのWebサイトまで、世の 中のあらゆるタイプのプロジェクトに携わる中 で制作の成功法則を発見、セミナーや勉強会 を通じてその普及と「本当に仕事のできる Webクリエイター」の育成に力を入れている。
  3. 3. 3 今日この授業で学べること 気持ちよく快適にWebデザインを する方法 余計なことに時間を取られず、より デザインの時間を増やす方法 「Webデザイン根拠ネタ」という説得方法 1 2 3
  4. 4. 今日この授業を受けなかったら・・・ デザイン以外の雑務が多くて集中できない 。 4 こんな悩み、解決されないままかも? 意味のない修正が絶えない。 自分のデザインの説得に苦労する。 クライントの要望・意見に反論できない。 いつもアタフタ納期ギリギリになる。
  5. 5. 5 今日あなたに知ってほしいこと フリーランサーは、サラリーマンと時代と 仕事の流れが同じではいけない。 フリーランサーは、自分の仕事が気持ちよ くできるように、モチベーションが上がるよ うに環境を整えることができる。
  6. 6. 目次 1.Webデザイン:まず最初にする「あること」 6 2.夏本流Webデザインの進め方 3.That‘s悩み解決ぱ ~あなたの悩みを解決します~
  7. 7. 1.Webデザイン:まず最初にする「あること」
  8. 8. 8 今の地点 1.Webデザイン:まず最初にする「あること」 2.夏本流Webデザインの進め方 3.That‘s悩み解決ぱ ~あなたの悩みを解決します~
  9. 9. 1.Webデザイン:まず最初にする 9 「あること」 「あること」とは? なぜ「あること」が必要なのか? よく陥りがちな間違い すべてを解決する「あること」を公開ぱ
  10. 10. プロのWebデザイナーがまず最初にやらなけれ ばならない「あること」、それは 10 「あること」とは? 「ワークフロー」 をクライントに示すこと。
  11. 11. 11 なぜ「ワークフロー」を示す 必要があるのか? 理由1 クライントは「どうやってデザインが完成する のか」わからないから。 だから不安。 だから「デザイン案3つ出して」などと言う。
  12. 12. なぜ「ワークフロー」を示す 必要があるのか? 理由2 クライントは「デザインの良い悪い」が判断 できないから。 12 だから「う~ん。もうチョッとこんな感じで」などと根 拠なくファジーなことを言う。 だから「他の案ない?」などと平気で言う。
  13. 13. なぜ「ワークフロー」を示す 必要があるのか? 理由3 関係者全員で共通の基盤を共有するため。 13 基準がないと、それぞれの思いがバラバラで統一 できない。 トラブルが起こった時、予定通り進まなくなった時に 原因を明確にするため。
  14. 14. 14 よく陥りがちな間違い その1 「制作スケジュール」をクライントに提出して いませんか? <「スケジュール表」を提出しない方がいい理由> 工程と期間を示した制作スケジュール、ガントチャ ートのWBSは、プロジェクトっぽくて格好いいが、 ほとんどのクライントはその意味を正しく理解でき ていないので共有する意味がない。
  15. 15. <「希望的観測」でスケジューリングしてはいけない理由> 15 よく陥りがちな間違い その2 あなたの「希望的観測」でスケジューリング していませんか? 制作の過程では、想定外のことが必ず起こる。その度に 制作スケジュールを変更して提出するのは、時間のムダ である。貴重な作業時間は、もっとクリエイティブな時間 に使うべき。
  16. 16. <「打ち合わせ日」をあなたが記入してはいけない理由> 16 よく陥りがちな間違い その3 「打ち合わせ日」を、あなたが記入していませ んか? 人は、人に決めてもらったことは心理的に「ひとごと」とし て認識するから。「じぶんごと」のプロジェクトとして認識 してもらうため、クライントに責任を持って打ち合わせ日 を記入してもらう。
  17. 17. すべてを解決する「ワークフロー」。 17 これが「夏本式ワークフロー」だぱ ベータ版開発期間アルファ版開発期間パブリック版開発期間 1ターム2ターム3ターム ベータ版レビュー キックオフ アルファ版レビュー パブリック版レビュー U I コンテンツ グーグルチューニング / 1w or 2w / 1w or 2w / 1w or 2w / 30% 完成 キックオフの 内容を元にス ケルトンを整 備する。 キックオフの 内容を元にコ ンテンツリスト に記入する。 レビューの改 善点に優先順 位をつけブラッ シュアップする 。 レビューの改 善点に優先順 位をつけブラッ シュアップする 。 レビューの改 善点をさらにブ ラッシュアップ し完成させる。 レビューの改 善点をさらにブ ラッシュアップ し完成させる。70% 完成 100% 完成
  18. 18. すべてを解決する「ワークフロー」。 デザインの仕事をスムーズに 行うために、これをクライントや 関係者と“握る”ことが一番大事ぱ 18
  19. 19. あなたは、制作スケジュールを作成しますか? スケジュール通り進まなかったり、スケジュール の調整や修正作業で計画したデザインが進ま なかったりしたことはありませんか? 19 あなたに質問です。 A:ある B:ない C:わからない 回答をチャット欄に書き込んでくださいぱ
  20. 20. 2.夏本流Webデザインの進め方
  21. 21. 今の地点 1.Webデザイン:まず最初にする「あること」 2.夏本流Webデザインの進め方 3.That‘s悩み解決ぱ 21 ~あなたの悩みを解決します~
  22. 22. 2.夏本流Webデザインの進め方 夏本流Webデザインは「効率」重視。 22 1.ワイヤーフレームを引かない 2.Photoshopで画面デザインしない 3.修正を引き受けない 4.「Designing in the browser」で行くぱ
  23. 23. いきなりページを作る。 23 ワイヤーフレームを引かない
  24. 24. いきなりページを作る。 24 ワイヤーフレームを引かない ワイヤーフレームの代わりになっている HTMLの「雛形」があり、それにコンテンツと 画像を埋めてCSSのプロパティ値を調整す るだけ(lessを使う)でプロトタイプが出来上 がるようになっている。
  25. 25. Photoshopで画面デザインをしない 決まったサイズ・数の画像パーツを作るだけ。 25 headerVI.png mainvisual_01~03.jpg mpt12blck01.png mpt02block01.pn g sprit01.gif mpt5blck01.png sprit02.gif
  26. 26. Photoshopで画面デザインをしない 決まった数の画像パーツを作るだけ。 まずは決まった数の画像を機械的に作成す る。制作途中で必要なコンテンツが出てきた らその時に追加する。 最初からレスポンシブWebデザインに対応 済みになっているので、後から調整する必 要がない。 26
  27. 27. 「修正」はしない。「改善」する。 27 修正を引き受けない <Designing in the browserの基本形> 情報設計 画面設計 プロトタイプ 開発 ビジュアル デザイン サーバ 実装 テストを繰り返して精度を上げる 「改善」
  28. 28. 夏本流“Designing in the browser” 28 の進め方 <この工程を1~数日単位で同時進行させる> 情報設計 画面設計 プロトタイプ 開発 ビジュアル デザイン サーバ 実装 WordPressに してメンバー 間で共有。 仕様書は 書かない。 HTML5、 CSS3、 jquary 画像ファイル 作成 画像ファイル とCSSを ブラッシュ アップする 表示テスト 動作テスト
  29. 29. 作業をするので爆速的に制作が早く進む。 29 “Designing in the browser” のメリット 最初から実際の画面を見てもらって 予算の限られている 中小企業やスモールビジネス 向けのWebサイト構築に 威力を発揮する。
  30. 30. やることが多すぎて、何から手をつけていい かわからないことはありませんか? 30 あなたに質問です。 A:ある B:ない C:わからない 回答をチャット欄に書き込んでくださいぱ
  31. 31. 3.That‘s悩み解決ぱ ~あなたの悩みを解決します~
  32. 32. 今の地点 1.Webデザイン:まず最初にする「あること」 32 2.夏本流Webデザインの進め方 3.That‘s悩み解決ぱ ~あなたの悩みを解決します~
  33. 33. 質問1 「フリーで仕事を安定させる方法 33 はありますか?」 (継続的に仕事をもらう方法) 回答 新規受注ではなく運用業務メインにすること。 新規受注の場合でも支払いを月額制にしてもらうこ とで収入面で安定する。 ログ解析やランディングページの提案など、他の仕 事を増やす努力をする。 A B C
  34. 34. 34 質問2 「提携パートナーと上手くやる 方法はありますか?」 回答 自分の考えや価値観などをブログやfacebook で意思表示し、合わない人を最初から排除しておくこ と。 仕事上の共通項を増やすこと。ワークフロー や考え方など。 A、Bでもダメな場合は、割り切るしかない・・・ A B C
  35. 35. 「トラブルから身を守る方法は?」 35 質問3 回答 ワークフローや考え方など、制作上の共通項を多く持つこ とが大事。トラブルの多くはボタンのかけ違いやコミュニケ ーション不足などの人間関係が発端になっている場合が 多い。 根本的な部分を正さないと、トラブルは減らない。
  36. 36. 36 質問4 「ひとりでPCに向かっていると 『コミュニケーション力が落ちてしまう かもしれない』と不安になります。」 回答 同業者同士の横のつながりを増やしてくださいぱ テクニックやノウハウ面だけでなく、ビジネス面やメンタル 面、価値観も共有できる、質の高いコミュニティに参加す ることをお勧めします。
  37. 37. 今悩んでいること、 聞いてみたいこと、何でもOKぱ チャット欄に書き込んでくださいぱ 37 あなたに質問にお答えします。
  38. 38. ま・と・め
  39. 39. すべては、 自分が快適にデザインするために行う。 1 制作スケジュールの替わりに 「ワークフロー」をクライントと共有する。 2 「Designing for browser」で制作プロセスを 短縮させて効率化する。 40 まとめ
  40. 40. まとめ 41 自分の環境 が 快適になる 周りにとって も良い影響 1 クライントに とって 良い影響 2 3
  41. 41. フリーランスWebデザイナーの プロジェクトマネジメントの第一歩は 「自分マネジメント」。 自分が、常に快適にデザインできるように、 仕組みを作り、環境を整えることが 「自分マネジメント」の第一歩。 42 まとめ
  42. 42. 42 レポート課題 今日の授業で得た気付きや実際に使えそうな ノウハウがあったら教えてください。 レポートを送付してくださった方全員に 「Webデザインの根拠ネタ10選と使い 方ガイド」をプレゼントします。 提出先:kadai@schoo.jp メール件名:快適にWebデザインするためのフリー ランスの仕事の流れ【プロジェクトマネジメント編】
  43. 43. 43 Webデザイン根拠ネタ10選 1.「コンセプトから導き出しています」 2.「ユーザー目線です」 3.「モノクロにするとコントラストは適切です」 4.「トレンドをおさえています」 5.「他社が儲かっているとは限りません」 6.「スクロールが好まれ、クリックは減少傾向にあります」 7.「テキストはより少ない方がユーザーに好まれます」 8.「デザインにより時間をかけ、コーディングをより少なくするため の方法です」 9.「まずこれで公開してみましょう」 10.「やり直す時間と公開を遅らせる時間とどっちを優先しますか?」 この問答集を詳しく解説しています。 3
  44. 44. 詳細はhttp://na2ken.com/ をご覧ください。 誰も教えてくれないフリーランスのな り方・続け方を事例を交えてわかりや すく解説します。 44 お知らせ 『あなたの「フリーランス化計画」 を成功させる9つのステップ』 開催のご案内 12月7日(日)18:00~21:00 都内某所にて
  45. 45. 45 最後に 気持ちよく、快適にWebデザインするためには どうしたら良いか?日々考え続けようぱ Webデザイナーのための 役立つ情報を公開中ぱ http://na2ken.com/

×