Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Webデザインのトーン&マナーを導き出す手法

11 108 vues

Publié le

Webサイトの構築に際して、デザイナーの領域とされていたデザインのトーン&マナーの方向性を導き出すため、簡便な手法をまとめた資料です。

Publié dans : Design
  • Identifiez-vous pour voir les commentaires

Webデザインのトーン&マナーを導き出す手法

  1. 1. Webデザインのトーン&マナーを 導き出す手法 2014年7月11日 Webディレクター 田附克巳 k.tazuke@gmail.com
  2. 2. 1.本資料の概要と対象読者 2.トーン&マナーとは 3.お客様にキーワードを出していただく 4.お客様にイメージをさらにヒアリング 5.ターゲットユーザーを具体化する 6.マッピング軸を決めていく 7.ムードボードの作成 8.ムードボード作成に使えるネット画像検索の例 9.ポジショニングマップ・ムードボードへのプロット 目次 Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014 Katsumi TAZUKE All Rights Reserved.
  3. 3. 1.本資料の概要と対象読者 Webサイトの構築に際して、デザイナーの領域とされていたデザイン のトーン&マナーの方向性を導き出すため、簡便な手法をまとめた資 料です。 デザインの専門教育を受けておらず、デザイナー職のキャリアを持た ないWebディレクター向けに作成しています。 Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014 Katsumi TAZUKE All Rights Reserved.
  4. 4. 2.トーン&マナーとは WebデザインにはそのWebサイトを訪れた人にこう感じて欲しい、こ んな印象を持って欲しいという意図や狙いが必ずあります。 その意図や狙いを咀嚼・分析して、視覚的なビジュアル表現をするた めの方向性の指針(ガイドライン)となるものがトーン&マナーで す。 Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014 Katsumi TAZUKE All Rights Reserved.
  5. 5. 3.お客様にキーワードを出していただく Webサイトを発注する顧客担当者から、「こうしたい」「こうであっ て欲しい」というWebサイトへの想いを、短い言葉でキーワードとし て出していただきます。 スピード 感のある力強い 安心 Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014 Katsumi TAZUKE All Rights Reserved.
  6. 6. 4.お客様にイメージをさらにヒアリング Webサイトを発注する顧客担当者から、「こうしたい」「こうであっ て欲しい」というWebサイトへの想いを、『かたちに例える』『オマ ノトペ(擬声語・擬態語)』『形容詞』などで伝えてもらいます。 丸い がやがや 暖かみ のある ワクワク Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014 Katsumi TAZUKE All Rights Reserved.
  7. 7. 5.ターゲットユーザーを具体化する どんな人にこれからデザインするWebサイトを見てもらいたいのか、 その対象となるターゲットユーザーを具体化します。 できれば、「ペルソナ」を構築して、ライフスタイルなどの情報も記 載するのが理想ですが、デザインのトーン&マナーを作成するには、 下記デモグラフィック属性だけでも十分です。 項目 内容/値 年齢 40~50歳ぐらい 性別 男性 職業 会社員(中小規模) 住所 関東圏 Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014 Katsumi TAZUKE All Rights Reserved.
  8. 8. 6.マッピング軸を決めていく 3.4でお客様から得られたキーワードをもとに、ポジショニング マップの2つの軸を作成します。まずは複数案を作成し、その中から キーワードの意図を最も表現している2軸を選定するようにします。 ■ポジショニングマップの例 親しみ やすさ 高級感 情熱的 クール Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014 Katsumi TAZUKE All Rights Reserved.
  9. 9. 7.ムードボードの作成 3.4でお客様から得られたキーワードおよびターゲットユーザーをも とに、類語辞典や百科事典、配色辞典を参照するなどして、そのキー ワード(言葉)に相応しいビジュアルイメージ(写真やイラスト)を多 数収集します。インターネットの画像検索が便利ですが、必ずWebディ レクター自身が目視でチェックして、Webデザインの参考になる画像だ けを残すようにします。 ■ムードボードの例 ※雑誌やパンフレットなど 紙媒体でもOKです。 むしろ画面以外のアナログ なイメージの方が雰囲気を つかむこの段階では望まし いです。 Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014 Katsumi TAZUKE All Rights Reserved.
  10. 10. 8.ムードボード作成に使えるネット画像検索の例 Imagenavi http://imagenavi.jp/ インターネットの画像販売サービスなどで、キーワードを打ち込んで、 その単語に相応しい写真やイラスト画像を表示してくれるWebサイトが あります。 Googleの画像検索では、トーン&マナーの参考には的外れの画像も多数 ヒットしてしまいますので、このようなWebサービスを活用するのも一 案です。 Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014 Katsumi TAZUKE All Rights Reserved.
  11. 11. 9.ポジショニングマップ・ムードボードへのプロット この作業は、顧客の意見を対面で聞きながらも可能ですし、Webディ レクター側で案を作成し、案を見ながらプロット位置を変更していく 方法もあります。 最終的には、これから作成するデザインが、ポジショニングマップの どこに位置づけられるか、ムードボードのイメージ素材のどれに雰囲 気が近いのか、顧客と共有することが重要です。 ■ポジショニングマップ 親しみ やすさ 高級感 情熱的 クール 自社サイト ■ムードボード Webデザインのトーン&マナーを導き出す手法 (c) copyright 2014 Katsumi TAZUKE All Rights Reserved.

×