関連スライド
各ページのテキスト
プロダクトブランディングと そのデザインプロセス Yuki izumoto
今日のおもちかえり • ブランディングを考えるときに、どんな思考でやってるか • デザイン要素がなにで構成されるか、何を決めておくべきなのか • デザイン業務に近しい作業をするとき、何を考慮する必要があるか • その実務をやるにあたって、どんなメソッド、パターンがあるのか
AppDev
Product || Logo Design
Product || Logo Design
silkyfeel • インタフェースデザインとプロトタイピングの会社 • 使いやすいインタフェースを、滑らかな絹に”見立て” • コーポレートカラーはマゼンタで • 品良く、柔らかく = 細めの書体で、曲線美のあるイメージ。
HoloMagicians • 日本最速でHoloLens1ゲットして、あちこちデモした • エンジニア以外にもウケがいい • コミュニティ作るなら、エンジニアとかデベロッパーだけの閉ざさ れたコミュニティにしたくない • はじめて体験した人がみんなびっくりしてた顔してた • そんな魔法っぽいコンテンツをつくりたいよね
デザイン = センス？？？
デザイン センス
Product || Logo Design
DESIGN METHOD • コンセプトストーリー、ユーザーストーリー、ターゲット を考える。 • 調査を前提に、 • 色、形、名前、らしさ、雰囲気 ＝ 定義 => まず決める • 定義をデザインスキルに適用させる • => ノンデザイナーズ・デザインブック、インタフェースの心理学 プラットフォームのガイドライン、世の中のはやり
DESIGN SKILL • 知識量 • 良いものを知らないと、良いものは作れない • 原則を知らなければ、まともなものは作れない。 • 観察力 • 世の中にあるいろんなデザインがどういう原理原則でできてるか • 何を伝えたいからそうなっているかを読み解く • 再現力 • 写経、ツールを使って同じものがつくれるか。
知識量・観察力・再現力 ＝ 説明責任能力
説明責任能力 ＝ 作った人が作ったものを なぜこう作られているのかを説明できる ＝＞ 信用に値するか初めて評価できる。
DESIGN = 設計、問題解決、計画策定 なんとなく => 説明責任を果たせない
DESIGN METHOD => プロダクトデザインの深堀り • コンセプトストーリー、ユーザーストーリー、ターゲット を考える。 • 調査を前提に、 • 色、形、名前、らしさ、雰囲気 ＝ 定義 => まず決める
DESIGN METHOD => デザイナーのタスク • 定義をデザインスキルに適用させる • => ノンデザイナーズ・デザインブック、インタフェースの心理学 プラットフォームのガイドライン、世の中のはやり
ロゴデザインのプロセス
ロゴスタイル • ロゴタイプ、シンボルマーク、ロゴマーク
ロゴの歴史
ロゴの歴史 https://pc.watch.impress.co.jp/docs/column/gyokai/737292.html
ロゴの歴史
フォント
フォント • 明朝体(ex:ヒラギノ明朝) ゴシック体(ヒラギノ角ゴ) • Serif(Times New Roman) San Serif(Helvetica) • Writing(Snell Roundhand) • • • • • フォントはそのテキスト・ロゴの雰囲気、らしさ、空気感を表現。 かっちりしたイメージ、洗練されたイメージ、柔らかいイメージ etc… 明朝とゴシックを混ぜたり、SerifとSan Serifを混ぜて使わない。 あえて意図がなければ、明朝Serifフォントを使う理由ないかな… あとは等幅かプロポーショナルかとか。
フォントのライセンス • 商用OKか、非商用のみか。サポートはあるか。再頒布OKか。アプリに 組み込むことはOKか。改変はOKか。ロゴ作成は可能か。商標登録は可 能か。意匠登録は可能か。アウトライン化は可能か。etc.. • フォントのライセンスは地図ぐらいうるさい。 • ちゃんとライセンスを読むこと。 • あるいはそういうライセンス形態で利用できるサイトからアクティベー ションすること。Adobe FontsとかGoogle Fontsとか。 • 専用に作ってもらうと英語フォントでも数百万する。 • https://www.audi.com/ci/en/intro/basics/typography.html
色 • 色の意味 • コーポレートカラーとプロダクトカラー • メインカラー(25%)、ベースカラー(70%)、アクセントカラー(5%)
色は知っていれば崩壊しない • • • • 色相(色味）、明度（明るさ）、彩度（鮮やかさ） ダイアード配色（色相環で、反対色、補色で組み合わせる） アナロガス配色（色相環で、隣の色、近似色で組み合わせる） トライアド配色（色相環で、正三角形に３等分して組み合わせる）
色に悩みたくない • • • • • • • https://nipponcolors.com/ https://colorsupplyyy.com/app https://copypalette.app/ https://colorbase.app/ja/ https://palettemaker.com/app 世の中に配色ツールは山程ある。 １冊ぐらいそういう本を持っていてもいいかも。
シンボル • コンセプトストーリー、ユーザーストーリーから連想する • ロゴの成熟度、流行りでどこまで抽象化するか。 • ロゴタイプのみのロゴにするのであれば、シンボルはいらない。
可用性を考える • アプリアイコン、名刺、ペーパー、Web UI、favicon、本、番組、 ポスター etc… • 色々な媒体に掲載される可能性を考慮した構成、もしくはライン ナップを用意する。（レスポンシブロゴ）
トレンドの話 • • • • • https://blog.btrax.com/jp/logo-hidden-messages/ https://blog.btrax.com/jp/logo-trends/ https://blog.btrax.com/jp/2022-rebranding/ https://blog.btrax.com/jp/japan-brand-logos/ https://blog.btrax.com/jp/japan-brand-logos-2/
ロゴのガイドライン • 色は、背景色は、アイソレーション（余白）はどれぐらい空ける か、改変してはいけない例は、最小サイズは etc… • 社内外に対して、プロダクトのブランディングが損なわれないよう に、正しく使わせるための利用規約 => ガイドラインを策定する。 • プロダクトブランディングを共有して、チームの士気を上げる。
メルカリの場合 • • • • • https://about.mercari.com/press/press-kit/mercari/ https://note.com/mercari̲design/n/nb12290df5029 https://ja.takram.com/projects/mercari-rebranding https://ja.takram.com/projects/mercari-sans https://design.mercari.com/mercari-sans/pdf/ mercarisans̲specimen.pdf
まとめ • コンセプトストーリー、ユーザーストーリー、ターゲット を考える。 • 名前、色、形、らしさ、雰囲気、連想するもの ＝ 定義する • • • • • フォントを決める ロゴ案を出して、いろいろな媒体でしっかり使う。 ロゴガイドラインを策定する（テンプレに乗っかってもいい） 最終的に、色、形、モノからサービスが連想されれば、勝ち。 決め、が多い。でもイメージすることは難しくない、はず。