京都の小中学校サイト

実家で祖父母と遊ぶ娘をにこにこ眺めながら、思い出して小学校の学区を調べていたら、京都市の小学校は「どの小学校も同じような見た目のサイトで、しかもすごくしっかり更新をしている」ということに気が付きました。

▼修二小

▼修学院中

▼上賀茂小

▼室町小（第９回全日本小学校ホームページ大賞 京都府代表校）

実は、京都市は2009年3月16日に、全市立学校・幼稚園のWebサイトを、「全校統一様式」にリニューアルしています。2012年3月16日付け、教育委員会のお知らせ記事「ホームページのリニューアルから３年」には、『この間，学校・幼稚園のホームページに，延べ1,290万回の閲覧をしていただきました。』とあり、情報発信のプラットフォームとしてしっかり機能してきたことが伺えます。また、市の「学校一覧」のページには、この「全校統一様式」にした意図について、「学校・幼稚園のホームページの考え方」と題して、明確な記載がありました。

京都市立学校・幼稚園のホームページは，保護者の皆さん及び地域の皆さんをはじめとするあらゆる利用者のニーズに沿った，迅速かつ豊富な学校情報の提供を行うとともに，だれにでも使いやすく分かりやすいホームページを目指し，次のような考え方に基づいて全校統一様式によるホームページを作成しています。（中略）

使いやすいホームページを目指します。（ユーザビリティへの配慮）

必要な情報が容易に入手できるように，利用する側の視点に立って，情報の探しやすさなど，ホームページの使いやすさ（ユーザビリティ）の向上に努めています。（中略）

だれもが同じように利用できるホームページを目指します。（アクセシビリティへの配慮）

障害の有無や年齢などに関係なく，だれもが同じように利用できる（アクセシブルな）ホームページづくりに努めます。

制作者の視点から細部を観察すると、これらのコンセプトが終始一貫して「仕様化」され、運用の軌道に乗っていることが観察できました。以下のようなことに気が付きました。

• 写真をふんだんに使って、子どもたちの生活の様子を生き生きと伝える「ブログ」機能を中心に運用　※見た目も少し前のSeesaaブログみたいですが…
• 更新頻度が非常に高い。上に挙げた４校は「ほぼ毎日」、あるいは一日に複数回の更新をしている
• 写真は幅420px・約30KB以下に自動リサイズされており、写真ばかりのトップページでも軽量
• 「カテゴリー」を利用し、日常的なお知らせと、特定コンテキストのお知らせ（校長室から、保健室から等、あるいは学年区切りのエントリー）を区分している　＃カテゴリーの組み方は各校自由
• 「年度」区切りで月別アーカイブが区切られており、季節ごとの活動変化が見やすい
• 紙媒体の「おたより」をPDFで配布。プリントがなくてもデータで内容を確認できる
• 気になる直近の行事予定をファーストビューに表示。　＃ない学校もある
• 左カラムは記事のナビゲーション、右カラムは行事予定・配布文書・基本情報等の公式情報と、明確な機能のゾーニングがなされている
• 住所・連絡先は右カラム最下部に常時表示され、参照しやすい
• 左カラム中央に「教育委員会からのお知らせ」が表示され、各校横串の情報発信場所として機能

これら公立学校サイトのメインターゲットは、例えば小学校なら、「次の春から入学予定の、学区内に住む年長さんの父兄」「子どもがその学校に通っている親御さん」「その学校の学区内に引っ越しを検討している子持ちの夫婦」といったところでしょう。それを考えると、上に挙げたような仕様上の工夫は、全てサイト利用者にとってのユーザビリティに直結するものになっていると感じます。

うちの娘はまだ１歳なので、小学校入学は少し先の話ですが、遊んでいる風景（遊び場や設備、服装など）を眺めるだけでも、教育環境がわかって、非常に安心します。

静岡の高校サイト

一方、「基盤を同じシステムにした」だけで、かえって情報環境が（大幅に）悪化するケースもあります。

実家に帰って「母校のサイトが春から全県統一仕様でリニューアルしたらしい」と聞いて、さっそく母校のサイトにアクセスしてみました。

そもそも検索結果に公式サイトが表示されないのですが、裏技を使ってサイトを見てみました。

かなり崩れています。

不思議なURLルールです。（.nsfはIBM Lotus Notesのファイル名ですね）

静高や浜北も…

県立高校職員の知人曰く、「HTMLタグを知らなくても誰でもページの更新ができるようになった」（よくあるWYSIWYGエディタ＝Word風の記事編集画面の導入ですね）という効果があるそうですが、「IE以外正しく表示されない」「過去記事の移行はテキストと画像のコピペ」「メニューを入れる場所がない」「表示の崩れが直せない」等の弊害が起こっているということです。

ソースを見てみると、

metaタグが皆無、Titleタグがbodyの下に来ている、DIVタグが大文字、空行を含む１行ごとにfontタグでフォント名を指定しているなど、相当無理のあるマークアップになっていることが伺えます（まあ、HTML4なので…）。一体何があったのでしょうか…（静岡県教育委員会事務局のサイトにも、本件に関係する情報開示は一見見当たりません。ちょっと問い合わせてみます）

考察：複数の組織でサイト基盤を揃える時に忘れてはいけないこと

日頃、CMSを利用した情報基盤の統合管理を行うことが多い仕事柄、今回の発見は改めて気を引き締めるきっかけになりました。

エディタをWYSIWYGにしても、コンテンツはついてこない

「誰でも更新できる」から情報発信体制が強化される、というのはCMS導入提案の売り文句のひとつですが、当然そう簡単には行きません。必要なのは『コンテンツ戦略』――どんな情報を・どのように出すのか、という方針が定まり、それが個々の運用者に周知徹底されていることだと思います。

