春先ぐらいから、CSS3関連書籍の出版ラッシュですね。
いつもお世話になっている方々のご本ということもあり、"CSS3デザイン　プロフェッショナルガイド"を購入しました。その感想をまとめます。

"はじめに"のメッセージ

書籍は「はじめに」を読むと、著者が目指している本の主旨がわかるようになっています。
はてさて、どんな「はじめに」なのかな～と読ませて頂くと、

"CSS3はクールに使ってほしい"
"経験を積んだWebデザイナーがCSS3を我がモノに…"
"デザイナー目線のCSS3"

という言葉が飛び込んできました。おおっ。プロのデザイナーっぽい雰囲気。なるほど。今までCSS2で経験を積んだWebデザイナーにデザイン向上の目的で使って欲しい書籍なのだなと理解しました。

私は、既にCSS3の基礎レベルはかじっていましたので、なんだか上級レベルのことを勉強できるんだなぁ・・・と期待が膨らみました。（自分の目的と書籍が合ってた、というわけですね。）

書籍の特徴

この書籍は、

"CSS3の背景から基本文法、メリットの説明"
"CSS3で追加された文法の確認するリファレンス"
"CSS3ビジュアルサンプルで実践テクニックを学ぶ"

という３部で構成されています。

今回、実際に使用して学んだ、"リファレンス"と"ビジュアルサンプル"について、使ってみてのポイントお伝えしたいなと思います。

リファレンス

CSS3はまだ策定中の段階で、仕様が変わっています。（もうそろそろ、最終草案で現在から大きく変わることは少ないと言われていますが。。）つまり、新しくてブラウザ検証された正確な情報をキープすることが大切になってきます。

この書籍では、各ブラウザ（IE9・Firefox4・Chrome10・Safari5・Opera10）で検証された最新情報が反映されています。それをまとまって手にするだけでも、価値があると思いました。

例えば、border-radius というプロパティ。
書籍によると、最近のブラウザでは、ベンダープレフィックスが必要無くなったそうです。

しかし、いまGoogle検索でヒットするブログの幾つか（↓）を確認すると、border-radius にはベンダープレフィックス必要とあります。書かれた日付が古いため仕方ないことですが、知らなければ正しいと思ってしまいますよね…。新しい正確な情報を手にするのは、実は難しいんです。

CSS Lecture
HTMLクイックリファレンス
＠IT

最新情報をまとめて確認出来る、リファレンスとして役立ちそうです。

CSS3ビジュアルサンプル

CSS3ビジュアルサンプルで、実践的なテクニックを確認することが出来ます。
用意されているサンプルはは、難しすぎず、利用シーンを想像できるようなもので、私のように難しいとめげてしまう人も、あきらめずに学習出来ると感じました。

上の写真を見て分かるように、単元ごとに使うプロパティ/値/構文と対応ブラウザが表記されているのも親切設計だと思います。巻末に索引があり、プロパティ/値/構文から、ビジュアルサンプルとリファレンスをページ参照できます。

自分が知りたいことを索引で調べ、まずサンプルをざっとみて、リファレンスで細かい文法を調べる…という使い方も出来ますね。（ある程度下地がある場合は、この方法の方が早いかも。）

サンプルを試して見ました

まず、さらっと短時間で出来そうなサンプルを試してみることにました。
サポートページから、サンプルデータがダウンロードできます。サンプルコードと書籍を見つつコードを理解し、後はコードを色々と改造してみる…というのが、楽しめるし理解が深まると思います。

今回は、5-5 のサンプルを勉強してみました。
勝手に改造したのが、こちらです。 ※文字サイズが大きくなったらはみ出したりするので、ツッコミ所満載ですが。(汗)

ちょっといいなと思ったのが、サンプル終わりのコラムです。例えば、このサンプルでは、「クリックできる」と閲覧者に伝えるために、視覚記号としてキャプションに▼印が付いています。その意図がコラムで次のように解説されていました。

"「グァテマラ」と表示されているだけでは「触ると何かが見えるかもしれない」という期待すらさせないで終わってしまうかも知れません ～中略～ CSSの技術だけではなくこういった場面ではとくに「ユーザーだったらどう思うか？」を考える訓練も大事です。アイコン一つでも試行錯誤してみましょう。 "（一部抜粋）

…単なるサンプルで終わらせず、どんな風に改良すればいいかな？と考えさせてくれるあたりが、にくい演出ですね。（だから、思わず改造しちゃったんですけれど。）CSS3を勉強する中で、デザインについても学べました。

ページ数も多くてまだまだ学び取るところがありそうで、ワクワクする書籍でした。

先日、坂本貴史著「IAシンキング」刊行記念イベント「Web制作者・担当者のためのIAワークショップ」の 大阪ワークショップ拡大編に参加してきました。

参加のきっかけは、私自身も担当セミナーでWeb担当の方々にIAっぽいことをお話しする機会も多く、「IA専門家」の方が行うワークショップに興味があったためです。

当日のスライドは、Slide Shareで公開されています。↓

セミナーは、IAの基本的なとらえ方（位置付け・作業の主旨）をスライドや具体例を交えてお話しされた後に、いくつかのワークショップ（問いに対してシートに答え、同じテーブルの人とディスカッション）という感じで進みました。

