快適にWebデザインするためのフリーランスの仕事の流れ

クリエイティブコーチ ／ Webクリエイター

プロジェクトマネジメント編

夏本健司

2

プロフィール

夏本健司クリエイティブコーチ／Webクリエイター。個人事業主、スモールビジネスの経営者のクリエイティヴィティ向上させる専門コーチ。東京芸術大学美術学部絵画科卒。１９９５年以来２０年間に渡りWebサイト制作と運営に携わってきた。一部上場企業のWeb戦略コンサルティングから町のお菓子屋さんのWebサイトまで、世の中のあらゆるタイプのプロジェクトに携わる中で制作の成功法則を発見、セミナーや勉強会を通じてその普及と「本当に仕事のできるWebクリエイター」の育成に力を入れている。

3

今日この授業で学べること

余計なことに時間を取られず、よりデザインの時間を増やす方法

気持ちよく快適にWebデザインをする方法

「Webデザイン根拠ネタ」という説得方法

１

２

３

4

今日この授業を受けなかったら・・・

クライントの要望・意見に反論できない。

こんな悩み、解決されないままかも？

自分のデザインの説得に苦労する。

意味のない修正が絶えない。

いつもアタフタ納期ギリギリになる。

デザイン以外の雑務が多くて集中できない。

5

今日あなたに知ってほしいこと

フリーランサーは、サラリーマンと時代と仕事の流れが同じではいけない。フリーランサーは、自分の仕事が気持ちよくできるように、モチベーションが上がるように環境を整えることができる。

6

１．Webデザイン：まず最初にする「あること」

２．夏本流Webデザインの進め方

３．That‘s悩み解決！～あなたの悩みを解決します～

目次

１．Webデザイン：まず最初にする「あること」

8

１．Webデザイン：まず最初にする「あること」

２．夏本流Webデザインの進め方

３．That‘s悩み解決！～あなたの悩みを解決します～

今の地点

9

１．Webデザイン：まず最初にする「あること」

なぜ「あること」が必要なのか？

よく陥りがちな間違い

すべてを解決する「あること」を公開！

「あること」とは？

プロのWebデザイナーがまず最初にやらなければならない「あること」、それは

10

「あること」とは？

「ワークフロー」

をクライントに示すこと。

11

なぜ「ワークフロー」を示す必要があるのか？

クライントは「どうやってデザインが完成するのか」わからないから。

だから不安。

だから「デザイン案３つ出して」などと言う。

理由１

12

クライントは「デザインの良い悪い」が判断できないから。

だから「う～ん。もうチョッとこんな感じで」などと根拠なくファジーなことを言う。

だから「他の案ない？」などと平気で言う。

理由２

なぜ「ワークフロー」を示す必要があるのか？

13

関係者全員で共通の基盤を共有するため。

基準がないと、それぞれの思いがバラバラで統一できない。

トラブルが起こった時、予定通り進まなくなった時に原因を明確にするため。

理由３

なぜ「ワークフロー」を示す必要があるのか？

14

よく陥りがちな間違い

「制作スケジュール」をクライントに提出していませんか？

工程と期間を示した制作スケジュール、ガントチャートのWBSは、プロジェクトっぽくて格好いいが、ほとんどのクライントはその意味を正しく理解できていないので共有する意味がない。

その１

＜「スケジュール表」を提出しない方がいい理由＞

15

よく陥りがちな間違い

あなたの「希望的観測」でスケジューリングしていませんか？

制作の過程では、想定外のことが必ず起こる。その度に制作スケジュールを変更して提出するのは、時間のムダである。貴重な作業時間は、もっとクリエイティブな時間に使うべき。

その２

＜「希望的観測」でスケジューリングしてはいけない理由＞

16

よく陥りがちな間違い

「打ち合わせ日」を、あなたが記入していませんか？

人は、人に決めてもらったことは心理的に「ひとごと」として認識するから。「じぶんごと」のプロジェクトとして認識してもらうため、クライントに責任を持って打ち合わせ日を記入してもらう。

その３

＜「打ち合わせ日」をあなたが記入してはいけない理由＞

17

すべてを解決する「ワークフロー」。

これが「夏本式ワークフロー」だ！

ベータ版レビュー

キックオフ

アルファ版レビュー

パブリック版レビュー

UI

コンテンツ

グーグルチューニング

// / /1w or 2w 1w or 2w 1w or 2w1ターム ２ターム ３ターム

ベータ版開発期間 アルファ版開発期間 パブリック版開発期間

30%完成

キックオフの内容を元にスケルトンを整備する。

キックオフの内容を元にコンテンツリストに記入する。

レビューの改善点に優先順位をつけブラッシュアップする。

レビューの改善点に優先順位をつけブラッシュアップする。

レビューの改善点をさらにブラッシュアップし完成させる。

レビューの改善点をさらにブラッシュアップし完成させる。70%

完成100%完成

デザインの仕事をスムーズに行うために、これをクライントや

関係者と“握る”ことが一番大事！

すべてを解決する「ワークフロー」。

18

あなたは、制作スケジュールを作成しますか？

スケジュール通り進まなかったり、スケジュールの調整や修正作業で計画したデザインが進まなかったりしたことはありませんか？

19

あなたに質問です。

A：あるB：ないC：わからない

回答をチャット欄に書き込んでください！

２．夏本流Webデザインの進め方

21

１．Webデザイン：まず最初にする「あること」

２．夏本流Webデザインの進め方

３．That‘s悩み解決！～あなたの悩みを解決します～

今の地点

夏本流Webデザインは「効率」重視。

22

２．夏本流Webデザインの進め方

１．ワイヤーフレームを引かない

２．Photoshopで画面デザインしない