京都の場合、表には見えませんが、「ホームページ担当者」への研修やトレーニング、日々の意識付けが相当激しく行われたことは想像にかたくありません（でなければ、小学校教諭の日常の激務の中で、一日複数回の更新など無理…！）。あるいは、簡単に投稿できるデバイスの配備（ケータイからの写真付きメール投稿とか？Eye-fiでデジカメ→PC同期？）や、業務分担・評価制度への連携もされているかもしれません。

こういった「運用設計」の部分は、組織や人に依存するケースバイケースのもので、体系化は遅れている分野ではないかと思います。ただ、コンテンツ戦略と運用が徹頭徹尾踏まえられていれば、CMSと仕様の力は存分に発揮されるということも実感できました。システム構築においては当たり前の話だとは思いますが…

サイトの目的とターゲットを決して見失わなければ…

学区によって自動的に行き先が決まる公立小学校に比べ、受験競争の中で熾烈な比較にさらされる公立高校のWebサイトの位置づけは格段に大きいはずです。マーケティングを通じた受験者の獲得、という経営目標を意識すれば、学校名で検索して公式サイトに辿りつけない、あるいはIE以外の端末でページ内容が読めない、といった状況が放置されるというのは、本当に異常な事態だと思います（仕様確認時、検収時に最低限確認するでしょうし、事態が判明した時点で即切り戻すべきだと思うのですが…）。

逆に、少し前時代的なデザインの「単機能」サイトでも、ユーザーの目的達成にシンプルに合致したサイトは、見ていて気持ちのいいものです。このシンプルさに常に立ち返れば、大きなサイト構築でも軸がぶれなくなると思います。

情報構造に沿ったWeb標準マークアップは常に正義

いまWeb屋稼業をしていて、一番役に立っていると感じるのは、2007年頃に学習した「Web標準」のXHTML/CSSの作法と、その根底にある考え方です（益子貴寛さんの講演や、『輪っか本』『ホップ本』等の各種書籍に大変お世話になりました）。

Web標準以来、HTML5でさらに強化されている考え方は、「セマンティクス」あるいは「見栄えと構造の分離」です。(X)HTMLには文書構造とコンテンツの内容を、CSSではコンテンツのスタイルを記述し、この２つを完全に分離することで「スタイルが分からなくても情報の中身にはアクセスできる」状態を担保します。この考え方を十分理解し、徹底して実装に落としこむことは簡単ではないようで、マークアップのプロに仕事をお願いしても、見た目を揃えるための不自然なdivタグが頻出するなど、品質がばらつくことがあります。

CMSなどのシステムやアプリケーションによって吐き出されるHTMLソースは、システムの制御用構造を含むため、静的に組むよりも構造が複雑になることはある程度不可避だと思います。しかし、だからこそ、ベースのマークアップを極力高品質（Simple and Elegant）にすることが非常に重要になると思います。WYSIWYGエディタでどれだけ本文モジュールのソースが汚れようとも、大元の構造がしっかりしていれば、サイトの基盤が揺るぐことはありません。

WordPressレベルでも、商用CMSでも、テンプレート開発は静的なHTMLファイルから始まります（サンプルファイルをコーディングし、見出しタグ、本文タグ、分岐、、などとテンプレートタグに置き換え登録する作業手順がおそらく一般的）。この「ベースマークアップ」は本当に妥協できないな、ということを強く感じています。構造さえマークアップで担保されていれば、情報にはアクセスできるのです。

最後に

昨年末、このブログのタグラインに「ウェブとコンテンツとコミュニティをまじめに考えるブログ」を掲げたわけですが、最近ようやくその辺の話が書けるようになってきました。『コンテンツ戦略』を基盤に、情報設計と運用設計に一本軸を通し、コーディングの細部まで妥協しないプロジェクトデザイン――。まだまだこれからですが、引き続き書いていきたいと思います。

元記事は投稿から2日で「いいね！」400、PV数も3,000弱。サイト訪問の7割近くがFacebook経由でした。拡散の仕方も、コンテンツ内容や時期によって変化していて、面白いです（１年前はほとんどTwitterのRTがぐるぐる回る方法でしたが、今や主要導線はFacebookに完全シフト。繋がっている人の違いかもしれませんが）。loftwork.jpの方でも、100以上の「いいね！」をいただいています。

ところで、今回の転載を機に、本ブログは Creative Commons BY-SA 3.0（所属-継承） ライセンスを宣言してみました。

BY = 原著作者のクレジット表記。
SA = 改変可、ただし派生作品も同じライセンスにすべし。

ということで、同一ライセンス化での改変・商用文脈での利用もOKです。広く皆さんに使っていただけるようなナレッジ提供を目指しますよー。

（※「リファラー」というと、Web解析業界では通常「参照元URL（どのサイトから訪問したのか）」を指しますが、制作会社では「デザインの参考になるサイト」を指すそうです。）

普段であれば「いつか参考にしよう」とブックマークして終わり、となりがちですが、一段深く理解して勉強するため、「ワイヤーフレーム模写」をしてみたところ、これが非常に面白いことに気が付きました。

手順１）ノートを取り出す
手順２）トップページのレイアウトを手描きで写しとる
手順３）下層ページを１ページ選んで、レイアウトを手描きで写しとる
手順４）手順１〜３をひたすら繰り返す（100本ノック）

以上！

ワイヤーを書き写すには、まずページ全体の構造を把握し、パーツごとの役割を意識することが必要になります。その過程では、いろいろなことに気が付くと思います。初めにFrancfrancのワイヤーを書いてみた時は…

