ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

名古屋サイト改善研究会Vol.1の翌日、トライデントコンピュータ専門学校も協賛させていただいた「CSS Nite in Nagoya vol.5」に参加してきました。

今回は、ビギナー向けということで、学生さんも多く、比較的参加者の平均年齢が若かった感じです。

１．DTPからWebデザインへ～ Webデザインに関わって行くために注意すべきポイント～
増田 悟 氏 株式会社マール

今までDTPデザインを中心に活動されていたデザイナーの方で、Webデザインをしていく上で注意しなければならない、DTPとWebの違いや、Webデザイン独特なディテールなどを、ディレクターの視点からお話しします。
Webデザインを分かっているかどうかは、すべてここで決まる！

Webデザイン学科でも、講師をおねがいしている増田さんのセッションです。DTPとWebの違いを解説されながら、制作へのこだわり、手法をわかりやすく解説されていました。特に「全要素を想定したデザイン」に関しては、DTPにはないコーディングが絡んでくるWebならではの手法だと思います。また、教えてくださーい。


２．マークアップの基本と、今おさえておきたい”旬”な話題
小林 信次 氏 株式会社まぼろし

Webサイトのパフォーマンス（表示速度）最適化、HTML5／CSS3の登場、JIS X 8341-3の改訂など、マークアップ界隈ではホットな話題がとびかっています。
このセッションでは、マークアップの基本をベースにSEO、アクセシビリティなどの話題まで、今おさえておきたい広範囲なトピックを、ツールや参考サイト、マークアップエンジニアの本音とともにご紹介いたします。

●HTMLのマークアップの基本からHTML5
●CSS3（ブラウザ間での表示の違いに問題がなければ、使っていくといいでしょう）
●Webサイト最適化（SEO的にもページスピードは影響がでてきているので、CSSスプライトなど使い最適化しましょう。※でも慎重に。）YSlowやPage Speedを使って測れます。
●Webアクセシビリティ
ウェブアクセシビリティ基盤委員会にWCAG2.0関連、JIS X 8341-3:2010関連の文書が読めます。日本人はJISを読むべし。
●アクセス解析なども、今後の注目。


３．アクセスマップで考えるユーザーシナリオと”リッチ”なコンテンツ
鷹野 雅弘 氏 株式会社スイッチ

ほぼすべてのサイトに用意されているアクセスマップ（地図）を用いて、本当に豊かなコンテンツとは何かを考えるワークショップです。
ユーザー／ビジターをセグメント化し、それぞれの視点に立って、そのニーズやウォンツを真剣に検討してみましょう。
Web上でよく見かける地図ですが、これらを頼りに、まったく迷うことなく目的地までたどりつけることはまれです。
これでは地図としての機能を果たしているとはいえません。
そこでこのセッションでは「地図」というコンテンツに求められる機能について、具体例を用いて検証しつつ、Webにおいて「コンテンツがリッチ」であることについて皆さんと考えていきます。

接続不良により、プロジェクターが使えないトラブルもありましたが、さすがに鷹野さん、動じることなくセッションの開始です。さて、ビギナー向け、最後のセッション、スピーカー鷹野さんで、この「情報デザイン」的な題材が入ってくるという事に、今後やはり求められている人材スキルに“情報設計”は外せないのでしょう。
グループディスカッションでは、普段学生に「頭が固いなぁ」とか偉そうな事をいっていますが、実際に自分がやってみるとなかなか、思い浮かばないものですね。まぁ体調が悪かったので。。。


今回、CSS Niteの名古屋版ということでWCANと客層が被るのかなと思っていたのですが、会場に来てみると全然知らない人ばかりで、また新たな出会いをさせていただきました。
（司会アシスタントの堀尾さんを除いて）トライデントの学生も数人来ていたのですが、人数的には寂しい感じでした。もっと積極的に、刺激を求めていって欲しいと思います。でも、名刺交換してずっと更新されていないブログやつぶやかないTwitterが明記されていても、意味が無いのでしっかり更新しましょう。※自分もですが。

今回、講演されたスピーカーの皆様、運営されたスタッフの皆様、ありがとうございました。

トライデントコンピュータ専門学校では、10月16日（土）に行われる「CSS Nite in NAGOYA, Vol.5」の協賛をさせて頂くことになりました。

