アイディア発想法とか
モノ作りを初める前にやるこ
      と
    yumi_ishizaki
     20120927
Webサイト作り方のざっくり手
        順
1. 戦略を明確にする
 – サイトの目的は何?売上?アクセス数?
 – ユーザーニーズは?ペルソナ作るといいかもね
2. 要件まとめる
 – どんなコンテンツが欲しい?
 – サイトの特徴。他よりも優れてる点。
 – 1〜2までは、ブレストやマインドマップなど
   使ったり。KJ法でまとめたり。
3. ペーパープロトタイプ/ワイヤーフレーム
   作ってテストしたり
4. しっかり作って完成!
言葉の説明

戦略〜要件までの様々な方法
ブレストって何?
• ブレーンストーミングだよ!
• アイディア発想法の一つ
• ルール
 – まず司会者を決めます
 – 自由にアイディアを発言する
   • (これやるにはお金が足りないし、言わなくても無理だってわ
     かってるよねー…っていう事でも気にせず発言する)
 – アイディアの批判は絶っっ対にしない
 – とにかく量をだす!アイディアは多いほどいい
 – 出し切ったら、他のアイディアを結合したり、共通点を見
   つけたり、改善案をだしたりしてみる
• 意思決定や意見調整するものではない。とにかく色ん
  なアイディアを出すもの!
マインドマップって何?
• Google画像検索結果を参照
• 頭の中にあるモヤモヤっとしたものを可
  視化させる
                ちなみにコレは私の同人誌ネタの
                マインドマップです
「ペルソナを作る」って何?
• 何?
 – ターゲットユーザーのキャラ設定
 – その「ペルソナ」が満足するサイトを作ることを
   目標にする
• 良い点
 – 「一人」と限定することで、方向性がブレない
• 作り方
 – 何人かのユーザーの行動を記録して、そこから共
   通項目を拾って「キャラ設定」を作る
 – 数値から作ったりも出来るのかな?
KJ法って何?
• 問題解決したり、新しい発想を得るための方法だよ
• ペルソナ作るのにも使えるよ
• 手順
 1.   テーマを決める(問題とか、課題とか)
 2.   データを取る
      • アンケート、ヒアリング、ブレストなど
 3.   データの内容を細かい単位で、付箋紙やカードに書く
      「夜9時にニコ動を見る」「ランキングから見る」「ボカロが好き」など…
 4.   同じグループでまとめる(小グループ)
 5.   そのグループに見出しつける
 6.   さらにグループ化していき…中グループ、大グループと
      作っていく
 7.   図解したり、言葉で説明する
      そこから何かを得る!
「ペーパープロトタイプ」って
      何?
• Googleの画像検索を参照
• 何?
  – 紙で作られたプロトタイプ
• 良い点
  –   皆で/一人で「どういうものを作るか?」を検討するのに便利
  –   紙で作るから、楽ちん
  –   動きの遷移とか、実験できる
  –   しっかりUI検討できる
• 難しい点
  – 細かい所は作りこみにくい(紙なので)
• こんな時に良いのでは
  – 新しい遷移、作ったことのないコンテンツを作るのに良いかも
  – 何か面白い発想、便利な発想をしたい時などにも
「ワイヤーフレーム」って何?
• Googleの画像検索を参照
• モックアップって言う人もいるよ
• 何?
 – サイトのUI案
 – 紙でもデータでもOK
• 良い点
 – 各コンテンツをちょっとづつ細かく決めていける
 – 一人/皆で「こんなものを作ったらいいかな」って検討し
   あえる
 – 情報が整理されるので、仕様を共有しやすい
• 注意
 – 慣れないうちは、作り始める前に、下書きしないとカオス
   になる
私が必要だと思ってる
     ワイヤーフレームなど
1. 「全体の遷移図」
 – PCのモニターの一画面に収まるように作る
 – 必要なページが大まかに分かれば良い
 – グループに分けながら作る
   • 「新着ページのグループ」「アカウント設定のグループ」など
     …
2. 「細かい部分の遷移図」
 – 新着ページのみの遷移図、アカウント設定のみの遷移図…
   と、分ける
 – これもまたPCモニターの画面に収めて可視化できるレベル
   で作る
 – ものによっては図ではなく表形式で作っても良い
3. 「コンテンツに含まれる要素」
 – ボタン、リスト、テキスト、画像、、、などレイアウトし
   ていく
キモ

ぽいんと
戦略・要件まとめが大事なワ
          ケ!
          疑問   初めての方への説
                明どうしよう?
そういえば戦略
ってなんだっけ?
     オープン当初は
    玄人さんに使って              初心者まじ大事!
    人気が出るイメー
        ジ      初心者それなりに
               説明できればいっ
結論                 か

                           最初のページに
  作らなくてもいい
      や                    必ず説明を見せ
                              る!
               リンクを軽く置く
                   か
ここでいったんスケジュールの見
     積りです
• 同人誌(プライベートでの作業)の場合…
  自分の予想の2倍で見積もります。
