デザイン課程エキスパートコース

講師：行田尚史

目次

【2】情報デザインとは

【１】デザイン史

本レジュメの目的：教科書を読み進めやすくするため、レジュメに沿いながら授業を進めていきます。

【3】情報デザインのプロセス

【4】ユーザ調査のための手法

計画・情報収集・ユーザ調査・コンセプトデザイン・実施デザインのプロセス

ユーザ調査ファウンドビヘイビアアイトラッキングペルソナ手法シナリオ手法

【6】視覚化のための手法既存サイトからのデザイン分析から表現を読み取る最新の技術例UDデザインについて

【5】デザイン・美術学問基礎

フォント心理学色彩デザインポイント

レイアウト

マクロデザイン論

ミクロデザイン論

自己紹介

名前 行田尚史

経歴

資格

美術系の高校に入学し、そのまま美大へ。2003年頃からフリーでFlash制作・映像編集を業務として活動。主にWeb・パンフレット制作、インターネットテレビ、博物館用映像コンテンツなどの制作・編集を行う。

大日本印刷グループにデザイナーとして入社主に女性誌、少年誌のWebサイトのデザイン、コーポレートサイトのリニューアル提案を中心に行い、アイトラッキング（視線調査）の研究を担当する。

2011年アートディレクターとして会津に移り、医療・自治体の企画デザイン、提案を行う。

出身 東京都新宿区神楽坂

高等学校美術教師免許

introductionデザインのことを学ぶ前に…

Design翻訳してください

計画これが一般的な翻訳です

が

図案と翻訳されている時代もありました

これは正式にはビジュアルデザインと言います

西洋の最新の理論を取り入れるために当時の東京美術学校(現藝大)で1896年西洋画科・図案科が設立されました。この図案科というのが今で言う「ビジュアルデザイン」のことを指します。

が同時に「図案＝デザイン」の誤解の基ともなってしまいました。

ちなみに絵画もデザインと言えます

日本でデザインが商業になるまで

あくまで事前知識なのでガッツリ端折って簡単にいきます

神との境界線

日本人が最初に「意味」としてのデザインを考えた意匠です

線・平面的な手法

「ジャポニズム」と1900年代初期に海外から注目された手法ですが日本人の美術源流が平面的であることは「図案」の誤訳の本流ともなりました

華美を良しとしない合理性

着物からトイレ事情まで合理性を追求し江戸時代の都市計画は当時の世界から見ても最も完成されてたと言われています

開国とデザインの始まり

先ほど説明したように、近世以前にデザインがなかったわけではありません。あくまでデザインという名称や概念がなかっただけで、歴史・伝統は続いています。

転換期は黒船来航から日清・日露戦争までの半世紀の間です。1917年のロシア革命から1931年の満州事変に至るまで、産業工芸と商業美術は一気に進み

「工業・経済的工芸・美術工芸」が分化・発展し、美術学校のカリキュラムが整備されていきました。

これらはヨーロッパ諸国や米国に追いつくための殖産興業政策の一環でした。

戦争とデザイン

満州事変以降、軍国主義に舵を切った日本は報道・情報統制の必要が生じると通信社統合政策をとりました。その結果当時の国策通信社である同盟信者に広告代理店の日本電報通信社通信部が吸収されました。

これが現在の電通となります。当時、現在のクリエイティブ局に相当するところは本社図案文献研究室と呼ばれていました。ここにも「デザイン＝図案」の誤訳が浸透していることが解りますね。

大政翼賛会宣伝部、東方社、報道技術研究会などが国家宣伝にかかわり、一部のデザイナーは兵役を免れましたが、フリーランスの多くは徴兵されました。またフォントの使用なども制限されました。

高度成長期とデザイン

戦時中のデザインは「商業」を意識しなかったのですが、戦後は「商業」を意識するようにもなりました。1956年の経済白書には「もはや戦後ではない」と書かれ、朝鮮戦争の特需の効果や高度成長の凄さが解ります。プラスチックをはじめとする新素材、「三種の神器(洗濯機・冷蔵庫・掃除機)」「3C(カー・クーラー・カラーテレビ)」を

本流とした大量生産・大量消費のデザイン、東京オリンピックによる交通インフラ整備が日本の経済・生活環境を大きく変えました。またその中商業美術はようやく「グラフィックデザイン」となり、

広告はマスメディアの発達により大きくなります。

そして現在は…

というのがテーマになってきます

情報社会とデザイン

情報デザインとは

