ロゴ作成に役立つ制作フローや素材・知識まとめ

• 作成：2014/03/24
• 更新：2014/11/01
• 無料素材 >

ロゴの作成依頼があって作ってみたものの、しっくりこない。ありきたりなアイデアしか浮かばない。どういった手順をふんで、どういったことに気をつければ、よいロゴができるのだろうか。今回はロゴを完成させるまでのフローや基本的な素材の作り方、アイデアの出し方など参考になる記事をまとめました。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

ロゴ作成

• １．ロゴマークの作り方
• ２．素材の作り方（イラストレーター）
• ３．ロゴのアイデア
• ４．CI・VI・BIの知識
• ５．企業フォント一覧
• ６．ロゴデザイン参考

フォントの基礎知識

• ７．フォントの知識＋選び方
• ８．タイポグラフィの基本
• ９．黄金比

ロゴ作成

１．ロゴマークの作り方

イチからロゴを作成する場合、クリエイターさん達はどうやって作っているのでしょうか。ロゴ作成における一連の流れをまとめました。

• ロゴ作成の手順を実例とあわせて紹介！ | Webクリエイターボックス
• Illustrator初心者のための「ロゴ作成講座」 | OZPAの表4
• 新米デザイナーに読ませたい、ロゴデザインの制作プロセス - W3Q
• ロゴを作る時に知っておきたい11の基本ルール | コリス
• Illustratorを使ったすごいロゴ、テキストエフェクトの作り方チュートリアル40個まとめPhotoshopVIP |

２．素材の作り方（イラストレーター）

ロゴマークやキャラクター、ちょっとしたパーツなどをつくる場合に役に立ちそうなイラストレーターを使った素材の作成方法など。シンプルな模様中心なのでロゴ作成に役立ちそうです。

• [スケッチ風] イラストレーターでスケッチ風ロゴデザインを作成する方法
• [手書き] 手作り風、手書き風をデザインする色々な方法 | ポケットラボ
• [フチ文字] 深夜のフチ文字講義byはむ&朝みっちー – Togetter
• [かすれた文字] Illustratorで印刷物風のかすれの描き方｜鈴木メモ
• [筆文字] 筆文字・筆絵をブラシで自在に書く方法 - BLOG MONKEY
• [墨汁] 墨汁を飛び散らしたようなイラストの作り方(Illusutrator)
• [ジグザグ] ジグザグ（波状）の図形をつくる方法 | Arch
• [矢印] 白抜き矢印を描く: 万象酔歩
• [角丸] Illustratorで指定した角のみを角丸にしたい
• [吹き出し] Illustratorでふんわり丸い吹き出しの描き方｜鈴木メモ
• [花] 簡単な花作り：“パンク・膨張”: イラレ・レシピ　時々フォトショ
• [四つ葉] Illustratorで四つ葉のクローバーをつくるチュートリアル
• [スタンプ] かすれスタンプ風に加工したイラストの作り方
• [歯車] 歯車・ギアの描き方　編集も容易！（アピアランス）
• [市松模様] 点線・星・文字・市松模様渦巻き（スパイラル）の描き方
• [千鳥格子] 【和柄】超簡単！千鳥格子の描き方
• [リボン] リボンを作るチュートリアル10選 – グレヌデサ
• [後光] Illustratorで太陽光線を作る方法 / ウェブデザインライブラリー
• [ハート] アピアランスでハートを描こう | hamfactory
• [円の変化] 円弧に沿って並んでいる徐々に大きさが変わっている円
• [ハニカム型]蜂の巣型（ハニカム型）パターンの描き方｜基本レシピ｜イラレシピ！
• [球体にロゴ] 3Dの球体にパターンとロゴを入れる方法(イラストレーター)
• [キャラクター１] Illustratorイラスト初心者のための5ヶ条 | 株式会社LIG
• [キャラクター２] 【558】シノノコ-お絵描きIRADUKAI
• [人物１] 人物を描く(基本) | デザイナーのイラストノート
• [人物２] Illustratorでイラストを描く！その1 -キレイに描くマイコさん編- | ADAM
• [人物３] 忍者キャラクターを作成する方法 / ウェブデザインライブラリー
• [アメコミ] Tuts+ Design & Illustration Tutorial

