こんにちは！木下です。今回は、Vtuberさんのロゴを実際に案件として作ってみた感想や気をつけるべきだと感じたことを語ろうと思います！ 自分以外の誰かに何かのデザイン物をつくることをお考えの方に参考になると嬉しいです。 1.お仕事探し 知り合いの方にVtuberをしている人がおり、ロゴを作りたいと話して「じゃあ私の作ってよ！」とありがたいことにお話をいただくことができました。 そのほかに試したことは ・「ココナラ」というスキルマーケットのアプリでお仕事を募集してみる ・Twitterで「ロゴのプレゼント企画」を行う です。しかし私の場合は、ココナラはDMで声がかかったり質問がきたりしても実際に案件になることがなく、プレゼント企画はロゴ制作をしてプレゼントして終わり、になってしまいどちらもお仕事につなげることは難しかったです(制作の内容調整をしたり、ロゴのお仕事の呼びかけをしてみたら変わるかも知れないので、もっと模索してみます！)。企業のポスターやチラシ制作をしたこともありますが、そちらも家族経由でこちらから頼み込んで貰えたお仕事です。 結論、学生デザイナー・駆け出しフリーランスデザイナーは自分から発信しなければお仕事がもらえません(泣) 私もいつか声がかかるだろう！と思いTwitterを行なっていましたが、 だれかが私に「お金を払ってこれを作ってもらおう」 となるには知名度と実績が必要になると身にしみて感じました。 2.「誰かへのロゴ制作」で学んだこと 相手も自分も初めての依頼だったことから、ヒアリング不足でのやり直しが多く、正直痛い目をみました笑 相手が知り合いということもあり、何度も何度も改善したものを見せて直してを繰り返すことで、お互いが満足のいくものを作ることができたのは良かったなと思いました。 知り合いじゃない人がお客さんの場合は絶対にヒアリング不足は避けましょう・・・！！！！最低でも色コード、ロゴのイメージ、キャラデザ、キャラコンセプトはロゴ制作の前に聞いておきましょう！ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/0faba807fd6241f98e595edc80fd772a/0.png" alt=""> <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/f9bcb073481d4b99a04133f435de376a/2.png" alt=""> ↑このロゴが実際に作ったものです！水星やむ(Twitter:@mizuboshi_yamu) 文字数が多くイラストがあるため、文字間は狭くしコンパクトにまとめつつ、ロゴを小さくしても見えやすいよう意識しました。キャラのコンセプトによると思いますが、細いフォントよりも太いフォントの方がロゴが目立つかな、と個人的に思います。 ロゴ全体の形が逆台形になるよう、メインの文字を大きく、ローマ字などの読み仮名は小さくしバランスを取りました。Vtuberロゴでは、枠あり・枠なしの２つが必要(枠ありは影つき)なので、ぜひ参考にしてください！ 3.人にデザインを作ってみた感想 自分が設定したターゲットでデザイン物を作ることや、自分が思い描くままデザイン制作をすることが今まで多かったので、実際に人から指示されたものをかたちにするのはとても難しいことだと感じました。 自分から発信すること、ヒアリングをおろそかにしないこと。初めて人にデザイン物を作ることで、デザインにおいて気をつけることを見つけ出すことができました。 この記事が、デザインのお仕事を行うときに参考になれば嬉しいです。 追伸：かわいいものを作る時間、最高。

Vtuberロゴを実際に作ってみた話。