情報デザインとは

派生

基本

情報デザイン

情報デザインWebデザイン

一連の体験＝ユーザーエクスペリエンスデザイン

CDジャケット

ビジュアルデザイン

プロダクトデザイン

情報デザイン

一連の体験＝ユーザーエクスペリエンスデザイン

情報デザインとは

情報デザインの代表的な分野ソフトウェア・アプリケーションユーザーインターフェイスインフォグラフィックスユーザーエクスペリエンス

情報デザインは従来のデザイン分野からの派生

グラフィックデザイン

プロダクトデザイン

情報デザイン

情報デザインとは

iTunes は人々の生活をどう変えたか

情報デザインのプロセス

情報デザイン のプロセス

問題この中で決裁権がある人は誰？

自分 上司 クライアント

情報デザインのプロセス

本当にそう思いますか？

自分 上司 クライアント

情報デザイン のプロセス

本当はユーザー

クライアント ユーザー

情報デザイン のプロセス

ユーザー中心設計

ユーザーをデザインプロセスの中心に据えることで、適切で使いやすいシステムなどの提供を目指す手法

ユーザー

クライアント

自分

上司

情報デザインのプロセス

ユーザー中心設計ISO13407：インタラクティブシステムのための人間中心設計プロセス（国際規格）

人間中心設計の必要性の特定デザイン活動のための哲学（「人間中心設計による何を実現するのか？」）と、ヴィジョン（「誰に、どんなものを提供することで、それを実現するのか」に関する仮説」）を検討。プロジェクトメンバー間での共有を行う。

想定されるターゲットユーザー層の現状の生活における製品／システムの利用状況を把握する。

利用状況の把握により明らかとなった、ユーザーの利用環境やそれに応じた利用の方法や現状の問題点から、ユーザーセグメントごとにどのような要求事項があるかを検討します。その際、ターゲットユーザーのモデル化にはペルソナ法（後述）を用います。

前の段階で検討を行った各ユーザーセグメント（ペルソナ）ごとの利用状況とそれに対応した期待と、シナリオやストーリーボードの形で表現した製品、システムのラフイメージを元に、具体的な製品、システムのデザインを行う段階です。

ユーザーテスト法などを用いて、ユーザーの要求事項と実際のデザイン案とのギャップがないかを検証するのがこの段階です。

利用の状況の把握と明示

ユーザーと組織の要求事項の明示

設計による解決案の作成

要求事項に対する設計の評価

1

2

3

4

5

情報デザインのプロセス

人間中心設計の必要性の特定

利用の状況の把握と明示

ユーザーと組織の要求事項の明示

設計による解決案の作成

要求事項に対する設計の評価

1

2

3

4

5 ゴール

目的：ゴールの設定

観察法インタビュー・アンケートアイトラッキング・ヒューステリック調査

ペルソナ法ユーザーモデル

ユーザビリティテストヒューステリック評価

プロトタイピングカードソート認知的ウォークスルー

制作

前提条件：制約情報の明示ターゲットの特定

情報デザインのプロセス

例えば…

受験生増加

学生の意識の向上

広報効果 受験生

学生

親

CMS化

予算 300 万

スマホ対応

チームで考える時は付箋を使いましょう。思考を書き出す、誰が書いたかに左右されない、書き出した文章を繋ぎ合わせる…と付箋を使うと良い事が沢山あります。ユーザー中心設計では特に「誰が言ったか解らないようにする」ために付箋を使う場合が多いです。

情報デザインのプロセス

ワーマンの 5つの帽子掛け

位置による分類アメリカの本、日本の本、フランスの本

ア行の本、カ行の本、サ行の本

最新刊、2011 年の本、2010 年の本

ビジネス本、児童書、小説

書店がすすめる書籍、店長がすすめる書籍、今週のランキング

蝙蝠の分類問題を考えてみよう

名前順による分類

時間による分類

カテゴリによる分類

階層による分類

1

2

3

4

5

ユーザ調査のための手法

ユーザ調査のための手法

ユーザー調査　

アンケート人のふるまいを観察することに主眼を置いたデザイン手法

インタビュー調査

観察

フォーラム

1

2

3

4

教科書 43ページを参照してください

ファウンドビヘイヒア

アイトラッキング

教科書 064 ページを参照してください

次ページへ

ユーザ調査のための手法

アイトラッキング

ユーザー視点を「主観」にしないための調査方法。専用の機械を使って視線の動きを計測する。

タイトルは写真よりも注目される

