KANSOテーマ
KANSOテーマで素早く、簡単に、Webサイトを作ろう
version 2.0
toiee Lab LIVE™ textbook for Learning Faciliator
© 2018 toiee Lab (toiee.jp)
講座資料
[wc-restrict id=”28,6004″ wcr_id=”10534″ message=”講座資料を見るには、お申し込みが必要です”] 以下のリンクを「副クリック」し、保存してください [/wc-restrict]ワークショップ動画
講座の全体像
この講座は、パソコン教室ではありません。一般のパソコン教室のように、講師が「ここをクリックして、あそこをクリックして・・・」と使い方を指示して、ボタンを押していくのではなく「自分で探求して理解する」プロセスを通じて、 高いレベルのITリテラシ を身につけます。
さらに、 Markdown を使って編集することを学び、実際に活用して行きます。
この講座は、特定のスキルを学び切って、習得させるようには設計されていません。どのように学ぶのか、どのようなものの見方が必要なのか、どのような分野の知識、スキルがあれば良いのか？を学ぶことです。
習得レベルに達するには、帰宅後あるいはフォロアップ（ハンズオン）などで、
- 数回、KANSOテーマをセットアップすること
- 特定の目的を持って、サイトを構築して見ること
- Markdownを使って編集作業をなんども行うこと
が必要です。
前提
- レンタルサーバー、独自ドメインについては扱いません
- レンタルサーバーでWordPressを立ち上げて、公開できることを前提としています
- Local by Flywheel をインストールする、Markdownエディタをインストールするなどの作業ができる前提です
注意すべきポイント
- Markdown という仕組みに、一部の参加者は混乱をします
- 「必要性がわからない」などの意見が聞かれますが、苦手意識や周りと比べて恥を書きたくないという気持ちから、様々な創造的回避をしますので注意が必要です
- 「わからないが役立つ」ということを伝えていくことが大切です
- Markdown の良さは、実際に試すしかありません。試して見て、良いと思うプロセスが、「最初から良いと説得されるよりもいい」と知る体験を提供してください
講座前の準備について
このワークショップは、WordPressの基礎を理解していることを前提としています。WordPressボトムアップワークショップを受講済みレベルを前提としています。
また、講座前に「 https://kansowp.toiee.jp/ 」にて、KANSOテーマのインストール、設定を終えている状態でスタートするように設計されています。
また、Markdownエディタをインストールしてもらう。可能なら、事前に触っておいてもらうと良いでしょう。
講座資料について
https://kansowp.toiee.jp/ が講座資料となる。また、Workshop用のページも用意されているので、そちらを参照するように案内する。
なお、Markdown については、実際に試しておいてもらえた方が、スムーズに学習しやすい。
イントロ
講座の導入です。講座のゴールなどに触れます。
| 開始 | 終了 | 所用時間 |
|---|---|---|
| 0:00 | 0:05 | 5min |
設計意図
- 今日の講座のゴールを知らせる
- (1) Less is more : ミース・ファンデル・ローエ
- (2) シンプルとは究極の洗練である
- (3) 削ぎ落として、無駄を減らして、作ることを学びます
- 驚くほどの「生産性向上」を狙って、KANSO の仕事術を学びます
- 使い方ではなく「仕事術」を学んでもらうことを意識してもらう
- それともう一つ、「マニュアルサイトをみる方法」も学んで帰ってもらう
ワークの進行
1. 話す
[vimeo 259113867 w=640 h=360]- つかみをしっかりさせる
- 名言を紹介する（シンプルに関するもの）
- 減らせば、減らすほど、良いデザイン、良いサイト、時間がかからない、伝わるを目指す
- 生産的、時間をかけない作り方を学ぶ
- 信じられないぐらい「早くサイトを立ち上げ、作って、公開」「更新」できるようになる
- 仕事術を次々と「探求して」学ぶ
- マニュアルサイトを読めるようになってもらう
- だから、資料はないよ！
ポイント
- 長い自己紹介などはせず、短く説明して、スムーズに次のワークに入る
- ゆっくり、落ち着いて話す
ウォーミングアップ
学習に取り組みやすくするための、ウォーミングアップのワークです。
| 開始 | 終了 | 所用時間 |
|---|---|---|
| 0:05 | 0:15 | 15min |
設計意図
- Good & Newで、リラックスする。他の参加者と打ち解ける
- Think & Listenで、「シンプル思考モード」になってもらう
ワークの進行
1. Good & New [5min]
[vimeo 259113876 w=640 h=360]- 学習モードに入るために、ウォーミングアップのワークをする
- 端的に、「良く」て、「新しかった」ことを説明するワーク
- 些細なことで構わない
- 例) 今日朝食べたサンドイッチが美味しかったです
ポイント
- クッシュボールが必要
- やり方をデモして示すと、学習者にとって理解しやすい
- なんと言えば良いかわからない学習者がいるときは、「些細なことでもいいですよ」「今日の朝何かなかったですか？」などと介入する
2. Think & Listen [10min]
[vimeo 259113886 w=640 h=360]- Think & Listenは、思いつくまま、頭によぎったことを流れるように話すワーク
- 支離滅裂になっても構わないので、話し続けてもらう
- ペアになってもらい、話し手と聴き手を決めてもらう
- このワークでは、資料を見ながら、話してもらう
- 「そもそも・・・がわからない」と話し始めてもらう
- テーマは、シンプルがいい理由 を無理やり話して、シンプル思考モードに入ってもらうこと
ポイント
- 説明しきってからではなく、「まずはペアになってください」など、行動をさせながら説明すると、説明しやすい
- デモをすると、学習者がThink & Listenの取り組み方を理解しやすい
- 話し手と聴き手を決めてもらう時、「朝早く起きた方から」などとこちらが言うとスムーズに決まりやすい
3. シェアする [5min]
[vimeo 259113958 w=640 h=360]- 参加者(2、3人)に発表してもらう
- 「気づき」「興味深い話」「予期せぬこと」を聴く
4. まとめ
[vimeo 254662249 w=640 h=360]- シンプル思考モードのまま、進んでいこう！と伝える
Webサイト構築術を学ぼう
[wc-restrict id=”28,6004″ wcr_id=”10534″ message=”以降の動画を見るには、お申し込みが必要です”]Webサイトを一気に立ち上げる方法を探求して学ぶ。
| 開始 | 終了 | 所用時間 |
|---|---|---|
| 0:15 | 0:50 | 35min |
設計意図
- マニュアルの見方を練習する
- KANSO特有の「Webサイト構築」を学ぶ
- 実際に作ってみて、感じて、考える
ワークの進行
0. 初期設定を終わらせよう
[vimeo 259114010 w=640 h=360](KANSOの初期設定が終わってない場合のみ終わらせよう)
1. 説明 & デモ (10min)
[vimeo 259114227 w=640 h=360]（KANSOテーマのインストール、設定は正しく終了していることが前提。特に、サイドバーのウィジェットの設定が正しく行われていることが重要）
- 仕組みを説明する
- 固定ページ(と並び）が「サイドバーの目次」として自動で使われる
- 隠すことができる
- 実際にやって見せる（ページを追加し、階層をつけると出来上がる）
- ワークの説明
- 実際にやってみよう！
- (1) KANSOのWebサイトを真似して、固定ページに追加（自分で考えてもOK）
- (2) 階層構造を作るなどやってみよう
- (3) この仕組みを最大限に活用するには、どのような手順でWebサイトを作ったら良いだろうか？
- 補足説明
- 操作が苦手な人がいるか尋ねる
- IT５つのステップを紹介する
- IT５つのステップを使って、Nested Pageの操作を試す
2. ワークする (20min)
[vimeo 259114309 w=640 h=360]- マニュアルページを開いてもらう
- その説明を見ながら、進めてもらう
- 以下を考えてもらうように仕向ける
- この仕組みは、どんないいことがあるのか？
- どのような作業手順にすれば、この仕組みを最大限活用できるか？
3. 発表 (5min)
[vimeo 259112975 w=640 h=360]- この仕組みは、どんなメリットがあるか？
- 最大限に活かすには、どうしたら良いか？
デザインの仕組みを学ぶ
Webサイトの仕組みを学び、トップページなどを完成させる。
| 開始 | 終了 | 所用時間 |
|---|---|---|
| 0:50 | 1:25 | 35min |
設計意図
- マニュアルの見方を練習する
- KANSOのシンプルな「デザイン、レイアウト」を学ぶ
- 実際に作ってみて、感じて、考える
ワークの進行
1. 説明 & デモ (10min)
[vimeo 259113180 w=640 h=360]（KANSOテーマのインストール、設定は正しく終了していることが前提。特に、サイドバーのウィジェットの設定が正しく行われていることが重要）
- 仕組みを説明する
- フロントページと、それ以外のページでレイアウトが違う
- メニューを入れることができる
- ページのレイアウトが変えられる
- スマホでは、どうなるのか？
- 実際にやって見せる（ページを追加し、階層をつけると出来上がる）
- ワークの説明
- 実際にやってみよう！
- (1) KANSOのマニュアルページを参考に実験して、理解しよう
- (2) なるほど！わかった！となるための実験を行いましょう！
- (3) わからなかったこと、どのような実験をして、わかるようになったのか？を発表してもらうよ
- 補足説明（必要そうなら）
- もし、不安そうな人がいて、全くできない様子なら全員の前で、デモをする
- (1) わからないこと、知りたいことは何か？（ページを読んでもらう）
- (2) それを理解するには、どんな実験をしたら良いか？尋ねる
- (3) 尋ねても答えがなければ、「ここを触れば良さそう！」と思う場所を直感で答えてもらう
- (4) なぜ、そう思うか？を一応聞く
- (5) 実際に触ってみる、そこからIT５つのステップを繰り返す
- (6) 振り返る（どんなものなのか？）
2. ワークする (20min)
[vimeo 259113212 w=640 h=360]- マニュアルページを開いてもらう
- その説明を見ながら、進めてもらう
- コピペして作ってもらうことを推奨する
- 以下を考えてもらうように仕向ける
- 発見したこと、それをどんな実験をして理解したか？
- 途中で止めて、振り返りをしても良い
3. 発表 (5min)
[vimeo 259113279 w=640 h=360] [vimeo 259113279 w=640 h=360] [vimeo 259113583 w=640 h=360]- 発見したこと、それをどんな実験をして理解したか？
+++
休憩
休憩する
| 開始 | 終了 | 所用時間 |
|---|---|---|
| 1:25 | 1:35 | 10min |
Markdown で KANSO を使う
Markdown を利用する方法を学ぶ。Markdownに親しむ。
| 開始 | 終了 | 所用時間 |
|---|---|---|
| 1:35 | 2:20 | 45min |
設計意図
- Markdown について、能動的に学ぶ
- 仮説が正しいか、しばらく実験して見る
- とても便利だと実感してもらう
- それを通じて、「仮説」「検証」「体感する」という学び方をする
ワークの進行
1. 説明 (2min)
[vimeo 259114424 w=640 h=360]- Markdown を使うことで、作業効率が非常に上がる
- 文章を作るスピード、質も上がる
- 検索エンジン対策にも有効に働く
- ショートコードを使うときに、効力を発揮する
- HTML(UIKit)を使うときに効力を発揮する
- やっていこう
ポイント
- なるべく説明を短くする
2. Markdown のデモ (3min)
- Markdown について簡単にデモンストレーションする
- 見出し、箇条書き、太字、リンク、画像をデモンストレーションで見せる
- WordPressでプレビューをする様子を見せる
3. Markdown の実験 (15min)
- やること
- Markdown の解説ページを見て、WordPressで試してもらう
- 大体の概要を理解する
- 伝えること
- 「Markdownがわかった！」と思えるように触ってみよう
- どんな実験をしたらいいか、考えて、どんどん試してみよう！
4. 中間発表
- Markdownは理解できたか？
- どんな風にしたら理解できるようになったのか？
5. Markdownエディタを試そう (15min)
[vimeo 259112437 w=640 h=360]- デモンストレーションする
- エディタの便利さを見せてあげる
- iA Writerの様子
- WordPressに画像をアップしながらの様子
- Dropshsreを使ったワークフローも見えてあげる（可能なら）
- StackEdit などの様子
- 時間の許す限り、試してもらう
6. 感想 (5min)
[vimeo 259112648 w=640 h=360]- Markdownの感想について
ショートコード、uikit
ショートコードを試し、uikitを試す。概要を理解する。
| 開始 | 終了 | 所用時間 |
|---|---|---|
| 2:20 | 2:40 | 20min |
設計意図
- 大雑把にショートコードを理解する
- ショートコードの使い方を理解する
- マニュアルを見て、コピペすることを知る
- uikit を少しだけ触れる（わかる人用。HTML/CSS/uikitのワークショップを受けたら価値がわかる）
- 後の「デモ分析」に役立てる程度の理解があれば良い
ワークの進行
1. 説明 & デモ (5min)
[vimeo 259112722 w=640 h=360]- ショートコードについて、デモンストレーションする
- ショートコードの一覧を使って試す様子を見せる
- 投稿表示などを見せる
- uikit について
- HTML/CSSの知識と、uikitを調べる力があれば
- 色々できる
- 無理もやろうと思えばできる
- 簡単に使えるオススメが、記載されていることを教える
ポイント
- なるべく説明を短くする
2. 探求する（15min)
- 自由に試してもらう
3. 感想
[vimeo 259112840 w=640 h=360] [vimeo 259113494 w=640 h=360] [vimeo 259113695 w=640 h=360]- 発見したこと
- 感想
デモ探求
デモを探求する。
| 開始 | 終了 | 所用時間 |
|---|---|---|
| 2:40 | 2:55 | 15min |
設計意図
- これまでの知識を活かして「デモ」を探求する
- どんな構造になっているか？をチェックする
- 発見をシェアする
- 他者が作ったものを分析する力を養う
なお、時間が足りない可能性がある。
ワークの進行
1. 説明
[vimeo 259114539 w=640 h=360]- デモサイトを見てもらう
- どのように記述しているか、見ることができる（その方法を教える）
- 研究してもらう
- 気になる所を見つける
- 見つけたら、どうやって実現しているか？予想する
- チェックして見て、驚く、感心する
- 以上を繰り返す
- どんな発見があったか発表をしてもらうと伝える
2. 研究
- 研究中、声がけをする
3. 発表
[vimeo 259112198 w=640 h=360]- 2, 3人に発表してもらう
まとめ
| 開始 | 終了 | 所用時間 |
|---|---|---|
| 2:55 | 3:00 | 5min |
設計意図
- 学び方を学ぶ
- これからについて、考えてもらう
ワークの進行
[vimeo 259112273 w=640 h=360]1. 振り返り
[vimeo 259112342 w=640 h=360]- 学んだことをシェアする
- 今日の学びのトップ３は？
- いつもの学び方と、今日の学び方の違いは？
- 今後、どうしていくか？
特典マニュアル
KANSOとは
[vimeo 256919817 w=640 h=360]ダウンロード
[vimeo 256908476 w=640 h=486]テーマの初期設定
[vimeo 256700720 w=640 h=486]スタイルの設定
[vimeo 256909230 w=640 h=486]サイトの構築方法
[vimeo 256700171 w=640 h=486]ページの編集、更新について
[vimeo 256700823 w=640 h=486]タイトル、サブタイトル、アイキャッチ
[vimeo 256700507 w=640 h=486]Markdownとページ作成
[vimeo 256909316 w=640 h=486]ページ内容を考える
[vimeo 256700643 w=640 h=486]Markdownで作る
[vimeo 256909369 w=640 h=486]Markdownエディターを使う
[vimeo 256700058 w=640 h=486]オススメは iA Writer
オススメのEditorは「iA Writer」です。
- とにかくシンプルで使いやすい
- 「同時プレビュー」と「追従スクロール」をしてくれる
- iCloudに保存できるので、iPadやiPhoneでも続きが書ける (その反対もできる)
ことが特徴で、私たち開発チームも愛用しているアプリです。
ぜひ、Markdown Editorを使って、どんどん文章を書きましょう。
おすすめアプリ
無料アプリ
ショートコードとは？
[vimeo 256907522 w=640 h=486]ショートコード一覧はこちら
kanso 画像について
[vimeo 256907621 w=640 h=486]こだわりの画像を探そう
自分で撮影したものを使うなら、 本当にこだわったもの、ベストショット を使いましょう。
[/wc-restrict]ティーチャー
[wc-restrict id=”45″ wcr_id=”10561″ message=”KANSOテーマワークショップ – ティーチャー”]
ワークショップ進行レジュメ
以下のリンクを「副クリック」し、保存してください
[/wc-restrict]