Webデザイン講義のスライドと元資料

@mutsukingの Webデザイン概論講座 | MutsuLogでもスライドが公開されてますが、
3月にAIP CafeでWebデザイン概論の講義をさせてもらいました。

この場を借りて。
このような機会を与えてくださったグローバルブレインズ株式会社、株式会社 福岡CSKの関係者のみなさま、本当にありがとうございました。
参加してくださった方々も最後までお付き合いしていただき、本当にお疲れ様でした。

このスライドと当日資料は@mutsukingと二人で作成し、当日の話し手は僕がやらせてもらいました。
そのスライドを作る際の草案のマインドマップや、当日の様子なんか書いてみたいと思います。

マインドマップで講義の流れを組み立てる

↓がスライドを作る前に、二人で考えた講義の骨組みとなったマインドマップです。

スライド画像が大きすぎるので、このページ上でうまく見れない人は下記の直接の画像リンクを参照してみてください。
https://blog.cgfm.jp/garyu/wp-content/uploads/2010/06/mindmap_AIP_webdesign_full.png

100枚近くのスライドもいきなり作れるわけではなく、
どんな道筋で進めるか、何を重点とするか、どんな資料が必要かの洗い出しなどをまとめないといけませんでした。

このマインドマップは、@mutsukingと二人でファミレスに篭り3-4時間で仕上げたと記憶してます。
ファミレスのような場所で時間を区切って挑んでみたのですが、良い結果になりました。
（もちろん事前にある程度の流れは考えてましたが、ちゃんと形にしたのはこの時間です。）

ついだらだらしてしまいそうな時は、思い切って外に出て時間を区切ってみるのも、良いデザインワークに繋がると実感しました。

当日の様子など

当日はスライドの説明するだけでは物足りないだろう思い、ワークショップ的要素も盛り込みました。

アイスブレイクで緊張感を解す

周りの人達と馴染んでもらうのにアイスブレイクというものが良いと、WordCamp 2010 Fukuokaでお世話になったマクラケン直子さんから聞いていたので早速試してみました。
（マクラケン直子さんが話してたのは「欲しいと思う財布」だったんじゃなかったかな？）

今回、僕が考えたアイスブレイクは以下の内容でした。

Q. 『あなたの自慢の一品は？』
Q.『その自慢の一品の特徴を書いてください。』
（箇条書きでもイラストでも表現は問いません。）

こんなのでもPDFが欲しいという方はこちら
https://blog.cgfm.jp/garyu/wp-content/uploads/2010/06/icebreak.pdf

この内容でA4用紙に印刷して配布しただけです。

このアイスブレイクも実は狙いがあって、『人に伝えるのって案外難しい』という事を感じて欲しかったのです。
デザインは「人にわかりやすく伝える」ことも重要で、今回のスライドの内容もそこに軸を置いてました。

※GBの森さんは、自慢の一品のギターへ愛がとても皆さんに伝わるものだったのが印象的でした。

グループワークでサイトマップとワイヤーフレームを考えてみる

こんな感じのグループワークを行いました。

• 対象サイト：FOIC (福岡「オープンソース系ＩＴ化」推進コンソーシアム) http://www.foic.jp/
• サイトマップ構築
  • 現状サイトを見てのサイトマップの整理
  • 不要なコンテンツ、不足なコンテンツの洗い出し
• ワイヤーフレーム
  • 線と文字だけで、どんなサイトのレイアウトが良いかの情報設計を考えてみる
• グループ毎に発表

ホワイトボードに直接書いてプレゼンしたり、前のグループの案に被せての発表だったりして中々盛り上がりました。

雑感

参加者の方から、
「デザイナーも我々（システム側）が設計書や仕様書を最初に考えるのと変わらないんですね。」
「感性で作ってるとばかり思ってましたが、こんなに考えて作ってるものなんですね。」
という声も聞けました。

これは私にはとても嬉しい収穫でした。
よくデザイナーは「最初からデザインツールやアプリでデザイン制作してる」と思われがちですが、
ちゃんとプロセスを踏んでいること、デザイナーの仕事を少し理解してもらえたんじゃないかと思います。

いつもたくさんのデザイナーさんやプログラマーさん達と接してきて、
お互いの仕事範囲やプロセスへの理解することが良い仕事へ繋がるんじゃないかと私は考えてます。

やっぱり愛ですよ、愛（笑