タイトルの最初の数単語がさらりと見られる

リストがあったら左側だけ見る

1秒で興味を引くこと！

小さい文字はよく読まれるに有効

トップナビゲーションが一番良い

パラグラフは短い方が読まれる

要約はよく読まれる

広告は左上がベスト

人気コンテンツ近くの広告はよく見られる

画像広告よりもテキスト広告

マルチメディアコンテンツはよく知られていないものに有効

ユーザ調査のための手法

ペルソナ法

ここで気をつけて欲しいのは、何故「ペルソナ法」を行うのかということ。

教科書 082 ページを参照してください

ペルソナ架空の人物の設定

ユーザ調査のための手法

シナリオ法 実際に体験してみよう

演習１

ISO13407：インタラクティブシステムのための人間 中心設計プロセス（国際規格）に基づいて、会津の特産品を販売する ECサイトを企画設計しワイヤーを制作しなさい

演習 2

ユーザーモデル

会津若子夫が下郷町で自営業をする 50歳

娘の短大進学を考えている専業主婦、下郷町の一軒家に住むiPhone など新しい機器も使いこなすITリテラシーはTwitter,facebook を難なく使いこなすレベル自動車免許があるので休日には会津若松に来る最近はバレーボールにはまる流行には敏感Amazon でよく買い物をする娘を溺愛しているが、独り立ちも視野に入れてる

美術・デザイン学問基礎

デザインポイント

これを抑えておけば最低限のことはできる4項目

Prerequisites of Design（デザインの前提）

Elements of Design（デザインの要素）

Gestalt Principles（ゲシュタルト原則)

Principles of Design（デザインの原則）

1234

それでも難しい場合、この3だけでも意識してください

隣接集合整理

123

美術・デザイン学問基礎

センスは無くても大丈夫

観察力 表現力

論理性

美術・デザイン学問基礎

色・フォント・レイアウト色の基礎的な部分は教科書 38ページを参照してください

フォントの基礎的な部分は教科書 74ページを参照してください

レイアウトの基礎的な部分は教科書 105 ページを参照してください

美術・デザイン学問基礎

眼の仕組みと色の仕組み　

眼は何を基に色を判断しているでしょうか

?

美術・デザイン学問基礎

光によって判別しています

美術・デザイン学問基礎

太陽光

プリズム

波長が長い

可視範囲

波長が短い

美術・デザイン学問基礎

太陽光

緑に見える

可視範囲

緑意外を吸収緑を反射

美術・デザイン学問基礎

杆状体

錐状体

シャープ・アクオス　知っておきたい、色の話より転載http://www.sharp.co.jp/aquos/technology/color/index.html

美術・デザイン学問基礎

杆状体

錐状体

錐状体の認識に異常＝色覚異常

男性の 20人に 1人の確率(UDに関しては後述 )

美術・デザイン学問基礎

色を使う時のコツ

ベースカラー 70％　メインカラー 25％　アクセントカラー 5％

美術・デザイン学問基礎

色相彩度

明度

有彩色

無彩色

美術・デザイン学問基礎

美術・デザイン学問基礎

自然・健康・おいしい ポップ・刺激的・こどもっぽい

大手・信頼・実績 信頼・上品・なめらかな手触り

美術・デザイン学問基礎

モノクロマティックカラースキームまとまったムード、統一感

スプリットメンタリーカラースキームWebの一般的な手法

テトラディックカラースキーム情報区分、もしくは子供むけ

アナログカラースキーム隣接的という意味、自然物など

コンプリメンタリーカラースキームインパクトを持たせる

美術・デザイン学問基礎

色の感じ方

どう感じますか？

赤 緑 黒

美術・デザイン学問基礎

色の感じ方

どう感じますか？

桜 ピンク

美術・デザイン学問基礎

色が精神に与える影響は科学的に立証されていますしかし心理的にどう捉えるかは後天的な性質のため、慎重に選びましょう

美術・デザイン学問基礎

informationisbeautiful.net で色々調べてみましょう

演習 2

演習 1で作成したワイヤーを基にコンセプトカラーを決めECサイトのカラーチップを作成しなさい

インターフェイスデザインの心理学

美術・デザイン学問基礎

目から受け取る情報と、脳が受け取る情報は

カニッツァの三角形の応用

違う

美術・デザイン学問基礎

色以外の視覚情報は全く同じなのに…

