PHPカンファレンス北海道 2016にて登壇してきました。

2016年4月16日

2016/04/16 に北海道で行われた「PHPカンファレンス北海道2016」にてセッション参加してきましたのでその報告など

“難しそうな「情報設計」に実際にふれてみる” に参加してきました

2016年4月13日

 

2016年3月18日に
DevLOVE関西「難しそうな「情報設計」に実際にふれてみる
https://devlove-kansai.doorkeeper.jp/events/39697
に参加してきました。

ブログ書くのが遅くなってしまいました…。

 

自己紹介

株式会社chatboxでデザイナーしております。yasuiです。
デザイン中心にフロントエンド界隈を、
色々悩みながら、勉強したり迷走してるヒトです。

 

参加のきっかけ

「情報設計」はデザインする上で重要な作業。
だけど、情報整理しているつもりが、手順もあやふやで、
自分の頭が整理できてなくて、設計中に迷子になることが多々ありました。

ということで、
プロの方が行っている「情報設計」を学びたくて参加しました。
(人見知りチキン野郎なので、プログラムに書いてあったワークショップの項目に怯えつつ)

 

勉強会のおおまかな流れ

山下 一樹さんによる、「情報アーキテクチャ入門」のお話

参加者でチームにわかれ、実際に「情報設計」をしてみようワークショップ

 

 

「情報アーキテクチャ入門」のお話

どんなお話だったかは、公開されているスライドを見たほうがわかりやすいので、
ほぼ割愛したいと思います。
ざっくり情報アーキテクチャってどういうこと?IAのお仕事って何?
制作フローにおける「情報設計」の位置づけ、などのお話があって、
情報設計ってどういう手順で、どういうことに気をつけながら進めたらいいのー?
ということを具体例を織り交ぜたりしつつ、説明してくださりました。

 

【スライド:情報アーキテクチャ入門 / By Kazuki YAMASHITA

 

「情報設計」のエッセンス

お話の中で特に聞きたかった情報設計のやり方〜のところを
自分なりの解釈混じっているかもしれませんが、ざっくりと、まとめました。

「情報設計」ですること

【1】把握する
【2】意図づくり
【3】構造化する
この3つ。

 

それぞれのポイント。

【1】把握する
1.とにかくたくさん項目をだす。全体の情報を見る。
(この時は分類のこととか特に考えない)

 

2.課題を見極める
情報が混乱する原因は以下の3つ。それぞれの対処法。
◆ 情報が多すぎる   → 情報を統合したり、排除したりする。
◆ 情報が少なすぎる  → 作る
◆ 情報が不適切(間違い・古い)→ 修正

 

3.情報を整理する
大体5つに分類できるので、整理してみる
◆ カテゴリ(ジャンル)
◆ アルファベット
◆ 時間
◆ 位置
◆ 連続性(売上・ランキングなど)

 

【2】意図づくり
何にとって良いのかを考え、情報を「言葉」でラベリングする
言葉選びは慎重に!ユーザにとってのわかりやすい言葉を選ぶ

語調 : 送信 / 送る
同義語: 自動車 / 車 / 乗用車
形容 : 明快 / 明らか

 

【3】構造化する
1.情報を構造のパターンに当てはめる、情報の関係性を可視化する
◆ 並列 □ □ □(同じ情報が並ぶ、少ない情報で有効)
◆ 階層 ■(□,□) ▲(△,△) (親子関係がある、大量の情報で有効)
◆ シーケンシャル □ → □ → □ (順序で変化する情報,ex.レシピとか)
◆ ハイパーテキスト □ ⇔ □ (構造間を移動)

 

2.分類の基準を決める
例えば・・・
トマトは生物学上、実は「くだもの」 ⇒でも私達の理解は「野菜」
いちごは生物学上、実は「野菜」   ⇒でも私達の理解は「くだもの」
基準を決めないで分類すると本当に伝えたい相手にとってわかりずらいものになってしまう。
情報を届ける相手の基準を合わせて情報を設計することがわかりやすさに繋がる。

 

ワークショップ

どんなワークショップだったかというと、

[1]色んな料理のメニューが書かれたカードが配られる

[2]メニューをカテゴリ分けしてみる(ex. 和食・果物などなど…)

[3]仮でお店を立てることになったとして、
「どんな人」に向けた、「どんなお店」にするか決める。
そのお店ならではのメニューを作ってみる

意図としては、
[1]とりあえずみんなでどんな項目があるか把握する。
[2]それらの中でグループ化できるものはなにか、を考える。
[3]ターゲットを仮定して、最終的な分類の基準をつくり、
分類をみなおしたり、不要なメニューを排除し、必要なものだけに絞る。

こんな感じだったように思います。

 

 

ワークショップやってみて