３．修正を引き受けない

４．「Designing in the browser」で行く！

いきなりページを作る。

23

ワイヤーフレームを引かない

いきなりページを作る。

24

ワイヤーフレームを引かない

ワイヤーフレームの代わりになっているHTMLの「雛形」があり、それにコンテンツと画像を埋めてCSSのプロパティ値を調整するだけ（lessを使う）でプロトタイプが出来上がるようになっている。

決まったサイズ・数の画像パーツを作るだけ。

25

Photoshopで画面デザインをしない

headerVI.png

mpt02block01.png

mainvisual_01～03.jpg mpt12blck01.png

mpt5blck01.pngsprit01.gif

sprit02.gif

決まった数の画像パーツを作るだけ。

26

Photoshopで画面デザインをしない

まずは決まった数の画像を機械的に作成する。制作途中で必要なコンテンツが出てきたらその時に追加する。最初からレスポンシブWebデザインに対応済みになっているので、後から調整する必要がない。

「修正」はしない。「改善」する。

27

修正を引き受けない

＜Designing in the browserの基本形＞

情報設計画面設計

プロトタイプ開発

ビジュアルデザイン

サーバ実装

テストを繰り返して精度を上げる

「改善」

28

夏本流“Designing in the browser”の進め方

＜この工程を１～数日単位で同時進行させる＞

情報設計画面設計

プロトタイプ開発

ビジュアルデザイン

サーバ実装

WordPressにしてメンバー間で共有。仕様書は書かない。

HTML5、CSS3、jquary

画像ファイル作成

画像ファイルとCSSを

ブラッシュアップする

表示テスト動作テスト

29

“Designing in the browser”のメリット

予算の限られている中小企業やスモールビジネス

向けのWebサイト構築に威力を発揮する。

最初から実際の画面を見てもらって作業をするので爆速的に制作が早く進む。

やることが多すぎて、何から手をつけていいかわからないことはありませんか？

30

あなたに質問です。

A：あるB：ないC：わからない

回答をチャット欄に書き込んでください！

３．That‘s悩み解決！～あなたの悩みを解決します～

32

１．Webデザイン：まず最初にする「あること」

２．夏本流Webデザインの進め方

３．That‘s悩み解決！～あなたの悩みを解決します～

今の地点

33

「フリーで仕事を安定させる方法はありますか？」

（継続的に仕事をもらう方法）

回答

質問１

新規受注ではなく運用業務メインにすること。

新規受注の場合でも支払いを月額制にしてもらうことで収入面で安定する。

ログ解析やランディングページの提案など、他の仕事を増やす努力をする。

A

B

C

34

「提携パートナーと上手くやる方法はありますか？」

質問２

回答

自分の考えや価値観などをブログやfacebookで意思表示し、合わない人を最初から排除しておくこと。

仕事上の共通項を増やすこと。ワークフローや考え方など。

A、Bでもダメな場合は、割り切るしかない・・・

A

B

C

35

「トラブルから身を守る方法は？」

質問３

回答

ワークフローや考え方など、制作上の共通項を多く持つことが大事。トラブルの多くはボタンのかけ違いやコミュニケーション不足などの人間関係が発端になっている場合が多い。根本的な部分を正さないと、トラブルは減らない。

36

「ひとりでPCに向かっていると『コミュニケーション力が落ちてしまうかもしれない』と不安になります。」

質問４

回答

同業者同士の横のつながりを増やしてください！テクニックやノウハウ面だけでなく、ビジネス面やメンタル面、価値観も共有できる、質の高いコミュニティに参加することをお勧めします。

今悩んでいること、聞いてみたいこと、何でもOK！

チャット欄に書き込んでください！

37

あなたに質問にお答えします。

ま・と・め

制作スケジュールの替わりに「ワークフロー」をクライントと共有する。

「Designing for browser」で制作プロセスを短縮させて効率化する。

すべては、自分が快適にデザインするために行う。

１

２

40

まとめ

まとめ

41

クライントにとって

良い影響

自分の環境が

快適になる

周りにとっても良い影響

クライントにとって

良い影響

１

２

３

フリーランスWebデザイナーのプロジェクトマネジメントの第一歩は

「自分マネジメント」。

自分が、常に快適にデザインできるように、

仕組みを作り、環境を整えることが「自分マネジメント」の第一歩。

42

まとめ

42

レポート課題今日の授業で得た気付きや実際に使えそうなノウハウがあったら教えてください。レポートを送付してくださった方全員に

「Webデザインの根拠ネタ１０選と使い方ガイド」をプレゼントします。

提出先：kadai@schoo.jp

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

43

Webデザイン根拠ネタ１０選

１．「コンセプトから導き出しています」２．「ユーザー目線です」３．「モノクロにするとコントラストは適切です」４．「トレンドをおさえています」５．「他社が儲かっているとは限りません」６．「スクロールが好まれ、クリックは減少傾向にあります」７．「テキストはより少ない方がユーザーに好まれます」８．「デザインにより時間をかけ、コーディングをより少なくするため

の方法です」９．「まずこれで公開してみましょう」１０．「やり直す時間と公開を遅らせる時間とどっちを優先しますか？」

この問答集を詳しく解説しています。

３

44

お知らせ

『あなたの「フリーランス化計画」

を成功させる９つのステップ』

開催のご案内

12月7日（日）18:00～21:00都内某所にて

詳細は http://na2ken.com/をご覧ください。

誰も教えてくれないフリーランスのなり方・続け方を事例を交えてわかりやすく解説します。

45

最後に

気持ちよく、快適にWebデザインするためには

どうしたら良いか？日々考え続けよう！

Webデザイナーのための

役立つ情報を公開中！

http://na2ken.com/