こんにちは！さとです。 授業で「ゲームでボイスチャット相手を探すアプリ」を制作しており、今回もロゴを担当させてもらうこととなりました。 今回はそのロゴををどのようにして完成させていったか、考えたことを順を追って話していこうと思います！<h2 id="h07bfd4c10c">サービス名とテーマカラーを並べてみる</h2><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/008323fcfe6247349188890b73722785/ws_05-01.png" alt=""> まずは、ロゴに必須であるサービス名とテーマカラーを並べてみます。どんなモチーフになるか、フォントになるかは未定ですが、この2点は必ず外せない要素なので、取り敢えず並べておきます。<h2 id="h65134af040">フォントをいくつかピックアップする</h2><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/6d4f97d9edcd4950ba078612047716ff/ws_05-02.png" alt=""> サービスのイメージに合ったフォントをピックアップしていきます。 今回は「フランク」「気軽」「ゲーム」といった、比較的カジュアルなイメージをユーザーに持ってもらいたかったので、丸みのあるフォントやかわいいフォントをいくつか選びました。<h2 id="h1eba6f40b5">モチーフになりそうなアイコンを探してくる</h2>サービスのキーワードから、思いつく限りアイコンを拾ってきます。 今回のキーワード及びそこから探したアイコンは、ざっと以下のようなものでした。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/71d61f1d47fe4b08832bfefb0f2abcb6/ws_05-03.png" alt=""> アイコンに関してはこちらのランキングサイトをいつも参考にさせていただいています！ <a style="color:inherit" href="https://saruwakakun.com/design/tips/icon" target="_blank" rel="noopener noreferrer">https://saruwakakun.com/design/tips/icon</a><h2 id="h4ab2a8d81e">フォントにアイコンを組み込んでみる</h2>先ほどのアイコンとフォントを見比べて、合いそうな箇所を探していきます。 なかなかアイディアは浮かばないので、ただひたすら眺めます。 ただひたすら眺めていると、「b」という文字が、ヘッドセットの耳当ての部分のように見えることに気がつきました。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/6c618bd487214ca3a724dee758391cb1/ws_05-04.png" alt=""> 耳当てに見え…なくもない…？ それくらいの自信で大丈夫です。あとは気合でなんとかしましょう。 ここから、「b」と他のアルファベットを繋げ、ヘッドセットのように見せるロゴにしようと決めました。 適当に配置してみたものがこちらです。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/daf42dc5e1c5482f83f34c2fcb94f6f8/ws_05-05.png" alt=""> ヘッドセットとの馴染み具合から、フォントは三段目の「チェックポイント★リベンジ」にすることに決めました。 ヘッドセットにはマイクもついていることが多いので、Oを切ってマイクのように見せたいな、と思いつきました。 結局「マイクのように見せる」という部分は採用しませんでしたが、アルファベットの繋がっている部分に空白を持たせることで、結果的に「つながらない」というキーワードを表す部分にもなりました。<h2 id="h5ca0927176">成形する</h2>フォントとアイコンを馴染ませることがメインの作業です。 ほかにも、文字同士の余白や比率を触ってみて、しっくりくるポイントを探します。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/42f571893f8743028366f3fd431205e3/ws_05-06.png" alt=""> ここで大事にしたいのは、<ul><li>フォントとアイコンの線の太さを一定にする</li><li>余白の厚みを一定にする</li></ul>ということです。 線と余白それぞれ、太さにばらつきがあると、統一感が失われ「ただくっつけただけ」のように見えてしまいます。細かく調整していくことで、ロゴの完成度が増していく大事なポイントです！ また、非常にわかりづらいですが、④で元のフォントより高さを若干高くし、③で挿入した線とのバランスを調整しています。<h2 id="h9ece38246c">完成、応用</h2>完成しました！ このロゴを使って、 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/0668a904fe48452c8c55d1b1d6530035/ws_05-07.png" alt=""> といった作業をしていきます。 今回はキャッチコピー込みのロゴタイプを作りたかったので、完全版はこちらになりました！ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/3a4033bbc9354425b235e31d8fc6ec94/ws_05-08.png" alt=""> 以上が、自己流のロゴタイプの作り方です。なにかの参考になったり、アイディアに繋がっていれば幸いです！

ロゴタイプができるまで！初心者向けの道のり解説

