「Webクリエイティブに活きる抽象化思考力」ミズノケイスケ@WCAN2014Autumn

Webクリエイティブに活きる
抽象化思考力
2014年9月20日(土)
WCAN2014Autumn
2コマ目／room A
ミズノケイスケ

どちらが抽象的？
イラスト｜言葉

イラスト｜言葉
どちらが抽象的？その理由は？

ちゅうしょう-てき〔チウシヤウ-〕【抽象的】
!
１いくつかの事物に共通なものを抜き出して、そ
れを一般化して考えるさま。「本質を―にとらえる」
２頭の中だけで考えていて、具体性に欠けるさま。
「―で、わかりにくい文章」⇔具象的／具体的。
出典：コトバンク http://kotobank.jp/word/%E6%8A%BD%E8%B1%A1%E7%9A%84

言葉｜数字

右脳｜左脳

出典：http://ayumiko.hatenablog.com/entry/2013/12/17/001410

"フロント側のことを追うのに専念して
いる間に、デザインのスキルがどんどん
落ちていく気がして辛くなる。
ぼうっと突っ立っているとあっという
間に先を越され、息を切らして追いつ
こうとしても追いつけない。"
http://ayumiko.hatenablog.com/entry/2013/12/17/001410

状況整理
•3年前ピカピカの Webディレクター1年生になる。
•求められるのは「作って終わりのホームページ」で
はなく「成果の出るホームページ」。
•担当するクライアントの業種は多岐にわたる。

業界のことがわからないのに、
ホームページの企画
なんてできないよ(´Д` )
担当するクライアントの
業界のことを、隅々まで勉強
しないといけないの(´Д` )

ある、光が射します。

学びは上位にいくほど
抽象的になる。
だから応用が利く。

Webディレクション業務に、おおいに役
立っていると感じるのが抽象化思考力。
皆さんのWebクリエイティブを助ける
「抽象化思考力」に興味を持っていただ
ければ、と。

抽象化思考力を身につけると‥‥
• Webクリエイティブの質が上がる！
• 企画力・問題解決力があがる！
• 仕事上の人間関係の悩みが解決する！
• 制作がスムーズに進む！

• この混沌とした時代を生き抜くため
にも、重要な力である！
• たとえ将来Web制作の構造が変わっ
ても活躍できる力が身に付く！

働けど働けど、
暮らしは楽にならないよ(´Д` )
クリエイティブの質だって、
全然変わってないんじゃ(´Д` )

• Webクリエイティブの質が上がる！
• 企画力・問題解決力があがる！
• 仕事上の人間関係の悩みが解決する！
• 制作たがスムーズぶに進む！
ん。

世界がちょこっと違ったように見える。
だけ。

本日のゴール「抽象化思考」を見る。(意識する)

本日の内容
1. 抽象的ってなんだろう？
2. 抽象化思考力ってどういいの？
3. 抽象化思考力はどう活かすの？
4. 抽象化思考力ってどうやって身につけるの？
5. 未来は抽象化した世界に向かってる？
6. 抽象化思考力お前は一体何者だ？

1.
まず、抽象的って
なんだろう？

いちばん身近にある、
抽象的なもの。

ここに鉛筆が
あるとします。

具体的抽象的
ここに鉛筆が
あるとします。

1. 言葉は抽象的な概念である。
2. 抽象化思考は、誰もが成長とともに自然に
身について、意識せずに使っている。

抽象的
具体的
言葉
アイコン
絵・イラスト
写真
鉛筆
実物

磯野さん家の
タマ
猫

猫
磯野さん家の
タマ
近藤さん家の
シロ
田中さん家の
ブチ

猫
ん家の
近藤さん家の
シロ
田中さん家の
ブチ

猫犬馬象
ん家の
近藤さん家の
シロ
田中さん家の
ブチ

猫
動物
犬馬象
ん家の
近藤さん家の
シロ
田中さん家の
ブチ

猫
哺乳類
動物
ヒト
犬馬象
ん家の
近藤さん家の
シロ
田中さん家の
ブチ

猫
哺乳類
動物
生物
魚類甲殻類
ヒト
犬馬象
ん家の
近藤さん家の
シロ
田中さん家の
ブチ

ちゅう【抽】
!
［常用漢字］［音］チュウ（チウ）（漢）［訓］ぬ
きんでる　ぬく
引き出す。抜き出す。「抽出・抽象・抽籤(ちゅう
せん)」
［難読］抽斗(ひきだし)
出典：コトバンク http://kotobank.jp/word/%E6%8A%BD