３．ロゴのアイデア

作成手順は頭に入っているけれど、アイデアが出ない。そんなときは企業ロゴや有名サービスがどうやってロゴを生みだしたのか見てみましょう。ロゴは漠然と考えるのではなくて、自社サービスが持つ意味や由来を込めて作りたいですね。

• 強い会社ロゴを作成するための5つのノウハウ | 名刺のネタ帳
• 有名Webサービスのこだわりがわかる、ブランドガイドラインまとめ | MEMOPATCH
• ロゴをどのようにデザインしたかという作り方がスケッチで分かる11の事例 - GIGAZINE
• 作り方のコツを伝授！ 実例で学ぶロゴデザイン ｜ テクニック｜ デジナーレカフェ
• ロゴデザインの参考になりすぎる厳選10サイト | SEO Japan

４．CI・VI・BIの知識

CI（コーポレートアイデンティティ）は企業やブランドの特徴と理念を具体化したものです。CIは名称・ロゴ・メッセージの３つによって表現されます。CIの中でも視覚表現に関するものはVI（ビジュアル・アイデンティティ）と呼ばれます。

• グラフィックデザインについて：CI・VI・BIとは（シンボルマーク・ロゴタイプ） - FM STUDIOドキュメント
• コーポレートアイデンティティ - Wikipedia

５．企業フォント一覧

有名な企業やサイトのロゴなどに使用されているフォント。フォントビューワでパソコンにインストールされているフォントを確認できます。

• 有名企業やサイトのロゴに使用されているフォントまとめ - NAVER まとめ
• あの企業のロゴに使用されているようなフォント集 | コリス
• 企業ロゴにも使えるエレガントなフリーフォント30個まとめPhotoshopVIP |

６．ロゴデザイン参考

ロゴデザインの参考になるサイトをまとめてある記事をメモ。

• ロゴデザインの参考になりすぎる厳選10サイト | SEO Japan
• ロゴ制作時に参考にしたいサイトまとめ | 株式会社LIG
• ロゴデザインギャラリーのオンパレードと注目記事色々！ | バンクーバーのうぇぶ屋
• ロゴデザインをする際に参考になる、ロゴデザインギャラリーサイト - W3Q

フォントの基礎知識

７．フォントの知識＋選び方

写真やイラストに比べると文字は印象が薄くなりがちですが、名刺交換などで書体をじっくり見てみるとメッセージが込められていたりします。ゴシック体は理性的、明朝体は穏やか、筆文字は保守的、新書体は気楽、太さは男性的、細さは女性的、大きな字は信頼、小さな字は上品など書体にはそれぞれイメージがあります。

• デザイナーなら知っておきたい、美しい和文フォント10選 - Moxbit
• 書体の選び方｜伝わるデザイン
• WEBデザイナーなら最低限知っておきたい有名フォントの数々 | バンクーバーのうぇぶ屋
• ウェブデザイナーに人気のある有料・無料のフォント ベスト10 | コリス

８．タイポグラフィの基本

フォントの大きさ、行間、位置などで悩んだりする前に、文字間や文字詰めなど基本的なことをおさらい。文字を読みやすくする上でとても参考になる記事です。

• Webデザイナーなら知っておきたいWebタイポグラフィの基本 | FICC inc.
• Webデザイナー（私）によるタイポグラフィーレイアウトの注意書き
• フォントや「文字」に関するまとめ | コムテブログ

９．黄金比

無理に黄金比（1:1.618）にしなくてもよいと思いますが、参考までに。たった一つのシンプルなロゴをつくるために、黄金比を取り入れて魅力的なデザインにしている例。

• twitter の新ロゴデザインが美しすぎて調べてみたら、黄金比で構成されてた。｜すしぱくの楽しければいいのです。
• 神秘の調和、アップル社のプロダクトデザインに隠された「黄金比」 - DNA
• iCloudのロゴに隠されていた黄金比（1:1.618）の秘密