---
title: プロダクトブランディングと
そのデザインプロセス
tags: 
author: [蜜葉](https://www.docswell.com/user/mitsuba_yu)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LELPZMMX7R.jpg?width=480
description: プロダクトブランディングと
そのデザインプロセス by 蜜葉
published: March 02, 24
canonical: https://www.docswell.com/s/mitsuba_yu/ZXYJN2-2024-03-02-122607
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LELPZMMX7R.jpg)

プロダクトブランディングと
そのデザインプロセス
Yuki izumoto


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4JM4VYY37W.jpg)

今日のおもちかえり
• ブランディングを考えるときに、どんな思考でやってるか
• デザイン要素がなにで構成されるか、何を決めておくべきなのか
• デザイン業務に近しい作業をするとき、何を考慮する必要があるか
• その実務をやるにあたって、どんなメソッド、パターンがあるのか


# Page. 3

![Page Image](https://bcdn.docswell.com/page/PJRW299R79.jpg)

AppDev


# Page. 4

![Page Image](https://bcdn.docswell.com/page/PEXPDQQY7X.jpg)

Product || Logo Design


# Page. 5

![Page Image](https://bcdn.docswell.com/page/3EKDX994JD.jpg)

Product || Logo Design


# Page. 6

![Page Image](https://bcdn.docswell.com/page/L73R5WWDJ5.jpg)



# Page. 7

![Page Image](https://bcdn.docswell.com/page/87DYDKK27G.jpg)



# Page. 8

![Page Image](https://bcdn.docswell.com/page/VJP6XKKLE8.jpg)



# Page. 9

![Page Image](https://bcdn.docswell.com/page/2EV3LVV67Q.jpg)

silkyfeel
• インタフェースデザインとプロトタイピングの会社
• 使いやすいインタフェースを、滑らかな絹に”見立て”
• コーポレートカラーはマゼンタで
• 品良く、柔らかく = 細めの書体で、曲線美のあるイメージ。


# Page. 10

![Page Image](https://bcdn.docswell.com/page/57G3XLL2JL.jpg)



# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EQ58YY9JP.jpg)



# Page. 12

![Page Image](https://bcdn.docswell.com/page/KJ492WZR71.jpg)

HoloMagicians
• 日本最速でHoloLens1ゲットして、あちこちデモした
• エンジニア以外にもウケがいい
• コミュニティ作るなら、エンジニアとかデベロッパーだけの閉ざさ
れたコミュニティにしたくない
• はじめて体験した人がみんなびっくりしてた顔してた
• そんな魔法っぽいコンテンツをつくりたいよね


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LE1KMYRVJG.jpg)

デザイン = センス？？？


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GEWD3G13J2.jpg)

デザイン
センス


# Page. 15

![Page Image](https://bcdn.docswell.com/page/47ZGVLPGE3.jpg)

Product || Logo Design


# Page. 16

![Page Image](https://bcdn.docswell.com/page/YJ6Y5WMQ7V.jpg)

DESIGN METHOD
• コンセプトストーリー、ユーザーストーリー、ターゲット
を考える。
• 調査を前提に、
• 色、形、名前、らしさ、雰囲気 ＝ 定義 => まず決める
• 定義をデザインスキルに適用させる
• => ノンデザイナーズ・デザインブック、インタフェースの心理学
プラットフォームのガイドライン、世の中のはやり


# Page. 17

![Page Image](https://bcdn.docswell.com/page/GJ5GYMZ2J4.jpg)

DESIGN SKILL
• 知識量
• 良いものを知らないと、良いものは作れない
• 原則を知らなければ、まともなものは作れない。
• 観察力
• 世の中にあるいろんなデザインがどういう原理原則でできてるか
• 何を伝えたいからそうなっているかを読み解く
• 再現力
• 写経、ツールを使って同じものがつくれるか。


# Page. 18

![Page Image](https://bcdn.docswell.com/page/9E2YG9R1ER.jpg)

知識量・観察力・再現力
＝
説明責任能力


# Page. 19

![Page Image](https://bcdn.docswell.com/page/D7YGV4D47M.jpg)

説明責任能力
＝
作った人が作ったものを
なぜこう作られているのかを説明できる
＝＞ 信用に値するか初めて評価できる。


# Page. 20

![Page Image](https://bcdn.docswell.com/page/VENGMY66J8.jpg)

DESIGN
= 設計、問題解決、計画策定
なんとなく => 説明責任を果たせない


# Page. 21

![Page Image](https://bcdn.docswell.com/page/Y79WNPLR73.jpg)

DESIGN METHOD => プロダクトデザインの深堀り
• コンセプトストーリー、ユーザーストーリー、ターゲット
を考える。
• 調査を前提に、
• 色、形、名前、らしさ、雰囲気 ＝ 定義 => まず決める


# Page. 22

![Page Image](https://bcdn.docswell.com/page/G78NKDXGJD.jpg)

DESIGN METHOD => デザイナーのタスク
• 定義をデザインスキルに適用させる
• => ノンデザイナーズ・デザインブック、インタフェースの心理学
プラットフォームのガイドライン、世の中のはやり


# Page. 23

![Page Image](https://bcdn.docswell.com/page/L7LPZM8XJR.jpg)

ロゴデザインのプロセス


# Page. 24

![Page Image](https://bcdn.docswell.com/page/4EM4VY63JW.jpg)

ロゴスタイル
• ロゴタイプ、シンボルマーク、ロゴマーク


# Page. 25

![Page Image](https://bcdn.docswell.com/page/PERW29PRJ9.jpg)

ロゴの歴史


# Page. 26

![Page Image](https://bcdn.docswell.com/page/P7XPDQ3YJX.jpg)

ロゴの歴史
https://pc.watch.impress.co.jp/docs/column/gyokai/737292.html


# Page. 27

![Page Image](https://bcdn.docswell.com/page/37KDX9Y4ED.jpg)

ロゴの歴史


# Page. 28

![Page Image](https://bcdn.docswell.com/page/LJ3R5W9DE5.jpg)

フォント


# Page. 29

![Page Image](https://bcdn.docswell.com/page/8JDYDKG2JG.jpg)

フォント
• 明朝体(ex:ヒラギノ明朝) ゴシック体(ヒラギノ角ゴ)
• Serif(Times New Roman) San Serif(Helvetica)
• Writing(Snell Roundhand)
•
•
•
•
•
フォントはそのテキスト・ロゴの雰囲気、らしさ、空気感を表現。
かっちりしたイメージ、洗練されたイメージ、柔らかいイメージ etc…
明朝とゴシックを混ぜたり、SerifとSan Serifを混ぜて使わない。
あえて意図がなければ、明朝Serifフォントを使う理由ないかな…
あとは等幅かプロポーショナルかとか。


# Page. 30

![Page Image](https://bcdn.docswell.com/page/VEP6XK3L78.jpg)

フォントのライセンス
• 商用OKか、非商用のみか。サポートはあるか。再頒布OKか。アプリに
組み込むことはOKか。改変はOKか。ロゴ作成は可能か。商標登録は可
能か。意匠登録は可能か。アウトライン化は可能か。etc..
• フォントのライセンスは地図ぐらいうるさい。
• ちゃんとライセンスを読むこと。
• あるいはそういうライセンス形態で利用できるサイトからアクティベー
ションすること。Adobe FontsとかGoogle Fontsとか。
• 専用に作ってもらうと英語フォントでも数百万する。
• https://www.audi.com/ci/en/intro/basics/typography.html


# Page. 31

![Page Image](https://bcdn.docswell.com/page/27V3LV46JQ.jpg)

色
• 色の意味
• コーポレートカラーとプロダクトカラー
• メインカラー(25%)、ベースカラー(70%)、アクセントカラー(5%)


# Page. 32

![Page Image](https://bcdn.docswell.com/page/5JG3XL12EL.jpg)

色は知っていれば崩壊しない
•
•
•
•
色相(色味）、明度（明るさ）、彩度（鮮やかさ）
ダイアード配色（色相環で、反対色、補色で組み合わせる）
アナロガス配色（色相環で、隣の色、近似色で組み合わせる）
トライアド配色（色相環で、正三角形に３等分して組み合わせる）


# Page. 33

![Page Image](https://bcdn.docswell.com/page/47Q58YD9EP.jpg)

色に悩みたくない
•
•
•
•
•
•
•
https://nipponcolors.com/
https://colorsupplyyy.com/app
https://copypalette.app/
https://colorbase.app/ja/
https://palettemaker.com/app
世の中に配色ツールは山程ある。
１冊ぐらいそういう本を持っていてもいいかも。


# Page. 34

![Page Image](https://bcdn.docswell.com/page/KE492WGRJ1.jpg)

シンボル
• コンセプトストーリー、ユーザーストーリーから連想する
• ロゴの成熟度、流行りでどこまで抽象化するか。
• ロゴタイプのみのロゴにするのであれば、シンボルはいらない。


# Page. 35

![Page Image](https://bcdn.docswell.com/page/L71KMYDVEG.jpg)

可用性を考える
• アプリアイコン、名刺、ペーパー、Web UI、favicon、本、番組、
ポスター etc…
• 色々な媒体に掲載される可能性を考慮した構成、もしくはライン
ナップを用意する。（レスポンシブロゴ）


# Page. 36

![Page Image](https://bcdn.docswell.com/page/G7WD3GY3E2.jpg)

トレンドの話
•
•
•
•
•
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/


# Page. 37

![Page Image](https://bcdn.docswell.com/page/4JZGVLXG73.jpg)

ロゴのガイドライン
• 色は、背景色は、アイソレーション（余白）はどれぐらい空ける
か、改変してはいけない例は、最小サイズは etc…
• 社内外に対して、プロダクトのブランディングが損なわれないよう
に、正しく使わせるための利用規約 => ガイドラインを策定する。
• プロダクトブランディングを共有して、チームの士気を上げる。


# Page. 38

![Page Image](https://bcdn.docswell.com/page/YE6Y5W4QJV.jpg)

メルカリの場合
•
•
•
•
•
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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/GE5GYMQ2E4.jpg)

まとめ
• コンセプトストーリー、ユーザーストーリー、ターゲット
を考える。
• 名前、色、形、らしさ、雰囲気、連想するもの ＝ 定義する
•
•
•
•
•
フォントを決める
ロゴ案を出して、いろいろな媒体でしっかり使う。
ロゴガイドラインを策定する（テンプレに乗っかってもいい）
最終的に、色、形、モノからサービスが連想されれば、勝ち。
決め、が多い。でもイメージすることは難しくない、はず。