言葉の抽象化とは「ひきだし」にしまっていく作業
である。
共通点・規則性・性質、何かしらの基準（ものさ
し）にそって「ひきだし」にしまう。
「ひきだし」にラベルをはり、「タンス」に名前を
つける。
1. しまう 2. 名づけ
これが抽象化である。
【例】情報の構造化、ナビゲーションのラベリング
など、Web制作の現場でも見られる。

コンビニ
行ってきます！

!
!
!
!
コンビニ行ってきます
抽象的
具体的

!
!
!
ごはん買ってきます
抽象的
具体的

!
!
食欲を満たすためにエネルギーを調達してきます
抽象的
具体的

!
生命を維持させるための行動をしてきます
抽象的
具体的

本能にしたがってきます
抽象的
具体的

足を動かして体を移動させます
抽象的
具体的

お客さんのとこに
行ってきます！

!
!
!
お客さんのところに行ってきます
抽象的
具体的

!
!
報酬を得るための活動をしてきます
抽象的
具体的

!
抽象的
具体的

抽象的
具体的

ホームページの打合せをしてきます
抽象的
具体的

ホームページの打合せをしてきます
車の運転をしてきます
抽象的
具体的

すべてこれでOK!?
本能に
したがって
きます!!

言葉には、抽象度がある。

抽象度の方向性と文脈の関係

抽象度は方向性をともなう。
方向性は文脈により決められる。

極度に抽象化されたもの、
数字。

【抽象】
事物や表象を，ある性質・共通性・本質に着目し，
それを抽（ひ）き出して把握すること。その際，
他の不要な性質を排除する作用（=捨象）をも伴
うので，抽象と捨象とは同一作用の二側面を形づ
くる。 ↔ 具象（ぐしよう）・具体
出典：Weblio辞書 http://www.weblio.jp/content/%E6%8A%BD%E8%B1%A1

言葉｜数字
具体的抽象的

すべての人は、意識せずとも
抽象化思考力（言葉や数字）を使い、
日々暮らしている。

抽象的なものは、感情に訴えない。
（人を動かさない）

ネットで見つけました。
これ、なんでしょう？

島唄よ　風に乗り　鳥とともに　海を渡れ

音・声・歌・メロディー・
リズム、具体的なものが
人の感情に訴える。
!
言葉は、物語として人の
情緒・郷愁に働きかけ感
動を与える。

抽象度とコピーライティング
“「単語」は、基本的に
その具体性が高いほど、
明解に伝わるようになり
ます。”
!
出典：ASCII.jp｜書かなきゃいけない人のためのWebコピーライティング教室 http://ascii.jp/elem/000/000/913/913780/index-2.html

抽象度とコピーライティング
“「単語」は、基本的に
その具体性が高いほど、
明解に伝わるようになり
ます。”
【持論】コピーライター
は抽象化思考力を必要と
する職業である。
出典：ASCII.jp｜書かなきゃいけない人のためのWebコピーライティング教室 http://ascii.jp/elem/000/000/913/913780/index-2.html

1. 抽象的ってなんだろう？【まとめ】
• みんな気づかずに抽象化思考を使ってる
• 身近にある抽象的な概念「言葉・数字」
• 抽象的な概念は不要な性質を排除している
• 言葉には抽象度がありそれは文脈により決まる

2.
で、抽象化思考力
ってどういいの？

単純に考える（=抽象化思考力）というのは、本質的に
重要な部分と「枝葉」の部分を見分けて重要な部分だけ
を語れるとういことです。
（中略）
じつは世の中を動かしている基本原理・原則は、ごくご
く少数であったりします。人類の長い歴史の中で蓄積さ
れてきた膨大な経験から生まれた知見を生かさない手は
ないでしょう。あなたには、どこまで「他者から学べる」
姿勢があるでしょうか。
出典：いますぐはじめる地頭力（著：細谷功）P24

抽象化思考力がない人の特徴
1. 経験至上主義
2. 具体性依存
3. 重箱シンドローム
4. 短絡的発想
出典：いますぐはじめる地頭力（著：細谷功）P167

短絡的発想
ホームページで集客する方法を考えましょう。
検索で1番上にでればいいじゃん！

重箱シンドローム
原稿書いたのでチェックをお願いします。
誤字を発見しました（鬼の首を取ったような顔）