休日の朝から始まったセミナーにも関わらず、みなさん熱心に耳を傾け、ワークショップにも真剣に取り組んでいらっしゃいました。（もちろん私も！ちなみに最前列の右側にいました。）

IAの基本的なとらえ方について

ここではくわしくレポートしませんが、「何故、IAが必要なのか？」「IAではどこまでを作業すべきなのか？」についてがしっかりとわかりました。（著書の前半を見直すとお話しされていた内容がよく理解できました。）

心に残ったポイントは、

• IA＝情報アーキテクチャは、サイトにおける情報の探しやすさ・見つけやすさ（Findable）を担うこと
• サイト訪問者対して、見せたい情報に気がついてもらうために必要。
  （深いなと思ったのが、それは訪問者が"見たい情報"であり、運営者が"見せたい情報"だということ。訪問者が情報で満足するその先に運営者が落とし込みたい場所に連れて行く所までを含むのだろうな、と理解しました。）
• サイトのナビゲーションは、訪問者に自然に使ってもらえるものが理想。使いにくいのは論外だけど、例え使いやすい素晴らしいナビゲーションであっても、それが訪問者に意識されることはない。
  （例に Google Chrome Comics の24ページが出てました。「ユーザーの行動の邪魔になりたくないんです」）
• IAの成果は目に見えるものではないので、制作タスクに上がりにくい。クライアントに大切さを伝えにくい。だからこそ、ディレクションをする側がクライアントにそれを明確に伝えて、タスクに加える必要がある。

※最後の受講生質問にも「IAの費用を計上するのが難しい」という意見がありました。坂本先生は、「（IAをきちんとやっておくと）クライアント側のコミュニケーションコストが減る」という回答をされてました。クライアント＋制作が複数人数になるので、共通認識の指標になる設計をしておけば進みやすいということだと理解しました。
・・・個人的には、IAがどうとか説明せずに「設計費」とか「デザイン費」に計上しておけばよいのでは？と思いました。IAは実制作のために必要な前準備と思うからです。＞とはいえ、相見積もりなんかだと、価格重視で決まってしまう傾向もあるのですが…。そこは、プレゼンでビシッ！と他社との差別化を訴えればOKな気もします。

ワークショップについて

いくつかのワークショップがありましたが、最後のものだけ紹介します。

お題：「SONY BTAVIA」のトップページの再設計を行う

問９　自分なら、このトップページにどんなニーズが想定できるか？を書きなさい。

私の回答はこれ↑。

最初に、購入後のフローに着目して「修理受付をトップでアピールしたい」と思いました。
（これは、購入前の方への安心感にも繋がるはず。）

次に、現サイトで広い面積を取っている割に内容がわかりにくい「シリーズで選ぶ」に着目。一般ユーザーが、ここから自分が欲しい商品が見つかるとは思えません。

改良案として「サイズで選ぶ人のためのフロー」（自分の購入経験で部屋の間取りからこのサイズの商品で…と探したから。）と現サイトの「特徴から探す」をもっとアピールすることにしました。

また、「インターネットTVを説明するフロー」（現サイトでYoutube・Skype・Twitterやインターネットテレビと目立った表記があるので、メーカー側としてはイチオシ機能のようだけど、一般の言葉では無いし、知ってても、それとTVをつなげてどんな利点が？と疑問がでると考えてのこと。）を考えました。

問10　想定ニーズを踏まえて、現サイトの改良案を書きなさい。

私の回答はこれ↑。

改良箇所は、

• シリーズ型番は、購入直前の情報収集で来訪するユーザーが必要な情報なので、あんまり目立たないけど見つけやすい右側にコンパクトに配置
• 修理受付へ進めるショートカットを右側へ配置
• 左側は最初はそのまま。（TVCMを見て来訪するユーザーにわかりやすいので）
• 左2列目に、「サイズ（cm表記で置き場所がわかる）」ごとに該当商品へ進めるショートカットを配置
• 左２列目に、現サイトにある「特徴で選ぶ」をもう少し広い面積で配置
  （ニーズで商品を選びやすいので残しました）
• 左３列目に、「インターネットTVの特徴」や「３Dブラビア」などの製品の特徴を紹介するページへのショートカットを配置

ワークショップの感想

短い時間で考えをまとめるのは、いい訓練になりますね。

また、隣席の男性の方とディスカッションしたのですが、やはり男性の目線は違いますね。「欲しい機能を複数選択して、合う商品が検索できるように」とか「SONYの映像技術をもっとピックアップするなど」の案が出ていました。坂本先生も「SONY製品の購入はクオリティを重視するので、綺麗な映像写真などのビジュアルを増やしたり、映画など映像がこんなに綺麗に見れますよという利用シーンの提案を追加」という案を出されていました。

どうしても私は、「女性・主婦」目線なので、現実的な面白みのない改良をしてしまいましたが、人によって違うのだなと実感しました。

やはり、こういうことは複数人数でサンプルを多くしながら、よい案を練る必要がありますね。ぜひ、他の受講生の方の案も見てみたいです。

