ポケてら

レジュメはこちら

1 イントロダクション

(1) 期待のアップ

• 講座の開始を宣言する
• Themifyを使うと、こんなサイトが作れるを見せつける

(2) Themify をマスターするポイントを紹介

• Themifyの要点を見せ、これを理解できれば、自由自在と伝える
• Themifyのポイント
  • Themify で作る前に、完成させる
  • モックアップ、モックアップ、モックアップ – 使いながら使い方を覚える
• 一日、ワイワイ、チームで課題をクリアーしていくとできるようになる!

ポイント

できるだけ、手短に終わらせ、次のワークへ進む。

2 ウォーミングアップ

(1) Good & New (3min)

• Good&Newをする理由を伝える
• チームで協力するので、良い雰囲気を作るためなど
• チームに分かれて、2分間ぐるぐる回す
• 一周目は、自分の名前を言う
• 拍手をしっかりする
• 説明するよりも、実際にやって見せる

(2) Think & Listen to Design (6min)

• ペアに分かれる(Good & New したチームをなるべく維持して)
• 美しいデザイン一覧から、好きと思うデザインを一つ選ぶ
• 話し手は無理やり、そのデザインが好きな理由を説明しまくる
• 2分間話し、交代する

(3) 振り返り

• 2, 3人に意見をもらう
• 好きの理由を言葉にしてみると、どんな変化があったか、気づきは?
• 発見したことは?

ポイント

Think & Listen では、ちょっと早口で話すぐらいに指示する。リラックスして、話し始め られるように、ファシリテーションする。

3 モックアップを作る

(1) モックアップ、写経をする意味を伝え、やる気を引き出す

• Themifyを使いこなすには「デザインセンス」が必要
• デザインセンスを身につける、シンプルで強力な方法を行う
• このワークだけでなく、家でもやってね

(2) 手書きで写す (15min)

• 手書きで、なるべく雰囲気を維持して書き写す(10min)
• 手書きするときは、A4の紙を半分に切って、縦長にしてもらう
  • すぐに実行してもらう
  • コツを伝えながら、テーブルを回る
    • なるべく雰囲気を残す、比率などをなるべく維持する
    • うまく写すより、良くみるために写す

ポイント

白い紙をたくさん用意する。ペンなどもあればいい。 マスキングテープなどで、縦長にしてもらうのも一つ。 パソコンを見ながら、作業してもらう。

3-2 モックアップを作る 発表

(3) 振り返る(3min)

• 書き写してみて、どんな発見があったか?

3-3 モックアップ

(3) なるべく真似して、別のものに置き換える (15min)

• 説明するより、例を示したり、デモを行って見せる
• なるべく、言葉の感じ、短さ、雰囲気を踏襲して書き換える(15min)

3-4 モックアップ を作る 発表

(4) 振り返り (5min)

• チーム(同じテーブル)で、見せ合う(3min)
• 作ったものを見せながら、工夫したところ、気づき、発見をシェアする
• 全体で発見をシェアする(2, 3人、テーブル内の気づきをシェアしてもらう) 2min

4 Row&Cols

(1) ワークの狙いを説明する (5min)

• 最近のWebデザインは「Row(行)」と「Cols (列)」によってデザインする
• レスポンシブデザインを実現するための一般的な方法
• デザインを見たら、行と列に分解する目を持つ必要がある
• 練習してみよう
• 一つを例に、RowsとColsを分割してみて、答え合わせをする
• 以外に簡単だと印象付ける

(2) 練習問題を行う (5min)

• 3問ぐらい、チームで練習問題を行う
• 予想してから、答えを見て、ワイワイやる
• 感覚が得られた!と思えたら、次に進む

4-2 Rows&Cols 発表

(3) 自分が作ったモックアップをRows、Cols で分析する (10min)

• 自分が作ったモックアップをRows、Colsで分析する
• なんとなく、できたらOK
• これが、モックアップを作ると言うことと伝える

5 Themifyの操作

(1) ワークのポイントを説明する (5min)

• Themifyは、WordPressの基本的な編集とは全く別物、別のソフトになると考えてもらう
• デモのインストールと削除
• デモを色々触って、探求することを伝える
• 実際に、触りながら、こんな感じと伝える

(2) 手順書と仕組みを見ながら作業 (15min)

• 実際に作業をして、理解してもらう
• Themifyの構造を理解するために、手順を行なっていく
• 単に手順を行うのではなく、構造を理解するために行なっていることを意識してもらう ように伝えながら、テーブルを回る
• パーツの細かい部分は、わからなくて大丈夫と伝える、後で探求する

ポイント

Themify ってこんな感じ、パーツを入れていきながら、設定するような使い方をすること をなんとなく把握すればOK。