脳は外界を素早く近くするためこうした図形の「近道」を作成します。脳は感覚的な情報を大量に (推定毎秒 4000 万 ) 受け取り、受け取った全ての入力から辻褄が合う世界を構築するのです。この際、過去に獲得した「経験則」に頼るのです。大体は上手くいきますが、たまにエラーは起きてしまいます。なので形や色を上手に扱うのはデザインで最も重要なことです。

美術・デザイン学問基礎

Webにおける経験則の知覚を挙げてみましょう

美術・デザイン学問基礎

1. 重要な情報は画面の上から 1/3 までの場所か、画面中央

2. 重要な情報は端にはおいてはならない

3. 左から右、右から左そして上から下の動きを意識する

美術・デザイン学問基礎

中心視野と周辺視野を活用しよう

これはどこでしょう

美術・デザイン学問基礎

中心視野と周辺視野を活用しよう

こっちの方が解りやすいですね

美術・デザイン学問基礎

脳はパターンを認識したがる

視覚野には「横線」「縦線」「端」「斜め 40度」の特定の図形パターンだけに反応する細胞があります

人は本能的にパターンを探すので、できるだけパターンを使いましょう

パターンを活用しよう

美術・デザイン学問基礎

美術・デザイン学問基礎

脳には視覚野以外に顔認識専門の脳領域があります

そして対象の視線の先を見る傾向があります

美術・デザイン学問基礎

何故座れそうなのでしょうか

美術・デザイン学問基礎

どちらがリンクできそうでしょうか

リンクできます

>リンクできます

美術・デザイン学問基礎

手がかりの要素のことをアフォーダンスと言います

何か行動をとらせたいのであれば、そのものが何であるのかそれを使って何ができ何をすべきなのか、見ただけですぐ解るようにしましょう

> リンクできます

美術・デザイン学問基礎

まず分類をします。色で分けるのが一般的ですが、記事や扱い方など他の特性でわけても良いでしょう。分け終わったら準備完了です。この別々に分けたグループごとに処理していくことが大切です。一度にひとつのグループだけをいれてください。

何言ってんだコイツ

美術・デザイン学問基礎

これで解りますね

意味のある表題、見出しをつけるだけで情報の認識は格段に変わります。これは文章だけでなく、デザインでもそうです。見出しは重要。

まず分類をします。色で分けるのが一般的ですが、記事や扱い方など他の特性でわけても良いでしょう。分け終わったら準備完了です。この別々に分けたグループごとに処理していくことが大切です。一度にひとつのグループだけをいれてください。

洗濯機の使い方

美術・デザイン学問基礎

桃　ぶどう　りんご　梨　みかん　スイカ　メロン　

いちご　マンゴー　さくらんぼ　バナナ　ドリアンパイナップル　オレンジ　キウイ　アボカド　

覚えられますか？

美術・デザイン学問基礎

桃　ぶどう　りんご　梨　みかん　スイカ　メロン　

なんとかいけそうですね

美術・デザイン学問基礎

桃　ぶどう　りんご　梨

余裕ですね

桃　　　ぶどう　　りんご　　　梨

より解りやすいですね

美術・デザイン学問基礎

美術・デザイン学問基礎

・段階的表示をこころがける・人は例を使うとうまく学べる、言葉の説明だけではいけない・人はいつも無意識に「自分の名前、食べ物、セックス、危険」に関する情報を集める・注意力の持続時間は 10分が限度・目標に近づけば近づくほど行動力が呼び起こされる・報酬に変化があるほど人はやる気をおこす・人は見た目と感じで信用するかどかを決める・人は信用できないという判断を下すのは早い・人は「自分の行動には影響力があって、自分は決定権を握っている」と思いたがる・人は「お金」よりも「時間・体験」に心を動かされる・人は確信が無い時は人任せにする　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

その他にも行動心理に従ったインターフェイスのヒントはたくさんあります

美術・デザイン学問基礎

突然ですがこのフォントは何ですか？

ヒラギノ UD 角ゴシック

UD Font （Universal Design Font ： ユニバーサルデザインフォント ) 少し前から注目をされている「ユニバーサルデザイン」のコンセプトに基づいたフォントです。

※UD（ユニバーサルデザイン）とは、"できるだけ多くの人が利用可能であるようなデザイン” を基本コンセプトとしたデザインの事で、人が生活する上で「使いやすさ、見やすさ」といった細かい部分にも配慮・工夫をしたデザインをさします。 一般の人はもちろん、お年寄りや障害者の方、外国人の方など皆が「便利だな、使いやすいな」と思えるデザインです。