具体性依存
コンセプトは「キャッチ&リリース」でいきましょう！
実際にものを見てみないとわかりませんね。

経験至上主義
この件はウチのサイトに応用できそうですね？
その会社だからうまくいったんじゃないの？

経験至上主義の極端な例
毎回
ドキドキしながら
リンゴを食べる
原始人の話

抽象化思考力がない問題点
• 自分の経験のみに固執し、他者から学ぶ姿
勢が弱い
• 些細な事柄にこだわり、大事なことが見え
ない
• 物事を具体的にしか捉えられず、応用が利
かない

抽象化思考力のメリット
• 他者の経験談から学び、自分の仕事にあて
はめて考えられる
• 本質的に重要なことを見抜き、インパクト
のある結果を出せる
• 原理や仕組みを学び、応用して活かすこと
ができる

2. 抽象化思考力ってどういいの？【まとめ】
• 本質的に重要な部分を見分けられる
• 基本原理・原則を応用できる
• 他者の体験談から学べる

3.
じゃあ、抽象化思考力
はどう活かすの？

Web制作を単純化してみる。

Web制作の3ステップ
1.クライアントの
話を聞き、
抽象化する
3.具体化して
ユーザーに
届ける
2.設計
・コンセプトワーク
・情報設計

抽象化思考力のプロセス図
課題の本質本質的解決策
具体的事象具体的解決策
抽
象
レ
ベ
ル
具
体
レ
ベ
ル
地頭力を鍛える　問題解決に活かす「フェルミ推定」（著：細谷功）P61
モデル化層
現実層
対象課題解決策
②解法の
　適用
①抽象化
③具体化

抽
象
レ
ベ
ルモデル化層
具
体
レ
ベ
ル
現実層
②解法の
　適用
①抽象化
③具体化

抽
象
レ
ベ
ル
具
体
レ
ベ
ル
モデル化層
現実層
②解法の
　適用
①抽象化③具体化

抽象化思考力3つのキーワード
1. モデル化
2. 枝葉の切り捨て
3. アナロジー

1. モデル化
物事の仕組みを単純化して表したもの
▼具体例
フレームワーク

モデル化層でできること
カスタマー（エクスペリエンス）
ジャーニーマップ▶
ペルソナ手法▶
▲ビジネスモデルキャンバス
出典：IT＆ウェブ業界のスキルアップをサポートする「CAREERzine」 http://careerzine.jp/article/detail/2291,実践！プロも使うラピッドUX手法 | Web担当者Forum
http://web-tan.forum.impressrd.jp/e/2014/03/24/16722, やってみましたペルソナ作り | Web担当者Forum http://web-tan.forum.impressrd.jp/e/2008/04/22/2886

本質を見極め関係ない部分を切り捨てる
▼具体例
コンセプト
!

よいコンセプトの例
映画エイリアンのコンセプト
「宇宙船版ジョーズ」

よいコンセプトの特長
1. 面白い
2. 説得力がある
3. 焦点が絞れている
4. 生き生きとイメージできる
出典：成功はすべてコンセプトから始まる（著：木谷哲夫）

よいコンセプトのメリット
1. 優先順位をはっきりさせる
2. 意志決定の指針になる
3. 人もお金も集まる
4. エンジンになり人を動かす
出典：成功はすべてコンセプトから始まる（著：木谷哲夫）

コンセプトを組み立てるには
抽象化思考力が必要である。

3. アナロジー（類推・るいすい）
似た性質から推しはかって違うものを説明する
▼具体例
・アイデアの応用
・たとえ話

アイデアを借りてきて応用する例
映画エイリアンのコンセプト
「宇宙船版ジョーズ」
アイデアを借りてきて
応用する（=アナロジー）

Web制作者の単純化
わたしたちWeb制作者の仕事を
「人を動かす仕事」と単純化して
考えてみる。
アクセス次ページ次ページ次ページ購入

人を動かすツボ18パターン
出典：人を動かすツボは18パターンある (1/7) - Business Media 誠 http://bizmakoto.jp/makoto/articles/1309/25/news012.html

問題解決ピラミッド
出典：地頭力のココロ（著：細谷功）P13
Why
What
How

問題解決ピラミッドの応用
Why 企業戦略
ビジョン
戦略
戦術
What
How

人生哲学
職業
日々の仕事
キャリア
Why プラン
What
How

ニーズ
ウォンツ
商品やサービス
顧客の
Why 問題解決
What
How