「キービジュアルの写真を上下に動かすアニメーションのFlash綺麗だな…ってFlashじゃない！？（このjs使いたいです）」とか、キービジュアルの下のバナー群が実に綺麗なグリッド配置になっていること(960 Grid Systemの12カラムってやつですかね）とか、実装のアイデアにつながる驚きの連続でした。

トップページだけではなく、下層を含めることも必須だと思います。印象的なトップの要素の中で、どこをサイト全体で共通化し、どこをナビゲーションと本体エリアにしていくのか。より「お手本度」が高いサイトであれば、下層1枚と言わず、カテゴリトップ、汎用詳細、特定タイプの記事テンプレートなど、何種類のレイアウトパターンでサイトが構成されているかを追ってみると面白いはず。

さらにもう一歩実制作に近づけるなら、ワイヤーフレーム作成ツールで清書（？）してみてもいいと思います。下図は会社でみんなが使っている”WireframeSketcher”で2分ぐらいで作ったもの。これは適当ですが、例えばグリッドを意識すればレイアウトデザインのトレーニングに、各ブロックに載せる内容を吟味すれば情報設計のトレーニングになるはず。

＊　＊　＊

ワイヤー模写を一定量重ねていくと、EC型、ブログ型など、サイトの種類によってある種スタンダードなデザインがあることを、文字通り「体で（手で）」覚えることができると思います。冒頭のサイトのように、ある視点でデザインがよいものを集めてくれているサイトは助かりますね。こういった「教科書ガイド」的なサイトを使ってワイヤーを書くことは、情報設計やデザインに携わるプロフェッショナルにとって「素振り」のような位置づけかもしれません。

（知識労働は「稽古」が難しくて困っていたので、これが続くとかなりスキルが上がりそうです。レスポンシブ縛りとか、業種縛りとか、ルールを変えながら楽しくやっても面白い）

何より実践が一番のトレーニングであることは疑いないですが、手のあいた時間は、良質なデザインに学ぶ楽しいトレーニングを重ねるようにしたいと思います。

参考：良質なWebデザインのギャラリーサイトといえば…

• Design Link Database（老舗！）
• I/O 3000（これも国産）
• Styleboost（このサイト自体おしゃれ）

2012年4月15日、大阪京橋にて、TOEIC スピーキング＆ライティングテスト（通称TOEIC SW）を受けてきました。 ※5/7追記：結果でました！

これから仕事で英語を使うことが本格的に増えてくる（機会がある）ことを視野に、力試しのために受験を決めましたが、『公式ガイド』を活用しながら勉強し、受験準備をする過程は、ビジネスの現場で必要とされる英語の「パターン」を知り、そのスキルの磨き方を学ぶいい機会にもなりました。TOEIC SW攻略のヒントをいくつか書いてみたいと思います。

TOEIC SWとは？

2007年から始まったTOEIC SWは、TOEICブランドでありながらTOEIC本体とは独立した、スピーキングとライティングの能力を測るテストです。登場時は「TOEICが4科目になったらしい」という漠然とした（間違った）理解のまま、その後TOEIC自体も受けないまま、だいぶ時が経ちましが…。

TOEIC SWはCBT（Computer Based Test＝パソコンで受験）で、毎月開催されています。「スピーキングとライティングでCBT？」と不思議に思いますが、要は録音音声と打ち込んだ回答が採点者ネットワークに送り込まれ、人の手で採点された結果が集計されて1ヶ月後返ってくるという仕組みです。今回は京都会場がなく、大阪京橋の専門学校で受験。受験会場では、密閉型のヘッドセットがDELLのパソコンにつながれていました。機材の問題か、選べる受験地はTOEICよりだいぶ少ないですが、毎月開催なので、思い立った翌月には受験ができるのがいいところ。受験料は9,975円です。

問題別特徴＋雑感

すべての問題構成は公式サイトをご覧ください。ここでは印象的な問題と特徴、雑感を書きます。
(SはSpeaking / WはWriting)

(1) [S][W] 写真描写問題

（画像は公式サンプルより引用しました。以下同じ。）

リスニングでおなじみ、提示された写真を見て考える問題です。Writingの方が簡単で、指定された２つの語句を使って1文作ればいいというもの。5問中2問くらいは、指定語句に”because”とか”as”とか、複雑な文構成を要求する単語が入っていたりしますが、シンプルに答えることに徹すればOK。

難しいのはSpeakingの方です。写真描写問題は1問だけですが、写真を見ながら「45秒間説明し続ける」というもの。45秒というのは、体感ではかなり長い時間で、単純な文を２，３言っただけではとても足りません。

例えば、このサンプルだと、Writingの場合「場所がairportで車がso manyある」という一点を書けばいいですが、Speakingの場合は、車の様子、人の様子、場所の様子、さらに、、と、注意のカーソルを少しずつ広げていかなければ間が持ちません。英語の即興力以上に、日々ものごとを注意深く観察し、ディテールを書く訓練が効果的でしょう（『魂の文章術』を読んでいるひとには、ある種おなじみのpracticeですけどね）。

(2) [S] 応答問題１，応答問題２

Speakingの11問中6問は、電話応答を想定した出題です。応答問題１は電話インタビュー、応答問題２は提示された資料に基づいて質問に答えるものです。応答問題２の方が、形式に慣れてしまえば簡単かもしれません（２の方は準備時間があり、公式ガイドで練習すると、だいたいどんな質問が来るのか予測できる）。

問題がいきなり提示され、即回答しなければいけない応答問題１の方が、難易度は高いというか、うまくハマってすんなり答えられる出題と、質問の意図が取れない、あるいは１問目でうっかり変な答えをしてしまい、２問目以降つじつまが合わなくなっておろおろする、という失敗リスクがあります。実際、今日のテスト本番でも、３問目の設問の意味が分からず、全く答えられない（！）という事態が…。こればかりは、即興の練習を積むほかありません。

(3) [S] 解決策提案

TOEIC SW全問題の中で、私が最も苦手なのが、Speakingの後ろから２問目の「解決策を提案する問題」です。この問題は、「困った誰かさん」が残した留守番電話メッセージを聞き、その困った何かを解決する提案をするというもの。若干の準備時間があるとはいえ、長い留守番電話メッセージを聞いて解釈し、すぐさま問題を理解してその解決策を提示することが必要です（ロールプレイなので、自分の立場とスタンスを創作することも）。

この問題は「リスニング」が鬼門で、留守電メッセージのいくつかの重要単語を聞き逃すと、まともに答えることができません。人の名前やシチュエーションなど、固有名詞を覚えようとするあまり、他の情報が抜け落ちたりします。TOEIC SWは、完璧を目指さなくとも、ある程度意味の通った英文を答えていれば一定のスコアが取れるので、「分からなくても何か言う」というスタンスがとても大事ですが、Speakingの前段となるListeningのスキルをまず磨くことが、実践的な英語力を身につける第一歩であることを改めて痛感しています。

(4) [S][W] エッセイ（意見を述べる問題）

Speaking/Writingとも、問題の最後は、難易度が高く配点も大きい、まとまった意見を述べる問題です。例えば「安月給で休みが多い仕事と、高給だけど超忙しい仕事とどっちがいいか」という、どうとでも言えるようなディベート風のお題が提示されます。Speakingの方は、15秒の準備ののち、60秒間で意見を述べることが必要。こちらはごく短時間に、結論と理由のストーリーを一本組めるか（特に、自分のボキャブラリーでカバーできるもの）がポイントになります。

Writingの方は、30分間で300 wordsという、相当まとまった量の記述が求められます。30分間の制限時間は、早く解き終わっても繰り上げ退出はなく、ぎりぎりまで推敲が求められます。また、回答画面にはワードカウントが表示されるのですが、300 wordsを下回る量だと大幅減点という説もあり、時間いっぱい文章を練らなければなりません。単純な設問の場合、答えも単純に答えられてしまいますが、300 wordsに膨らませるには、具体例を持ち出してディテールを記述することを繰り返すしかありません。ここでも、冒頭の写真描写と同じ、ディテールを書く力が求められます。

- – - –

以上の４つが、特にTOEIC SWの攻略上キモになる問題群だと思います。Speakingの最初の音読問題、WritingのEメール作成問題は比較的難易度が低く、また、公式平均スコアを見ても、SpeakingよりWritingの方が高いスコアを取りやすい傾向にあるようです。

＜私の対策手順＞

(1) まずは『公式ガイド』で期待成果の像合わせ

TOEIC本体と同様、まずは「出題形式」に慣れることが必要です。答え方が分からないと、（完全にアドリブで対応できる上級者は別として）力を100%発揮することは難しいでしょう。そこで、『公式ガイド』の登場です。

Amazonのレビューにも書いてありますが、この公式ガイドは本当によくできていて、一つ一つの問題例ごとに、「模範解答例」が7パターンとか、複数用意されています。それも、事前リサーチ時の「実回答」の音声や回答文なので、リアリティがあります。TOEIC SWは日本と韓国で展開されているテストだということですが、いわゆるカタコトの英語でも、押さえるべき発音やイントネーション、そしてそもそもの内容が合っていれば高得点を取れるということがよくわかります。

まずはスピーキング編のCDを通して聞きながら、テキストと照らし合わせてパターンを吟味すること。これでだいたいの出題・回答のパターンと、「求められるレベル感」が分かると思います。ライティング編は実際にPCなどでぱっと書いてみるといいと思いますが、回答例を読みまくるだけでも十分（リーディングの訓練のよう）だと思います。

(2) 「シャドーイング」で口の体操＋イメトレ

特にスピーキング対策には、まず「口を英語に慣れさせる」ことが必要です。数ヶ月英語を喋っていないだけで、ぱっと言葉が出てこなくなります。口の体操と、「お手本」を繰り返し聞くイメージトレーニングの意味で、「シャドーイング」（英語の音声に後追いでしゃべる練習）はとても効果的だと思います。

私の場合は、最近また知名度が上がってきているTEDTalksを用いました。スクリプトを読みながらのシャドーイングとはいえ、18分間英語をしゃべり続けるのはかなり苦しい練習…。同じ素材のシャドーイングを２，３回やると、難しめの単語も難なく発音できるようになり、余裕が出てきて、自身もつきます。

(3) 録音しながら腰を据えて「模試」を解く

TOEIC SWの「公式学習ツール」には、「TOEIC プラクティスオンライン」なる有料の模試サービスが案内されています。半額ぐらいの価格で、ざっくりとスコアのレンジがわかるようです。

先述の公式ガイドにも、2回分の模試問題が付いています。私はプラクティスオンラインは使わず、公式ガイドの問題を、ちゃんと時間を測り、iPhoneで自分の声を録音しながら解いて、模範解答と解説で復習、というのを２回やって、だいぶ慣れました。（そのわりにSpeakingの本番はぼろぼろでしたが。。）

ざっと検索した感じ、TOEIC SWの対策・攻略記事はあまり見つかりませんが、kimura_Umiさんのamebloでは、プラクティスオンラインの利用や、２回受験した経過、問題別の対策など、かなり充実した記事がありました！

- – - -

今年は職場の経営陣が「グローバル展開」を頻繁に口にすることもあり、力をつけて意思表示をすれば、英語をばしばし使って仕事する機会が得られるかもしれません。TOEIC SWの受験と、それに向けた対策（をきっかけにした勉強、練習）は、能力の高いうちのスタッフ仲間にこそ勧めです。TOEIC SWの説明会では、「TOEICのスコアは高いのに、全然話せない」という悩みを持ったひとが多いらしいのですが、この悩みはおそらく、多くのビジネスパーソンに共通。仕事現場での利用を意識した、SpeakingとWritingの鍛錬を重ねて、使える英語力を伸ばしていきましょう。

※5/7追記 結果報告

結果が来ました！

Speaking: 160 / 200（8段階中のlevel 7）

一般的に、レベル7に該当する受験者は、一般の職場にふさわしい継続的な会話ができる。的確に意見を述べたり、複雑な要求に応えることができる。長い応答では、以下の弱点が一部現れることがあるが、意思の伝達を妨げるものではない。

・発音、イントネーションにわずかだが問題があり、話すとき、躊躇することがある
・複雑な文法構造を使うときにいくつか誤りがみられることがある
・不正確な語彙・語句の使用がいくつかみられることがある
また、質問に回答し、基本的な情報を提供することができる。

書かれたものを読み上げる際の英語は大変わかりやすい。

　イントネーション：HIGH（3段階中最良）
　発音：HIGH（3段階中最良）

Writing: 150 / 200（9段階中のlevel 7）

一般的に、レベル7に該当する受験者は、簡単な情報を提供する、質問をする、指示を与える、または要求することが的確にできるが、理由や例をあげて、または説明をして、意見を裏付けることは部分的にしかできない。

簡単な情報を提供する、質問する、指示を与える、または要求するときは、明確で、一貫性のある、的確な文章を書くことができる。

意見について説明しようとするときは、その意見と関連のある考えやある程度の裏付けを提示することができる。このレベルにみられる一般的な弱点には、以下のようなものがある。

・要点の具体的な裏付けや展開が不十分である
・述べられている様々な要点同士の関連が不明確である
・文法的な誤りがある、または語彙・語句の選択が不正確である

※評価基準はこちら

Speakingは予想より好成績／Writingは予想より低い点数でした。引き続き精進します。

視覚と感情が切り離される減少の話、「幻肢」の痛みを鏡を使って克服する事例の話、「共感覚」（数字が色で見える、とか）の話、その中でのブーバ・キキ効果の紹介。いやらしくないユーモアを次々交えて気持ちのいい笑いを誘いながら、スライドは使わず、脳の画像１枚でしゃべり続けます。専門用語が多いのに、全く飽きさせません。

幻肢痛の治療に成功したくだり、そして18分の制限時間を越えて「あと1分だけください」と言うところでは、観客からの拍手が。この驚きこそ、”Ideas worth spreading”の共感が生まれた瞬間だなあと思います。

こうやって調べ物をしながらTEDTalkに出会うケースはこのところ続いていて、ホールアース・カタログと”The Long Now”のSteward Brandのことを調べていたときも、トークが配信されていることを知りました。気になった動画はURLをAsanaかRememberTheMilkにメモっておいて、時間のあるときに観るようにしています。

最近はNHK Eテレの番組「スーパープレゼンテーション」でも、殿堂入り講演が次々紹介されていますが、気になった人の名前を調べてみると、短時間でその人の功績のエッセンスを学ぶことができる出会いが、得られるかもしれません。

参加したのは下記の２こまです。

◇リーンUX流「顧客発見」ワークショップ ～プラグマティック・ペルソナで顧客を見える化

◆小さく早くがモットー！小さな会社(組織)で、良いサービスを作るための開発スタイルとそれを支える技術

§ プラグマティックペルソナを短時間ワークで創る

中でも、最も期待していた、樽本徹也さんと「アジャイルUCD研究会」の面々がホストする『プラグマティックペルソナ』のワークショップは、非常に実践的なものでした。最近新刊を出された樽本さんは、アジャイルUCD（もともと開発手法であるアジャイルの考え方・技法を、デザインプロセスやUX設計に応用しようとする動き）の強烈なリーダーです。（めっちゃピンぼけ。。）

さて、ワークは、「私、〇〇に困っています」というお題で、個人とグループの作業で、ペルソナづくりを行いました。

１）まず個人ワークで「適当に」ペルソナの名前、イラスト、属性、行動特性、「悩みワースト３」を記述。
２）グループでペルソナをマージ
３）実際にその悩みを持った参加者「インフォーマント」へのインタビュー（５分×５人）を実施
４）その発見をもとにペルソナをブラッシュアップ（１匹に絞らなくてもいい）

ワークはここまで。ステレオタイプでいいから「仮説」を作っておいて、ごく短時間に当事者に質問して仮説を検証し、軌道修正をするという方法は、まさしくアジャイル的なスピード感のある手法だと思いました。この方法、すぐに実践できそうです。プラグマティックペルソナに関する他のワークショップレポート等を見ると、最初の仮説づくりで「ドメインエキスパート（その分野の専門家）」による意見をもとにすることで、最初の仮説検証の精度は上がってきそうです。

ただ、この「プラグマティックペルソナ」は、プロセスそのものがアジャイルでないと意味を持たない手法（全体がウォーターフローだと、ちゃんとしたデータ駆動のペルソナが必要）なので、安易にいつでも使えるわけではない…というところ、注意が必要そうです。

§ アジャイルな契約？

この「プロセスそのものがアジャイルでないと」という点に関係して、次の事例セッション「小さく早くがモットー！」を聞きながら考えたのは、「契約」のことでした。

本業でもお世話になっているシグマコンサルティングの橋本さん(@k1hash)が、「プロフィットシェア」という契約形態（売上がサービスサイトのPVや利益に連動する）にたびたび言及されていました。受託開発で一般的な「請負契約」は、スタート時点で成果物を定めることが、アジャイル的な動きをする上でどうしても制約になります。そこを打破する契約関係が結べればいいのですが…

ちょうど、「次のアジャイルソフトウェアプロジェクトに使える10の契約」というエントリーを発見しました。やはり一定期間、稼働量ベースで請求ができる契約を結ぶことができれば、定期的にリリースを続ける方式のプロジェクト運営ができるのかもしれません。「アジャイルな契約」の形はまだよくわからないのですが、避けては通れないテーマだと改めて感じました。

Related Links

+ 運営によるオフィシャルレポート
+ togetter
+ アジャイルな契約に関するエントリー

（EricのPhoto Albumから拝借）

Ericが一番面白かったと言っていて、聞きながらも強い関心を持ったのは、”The great IxDA debate“というセッション。複数のディベートテーマの中でも特に、「デザイナーは戦略に向いていない」というお題が盛り上がっていたそうです。

実際にデザインを行うフェーズだけではなく、そもそもビジネスの課題を検討し、解決策を出す部分にも、インタラクションデザイナーは絡むべき――。この指摘は、デザイナーとして「見えているのに解決できない問題」に直面して悶々としている、実装現場サイドの問題意識から上がってきた課題だということです。経営やプロジェクトマネジメントのスキルを学ぶこと（デザインMBAというコースも生まれてきているとか）の重要さが指摘されつつ、「じゃあどうやって戦略面に絡んでいけばいいのか」という点に解は出ていないようでしたが、この話題が語られることは非常に面白いと思いました。

§

理想的なベンチャーに必要なのは『ハッカー・ハスラー・ヒップスター』＝プログラムを書く人、資金を集める人、デザインを創る人の組み合わせだと言われます。小さく速く始めるにも、デザイナーの力は欠かせないわけで、早い段階でヒップスターを巻き込み、一緒に本質的な課題を解決することが求められそうです。戦略に向いている人・いない人はもちろんいるのでしょうが、「デザインの力で問題を解決する」ことができる人なら、顧客のビジネスを理解し、解を提示する力はあるはず…。

とはいえ、一般的な受託のWeb構築などでは、予算制約などもあって、ついつい「絵を描く段階」になるまでデザイナーを巻き込めないケースが多いと思います。チームビルディングやコミュニケーションの取り方次第で、デザイナーの力をもっと引き出せるとしたら…。そんなテーマを新しいチャレンジとして受け取ったことが、（もともとのテーマとは外れるのかもしれませんが）この会に参加して得た一番大きな気づきだったと思います。

「インタラクションデザイン」という分野は、直接なじみがない領域だと思っていました（実際、ソフトウェアより「プロダクト」の話が多めな印象）が、Web構築における「IA」の領域とは密接な関係があるはず。IAやアートディレクションに強い同僚とも一緒に参加しましたが、IxD (Interaction Design)の領域にも少なからずアンテナを張っておかなければ、、と思いました。

§

アイルランド・ダブリンで今年2月に開催された”Interaction 12“は、スピーカー75人、参加者も800人近い、かなり大規模なカンファレンスだったそうです。ひとコマ10分のライトニングトークから長時間の物まで、テーマも「ゲーミフィケーション」や「デザイナーがコーディングを学ぶことの重要性」、「モバイル開発におけるGenba（現場）の重要性」など、基礎からトレンドまで多岐に渡っていたそうです。Fabian HemmertやAmber Caseなど、TEDにも登壇するような人が複数出ています。

WordPressで作られたInteraction 12のサイトは、とてもスマートにできていました。開催地のダブリンを案内する”Welcome pack”という情報など、非常に親切に作られているし、スピーカーの顔写真が並ぶページも印象的です。

“Redux”：帰ってきた／蘇った、という名前の通り、カンファレンスを再び咀嚼し、興味関心を同じくする参加者みんなで考え直す機会というのは、とても面白く刺激的な場だと思いました。今回は実際参加したのがEric一人でしたが、複数人が参加して別々のセッションを受けている場合は、もう少し網羅的・多角的な話が期待できると思います。あとは「勉強会」という形と捉えれば、参加者からの質問を多く集めることがポイントかな…。IAAJでも、まもなく開催されるIA SummitのReduxが予定されていたり、他の分野でもカンファレンスの報告会があるようです。自分も機会があれば、同じような経験共有の場をホストしてみたいと思います。

+ 他の参加者の方のレポート
http://enmt.info/archives/434

書くことの話になると、なにかと、バイブルである『魂の文章術』を紹介することが多いのだけれど、自分にとって書くことはいつも「修行」だと思っている。もともと「コミュニケーション能力」ってやつを伸ばさないとまずい！と焦っていた学生のころに、小室淑恵さんのプレゼン塾に参加したり、ファシリテーションの講座を受けたりしながら、まとまった文章を書いて公開するようにしたのだと思う（当時はMovable Typeで遊んだり、Bloggerに引っ越したり、うっかりサーバを飛ばして過去記事がどっか行ったりした）。しばらく前にインタビューのワークショップに行ったのも、切り口の異なる「修行」だったと思う。ひとと軽い感じで話したりするのは苦手だから、まとまった文章にして誰かに読んでもらったり、特別な場の中でコミュニケーションする方法が発達して、それがいつの間にか、仕事にも役立つありがたいスキルとして、磨かれていた。

「修行」というのは気持ちいいからやるのではなくて、自分に「課す」ものだから、なにかと辞めたくなるもの。ブログ以外に個人的な日記をMacのCloverDiaryという日記ソフトにつけていて、それは毎日書いたり穴だらけになったりするのを繰り返しながら、断続的に2003年から9年ぐらい、幸いにも続いている。なぜか潮が満ちるように、繰り返し「書きたい」時がやってくる。引き潮の時は月に1本ぐらいしかブログを書かないときもあるし、日記が数行以上書けないときもある。でも、大概風邪を引いて寝込んだ数日後や、旅に出る直前や、学び多きイベントに参加した日の夜などになると、「書きたい」という欲求がまたふつふつと湧いてきて、本棚にある何冊かの「バイブル」をかわるがわる手にとっては、ノートやPCに向かって、書いたり消したりを始めることが繰り返される。

そんなことを重ねていたら、最近は、仕事をなんとか切り上げて22時半ぐらいに家に着くと、「24時まであと1時間半あるから記事一本書ける！」と嬉しくなるくらい、書くことの敷居が低くなってきた。それでいて、いざOmmwriterやEvernoteを開いて文章を書き始めると、書こうと思ったことはすぐに尻すぼみになって、記事の体裁をなさなくなる。そういうときは、苦しい。文章を書くことは好きだし、最近はほめてもらえることも多いけれど、まとまった文章を生み出すことの苦しみは、いくら書くことを重ねても軽くなることはなくて、途中で逃げたくなって散歩に出たり、おもむろに洗濯物をたたみ始めたり、facebookを2分に1回くらい開いていらいらしていたりする。別に自分のために書いている文章が中途半端に完成しなくたって、自分の気の済むように話が締まらくたって、逃げ出しても誰も困らないわけ。

それでも、続けていられるのは、続けてきたなりの「いいこと」が、もうたくさんあったからだと思う。ブログ読んだよって言ってもらったり、予想外の人からRTやLikeをもらえるだけでも、とても嬉しい。コメントがついて会話が始まったり、誰かが関連する文章を書いてくれたのを読むのもすごく嬉しい。さらに、ブログは貴重な出会いのきっかけにもなってきた。去年TEDxTokyoのコミュニティにどっぷり関われたのは、@ikdrymがブログを読んで、TEDxTokyoのブログ担当としてリクルートしてくれたことが始まりだし、greenz.jpに少しだけライターとして書く機会を得たときも、渋谷のカフェ”ANTENNA”で@junyamoriや菜央さんと話せたのは、ブログを読んでもらえたおかげ。この記事を書くきっかけになった社内勉強会も、入社1ヶ月半の新米社員に話す場をもらえたのは、ブログを書いてきたおかげ。そんな現金な報酬に味をしめて修行を続けるうちに、いつの間にか「筋肉がつく」かのごとく、一晩で5000字の記事をさらっと書けるだけの執筆スピードが身についたり、社内で本を書く担当になっていたり、書く力が不思議とついてきていたりする。

知識労働者には、アスリートにとっての「トレーニング、稽古」にあたる日々の鍛錬方法がなかなか見えにくくて、腕を磨くことが難しいけど、「文章を書く」ことは、編集稽古であり、言葉をわかりやすく紡ぐトレーニングであり、思考を整理することでもあって、とてもとっつきやすい修行のかたちだと思う。

転職をしてだいぶ仕事が忙しくなった今でも、むしろそんな今だからこそ、自分以外の誰かに向けて書くことを止めないようにしたいと思う。昨年3月に味わった、投稿した記事が何日もリツイートされ続けるような体験は、もう当分ないだろうし、がんばってまとめた記事のリンクを何回FacebookやTwitterに流してもからっきし反応がないことなんて日常茶飯事。けれど、いつか「セレンディピティ」が面白い経験をさせてくれるであろうことを信じて、今日もこのポストをなんだか未完成のまま、公開して寝てしまうことにする。

（久しぶりにまとまりのない文章を書いた）

Related links:
+ “self-branding”(@madams_lunch)
+ 僕がブログを書く理由(@k14)
+ ブログ修行で大事な３つのこと(@ich_co)

「勉強会やろうよ！」と誰かが言い、あなたが会を主催(Host)することになったとき、どうやってその会を充実した場にしていきますか？

ここ数年、「勉強会って何？」のイメージが湧かなくて、ずっと悩んでいました。それが、先日、LinkedInに詳しい谷口正樹さんの主催する「ソーシャルHR勉強会」なるものに招いていただいて、一つの成功パターンが明確になりました。

それは、「質疑応答で組み立てる」という方法です。

うまい勉強会運営のパターンとは？

2/16に開催された会は、次のような経緯で始まり、進行していきました。

• 谷口さんから「引きあわせたい人がいる」とLinkedInから連絡あり　→候補日を連絡
• いつの間にかfacebookでイベントが立っていて、15人ぐらい招待されている（！）ことに気づく
• 会のコンセプトに近いことを話せそうな仲間を誘う
• 冒頭プレゼンしますよ、と申し出て、参加者から「事前質問」を集める
• 「コミュニティ運営方法」事前質問に沿って資料などを準備
• 当日、事前質問とはいろいろ違う視点から、次から次へと質問が出る
• 次から次へとぶっちゃけた答えを返す（ところどころサイトやflickrを参照しながら回答）
• 質疑応答が一旦途切れたところで終了

20時集合の勉強会、質疑応答終了時点で、22時半。
「どうせ１時間ぐらいでネタが続かなくなって飲み会に流れる感じでしょー」
と軽く考えていたのですが、会社紹介の話でここまで白熱するとは…。
（「消化に時間がかかりそう」「（充実しすぎて）吐きそう」という声が続出するほど、濃厚な会だったようです）

勉強会の進め方・運営の仕方としてこの会を振り返ったとき、いくつかの絶妙なポイントが重なって、非常に満足度の高い場が生まれたと感じています。

＜主催者(Host)のポイント＞

• 「皆が本当に聞きたいこと」にフォーカスできるよう、参加者をナビゲートする（企画趣旨を丁寧に伝える、事前に質問を出してもらう）
• 聞き手に「共通性」と「多様性」のバランスを取るような人選 (Participants Curation)

＜聞き手(Audience)のポイント＞

• 明確な「知りたいこと」から軸をずらさず、仮説思考に基づいて、質の高い質問を投げ続けること
• 他のメンバーから出た質問に重ねて、問いを深めたり幅を広げていくこと（おもむろに話題を変えるのではなく、「沿いつつずらす」話題の展開）

＜話し手(Presenter)のポイント＞

• 「聞き手（他の参加者）」が聞きたいことに、極力広く深く答えることに集中する
• いろいろな質問に答えられるよう、写真、ブログ記事、データなどの「小ネタ」を蓄え、アクセス可能にしておく

一貫しているのは「質問の質」の重要性です。学びたいことを質問し、答えるという、勉強の原点に立ち返り、かつ、参加する誰もが「質の高い学びを得たい」という高い志を持って集まることが大事なのかなと思いました。

「カジュアルな勉強会の進め方」？

ところで、田口元さんのブログ IDEA*IDEA に、「カジュアルな勉強会の進め方」というエントリーがありました。

田口さん流の進め方では、

• 冒頭で質問を集める（ポストイットに貼る）
• 質問に合わせてプレゼンを端折る／補足する
• さらに質疑応答を続ける

ということで、こちらも徹頭徹尾、質問ドリブンになっています。

勉強会を新しく主催するときは、田口さん流の進め方を基本に、かつ、事前の質問収集を確実に行うことが、会を充実させるポイントかなと思います。そうすると、勉強会の企画運営にあたっては、どちらかというと話す（話題提供）側ではなく、「聞く側」に近い立場の人が主催(Host)する方がうまくいくと思います。話す側主導の会の場合は、より注意深く聞き手の興味を知る必要がありますね。

新しい知識を学び、実践することや、学ぶプロセスの中で新しい人と出会い、語り合うのは、本当に楽しい経験です。社内でも、朝の定時前の１時間を自主勉強会に宛てる日が増えていますが、多くの人が勉強会に参加したり、場をホストする中で、一緒に成長していけたらいいなと思います。

型にはまらない知識共有の手法として、「パターンランゲージ(Pattern Language)」の可能性に今、注目しています。

パターンランゲージは、もともと建築の知識を体系化するために、クリストファー・アレグザンダーという人が用いたフォーマットです。そのフォーマットは時を経て、ソフトウェアのインターフェースデザインを始め、さまざまなところで応用されています。私がパターンランゲージを知ったのは、IA (Information Architecture)に関するセミナーでした。江渡浩一郎さんの『パターン、Wiki、XP ~時を超えた創造の原則』でも紹介されています。

さて、その応用範囲を最近大きく広げているのが、慶応大学SFCの井庭崇(@takashiiba)先生です。井庭先生の研究室では、はてなブックマークでも一時話題になった”Presentation Patterns“や、「外国語習得」「子どもの学び」「ビジュアライゼーション」など、様々なテーマでパターンランゲージ形式のアウトプットを、授業の成果として生み出しています。井庭研のフォーマットを知るには、代表作である “学習パターン(Learning Pattern)” をご覧いただくのが一番かと思います。解説付きのスライドがslideshareに上がっていました。（ちょうど今日、研究室の最終発表会があった模様。アウトプットが気になる！）

さて、私が感じているパターンランゲージ最大の魅力は、『状況(context) – 問題点(problem) – 解決策(solution)』という基礎フォーマットです。常に課題と解決（コンサル風に言うとAsIsとToBe）がセットになっているので、一つ一つのパターンが、常に何かしらの問題を解決する方法になるわけです。また、状況(context)がセットになることで、コンテクストから逆引きで、ある状況下で必要とされるパターンを抽出することができます。

もう一つの大きな特徴は、複数のパターンが階層的につながり合って（シーケンシャルに）全体を構成しているということです。元祖パターンランゲージは、「都市全体の設計」という鳥瞰的な視点から、近隣、建物、部屋、建築技法と、段階的に詳細化していきながら、「このパターンが関連するのは何番と何番です」という、いわばハイパーリンクが記述されています。本質的な全体をとらえつつ、現場ですぐに使える具体的なハウツーも組み込まれるという、非常にバランスのよい構成です。

パターンランゲージの解説書とも言える、クリストファー・アレグザンダー『時を超えた建設の道』には、次のような記述があります。

「個々のパタンに意味をもたらすのはネットワークの構造であり、それが個々のパタンをしっかりつなぎ留め、パタンの完成を助ける」(p253)

この特徴は、「暗黙知の共有」に非常に適したものだと思います。「マニュアル」では型にはまりやすく、単なる「Wiki」では検索性や網羅性に劣る…。パターンランゲージのフォーマットに沿うことで、現場にとって使いやすいものができあがるのではないかと考えています。いま会社で取り組んでいる「Project Designing」＝Creative, Innovative, and FUN! なWeb制作のナレッジをまとめていくプロジェクトにも、この方法がまさに適していると考えています。

「パタン・ランゲージこそ個人の創造力の源であり、またランゲージなしには何も創造できまい。ランゲージ自体は何も作り出せないが、人を創造的にさせるのがランゲージである」（前掲書p169）

パターンランゲージをつくる上で、重要になることはなんでしょうか。『時を超えた建設の道』では、「生きたランゲージ」というキーワードが繰り返し登場します。要は、単にフォーマットだけを模倣しても、現場で繰り返し使われるものでなければ意味がない、ということです。

「各人の頭の中で絶えず再生を繰り返さねば、生きたランゲージにはならない。」（前掲書p271）

生きたランゲージを生み出すためには、「そのパタンが生み出す体験を明確にイメージする(p315)」ことが大事、と書かれています。常に、生み出される「体験(experience)」に注目すること。奇しくもそれは、Web制作という活動では、おそらく最も重要な視点と一致しています。2012年は、いかに生きたランゲージを生み出せるか、また、同じ視点で「生きたWebサイト」を作り出せるかが、大きなチャレンジになりそうです。

Reference

プレゼンテーションパターン
ラーニングパターン