ロゴデザインのディレクション

ロゴデザインの依頼があった時のディレクションのながれ。デザイナーにお願いする前にやること～展開の付帯提案まで
#ギアスタ01
「いつもの社内勉強会を、オープンに」
2021年2月17日（水）
https://www.facebook.com/events/316475569566037/

Transcript

1. ロゴデザインのディレクション 勢いで作ったロゴデザインディレクションの流れ #ギアスタ01
2. 北川ふくみ 大阪出身。18から京都。25から札幌で はや14年。文学部国文学科出身、社会 人になってからはずっとウェブデザイ ナー〜ディレクター。父はデザイナー で母は染色作家。29でギアエイト入 社。いつの間にかお局ポジションに。 夢は特にない、目立たず我儘に凡人で も幸せな世界が理想。趣味は箏と三味 線。 2
3. 前提： デザインじゃなくて ディレクションです 3
4. ロゴの依頼があったときやること 1. 何に使うロゴか？ 2. 正式名称はなにか？ 3. 競合してないか調査 4. コンセプトを聞き出す～方針を固める 5. アイデアを集める 6. デザイン〜ブラッシュアップ 7. マニュアルの作成＋納品ファイルの作成 8. 展開 デザイナーに 依頼する前にやる デザイナーと一緒にやる デザイナーにお願いする 付帯提案 4
5. 1. 何に使うロゴか？ 5 5
6. 用途・使用箇所 • コーポレートロゴ：長く使うし汎用性大事 →　長く使われるもの　コロコロ変えない →　名刺・封筒・ウェブサイト・営業資料　など広範囲で使われる →　だいたい縦組み横組みセットにする →　シンボルなしのパターンも多い　名前そのものがブランドを表現 • サービス・キャンペーンロゴ：用途が多いしイメージ大事 →　アプリですか？　アイコン正方形におさめないと →　物理的にモノに刻印したりする？　2階調でも視認できる・繊細すぎない →　看板とかにつかう？　超横長・超縦長に使ったりすることある 6
7. 何にでも使える 汎用性 名刺・封筒・ウェブサイト・営 業資料とかはほとんどどんな場 合でもある。 縦組み・横組み・白黒表示など は基本のセットで必要。 7
8. 汎用性が ないパターン 組み替えとかできない。一体型 にしちゃうと横組みでもちっさ くなる。サイトのヘッダーとか 困りがち。 その分複雑なフォルムにもでき るのでキャッチーでイラストっ ぽいシンボルマークになりま す。 ▼　微妙に左寄せでおさめにくい ▼　シンボルマーク一体型でヘッダーに入れると小さめ 8
9. 実店舗の 屋内・屋外サイン 実店舗がある場合は大体こうな る。看板だと縦と横両方いるし 正方形になったりするよね。 あと内装ともトーン揃えたいと か、フォルム以外の色にも関係 してくる話もある。 9
10. 焼印とか グッズ展開 黒一色でわかる形じゃないとだ め。もしくは単色表現のパター ン必要。 作るものに応じてバリエーショ ン増やすのが普通だけど予算が そんなない時はうまいこと工夫 して使えるようになっていると 良いので、念のためグッズ展開 要確認 10
11. アプリ？ に限らずWebサービスだと 正方形の丸に収まる形が 使いやすいよね ▼めっちゃバランス悪い 11
12. 2. 正式名称 12 12
13. ネーミング 新サービスだとネーミングから 一緒に考えたりしますね。名称 だけ決まって表記が定まってい ない時は確認です。 表記は英語／漢字／カタカナ　 なにになる？ Gear8なのかGEAR8なのか。 13
14. 3. 競合調査 14 14
15. 競合調査 • 同じネーミングで被らないか さっと調べるやつ　→　ググる 特許庁　→　https://www.jpo.go.jp/support/startup/shohyo_search.html 商標登録とかは調べてほしいとの依頼→弁理士さんに相談してもらう • 競合他社と被らないか サイトのデザインと一緒でざっとググる 15
16. ひばりが丘こどもクリニック 同じエリアの小児科のロゴ。小 児科はみんなキャラクターにし がちなのでクマとか被りがち。 16 参考
17. 4. コンセプト 17 17
18. 確認すること • ウェブサイトと同じ。どういう人に対して何に使われるものなのか、 対象者と目的をはっきりさせる • ネーミングの由来 • 言葉で表現した時＝サービスのキャッチコピーや説明、ブランドステートメント • 与えたい印象・カラー・キーワード （ウェブのデザインコンセプトと同じ） • シンボルマークのモチーフヒントの希望 • 今後のロゴの展開（カラバリ・サービスの横展開） 18
19. 5. アイデア集め 19 19
20. ぜんぜんイメージがないとき 1. シンボルマークがあるほうがいいのかないほうがいいのかも わからないときに判断してもらうためのベンチマーク集め →　そもそもの役割や使用箇所の説明 2. タイプロゴ　→フォントによるイメージの違いの説明 3. 言葉の意味を深掘りする 20
21. アイデアを広げたいとき • いくつかのキーワードから連想されるビジュアルを見まくる • キーワードをちょっと変えたり違う言い方をして、関連するキーワード （ビジュアルにしやすそうなものがないか）を見つける • サイトのトーンに近いポスターなどのデザインを参考にする 21
22. ここまでを「ロゴの前提確認」のような まとめ資料にしてクライアントへ確認します。 アイデア出しはデザイナーさんと 一緒にやってもいいと思う。 アイデアはたくさんあった方がいい。 22
23. 6. デザイン 23 23
24. 手書きラフ • アイデアの中から採用できるものがあるか試し描きしてみる • 色を使わずにまずフォルムを考えることができるので無駄に広がらない • 描いてるうちに新しいアイデアが出てくることもある • 方眼紙に結構精巧なラフを描いておかないとデータ化するのしんどい ※ディレクターだから落書きラフで許されるとおもっている ※想像力のあるクライアントであれば、デザイナーが描いた手書きラフで方向性の確認 取るのもあり ※グラフィックデザイナーは良い線が書けるかどうかがポイントになるらしい。建築の 製図と同じ。 24
25. デザインブラッシュアップ • なんとなく良くなりそうな最終イメージをもっておく →　クライアントのイメージとずれていないかのチェック →　コンセプトとずれていないかチェック →　前提になる条件からずれていないかチェック • モチーフにしづらいものは難易度が高い、 コンセプトをうまく説明できるかどうかにかかっている。 口頭で説明すると納得度が増す。 • ベースフォントの選択意図も説明を入れる。とにかく提案は言語化。 25
26. 提案のしかたでいい感じにする 26 • サイトにはめたイメージをつくる　展開のしやすさもわかる • 名刺と封筒にしたイメージ。モックアップツールやテンプレを活用 横長もあった方がいいなとわかる。 • キャッチコピーとセットで組んでみる コンセプト文に添えてみるとか。なんか完成度が上がった感じになる。
27. 抽象的な言葉のやりとりだけでは 意識のすり合わせは難しいです。 なるべく仕上がりのイメージの 想像がつく具体的なかたちで例示し デザインを作り込む前に決めておくことがポイントです。 ブラッシュアップの段階のやりとりも同じです。 コトバとカタチを行ったり来たり。 27
28. 提案デザインには、意図を言葉で丁寧に添える 後付けでもなんでもいい、人は意味を求める生き物だから。 28
29. フィードバックの言葉は、ビジュアルで確認する デジタル感ってなんですか？ 29
30. それでもなかなか決まらなかったりする理由： ロゴはウェブサイトほど機能要件が多くないので 好みに左右される割合が高い。 そして人の好みは結構一貫しておりブレない。 理論的に提案してもあんまり選ばれないことも。 30
31. 好みを早く見抜く。 決裁権のある人に直接提案する。 31
32. 7. 納品ファイル 32 32
33. 使用マニュアル • ロゴコンセプトテキスト • カラー指定 →　ウェブサービスだとRGBのカラーコード →　CMYKは印刷時の特色指定もいれる • アイソレーション • 最小サイズ →　px指定でウェブの最小サイズも入っているといいよね • 禁止事項 33
34. 書き出しファイル • 縦組み・横組み・白黒　などのパターンpngファイル • 500px四方でアイソレーションを保った透過png →　SNSアイコンとかfaviconに使えるように、丸でくりぬいてもトリミ ングされない余裕をもたせる ※ウェブマーケティングに使えるツール一式として用意してあげるのが、ウェブデザイ ンの会社として気が利いてていいかなと思ってます。SNSのカバーとかOGPとかホーム アイコンとか。 ※使用マニュアルが印刷前提のCMYKなので、RGB用のPDFもあると良いかも。 34
35. 8. 展開 35 35
36. 各種ツールへの展開 • 名刺 • 封筒 • パワポやキーノートのテンプレート 36
37. 今後は映像や音のコンセプト表現も？ • オープニングロゴムービー：高校生のキモチ https://shinro-kimochi.com/ • コンセプトを表現した動くロゴ：森のピタゴラス https://morinopitagoras.life/ • ローディングアニメ：CHAPE http://kaiteki-area.com/ 37
38. ブランドガイド資料まであと一息 • 会社のコンセプトの資料 ◦ 社名正式名称 ◦ ビジョン・ミッション・バリュー ◦ キャッチコピー ◦ VI・キャラクター設定 ◦ 媒体別のロゴ使用マニュアル • ウェブサイトのベースCSSのような資料 ◦ ウェブサイト使用カラーコード一覧 ◦ 見出しサイズレベル等のいわゆるウィジウィグスタイル ◦ アイコンセット 38
39. Trippino Brand Guide 39
40. ロゴデザインに挑戦し続けると ビジュアルのアイデアを出すのと 意図を言葉で説明する 良い訓練になると思います。 コンセプトを可視化した最小デザインだから。 40
41. よきロゴデザインを。 41