株式会社HERPのブランドガイドラインです。

1. 000
HERP Brand Guidelines ver.1.0
Brand Guidelines

2. 001
HERP Brand Guidelines ver.1.0
Design Principles
01.
02.
03.
04.
05.
06.
Design Principles
Logo & Symbol
Color
Typography
Illustrations
Tone of Voice
002-003
004-010
011-013
014
015-016
017

3. 002
HERP Brand Guidelines ver.1.0
Design Principles
HERP Personality
Mind
× Don’ts × Don’ts
× Don’ts
Who is “HERP”....?
誠実、
オープン
思いやりがあり柔軟
表裏がある、
自分本位
融通が利かない
採用のあり方を見つめ、
企業を支える伴走者
Behavior
常に一歩先を見た行動
ユーザー視点で考え気配りをする
独りよがりな行動
他人任せ、
思考停止
Appearance
清潔感があり
誰にでも受け入れられやすい
ギラついている感
不潔、
奇抜

4. Design Principles
デザイン原則
ユーザーとのあらゆる接点において、
「HERP らしさ」
を体現するためのデザイン原則。
Minimal
最小限である
不要なものがすべて
削ぎ落とされている
必要な情報が
すぐわかる
一歩先の未来まで
見据えられている
相手への配慮が
行き届いている
Clear
明快である
Leading
先回りできている
Empathizing
寄り添っている
003
HERP Brand Guidelines ver.1.0
行 動 指 針
ユーザー価値ドリブン
成果に向かう ATI で動く
やってみよう！ ストレートに伝える 愛を持つ
マインド
誠実 オープン
思いやりがある 柔軟性がある

5. 004
HERP Brand Guidelines
Primary Logo
ver.1.0
Logo & Symbol
HERP Logo, Symbol, Wordmark
Symbol
[HERP Hexa]
Wordmark
スペースや表現に支障がない限り、
Primary Logo
（シンボルとワードマー
クがセットになったもの）を使用します。一部を修正したり、シンボル
とワードマークの距離を変化させたり、縦横比を維持した状態で拡大縮
小以外の変形をすることは禁止されています。
狭いスペースや小さなサイズで表示することが必要とされる場合は、
Symbol（HERP Hexa）を使用します。
Wordmark は、Inter の書体をベースに調整して作られています。

6. 005
HERP Brand Guidelines
Secondary Logo
ver.1.0
Logo & Symbol
HERP Logo, Symbol, Wordmark
ロゴを表示したい領域において、十分に横幅がない場合や正方形に近
い場合、シンボルとワードマークが縦方向に積まれている Secondary
Logo を使用します。

7. a
5a
15a
3a
006
HERP Brand Guidelines ver.1.0
Logo & Symbol
HERP Logo Composition
Primary Logo
HERP の Wordmark の「H」と「E」の間にある空間の横幅を基準と
し（a）
、Symbol と Wordmark の間はその 2 倍（2a）のスペースを担
保してください。また、Symbol のベースの形である六角形の横幅は
8a、Wordmark の高さは 5a となっ
ています。
Secondary Logo
HERP の Wordmark の「H」と「E」の間にある空間の横幅を基準と
し（a）
、Symbol と Wordmark の間はその 3 倍（3a）のスペースを担
保してください。また、Symbol のベースの形である六角形の横幅は
15a、Wordmark の高さは 5a となっ
ています。
a
2a
5a
8a
Primary Logo
Secondary Logo

8. 007
HERP Brand Guidelines ver.1.0
Logo & Symbol
HERP Symbol [HERP Hexa]
HERP の Symbol である HERP Hexa（ヘキサ）は、六角形の各辺を
6 分割したグリッドをベースに、
「手と手」
「渦」をモチー
フとしています。
HERP がサービスを通じ体現する、企業の半歩先に立ち、手を引きなが
らより良い採用活動となるよう導くための「手」
、及び、より良い採用活
動が実現できるようになるための「渦」を表しています。

9. 008
HERP Brand Guidelines ver.1.0
Logo & Symbol
Logo Isolation & Minimum Size
HERP のロゴを使用する際は、
「P」のサイズと同じだけ、上下左右に余
白を設けてください。余白内には他の企業のロゴやテキストを配置しな
いでください。
ロゴの視認性を担保するための最小使用サイズは、Primary Logo はオ
ンスクリーンの場合 98px、印刷物の場合 24mm ／ Secondary Logo
はオンスクリーンの場合 64px、印刷物の場合 16mm です。
98px / 24mm
Isolation
Minimum Size
64px / 16mm

10. 009
HERP Brand Guidelines ver.1.0
Logo & Symbol
Logo Variations
HERP で提供するプロダクトのロゴには、シンボルと Inter の書体で作
られた欧文をベースに調整したものを使用します。
小さいサイズで表示する際の視認性の向上のため、ロゴとして使用する
には特徴が出すぎている文字の細部や、過剰な装飾になっている部分を
調整します。
十分な横幅が担保できる場合には Primary Product Logo を使用し、
狭いエリアに表示しなければならない場合には Secondary Product
Logo を使用します。また、広告やイベントなど HERP シンボル自体を
初めて目にする人が多い利用シーンでは Primary Product Logo を使
用してください。
Primary Product Logo
Secondary Product Logo
a
2a 1.5a
8a
a
2a 1.5a
8a
2a
8a
2a
8a