• 仕事の場合は、自分の予想の1.5倍で見積
  もりを伝えます。



• いつだってトラブルはつきもの!多めに
  見積もる癖をつけてます!
まとめ
準備8割、本番2割

アイディア発想法とかモノ作りを初める前にやること

  • 1.
  • 2.
    Webサイト作り方のざっくり手 順 1. 戦略を明確にする – サイトの目的は何?売上?アクセス数? – ユーザーニーズは?ペルソナ作るといいかもね 2. 要件まとめる – どんなコンテンツが欲しい? – サイトの特徴。他よりも優れてる点。 – 1〜2までは、ブレストやマインドマップなど 使ったり。KJ法でまとめたり。 3. ペーパープロトタイプ/ワイヤーフレーム 作ってテストしたり 4. しっかり作って完成!
  • 3.
  • 4.
    ブレストって何? • ブレーンストーミングだよ! • アイディア発想法の一つ •ルール – まず司会者を決めます – 自由にアイディアを発言する • (これやるにはお金が足りないし、言わなくても無理だってわ かってるよねー…っていう事でも気にせず発言する) – アイディアの批判は絶っっ対にしない – とにかく量をだす!アイディアは多いほどいい – 出し切ったら、他のアイディアを結合したり、共通点を見 つけたり、改善案をだしたりしてみる • 意思決定や意見調整するものではない。とにかく色ん なアイディアを出すもの!
  • 5.
    マインドマップって何? • Google画像検索結果を参照 • 頭の中にあるモヤモヤっとしたものを可 視化させる ちなみにコレは私の同人誌ネタの マインドマップです
  • 6.
    「ペルソナを作る」って何? • 何? –ターゲットユーザーのキャラ設定 – その「ペルソナ」が満足するサイトを作ることを 目標にする • 良い点 – 「一人」と限定することで、方向性がブレない • 作り方 – 何人かのユーザーの行動を記録して、そこから共 通項目を拾って「キャラ設定」を作る – 数値から作ったりも出来るのかな?
  • 7.
    KJ法って何? • 問題解決したり、新しい発想を得るための方法だよ • ペルソナ作るのにも使えるよ •手順 1. テーマを決める(問題とか、課題とか) 2. データを取る • アンケート、ヒアリング、ブレストなど 3. データの内容を細かい単位で、付箋紙やカードに書く 「夜9時にニコ動を見る」「ランキングから見る」「ボカロが好き」など… 4. 同じグループでまとめる(小グループ) 5. そのグループに見出しつける 6. さらにグループ化していき…中グループ、大グループと 作っていく 7. 図解したり、言葉で説明する そこから何かを得る!
  • 8.
    「ペーパープロトタイプ」って 何? • Googleの画像検索を参照 • 何? – 紙で作られたプロトタイプ • 良い点 – 皆で/一人で「どういうものを作るか?」を検討するのに便利 – 紙で作るから、楽ちん – 動きの遷移とか、実験できる – しっかりUI検討できる • 難しい点 – 細かい所は作りこみにくい(紙なので) • こんな時に良いのでは – 新しい遷移、作ったことのないコンテンツを作るのに良いかも – 何か面白い発想、便利な発想をしたい時などにも
  • 9.
    「ワイヤーフレーム」って何? • Googleの画像検索を参照 • モックアップって言う人もいるよ •何? – サイトのUI案 – 紙でもデータでもOK • 良い点 – 各コンテンツをちょっとづつ細かく決めていける – 一人/皆で「こんなものを作ったらいいかな」って検討し あえる – 情報が整理されるので、仕様を共有しやすい • 注意 – 慣れないうちは、作り始める前に、下書きしないとカオス になる
  • 10.
    私が必要だと思ってる ワイヤーフレームなど 1. 「全体の遷移図」 – PCのモニターの一画面に収まるように作る – 必要なページが大まかに分かれば良い – グループに分けながら作る • 「新着ページのグループ」「アカウント設定のグループ」など … 2. 「細かい部分の遷移図」 – 新着ページのみの遷移図、アカウント設定のみの遷移図… と、分ける – これもまたPCモニターの画面に収めて可視化できるレベル で作る – ものによっては図ではなく表形式で作っても良い 3. 「コンテンツに含まれる要素」 – ボタン、リスト、テキスト、画像、、、などレイアウトし ていく
  • 11.
  • 12.
    戦略・要件まとめが大事なワ ケ! 疑問 初めての方への説 明どうしよう? そういえば戦略 ってなんだっけ? オープン当初は 玄人さんに使って 初心者まじ大事! 人気が出るイメー ジ 初心者それなりに 説明できればいっ 結論 か 最初のページに 作らなくてもいい や 必ず説明を見せ る! リンクを軽く置く か
  • 13.
    ここでいったんスケジュールの見 積りです • 同人誌(プライベートでの作業)の場合… 自分の予想の2倍で見積もります。 • 仕事の場合は、自分の予想の1.5倍で見積 もりを伝えます。 • いつだってトラブルはつきもの!多めに 見積もる癖をつけてます!
  • 14.