デザイン提案の参考資料

Transcript of "デザイン提案の参考資料"

1. 1. MSCコーポレートサイト リニューアルデザインのご提案 ※ 私たちが実際に使用したデザイン提案資料のご紹介です。 株式会社ベイジ
2. 2. 2Copyright©baigie inc. All rights reserved. デザインの役割 【1. 情緒的役割】 良い印象を与える 2つの役割 デザインの役割ではないこと 【2. 機能的役割】 使いやすくする 想定しているターゲットに対して ブランドに近い印象を持ってもらう 技術的な背景と普遍的な定石を押さえ 使いやすく読みやすいUIを実現する 具体的な メッセージを伝える キャッチコピーなどの役割 サービスの 魅力を伝える コンテンツの役割 利用イメージ を伝える 写真や図などの役割 デザインの本当の役割にフォーカスし、すべてをデザインに求めない
3. 3. 3Copyright©baigie inc. All rights reserved. デザインの検討プロセス ターゲットの心理や感性を明確にする。 企業やデザイナーではなく、ターゲットの感性に合わせるため、ターゲット像を明確にします。（情緒的役割の定義①） 技術トレンドと普遍的セオリーをおさえる。 技術的な時代背景とユーザビリティの基本をおさえ、今の時代に使いやすいUIを実現します。 （情緒的役割の定義④） ブランドイメージからトーン＆マナーを決定する。 ブランドキーワードを抽出し、イメージスケール上でのポジションを決定します。 （情緒的役割の定義②）2 4 参考サイトから共通パターンを掴む。 ターゲットとトーン&マナーが共通する参考サイトから基本パターンを導き出します。 （情緒的役割の定義③）3 1
4. 4. 4Copyright©baigie inc. All rights reserved. ターゲットの心理と感性 Target Profiling１
5. 5. 5Copyright©baigie inc. All rights reserved. 1-1. ターゲットの特性 年齢・性別 部署・役職業 種・規模 勤務地 年収・職歴 スタイル ファッション 年齢は高く、保守的な思考を好む。挑戦的なものには好意よりリスクを感じる。 デザインに高い価値は置いておらず、オーソドックスで標準以上であればよい。 デザインより中身を重視。シンプルなレイアウトで読みやすいものを好む。 40代後半、男性。社会人歴は20年、入社年は15年以上。 人事部長。人を動かしたり、まとめたりする力に優れる。 製造業。本社は東京で、国内数か所に営業所を持つ。工場は海外にも展開。 都内本社。人事部は本社機能となるため、東京から出ることはあまりない。 1,000万円。都内の有名私大の文系卒。総務・人事系の部署を歴任。転職は20代に1回のみ。 フレックス制は使わず、9時に出社し、定時もしくは2∼3時間残業をしてから帰社 基本的には保守的。デザイン性の高いものより、機能的なものを好む。 デザインの視点からメインターゲットの特性を具体的に設定すると、以下のようになると考えられます。
6. 6. 6Copyright©baigie inc. All rights reserved. 1-2. ターゲットの価値観 イノベーター型 マネージャー型 価値基準 未知への挑戦／創造／固定観念の破壊 ルールの順守／効率化／協調とバランス モチベーション 刺激的なことや新しいことに関わること、自分の考えを 評価されること 物事が計画通り進むこと、効率よく成果が出ること、物 事が丸く収まること ゴール ない方がいい。自分で作りたい。 すでにある方がいい。選択したい。 組織の捉え方 競争の場、ライバル 協力者、協調する相手 評価 ゼロからの加算 満点からの減算 時間の使い方 時間のある限り考える 決められた時間の中で考える 好きなキーワード 革新、先進、ユニーク、挑戦、過激、オルタナティブ 堅実、信頼、丁寧、安心、親切、主流 得意なこと 斬新なアイデアを出すこと、新しい知識を獲得すること、 チャレンジすること、大胆な行動をすること、ビジョン を作ること、チャンスを見つけること 細かく管理すること、人と人の間を調整すること、書類 を丁寧に作ること、ビジョンに従い仕組みを作ること、 リスクを見つけること 苦手なこと 細かなチェック、ルールの順守、最大公約数的な判断、 堅実さを求められる仕事 判断基準のない業務、感情に訴えなければいけない仕事、 試行錯誤の多い仕事 デザインの価値観 新しく革新的なもの、弱点よりも圧倒的なエッジ、時代 の先を行く、業界を驚かす 使いこまれた堅実なもの、欠点の少ないバランスがとれ たもの、機能的で効率が良いもの、見た目より中身 ターゲットを「イノベーター型」と「マネージャー型」に分類し、価値観を整理します。MSC様のターゲットは、マネー ジャー型の傾向が強いと考えられます。
7. 7. 7Copyright©baigie inc. All rights reserved. 1-3. ターゲットの気持ち 人事は社内で解決すべきという反対意見があり、失敗できない。 チャレンジではなく、堅実な選択をしたい。 先進的で意欲的な会社より、実績があり信頼できる会社がいい。 窓口に立つ人は切れ者より、落ち着いて誠実な人がいい。 崇高な理想論ではなく、現実を語る人や会社がいい。 忙しいので、面倒なことはお任せできる気が利く人がいい。 ターゲットは、以下のようなことを思いながらWebサイトを閲覧していると考えられます。 ブランドイメージに誤魔化されず、内容で判断したい。 1 2 3 4 5 6 7
8. 8. 8Copyright©baigie inc. All rights reserved. トーン&マナーの方向性 Orientation of Tone & Manner2
9. 9. 9Copyright©baigie inc. All rights reserved. 2-1. ターゲットに訴求したい印象 信頼できる、知的な、冷静な、思慮深い、たのもしい、誠実 な、毅然とした、フォーマルな、など 与えたいイメージに優先度をつけ、トーン&マナーはどの方向性でまとめるべきか決定します。 ■優先したい情感イメージ 優しい、親しみがある、人当たりのいい、ほっとする、敷居 が高くない、気軽な、など ■優先度が低い情感イメージ ※これは、デザインのトーン＆マナーを決定するための情感イメージを抽出する作業となります。例えば、「便利」「わかりやす い」「サービスが充実している」などの、機能性を表現するような言葉はここでは対象となりません。
10. 10. 10Copyright©baigie inc. All rights reserved. 2-2. イメージスケールでのポジショニング ターゲットが望む企業イメージを考えると、ダンディ 系の印象を与える企業を求めていると考えられます。 そうなると、Webサイトの基本配色も、CIカラーと の調和を踏まえた上で、ダンディ系のトーン＆マナー で統一するのが相応しいと考えます。 ダンディ系 配色案 + ※この全ての色を使う、あるいはこの色以外を一切使わな いというわけではなく、トーン&マナーを決めるうえでの 最初の叩き台となる配色パターンです。 ©小林重順／日本カラーデザイン研究所
11. 11. 11Copyright©baigie inc. All rights reserved. 参考サイトと基本パターン Reference and Basic Pattern3
12. 12. 12Copyright©baigie inc. All rights reserved. 3-1. ターゲットが好む（であろう）企業やブランド 「信頼感」「誠実さ」がブランドに組み込まれている企業のサンプルとして、「誠実な企業賞」受賞企業の中から、 MSC様が目指すべき印象に近い企業をピックアップし、デザイン的にどういう共通点があるか探ります。 年 大賞 事業法人部門賞 金融機関部門賞 2003年 三菱地所 ダイセキ みずほ信託銀行 2004年 なとり 日本電気 滋賀銀行 2005年 大日本印刷 麒麟麦酒 信金中央金庫 2006年 花王 イオン 新生銀行 2007年 エーザイ 凸版印刷 大垣共立銀行 年 最優秀賞 優秀賞 2008年 セブン＆アイホールディングス 協立電機 2009年 資生堂 ベネッセコーポレーション、オムロン 2010年 TOTO 旭硝子、三菱商事 2011年 コマツ 積水ハウス、帝人 2012年 オムロン 三井物産、ベネッセホールディングス 2013年 ブリジストン ヤマトホールディングス、伊藤忠商事 2014年 野村総合研究所 アンリツ、前田建設工業
13. 13. 13Copyright©baigie inc. All rights reserved. 3-2. 信頼・誠実をブランドとする企業サイト事例① 野村総合研究所 配色： テイスト： キービジュアル： 書体： 白+青（CI） シンプル＆フラット なし（トピックス表示） ゴシック+キャッチのみ明朝 前田建設工業 配色： テイスト： キービジュアル： 書体： 白+青（CI）+緑、オレンジ シンプル。やや立体的。 実績（直接的表現） ゴシック+キャッチのみ明朝
14. 14. 14Copyright©baigie inc. All rights reserved. 3-2. 信頼・誠実をブランドとする企業サイト② 配色： テイスト： キービジュアル： 書体： 白+黒、赤（CI） シンプル。やや立体的。 車（直接的） ゴシック 配色： テイスト： キービジュアル： 書体： 白+緑+青、黄 やや装飾的。立体的。 人+車+生活シーン（直接的） ゴシック+キャッチのみ明朝 ブリジストン ヤマトホールディングス
15. 15. 15Copyright©baigie inc. All rights reserved. 3-2. 信頼・誠実をブランドとする企業サイト③ 配色： テイスト： キービジュアル： 書体： 白+青（CI）+紫、茶 シンプル＆フラット。 空（抽象的） ゴシック+キャッチのみ明朝 配色： テイスト： キービジュアル： 書体： 白+青（CI）+グレー シンプル。やや立体的。 人+実績（直接的） ゴシック 伊藤忠商事 オムロン
16. 16. 16Copyright©baigie inc. All rights reserved. 3-2. 信頼・誠実をブランドとする企業サイト④ 配色： テイスト： キービジュアル： 書体： 白+青（CI） シンプル＆フラット。ナビのみ立体 実績（直接的） ゴシック+キャッチのみ明朝 配色： テイスト： キービジュアル： 書体： 白+赤（CI）+グレー やや装飾的。やや立体的。 生活シーン（やや間接的） ゴシック 三井物産 帝人
17. 17. 17Copyright©baigie inc. All rights reserved. 3-2. 信頼・誠実をブランドとする企業サイト⑤ 配色： テイスト： キービジュアル： 書体： 白+赤（CI） シンプル＆フラット。やや立体。 レイアウトが個性的。 実績（直接的） ゴシック+キャッチのみ明朝 配色： テイスト： キービジュアル： 書体： 白+青緑、ピンク（CI） シンプルだが密度がある。やや立体的。 レイアウトが個性的 人の輪（やや間接的） ゴシック+一部明朝 三菱商事 エーザイ
18. 18. 18Copyright©baigie inc. All rights reserved. 3-2. 信頼・誠実をブランドとする企業サイト⑥ 配色： テイスト： キービジュアル： 書体： 白+青（CI）+オレンジ、緑、紫 やや装飾的。やや立体的。 なし（トピックス表示） ゴシック 配色： テイスト： キービジュアル： 書体： 白+グレー+青 シンプル。立体的。 人々（やや間接的） ゴシック 凸版印刷 NEC
19. 19. 19Copyright©baigie inc. All rights reserved. 3-2. 信頼・誠実をブランドとする企業サイト⑦ 配色： テイスト： キービジュアル： 書体： 白+赤（CI） やや高密度。やや立体的。 人々（やや間接的） ゴシック+キャッチのみ明朝 配色： テイスト： キービジュアル： 書体： 白+黄緑 装飾的。立体的。 手に若葉（間接的） ゴシック+キャッチのみ明朝 三菱地所 ダイセキ
20. 20. 20Copyright©baigie inc. All rights reserved. 3-3. 信頼・誠実をブランドとする企業サイトの傾向 白を基調とし、白の面積が大きい。 CIカラーはアクセントカラーとして使っている。 CIカラー以外は使わないか、1∼2色以内で使用している。 書体はゴシックが基本で、キャッチだけ明朝のケースが多い。 レイアウトはオーソドックスで奇をてらわない。 メインビジュアルは、事業を直接表現したものが多い。 企業サイトの傾向から、以下のような条件が、信頼感を感じさせやすい、あるいはユーザが信頼性がある企業 と経験的に思いやすいデザインと考えられます。
21. 21. 21Copyright©baigie inc. All rights reserved. トレンドとセオリー Trend and Theory4
22. 22. 22Copyright©baigie inc. All rights reserved. 4-1. 抑えておくべきWebデザインのトレンド① 高密度なレイアウトは、情報を見つけにくくします。また、タブレットやスマートフォンでの閲覧を想定した時に、押しにくく、誤 操作しやすいWebサイトになりがちです。 情報の密度はできるだけ低く 現在の一般的なユーザの行動様式に合うよう、デザインや設計のトレンドの中で、妥当性があると判断出来るものは 積極的に取り入れていきます。 密度を低くしたゆったりレイアウトは、ページが長くなる傾向があります。コンテンツ量と見やすさが求められるのであれば、ペー ジを短くすることを最重要と考える必要はありません。 ページの長さにこだわらず、スクロールを多用 ボタンや、クリックをさせるための要素は、大きくする傾向があります。マウスで操作しやすくするだけでなく、前述のようにタブ レットやスマホなどのタッチデバイスでの閲覧も想定されるためです。 大きなボタン、クリック要素 ごてごてとした装飾や、グラデーションの多用は、一世代前の印象を与えます。UIの装飾は機能的な必然性にもとづき最小限の利用 とし、コンテンツや写真にできるだけ注目させるというのが現在のトレンドです。 装飾は控え目に、シンプルに
23. 23. 23Copyright©baigie inc. All rights reserved. 4-2. 抑えておくべきWebデザインのトレンド② トレンドとなっているレイアウトを図示すると、以下のようになります。 現在主流のレイアウト 一世代前のレイアウト ファーストビューにはこだわ らず、できるだけ要素を大き く、ゆったりと見せるレイア ウトです。 要素を大きくし、密度を低く した分、どんどんとスクロー ルさせるような構成になって います。 ファーストビューやページの 短さにこだわり、密度を高め たレイアウトです。 PCだけの時代のレイアウトで、 タブレットやスマホからも閲 覧される時代においては、よ り多くの人に使いやすく、と いう観点からは外れたレイア ウトといえます。 1st View
24. 24. 24Copyright©baigie inc. All rights reserved. 4-3. 使いやすくするための配慮 リンクにはアイコンがある、矢印がない場合は青などの統一カラーにする、マウスオーバーで色を変えるなど、リンクと分かるデザ インルールに統一します。 リンク要素はルール化する クリック要素は大きく、複雑なインタラクションを加えたりしません。また、ナビゲーション要素と、読ませる要素は明確に区切り、 分かりやすく違いを出します。 ナビゲーション要素は大きくシンプルに、できるだけ固める 見出しで要点を伝え、本文で詳細な解説する、というのが使いやすいWebサイトの条件です。つまり、目立ちやすく読みやすい見 出しのデザインとコピーが重要になります。 見出しを大きくし、本文の内容をサマリーする。 色の多用は、リンクやコンテンツを見つけにくくするなど、使いにくいデザインになりがちです。見た目がさみしいという理由で色 を使うのではなく、機能的な必然性のある個所に、限定的に使うのが望ましいです。 色は多用せず、機能的に必要な場所に限定して使用する トレンドだけではなく、普遍的なユーザビリティの鉄則は最大限考慮します。
25. 25. 25Copyright©baigie inc. All rights reserved. 4-4. デザイン検討時にやってはいけないこと 企業や責任者の主観的な好みで決める 企業側の主観的な好みだけで判断すると、ターゲットに本来与えるべきイメージから離れていきます。 企業内の多数決でデザインを決める 多数決が、最善案とは限りません。ターゲットを一番理解している人が責任を持って決断しましょう。 紙に印刷したデザインで確認する 紙に印刷すると、色もレイアウトも、実際と変わってしまいます。必ずPCで見て、確認しましょう。 ユーザにとって何がベストかという客観的な視点を大事にして、デザインを確認しましょう。 デザインにすべての役割を求める デザインにすべての印象を負わせるのは無理があります。文章や画像の活用も想定し、役割を決めましょう。 Webメディアの特性を考慮せず見た目で決める OSやブラウザ、SEOなど、見た目だけでない制約も含めて、判断しましょう。