参加の時から恐怖しつつ、大変緊張していたワークショップでしたが、
チームの皆さんも気さくな方が多くて、みんなであれこれワイワイと
相談したり意見言い合ったりして、想像とは逆にとても楽しんでしまいました…!

人によってやっぱり分類の基準が違ったり、
[1]の段階で[3]ことまで考えてしまってちょっと難航したりして、
実際に円滑に情報設計ができたかというとちょっとクエスチョンが浮かびますが、
情報設計のつまずくところっていうのがワークショップの中で
体感できたのはとても良かったです。

あとは、与えられた大枠のお題やコンテンツは同じであっても、
チームごとに全然色が違ってて、
ターゲットユーザを意識した分類基準を作る重要性などを感じることができました。

IMG_1091

実際にグループで作ったメニュー。

欲張りな学生のためにメニューを絞らず貼りまくったため、シートからはみでてる(笑)

 

感じたこと

山下さんのスライドの最後にもありましたが、
「混沌とした情報を把握する難しさに立ち向かう」
「適切な意図をつくり、それを決める勇気を持つ」
「情報だけでなく人々の混乱も明快にしていく」
とても大切なことだと思いました。かっこいいです。

今回の勉強会では、複雑な情報に対して難しそうだと怖がりすぎてる自分に気付けました。
情報設計をして、「わかりやすい」を作っていくことは大変なことかもしれないけど、
順番に少しづつ、分解していけば難しいことだとしても、怖がる必要はないんだなと思いました。

とても良い刺激になった勉強会でした!
DevLOVE関西また参加してみたいです。

初心者でも気軽に参加できる「もくもく会」って?

始めまして。エンジニアのショウノです。

関西フロントエンドUG(KFUG)が月に一度主催する「もくもく会」。

「勉強会って参加したことがないから想像がつかない・・・」
「初心者歓迎って書いてあるけど、本当かな?」

と思ったりしている方にもいらっしゃるかもしれません。

そこで今日は実際のもくもく会の雰囲気をお伝えしようと思います(^ω^)


会場はいつも扇町のTAMさんにお借りしております。

OLYMPUS DIGITAL CAMERA

実は今回からちょこちょこ主催者が変わるようで・・・
本日はかのスライドで脚光を浴びたpotato4dくん。

OLYMPUS DIGITAL CAMERA

知る人ぞしる、漢は黙ってjQueryの彼です。
しっかりともくもく会を取り仕切ってくれました。

各自、自己紹介と今日やることを一人ずつ宣言して(遅刻したので写真がない・・・)
今日もみなさんもくもく開始。

OLYMPUS DIGITAL CAMERA

ときには相談しあったり

OLYMPUS DIGITAL CAMERA

お菓子を食べたり(夜だけど)

OLYMPUS DIGITAL CAMERA

そんな感じでいい感じのゆるさの中、約2時間もくもくしました。
最後は各自、進捗状況なんかを報告します。

OLYMPUS DIGITAL CAMERA

プロジェクターも使って「これってどうよ?」なんて聞いてみたり。
(ちょいちょい映らないこともあるけど)
「隣の人に教えてもらって困っていたところが解決できましたー」という方もいて
今日もみなさん有意義な時間を過ごされたようです。


もくもく会は雰囲気は伝わりましたでしょうか・・・?
「最近プログラミング始めたばかりなんだけど、周りに聞く人がいなくて困ってる・・・」
という方はもくもく会に参加すればサクサク進むようになるかも♪

KFUGでは他にも「もしゃもしゃ会」も月に一度開催しております。
気になっている方はぜひ一度参加してみてはいかがでしょうか?(^^)

OLYMPUS DIGITAL CAMERA

4/2(土) lec-cafe 初めてのAngularJS – 参加してきました!

2016年4月5日

こんにちは、chatbox のサポーター、はなちゃんです。

lec-cafe レポート係に抜擢していただきました、よろしくお願い致します!

今回は初心者でもできるangular講座。

laravel.osaka 4月の勉強会のお知らせ

2016年3月26日

4/22 に、大阪扇町の 株式会社 TAM さんにて laravel.osaka 4月の勉強会を開催します。

KFUG 3月 もくもしゃ会 参加レポート

2016年3月23日

3月21日に大阪扇町にある株式会社TAMさんのオフィスで 関西フロントエンドUGのもくもくもしゃもしゃ会が開催されました。

laravel.osaka 3月 もくもく会 開催レポート

大阪扇町 株式会社TAMさんのオフィスで、laravel.osaka 3月度の勉強会を開催してきました。

FRONTEND CONFERENCE 2016 を開催してきました

2016年3月16日

2016/03/05 大阪梅田の新梅田研修センターと言う所で、FRONTEND CONFERENCE 2016 というイベントが開催されました。

イベントのメイン企画を通じて、深くこのイベントに携わってきたので、開催までの道のりなどかいつまんでお話しようと思います。