初めまして！専門学校でWebについて学んでおり、将来はフロントエンドエンジニアになる予定のさとです。 基本はフロントエンドに関して、また趣味のデザインや写真、就活のことなどを発信していきます！<h2 id="h0669eefa7c">目次</h2><ol><li>ロゴデザインについて</li><li>見栄えのいいロゴとはなんなのか？</li><li>その前に</li><li>色の数</li><li>線の太さ・細さ</li><li>モチーフの簡潔さ</li><li>おわりに</li></ol><h2 id="h19c567b0d4">ロゴデザインについて</h2>Webデザイナーの卵とWebエンジニアの卵が「うぇぶスタ」というブログを新たに運営することになったのですが、 このロゴを、ありがたいことに担当させていただきました！ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/71d3db722f4e46de8e9c733fe820310f/ws_01-02.png" alt=""> 【2022年前期】 ロゴにデザイナー要素（クロップアイコン）とエンジニア要素（タグ）を入れてみました！ ところで、こちらをご覧ください。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/8253046281c04c30aaabbe3df2fe4615/ws_01-01.png" alt=""> 【2020年前期】Illustrator歴3ヶ月で初めて作ったロゴ 先ほどのものと比べてみてください。 シンプルに、なんかダサくないですか？ どうして前者の方が良く見えたのでしょうか。 良く見えるロゴとは、一体なんなのでしょうか？ 以上のロゴ2つを見比べながら、どうすればロゴの見栄えが良くなるのかを解説していきたいと思います。<h2 id="h824b23b31f">見栄えのいいロゴとはなんなのか？</h2>こだわり始めるとキリがありませんが（そのうち記事にします）、意識している基本の部分は以下です。<ul><li>色の数</li><li>線の太さ・細さ</li><li>モチーフの簡潔さ</li></ul>先ほどのロゴをこの3つに当てはめながら、ひとつずつ説明していきます！<h3 id="h912f14e85d">その前に</h3>お見せしたロゴ2つは、実は分類が違います。 ロゴタイプ及びロゴマークと呼び分けます。用途も違いますし、理想とされる比率も異なってきます。 ロゴタイプ 商品名・企業名を記載したものを指します。フォント及び作字をベースにしていることが多いと思います。 僕が挙げた例ですと、前者の青い方。noteだとこっち。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/c4c3b8d646f44e798ed1786d402ef8d8/ws_01-08.png" alt=""> 左側を含める場合も多くあります ロゴマーク 商品・企業を表すマークのことです。例ですと後者の緑の方で、noteはこっち。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/aa4f8a088d9f4411b30269af17c6aa24/ws_01-07.png" alt=""> ただ2年前の僕は知識が浅く、この2つの違いが理解できていませんでした。 なので、後者の緑の方（本来はロゴマーク）をロゴタイプのつもりで制作するという失敗を犯しているのです。 その失敗が響いてる部分も解説しながら、今回はあくまでもロゴタイプの解説になることを、ご了承願います。<h3 id="h7f1c78c2c6">色の数</h3>統一感のあるデザインには、使う色の数が絞られているとよく言われます。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/ab0a42d83f344d54a34fe33de4943b40/ws_01-03.png" alt=""> 某コンビニ3店舗のロゴ配色 Web全体のデザインには3色、多くても4色と言われているので、それよりも規模の小さいロゴデザインでは3色以下がベターなのではないでしょうか。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/48450fa21a874cb28965807ab9896e22/ws_01-04.png" alt=""> 最新のロゴである左側は2色なのに対し、一番古いロゴは6色も使用していますね。 これでは統一感が出にくいです。<h3 id="hc30d1a02a8">線の太さ・細さ</h3>こちらは、比較しているロゴをWebデザインに組み込んだ例です。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/25d5423a09a1484989cbe70f5b634a59/ws_01-05.png" alt=""> 上側に対し、下側はタイトルが視認しづらいです。 これは線の太さにばらつきがあることが原因なのではないかと考えています。 モチーフが伝わりづらい問題 新旧ロゴの比較画像まで遡っていただくと、右側の古いロゴには白い縁をつけているのが分かるかと思います。 これを含めて「マーク」として視認してしまうので、線が統一されておらず、「見づらい」という印象を受けてしまいます。 また、冒頭にお話ししたロゴタイプとロゴマーク問題がここで響いてきます。 旧ロゴはロゴタイプとしては「見づらい」ですが、ロゴマークとしてはそこまでマイナスではありません。 実際、複雑なデザインのロゴマークは多く存在します。（旧ロゴ自体のデザイン性は置いておいて） 旧ロゴに関しては、モチーフと文字を分けていれば、もう少し見やすかったのかもしれませんね。 タイトルが見づらい問題 次に、Webデザインに組み込んだ例を見てください。 古いロゴはお香とお香立てをモチーフに製作しました。しかし、（色の濃淡にも問題がありますが）お香の茶色い棒が文字よりも太く、非常に読みづらくありませんか？ なんという文字が書いてあるか、視認することができますか？ ちなみに答えは「紅香 Koka」です。僕はアルファベットが潰れてしまっているように思いました。 以上2点から、ロゴマークの線の太さはなるべく統一することを意識する必要があると分かります。<h3 id="hbd4ad00cfd">モチーフの簡潔さ</h3>ロゴ比較画像をもう一度みてください。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/48450fa21a874cb28965807ab9896e22/ws_01-04.png" alt=""> 左側のロゴはタグとクロップアイコンを、右側のロゴはお香とお香立て（と煙）をモチーフに取り入れました。 左側のロゴの方が、線が少ない（モチーフが簡略化されている）のが分かりますか？ 先ほどWebデザインに組み込んだように、ロゴタイプは縮小される可能性を常に持っています。 ご覧いただいているnoteも、左上にロゴタイプ（ロゴマークを含む）がありますね。 縮小による視認性の低下を招く可能性があるため、あまりにも難解なデザインは避けたいです。<h2 id="h9be0c3393d">おわりに</h2>ロゴタイプデザイン初学者の方向けの解説でした！いかがでしたでしょうか？<ul><li>色の数</li><li>線の太さ・細さ</li><li>モチーフの簡潔さ</li></ul>解説した3点が、どなたかの制作の手助けになれば幸いです！

Vtuberロゴを実際に作ってみた話。

ロゴタイプができるまで！初心者向けの道のり解説

【ロゴタイプ初心者向け】おさえておきたいポイント3つ