（中略）

特に最近では高速道路の標識をはじめ、公共機関の案内版にも視認性が良いものに変更が進められており、UDフォントが採用されている件数も増えて来ているようです。

http://font.designrs-garage.jp/ud/ より抜粋

美術・デザイン学問基礎

美術・デザイン学問基礎

美術・デザイン学問基礎

一般的にはモリサワ・イワタを購入しておけばデザインで困る事はありません

美術・デザイン学問基礎

ヒラギノ：読み易さ重視、堅い・王道小塚：ヒラギノよりは少し柔らかい新ゴ：ポップよりのゴシックじゅん：女性・子供向けリュウミン：和風

一例

「A-OTF」=Adobe Japan Character Collection for CID-Keyed Fonts、平たく言えばAdobe 規格の文字セットのフォント

「U-OTF」=U-PRESS（社団法人共同通信社が全国の新聞社などに国内外の記事を配信するために定めた文字コード）の　　　　　 文字セットのフォント。

「G-OTF」= 学習参考書用フォント。小学校・中学校で使われる、義務教育用の教科書・学習参考書・副読本などに使用される、　　　　　 文部省の学習指導要領に準拠したフォント。

美術・デザイン学問基礎

祖父江慎 Twitter より抜粋

美術・デザイン学問基礎

文字詰め、カーニングはスポーツと同じで練習と慣れが必要です。教科書を読み進めて、街中でロゴや広告を沢山みて目を養いましょう。

デッサンをするのも効果的です。

美術・デザイン学問基礎

黄金比グリッドシステム

レイアウトに必要な要素

美術・デザイン学問基礎

黄金比はデザインの基本

何故美しいか、の論点はhttp://gakuen.gifu-net.ed.jp/~contents/museum/golden/page62.html を見てみましょう

美術・デザイン学問基礎

黄金比を意識したレイアウトを見てみよう

http://zapanet.info/blog/item/1298 も使ってみましょう

美術・デザイン学問基礎

マージンで使用するパターン

黄金比を見出しの画像に使用黄金比をナビゲーションの画像に使用

5, 8, 13, 21, 34, 55, 89, 144, 233、を適応したスケール 6, 10, 16, 26, 42, 68, 110, 178, 288 を適応したスケール

黄金比の実例

美術・デザイン学問基礎

何でもかんでも黄金比がいいというわけでは

ない

あくまでも指標グリッドに沿わない所も多々あります

視覚化のための手法

視覚化のための手法

既存サイトからのデザイン分析から表現を読み取る

視覚化のための手法

視覚的なWebデザインとしての評価

立体として意識しているか

レイアウトのバランスがとれているか

色のバランスがとれているか

コンセプトが読み取れるか

情報が読み取り易いか

視線誘導がなされてるか

ユーザビリティに配慮しているか

アクセシビリティに配慮しているか

適切なコーディングをしているか

情報区分が正しいか

身体的に問題が無いか

バグがないか

適切なライディングがされているか

感情を動かせるか

感動を与えられるか

現実により近いイメージであるか

…など

視覚化のための手法

最新の技術例

レスポンジブルWebデザイン jQuery

視覚化のための手法

HTML5,CSS3など新しい技術は沢山あるが日本ではブラウザが追いついてない場合が多い

視覚化のための手法

ユニバーサルデザインとは

※障碍者のためのデザインはバリアフリー

一般的・普遍的なデザイン

視覚化のための手法

ユニバーサルデザインの7原則

原則1：誰にでも公平に使えるようにしろ原則2：自由度を高くしろ原則3：簡単かつ直感的に使えるようにしろ原則4：必要な情報をわかりやすくしろ原則5：間違いが少なくかつ危険でないようにしろ原則6：身体的の負担を減らせ原則7：使いやすいサイズと空間をたもて

http://waic.jp/docs/jis2010-understanding/

最終的にはデザイナーの

メカタ

デザインが解る

デザインが出来る◎

×

プロポーションの測り方は メカタの技術を使います

レタリングも「メカタ」です

これもメカタで測ります何色だかわかりますか？

視覚化のための手法

最後に…基礎力の必要性について

デッサンなどで養う基礎力はこういった「観察力」を身につける為の訓練ですプロが行うWebデザインでは「本物の」ような影や、質感、美しいレイアウトが必要になってきます。デッサンができる＝デザインができる、ではありませんがデッサンができる＝デザインの力がある、のは間違い有りませんし、デザインが上手くなる最短距離です。