4月から毎月開催されてきた「WEBサイト制作者のためのHCD（人間中心設計）の理解 in 名古屋」ですが、とうとう今回で最終回です。今回は、第3回「ユーザー調査」、第4回「ペルソナ／シナリオ法」を踏まえて、ペーパープロトタイプを制作し、それまでのワークショップをまとめます。
最後は、グループでプレゼンテーションをします。

第5回／2010年 8月21日（土）
内容：プロトタイピング［第4回で企画したサイトのペーパープロトタイピング等］
会場：トライデントコンピュータ専門学校

まずは、浅野先生の講義です。
ペーパープロトタイプの作り方などは、簡単なので詳しい説明はなしで、ペーパープロトタイプを制作し、タイピングする事が重要という内容でした。アクティングアウトという方法が、コトのデザインを検証する上で注目されている模様。


早速、ポストイットを使用して、ペーパープロトタイプの制作に入ります。
各グループによって作り方が違うのは、講義で作り方の説明がなかったからですが、さすが皆さん制作現場の猛者達ですので、最後はきっちり形にします。


その後、他の班からペルソナに近そうな人を呼んで、簡単な説明をしていきます。これは、グループ制作の場合、わかったフリをしているメンバーに緊張感をあたえ、自分たちの制作物の理解を深める意味があります。他のグループの人に伝わったかは、あまり問題ではないようです。これは、学校のグループ制作を行う時にも使える方法です。
必ずいますからねー、参加してない人。

最後に、パワーポイントで制作したプレゼンデータを発表して、終了となりました。


詳しい内容は、
→情報デザイン研究室
→瞬間と永遠.com
→瞬間と永遠.com
→ra66it blog

今回で5回目となった「WEBサイト制作者のためのHCD（人間中心設計）の理解 in 名古屋」ですが、本当に内容の濃いワークショップだったと思います。アシスタントとして参加してもらった学生もお疲れさまでした。
後期からは、彼らも情報デザインの授業が始まりますので、その時にプロとの差を感じるのか、それとも今回の経験を生かしてスムーズに作業が進められるのか、とても楽しみです。

主催のモンキーワークスの皆さま、運営ありがとうございました。本当に楽しかったです。
また、月1度、名古屋の濃い味は苦手だーと言いながらも、通い続けていただいた浅野先生、本当にありがとうございました！
名古屋の制作会社の方でも、業務に少しずつ取り入れられて来ていますので、今回、お手伝いができて本当に良かったです。
ということで、まだ中級編（10月1日、2日）が続きますので、引き続きよろしくおねがいします。
中級編は1泊2日で、参加資格があります。詳しくは、モンキーワークスさんのサイトから。

■ウェブDeBLOG「WEBサイト制作者のためのHCD（人間中心設計）の理解 in 名古屋」
→第1回
→第2回
→第3回
→第4回

全5回を予定している「WEBサイト制作者のためのHCDの理解 in 名古屋」の第3回がトライデントで開催され、参加してきました。
今回のテーマは以前から、とて期待していた「ユーザーテスト（プロトコル分析）」です。
講師の浅野先生のブログ「情報デザイン研究室：WEBサイト制作者のためのHCDの理解 in 名古屋（第3回）」

■第3回／2010年 6月12日（土）
内容： HCDプロセスの最終段階である「ユーザー評価」［既存サイトの評価］
会場：トライデントコンピュータ専門学校


もう、おなじみのHCDプロセス図の説明。
事前にメンバーに課題としてサイトの調査が課せられており、グループ内でタスクを決定していきます。
この時のタスク設定が重要になってきます。参加者は、初めてという方が多くタスク決定に四苦八苦していました。「これで、プロセス解析に適したタスクなのか？」などの疑問を抱きつつ進めます。
このタスク設定は、何回も経験を積んでいくと、自然とわかるようになるそうです。


まずは、グループ内のメンバーがエキスパートとして、タスクを進めていきます。続けて、違うグループからメンバーを連れてきて、ノービス（初見者）として同じタスクを処理します。もう一度、違うノービスユーザーで行う全3回のタスクを撮影し、発話を記録します。そして録画したムービーを観ながら平均と、エキスパートとの違いを比較検証、分析をします。


最終的にNE比をグラフ化し、プレゼンテーションします。
今回は、課題サイトの中にトライデントコンピュータ専門学校のWebサイトがあり、しっかりと分析していただきました。ありがとうございました。

→講座やワークショップの解説をアップルップルの山田さんがわかりやすくまとめてくださっています。
ra66it blog

次回は、今回の結果を踏まえたペルソナ・シナリオ法です。
詳しくは、モンキーワークスさんのサイトへ。