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