Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webデザインのトーン&マナーを導き出す手法
Search
Katsumi TAZUKE
July 11, 2014
Design
0
800
Webデザインのトーン&マナーを導き出す手法
Webサイトの構築に際して、デザイナーの領域とされていたデザイン
のトーン&マナーの方向性を導き出すため、簡便な手法をまとめた資
料です。
Katsumi TAZUKE
July 11, 2014
Tweet
Share
More Decks by Katsumi TAZUKE
See All by Katsumi TAZUKE
himagはいかにして1年半で累計300万ページビューの人気ブログになったのか?
taz8
0
390
Katsumi TAZUKE's portfolio
taz8
0
320
初心者のためのUser Centered Designの考え方(入門編)
taz8
0
90
ブランディングの観点から考察するWebサイトの価値について
taz8
0
140
エンジニアのための User Centered Design の考え方(入門編)
taz8
1
50
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
taz8
0
260
Other Decks in Design
See All in Design
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
実務のための マイクロ インタラクション入門
shingo2000
0
360
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
310
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
490
decksh object reference
ajstarks
2
910
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
320
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
170
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
590
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
620
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
Sociotechnical design for software and human systems
xinyao
2
490
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Typedesign – Prime Four
hannesfritz
36
2.1k
GraphQLとの向き合い方2022年版
quramy
32
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
The Cost Of JavaScript in 2023
addyosmani
16
3.8k
Agile that works and the tools we love
rasmusluckow
325
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Statistics for Hackers
jakevdp
789
220k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Scaling GitHub
holman
457
140k
Gamification - CAS2011
davidbonilla
76
4.6k
Transcript
Webデザインのトーン&マナーを 導き出す手法 2014年7月11日 Webディレクター 田附克巳
[email protected]
1.本資料の概要と対象読者 2.トーン&マナーとは 3.お客様にキーワードを出していただく 4.お客様にイメージをさらにヒアリング 5.ターゲットユーザーを具体化する 6.マッピング軸を決めていく 7.ムードボードの作成 8.ムードボード作成に使えるネット画像検索の例 9.ポジショニングマップ・ムードボードへのプロット 目次
Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014 Katsumi TAZUKE All Rights Reserved.
1.本資料の概要と対象読者 Webサイトの構築に際して、デザイナーの領域とされていたデザイン のトーン&マナーの方向性を導き出すため、簡便な手法をまとめた資 料です。 デザインの専門教育を受けておらず、デザイナー職のキャリアを持た ないWebディレクター向けに作成しています。 Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014
Katsumi TAZUKE All Rights Reserved.
2.トーン&マナーとは WebデザインにはそのWebサイトを訪れた人にこう感じて欲しい、こ んな印象を持って欲しいという意図や狙いが必ずあります。 その意図や狙いを咀嚼・分析して、視覚的なビジュアル表現をするた めの方向性の指針(ガイドライン)となるものがトーン&マナーで す。 Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014
Katsumi TAZUKE All Rights Reserved.
3.お客様にキーワードを出していただく Webサイトを発注する顧客担当者から、「こうしたい」「こうであっ て欲しい」というWebサイトへの想いを、短い言葉でキーワードとし て出していただきます。 スピード 感のある 力強い 安心 Webデザインのトーン&マナーを導き出す手法 (c)
copyright 2014 Katsumi TAZUKE All Rights Reserved.
4.お客様にイメージをさらにヒアリング Webサイトを発注する顧客担当者から、「こうしたい」「こうであっ て欲しい」というWebサイトへの想いを、『かたちに例える』『オマ ノトペ(擬声語・擬態語)』『形容詞』などで伝えてもらいます。 丸い がやがや 暖かみ のある ワクワク Webデザインのトーン&マナーを導き出す手法
(c) copyright 2014 Katsumi TAZUKE All Rights Reserved.
5.ターゲットユーザーを具体化する どんな人にこれからデザインするWebサイトを見てもらいたいのか、 その対象となるターゲットユーザーを具体化します。 できれば、「ペルソナ」を構築して、ライフスタイルなどの情報も記 載するのが理想ですが、デザインのトーン&マナーを作成するには、 下記デモグラフィック属性だけでも十分です。 項目 内容/値 年齢 40~50歳ぐらい
性別 男性 職業 会社員(中小規模) 住所 関東圏 Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014 Katsumi TAZUKE All Rights Reserved.
6.マッピング軸を決めていく 3.4でお客様から得られたキーワードをもとに、ポジショニング マップの2つの軸を作成します。まずは複数案を作成し、その中から キーワードの意図を最も表現している2軸を選定するようにします。 ▪ポジショニングマップの例 親しみ やすさ 高級感 情熱的 クール
Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014 Katsumi TAZUKE All Rights Reserved.
7.ムードボードの作成 3.4でお客様から得られたキーワードおよびターゲットユーザーをも とに、類語辞典や百科事典、配色辞典を参照するなどして、そのキー ワード(言葉)に相応しいビジュアルイメージ(写真やイラスト)を多 数収集します。インターネットの画像検索が便利ですが、必ずWebディ レクター自身が目視でチェックして、Webデザインの参考になる画像だ けを残すようにします。 ▪ムードボードの例 ※雑誌やパンフレットなど 紙媒体でもOKです。
むしろ画面以外のアナログ なイメージの方が雰囲気を つかむこの段階では望まし いです。 Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014 Katsumi TAZUKE All Rights Reserved.
8.ムードボード作成に使えるネット画像検索の例 Imagenavi http://imagenavi.jp/ インターネットの画像販売サービスなどで、キーワードを打ち込んで、 その単語に相応しい写真やイラスト画像を表示してくれるWebサイトが あります。 Googleの画像検索では、トーン&マナーの参考には的外れの画像も多数 ヒットしてしまいますので、このようなWebサービスを活用するのも一 案です。 Webデザインのトーン&マナーを導き出す手法
(c) copyright 2014 Katsumi TAZUKE All Rights Reserved.
9.ポジショニングマップ・ムードボードへのプロット この作業は、顧客の意見を対面で聞きながらも可能ですし、Webディ レクター側で案を作成し、案を見ながらプロット位置を変更していく 方法もあります。 最終的には、これから作成するデザインが、ポジショニングマップの どこに位置づけられるか、ムードボードのイメージ素材のどれに雰囲 気が近いのか、顧客と共有することが重要です。 ▪ポジショニングマップ 親しみ やすさ
高級感 情熱的 クール 自社サイト ▪ムードボード Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014 Katsumi TAZUKE All Rights Reserved.