11. 010
HERP Brand Guidelines ver.1.0
Logo & Symbol
ロゴを使用する際は、HERP を正しく認知してもらうため、右の禁止事
項は避けて使用してください。
定義された色
（黒・白）
以外での使用
縦横比率が保持されていない拡大縮小
視認性が悪い状態での使用
線をつけた状態での使用
ロゴの一部をトリミングした状態での使用 アイソレーションを無視した状態での使用
ロゴの一部の要素のみの拡大縮小・回転・移動
Symbol と Wordmark で異なる色の使用
Logo Crimes

12. C : 0
M: 0
Y : 0
K : 100
011
HERP Brand Guidelines
Color
HERP Brand Color
HERP のブランドイメージを守るために、可能な限り、白と黒のみを使
用します。
ただし、マーケティング広告などのクリエイティブなどで、どうしても色
を使う必要がある場合は、次のページのアクセントカラー用カラーパレッ
トから色を選んで使用して
ください。
HERP Black
RGB
Hex #000000
CMYK
HERP White
RGB
Hex
R : 255
G: 255
B: 255
R : 0
G: 0
B: 0
#ffffff
CMYK C : 0
M: 0
Y : 0
K : 0
ver.1.0

13. 012
HERP Brand Guidelines
Color
HERP Accent Color
マーケティング広告などのクリエイティブにおいて、どうしても色を使う
必要がある場合は、
右のカラーパレットから色を選んで使用してください。
Primary カラーである青色を優先して使い、青色のみでは成立しない場
合に Secondary カラーから選んで使用します。
Blue
Primary Accent Color
RGB
Hex
R: 0
G: 96
B: 230
#0060E6
CMYK C: 86
M: 62
Y: 0
K: 0
Secondary Accent Colors
Purple
RGB
Hex
R: 115
G: 0
B: 230
#7300E6
CMYK C: 77
M: 82
Y: 0
K: 0
Red
RGB
Hex
R: 230
G: 38
B: 0
#E62600
CMYK C: 10
M: 93
Y: 100
K: 0
Yellow
RGB
Hex
R: 230
G: 184
B: 0
#E6B800
CMYK C: 16
M: 32
Y: 93
K: 0
ver.1.0

14. 013
HERP Brand Guidelines
Color
HERP UI Color
デジタルプロダクトなどにおいて、ユーザーのユーザービリティ観点から
幅広い色を使う必要がある場合には、下記カラーパレットの中から色を
選択し、適切なコントラストを意識しながら使用します。
ver.1.0

15. 014
HERP Brand Guidelines ver.1.0
Typography
HERP Typography
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
abcdefghijklmnopqrstuvwxyzåäö
:;...!?�*# (){}[]-–_‚„“” ‘’ "'$€£+−=%@&|¦
1234567890
Inter
https://fonts.google.com/specimen/Inter
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
ヒラギノ角ゴシック
欧文
和文

16. 015
HERP Brand Guidelines ver.1.0
Illustrations & Icons
HERP Illustrations
ユーザーに情報を直感的に伝えるために、イラストを使用したい場合は、
用意されているイラストの中から適したものを組み合わせて使用します。
手前の人型シルエットと、背景の青いオブジェクトの組み合わせ方は自由
ですが、背景の青いオブジェクトが人型シルエットの 30% を上回らない
ようにしてください。

17. 016
HERP Brand Guidelines ver.1.0
Illustrations & Icons
HERP Illustrations
Silhouette Background Objects

18. 017
HERP Brand Guidelines ver.1.0
Tone of Voice
HERP Tone of Voice
HERPは企業の採用活動の伴走者として、
一貫したイ
メージを担保するた
め、
プロダクトや広告などのテキストにおいて、
下記のような声のトーンを
イ
メージしてライティングを行います。
Do
明るく澄んでいる
落ち着いている
端的である
丁寧である
Don’t
ゴニョゴニョしている
自信がなさそうでひ弱
早口でテンパっ
ている
上から目線で高圧的
過剰に丁寧
Do
なにか問題が発生したようです。
もう一度お試しください。
Don’t
- Oops！
もう一度やっ
てみて
！
（カジュアルすぎる口語、
高圧的とも捉えられかねない
「!」
の使い方）
Do
部署名を入力して
ください。
Don’t
- 部署名は？
（カジュアルすぎる、
上から目線とも捉えられかねない）
- 部署名をご入力ください。
（過剰に丁寧すぎる）
Do
パスワードをお忘れの方はこちら
Don’t
- パスワードをお忘れですか？
（カジュアルすぎる）
- パスワード再発行はこちら
（丁寧でない）
Do
メールアドレスを入力してください。
入力したメールアドレスに、
確認用リン
クを記載したメールが届きます。
Don’t
- このメールアドレスに、確認用リンクを記載したメールが届きますので、
メールアドレスを入力して
ください。
（情報が端的に伝わらない、
過剰な言い回し）