6 Rows & Colsを実装する

(1) 実演を見せる (10min)

• サンプルを分析する(Rows、Cols)
• Rows、Colsで大枠を作り、パーツを適当に設定する様子を見せる
• そのあとに、フロントエディタで編集する流れを見せる

(2) チーム全員が理解できるように協力する (20min)

• サンプルを分析して、そのパーツを入れる部分をやって見る
• チーム全員が理解できるように助け合うように伝える
• それぞれのチームでやってみる
• メモできるスペースを空ける

6-2 Rows&Cols 発表会

(3) 振り返り (5min)

• フリートーク(3min)
  • すんなり理解できなかった人は、誰か?
  • どんな勘違いをしていたのか?
  • それは、どうやって解決したのか?
• 全体シェア(2min)

ポイント

チームをシャッフルするといい。そのときに、得意そうな人と、そうでない人を混ぜる とスムーズになる。

7 パーツ探求

(1) 説明する (3min)

• パーツ探求を行うが、条件が以下の通り
• どんなパーツがあるか、実際に試す
• ただ触るのではなく、こんなことに使えそうとアイデアを出しメモする
• 他のチームに発表をすることを意識してもらう

(2) パーツ探求 (15min)

• 探求中に、用語解説も参考にするように伝える
• 基本的な用語を理解していると、予想が立ちやすいことを実感してもらう

7-2 パーツ探求 発表

(3) チーム分けしてシェア (5min)

• どんな風に探求したとき、良く理解できたか?
• フリートークする

(4) ここまで学んだことを発表

• ここまでで学んだこと、気づいたことをフリートーク
• シェアしてもらう(2, 3人に)

ポイント

パーツのことついては、触れなくても良い。

8 仕事に学習を組み込む1

(1) 説明する (5min)

• 具体的に自分の目指すサイトを作ってみる。こんなのが作りたいと決める
• 仕事をしながら、学習して、どんどんWordPress、Themifyを上達する方法を学ぶ
• FILMシートを書き込み、実際にやって見て、振り返る
• 最大のポイントは「学習を意識する」こと
• 期待する結果と、プロセスに学習の要素を入れる

(2) FILMシートを書き込む (10min)

• FILMシートを書き込む
• 作業する時間は、25min(ポモドーロテクニック)
• お互いに発表し合う

(3) 作業する (25min)

• 作業中に困っている人がいたら、ラーニングファシリテーションする
• 使う武器は、期待する結果、プロセス、前提、実際の結果
• ITの5つのサイクルを使う

8-2 仕事に学習を組み込む 振り返り

(4) 振り返りを行う (10min)

•  FILMシートを見ながら、振り返りを行う
• よかった点、改善点、次やるなら、予期せぬこと、学んだこと
• 3分ぐらいで、各人で振り返りをする
• 5分ぐらいで、チーム内でシェア+全体でシェア
• 5分ぐらいで、これは発見だった!を2, 3人にシェアしてもらう

ポイント

 いろんな知識の資料を見てもらうようにアドバイスをするのが良い。この知識を使えば、 こんな結果が得られるんじゃないか?と予測をするのが、効果的な学び方となる。

9 仕事に学習を組み込む(2)

(1) FILMシートの書き込み (10min)

• 今回は「学習と成果のバランス」を考えてみよう。学習しすぎると、成果が出ない時が ある。成果を出しつつ、適度に学習をする
• 期待する結果、プロセス、前提
• 新しい知識を獲得すること、先に聞いたことをやってみることなどをアドバイスする
• 3分ほどで書いて、2分でシェアする

(2) 作業する (25min)

• 先と同じように、ファシリテーションする

ポイント

うまく期待する結果を書き出さないと、進まないことも多い。例えば、明確で具体的な期待する結果を用意した方が良い場合がある。あるいは、良い学習をするぞ!とするのが一つはいいと思う。他にも人に教える前提で作っておくとよい。良い学習状態を引き起こすような姿勢を書き込むのが良い。

9-2 仕事に学習を組み込む 振り返り

(3) 振り返り (15min)

• FILMシートを使って振り返りをする
• チーム内でシェア(5minほど)
• 気づきを全体でシェア(5min)

10 まとめ

(1) フリートーク (5min)

• 今日学んだことは何か?
• これから2週間、どうするか?

(2) 発表

• 適度に発表してもらう

(3) まとめ

• Themifyの基礎を身につけて、それを発展させた
• 具体的な使い方だけでなく、使い方を増やすことを学んだはず
• さらに仕事をしながら(WordPressを触っている間に)、WPをどんどん学ぶ方法、成果と学習をバランスさせることも学んだ
• 良い学習と成果を出せる目標を設定して、どんどん触って欲しいと伝える

---