目的
要件定義
実装方法
Webサイト
Why 制作
What
How

目的
要件定義
実装方法
Webサイト
目的、要件定義レベル
を共有して動いてくれる
デザイナーさん、
エンジニアさんは
ありがたい！
Why 制作
What
How

Why/What/Howの相対的関連構
Why
What
How
目的
目的
手段
手段

Why/What/Howの相対的関連構
WhyのWhy
Why
What
How
HowのHow
目的
目的
目的
目的
目的
目的
手段
手段
手段
手段
手段
手段

Webサイト
Why 制作
What
How 「あなたの言うとおりのホームページ
を作って差し上げましょう」

Webサイト
Why 制作
What
How
「こんなホームページを作ったら
あなたのお客さまは喜びますよ」
「あなたの言うとおりのホームページ

「ホームページを作る意味は
あるんですか？」
Webサイト
Why 制作
What
How
「こんなホームページを作ったら
あなたのお客さまは喜びますよ」
「あなたの言うとおりのホームページ

Webサイト
Why 制作
What
How
ビジネスコンサルティング
マーケティング+Web制作
Web制作者

Webサイト
Why 制作
What
How
ビジネスコンサルティング
マーケティング+Web制作
Web制作者
成果物だけでなく、
成果にまでコミット
できる業者は
ありがたがられる！

3. 抽象化思考力はどう活かすの？【おさらい】
1. モデル化
3. アナロジー

抽
象
レ
ベ
ル
具
体
レ
ベ
ル
モデル化層
現実層
②解法の
　適用
①抽象化
③具体化
1. モデル化

抽
象
レ
ベ
ル
具
体
レ
ベ
ル
モデル化層
現実層
②解法の
　適用
①抽象化
③具体化
2. 枝葉の
切り捨て

3.
アナロジー
抽
象
レ
ベ
ル
具
体
レ
ベ
ル
モデル化層
現実層
②解法の
　適用
①抽象化
③具体化

4.
じゃあ、抽象化思考力っ
てどうやって身に
つけるの？

実は、わかりません。。

人間の認知の構造を明らかにする
ためのインタビューの技術ラダーリング
出典：DESIGN IT! w/LOVE http://gitanez.seesaa.net/article/50744773.html

人間の認知の構造を明らかにする
ためのインタビューの技術ラダーリング
“「りらっくまが好き」という
女の子に、「なんで好きなの？」
と聞いて「かわいいから」とい
う回答を導くのがラダーアップ、
「どこが好きなの？」と聞いて
「耳が丸いとこ」という回答を
引き出すのがラダーダウンで
す。”
出典：DESIGN IT! w/LOVE http://gitanez.seesaa.net/article/50744773.html
かわいいから
ラダーアップ（抽象化）
りらっくまが好き
ラダーダウン（具体化）
耳が丸いとこ

抽象化思考力を身につけるための
抽象的な提案。

1. 物事を意味でとらえる
（うすーく抽象的にのばし）
2. 世界をエネルギーの流れで見る

抽象化思考力についての発見。

抽象化思考力は、
得意な人と苦手な人がいる。
（らしい）

MBTI
MBTIとは、
ユングのタイプ論をもとにした、
世界45カ国以上で活用されている
国際規定に基づいた性格検査です。
出典：日本MBTI協会 http://www.mbti.or.jp/what/

MBTI
人は以下の特徴を、二律背反で持つ。
1.どこに関心を向けることを好むか
外向　⇔　内向
2.どのように情報を取り入れるか
感覚　⇔　直感
思考　⇔　感情
判断的　⇔　知覚的
出典：MBTIタイプ入門（第6版）
3.何を基準に判断を下すか
4.どのように外界と関わるか

MBTI どのように情報を取り入れるか？
感覚直感
• 現実や事実に目を向ける
• 事実や具体的なことに焦点があう
• 実際に起きていることに着目する
• 注意深く一つひとつ積み上げて結論に
達する
• アイデアや理論は実際的な応用を通じ
て理解する
• 経験から得られた情報を信用する
出典：MBTIタイプ入門（第6版）
• これからの可能性に目を向ける
• 想像をめぐらせ、独特な表現方法を用いる
• データの背景のパターンや意味に着目する
• ものごとにパターンがある場合、その関連
詳細を記憶する
• 直感に従い、結論に達する
• 実践する前にアイデアや理論を明確にする
• ひらめいたことを信頼する

