会津ソフトウェアリンゲージファーム デザイン応用課程講義資料
TRANSCRIPT
目次
【2】情報デザインとは
【1】デザイン史
本レジュメの目的:教科書を読み進めやすくするため、レジュメに沿いながら授業を進めていきます。
【3】情報デザインのプロセス
【4】ユーザ調査のための手法
計画・情報収集・ユーザ調査・コンセプトデザイン・実施デザインのプロセス
ユーザ調査ファウンドビヘイビアアイトラッキングペルソナ手法シナリオ手法
【6】視覚化のための手法既存サイトからのデザイン分析から表現を読み取る最新の技術例UDデザインについて
【5】デザイン・美術学問基礎
フォント心理学色彩デザインポイント
レイアウト
マクロデザイン論
ミクロデザイン論
自己紹介
名前 行田尚史
経歴
資格
美術系の高校に入学し、そのまま美大へ。2003年頃からフリーでFlash制作・映像編集を業務として活動。主にWeb・パンフレット制作、インターネットテレビ、博物館用映像コンテンツなどの制作・編集を行う。
大日本印刷グループにデザイナーとして入社主に女性誌、少年誌のWebサイトのデザイン、コーポレートサイトのリニューアル提案を中心に行い、アイトラッキング(視線調査)の研究を担当する。
2011年アートディレクターとして会津に移り、医療・自治体の企画デザイン、提案を行う。
出身 東京都新宿区神楽坂
高等学校美術教師免許
西洋の最新の理論を取り入れるために当時の東京美術学校(現藝大)で1896年西洋画科・図案科が設立されました。この図案科というのが今で言う「ビジュアルデザイン」のことを指します。
が同時に「図案=デザイン」の誤解の基ともなってしまいました。
開国とデザインの始まり
先ほど説明したように、近世以前にデザインがなかったわけではありません。あくまでデザインという名称や概念がなかっただけで、歴史・伝統は続いています。
転換期は黒船来航から日清・日露戦争までの半世紀の間です。1917年のロシア革命から1931年の満州事変に至るまで、産業工芸と商業美術は一気に進み
「工業・経済的工芸・美術工芸」が分化・発展し、美術学校のカリキュラムが整備されていきました。
これらはヨーロッパ諸国や米国に追いつくための殖産興業政策の一環でした。
戦争とデザイン
満州事変以降、軍国主義に舵を切った日本は報道・情報統制の必要が生じると通信社統合政策をとりました。その結果当時の国策通信社である同盟信者に広告代理店の日本電報通信社通信部が吸収されました。
これが現在の電通となります。当時、現在のクリエイティブ局に相当するところは本社図案文献研究室と呼ばれていました。ここにも「デザイン=図案」の誤訳が浸透していることが解りますね。
大政翼賛会宣伝部、東方社、報道技術研究会などが国家宣伝にかかわり、一部のデザイナーは兵役を免れましたが、フリーランスの多くは徴兵されました。またフォントの使用なども制限されました。
高度成長期とデザイン
戦時中のデザインは「商業」を意識しなかったのですが、戦後は「商業」を意識するようにもなりました。1956年の経済白書には「もはや戦後ではない」と書かれ、朝鮮戦争の特需の効果や高度成長の凄さが解ります。プラスチックをはじめとする新素材、「三種の神器(洗濯機・冷蔵庫・掃除機)」「3C(カー・クーラー・カラーテレビ)」を
本流とした大量生産・大量消費のデザイン、東京オリンピックによる交通インフラ整備が日本の経済・生活環境を大きく変えました。またその中商業美術はようやく「グラフィックデザイン」となり、
広告はマスメディアの発達により大きくなります。
情報デザインとは
派生
基本
情報デザイン
情報デザインWebデザイン
一連の体験=ユーザーエクスペリエンスデザイン
CDジャケット
ビジュアルデザイン
プロダクトデザイン
情報デザイン
一連の体験=ユーザーエクスペリエンスデザイン
情報デザインとは
情報デザインの代表的な分野ソフトウェア・アプリケーションユーザーインターフェイスインフォグラフィックスユーザーエクスペリエンス
情報デザインは従来のデザイン分野からの派生
グラフィックデザイン
プロダクトデザイン
情報デザイン
情報デザインのプロセス
ユーザー中心設計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秒で興味を引くこと!
小さい文字はよく読まれるに有効
トップナビゲーションが一番良い
パラグラフは短い方が読まれる
要約はよく読まれる
広告は左上がベスト
人気コンテンツ近くの広告はよく見られる
画像広告よりもテキスト広告
マルチメディアコンテンツはよく知られていないものに有効
演習 2
ユーザーモデル
会津若子夫が下郷町で自営業をする 50歳
娘の短大進学を考えている専業主婦、下郷町の一軒家に住むiPhone など新しい機器も使いこなすITリテラシーはTwitter,facebook を難なく使いこなすレベル自動車免許があるので休日には会津若松に来る最近はバレーボールにはまる流行には敏感Amazon でよく買い物をする娘を溺愛しているが、独り立ちも視野に入れてる
これを抑えておけば最低限のことはできる4項目
Prerequisites of Design(デザインの前提)
Elements of Design(デザインの要素)
Gestalt Principles(ゲシュタルト原則)
Principles of Design(デザインの原則)
1234
美術・デザイン学問基礎
色・フォント・レイアウト色の基礎的な部分は教科書 38ページを参照してください
フォントの基礎的な部分は教科書 74ページを参照してください
レイアウトの基礎的な部分は教科書 105 ページを参照してください
美術・デザイン学問基礎
杆状体
錐状体
シャープ・アクオス 知っておきたい、色の話より転載http://www.sharp.co.jp/aquos/technology/color/index.html
美術・デザイン学問基礎
モノクロマティックカラースキームまとまったムード、統一感
スプリットメンタリーカラースキームWebの一般的な手法
テトラディックカラースキーム情報区分、もしくは子供むけ
アナログカラースキーム隣接的という意味、自然物など
コンプリメンタリーカラースキームインパクトを持たせる
美術・デザイン学問基礎
色以外の視覚情報は全く同じなのに…
脳は外界を素早く近くするためこうした図形の「近道」を作成します。脳は感覚的な情報を大量に (推定毎秒 4000 万 ) 受け取り、受け取った全ての入力から辻褄が合う世界を構築するのです。この際、過去に獲得した「経験則」に頼るのです。大体は上手くいきますが、たまにエラーは起きてしまいます。なので形や色を上手に扱うのはデザインで最も重要なことです。
美術・デザイン学問基礎
脳はパターンを認識したがる
視覚野には「横線」「縦線」「端」「斜め 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」= 学習参考書用フォント。小学校・中学校で使われる、義務教育用の教科書・学習参考書・副読本などに使用される、 文部省の学習指導要領に準拠したフォント。
美術・デザイン学問基礎
黄金比はデザインの基本
何故美しいか、の論点はhttp://gakuen.gifu-net.ed.jp/~contents/museum/golden/page62.html を見てみましょう
美術・デザイン学問基礎
マージンで使用するパターン
黄金比を見出しの画像に使用黄金比をナビゲーションの画像に使用
5, 8, 13, 21, 34, 55, 89, 144, 233、を適応したスケール 6, 10, 16, 26, 42, 68, 110, 178, 288 を適応したスケール
黄金比の実例
視覚化のための手法
視覚的なWebデザインとしての評価
立体として意識しているか
レイアウトのバランスがとれているか
色のバランスがとれているか
コンセプトが読み取れるか
情報が読み取り易いか
視線誘導がなされてるか
ユーザビリティに配慮しているか
アクセシビリティに配慮しているか
適切なコーディングをしているか
情報区分が正しいか
身体的に問題が無いか
バグがないか
適切なライディングがされているか
感情を動かせるか
感動を与えられるか
現実により近いイメージであるか
…など
視覚化のための手法
ユニバーサルデザインの7原則
原則1:誰にでも公平に使えるようにしろ原則2:自由度を高くしろ原則3:簡単かつ直感的に使えるようにしろ原則4:必要な情報をわかりやすくしろ原則5:間違いが少なくかつ危険でないようにしろ原則6:身体的の負担を減らせ原則7:使いやすいサイズと空間をたもて
http://waic.jp/docs/jis2010-understanding/