全体的な感想

IAを学習する上で、実例による訓練は欠かせません。机上の空論では意味がありませんので。書籍の内容もそうなのですが、ワークショップを交えたセミナーはたいへん興味深かったです。勉強になりました。

また、今の私は講師業だけでサイトの実制作から離れているのですが、「ディレクション」という立場でこういった作業を現場でしてみたいなという気持ちが生まれました。クライアントとデザイナーの架け橋になるって、説明付きで理屈っぽい自分に向いてるんじゃないかな？（まぁ、それには知識がもっと必要でしょうけれど。）

貴重な時間を過ごさせて頂き、ありがとうございました！
後は著書で勉強させて頂きます。

追伸

坂本先生の↓のインタビュー記事も参考になりました。
「自ら切り開く」を原動力にして　UXデザイナー坂本貴史氏インタビュー

長年講師でお世話になっている iMedio さんの今年度のセミナーが５月１２日からスタートしました。

最初は、セミナーを利用頂く方へのガイダンスとして、導入セミナーから始まります。今年の導入セミナーは、４種類。

• 本当に初めての方向けの「Webサイト導入［超］入門」
• Web担当で自社サイト改善を検討している方向けの「 Webサイト［出直し］入門 」
• 昨年から増えているDTPからWeb制作者への移行を希望している方向けの「Web制作者になるには？」
• デザインと画像加工に特化した「見直しWebサイトデザイン」

それぞれレベルや目的に合わせた２時間の聴講セミナーで、自分にどんな勉強が必要なのかの概要を掴んでいただけます。

講師はどんな準備をしているの？

さて。ここからが本題。

先日行われた「Webサイト導入［超］入門」を例に、私がセミナー当日までにどんな準備をするのかを公開したいと思います。これからプレゼンテーションやインストラクションをする方への参考になれば幸いです。

１．カリキュラムの組み立てと資料の準備

まずは、カリキュラムを組み立てます。私の場合は、まずメモ書きレベルで内容を検討します。ここでは、学習目標別に学習手段や思いついたネタなどを手書きしています。

今回のように、短い時間の聴講セミナーの場合はスライドで資料を作成します。

まずは、手書きでスライド内容（左）と進行手順（右）を手書きでまとめます。この時におおよその時間とスライド枚数を考えます。

手書きの資料を見ながら、パワーポイントでデータを起こします。その後、パワーポイントを２枚づつの印刷にしてテキストを作成します。講師用の手持ちテキストとして、授業の進め方を手書きで覚え書きしておきます。

パワーポイントを作りつつ、当日の配付データ（参考サイトや直接見て欲しい資料など）を作ります。

２．セミナー当日の準備

セミナーを円滑に進めるために、当日の準備はぬかりなくやる方です。（突発事項に弱いので、できるだけ不安要因を排除しておきたい小心者です。）

まずは、講師の手元にある資料をデスクに準備します。準備するのは講師用のテキストと進行状況を書き留めておくためのA4のメモ用紙です。写真はまだ空欄ですが、授業を進めながら、何時頃にどこまで進んだかとか、休憩を何時取ったかとか、質問事項とか、受講生の様子などを書き留めていきます。（これは、次回実施の時の反省材料にもなりますね。）

次に、自分が使うパソコンにスライドデータや使用するデータをコピーします。

スライドデータは開けておきます。また、画面をズームしたり指し示すためのソフトも起動しておきます。

使用するデータがすぐに見つかるようにフォルダを明けておいたり、マウスポインタを拡大表示にします。

また、始まってすぐに使うサイトなどは、タブブラウザを使っていくつか開けておきます。

次に、ホワイトボードの準備です。講座タイトルや時間、着席の際の注意事項を記載しておいたり、ホワイトボードマーカーが出るかどうかを試し書きしたりします。

教室の後の回って、プロジェクターの見え方を確認したり、空調を調整したり、お客さま用のハンガーを使いやすいように準備したりして、これで準備は完了です。

こうやって、改めてみると細かいことをやってますね。（ホントはおおざっぱな人間なのに、びっくりです。）

これからも、来て頂いた方に最良の環境でセミナーを受けて頂くために日々努力していこうと思います。お気づきの点があれば、ご指摘くださいね。(^^)

最後に少し宣伝。

５月２１日に「教える技術―わかりやすいセミナー進行の極意」というセミナーをやります。インストラクションの勉強をしてみたい方、是非ご検討くださいませ。
※こんな珍しい題材でセミナーをすることは、最初で最後かもしれません。www

初代の ipad は、アプリが外部出力に対応していないと無理なんだそうですが、 ipad2 は、ビデオミラーリングという機能が付きすべての外部出力がOKになったそうです。それを知らないで買ったのですが、ラッキーでした。

Apple VGAアダプタ とプロジェクターケーブルを繫いで、ipad2 の電源を入れるだけの簡単操作でした。

おまけで、Apple VGAアダプタ の受け手のコネクタ部分。D-Sub15pinですね。

ipadは持ち運びも軽いし、これからどんどんプレゼンや授業で使っていこうと思います。
いやぁ、よい買い物しました。(^^)