抽象化思考力は、
利き手・反対の手レベルで
得意・苦手がある。
（良し悪しの問題ではない）

得意な人は、伸ばせばいい。
不得意な人は、得意なことを
伸ばせばいい。
（なぜなら、利き手じゃないから）

4. 抽象化思考力ってどうやって身につけるの？【まとめ】
• 自然と興味を持っていた僕にはわかりません。。
• 物事を意味やエネルギーの流れでとらえてみる
• 抽象化思考力は得意な人と苦手な人がいる
• 興味があって得意な人は伸ばしていこう

5.
え、未来は
抽象化した世界に
向かってる？

ここから先、わたくしの私見が多分に含まれます。

【気づき】
抽象化された概念は、人間の思考の
中にしか存在しない。逆に言えば、
この世界には、具体的なことしかない
のでは？

身体の反応=具体的
熱いっ!!言葉で表現できるもの=抽象的
身体の反応や感覚・感情が唯一具体的なもの。
それに抽象的な名前をつけたのは人間の頭。

具体的抽象的
頭
（言葉・考え）
身体
（感覚・五感）

【左脳】は言語脳とも
知性の脳とも呼ばれ、
言語はもちろんのこと
観念構成要素や計算に
適しています。また、
分析力や抽象的、論理
的な思考をする場合に
左脳でされています。
【右脳】はイメージ脳
とも空間脳とも芸術脳
とも呼ばれ、音楽、絵
画、幾何学の能力の発
達を左右し、合成的、
全体的、直感的な能力
に繋がっています。

具体的抽象的
右脳 < 左脳

具体的抽象的
身体右脳 < 左脳

具体的抽象的
感情五感
身体右脳 < 左脳

養老孟司さんの言葉
“こういう抽象的な世界、文明のことを、ぼくは
「脳化社会」と言ってきたんです。
意識が作ってる社会って、意識が根本的に持って
る「穴」を埋められないんですよね。
しかも穴はどんどんどんどん広がっていく。
その典型が官庁です。
平和が続いてなにも起こらない前提で手続きをど
んどん決めて、全部法律にしていきます。
法律は、言葉だから、左脳的なんですよ。”
出典：ほぼ日刊イトイ新聞 http://www.1101.com/webshinsho/01/yoro/03.html

文明=抽象的な世界=脳化社会=左脳的な法律の世界
≒ネット社会（文字によるコミュニケーション）

5. 未来は抽象化した世界に向かってる？【仮説】
• 抽象化された概念は人間の頭の中にしかない
• 世の中に存在するのはすべて具体的なこと
• 身体の反応（感情・五感）が人間の具体的なこと
• 未来はどんどん抽象化された世界に向かっている
のでは？

6.
おい、抽象化思考力
お前は一体何者だ？

Webクリエイティブの質を上げる肝
抽
象
レ
ベ
ル
具
体
レ
ベ
ル
モデル化層
現実層
②解法の
　適用
①抽象化
③具体化ここが
キモ!!!

Webクリエイターは重箱をつつけ!!
宮崎駿さんのように。

もし上位行程が炎上したら‥‥？
ここが
キモ!!!
抽
象
レ
ベ
ル
具
体
レ
ベ
ル
モデル化層
現実層
②解法の
　適用
①抽象化
③具体化

Webクリエイティブにおける抽象化思考力は
○○のようなものだ。
（抽象化思考 is not Superman.）

Webクリエイティブにおける抽象化思考力は
ドラゴンレーダーの精度のようなものだ。

みなさんも考えてみてください。
抽象化思考とは、一体なんだろう？

The answer is blowin' in the wind
—答えは風の中

「抽象化思考」見えましたか？

ありがとうございました(､`)ﾉ
ミズノケイスケ
Facebook: https://www.facebook.com/keysuke.mizuno
Twitter: https://twitter.com/akanerob
Mail: akanerob@gmail.com

「Webクリエイティブに活きる抽象化思考力」ミズノケイスケ@WCAN2014Autumn

Recommended

Recommended

More Related Content

Similar to 「Webクリエイティブに活きる抽象化思考力」ミズノケイスケ@WCAN2014Autumn

Similar to 「Webクリエイティブに活きる抽象化思考力」ミズノケイスケ@WCAN2014Autumn (20)

More from Keysuke Mizuno

More from Keysuke Mizuno (8)

「Webクリエイティブに活きる抽象化思考力」ミズノケイスケ@WCAN2014Autumn