見出し画像

Web制作に特化したVtuber、ツバクラロヒト様のロゴデザイン制作過程

Elsel

みなさんこんにちは、バギャリエイターことバーチャルなギャルのクリエイター、Elsel(えるせる)です！

いつも私の記事を読んでくれている方は冒頭のあいさつに違和感を覚えたかと思います。そう、今日は真面目な記事なんです。

今回の記事では、クリエイター系バーチャル白塗り美男子 ツバクラロヒト様のロゴデザイン過程についてお話させていただきます！

ロゴデザインに至った運び

2019年の10月、令和元年生まれのVtuberさんという条件で、ロゴのプレゼント企画を行いました。その際に、ツバクラロヒト様、虎城千夜様のお二人にご応募いただき、ロゴデザインをさせていただく運びとなりました。
今回はツバクラロヒト様のロゴデザインの過程を記事にさせていただいております！

Vtuber ツバクラロヒトさんとは

クリエイター系バーチャル白塗り美男子、ツバクラロヒトさん。アングラ文化を思わせる風貌が魅力的です。

WebサイトをVの人々に持ってほしい！という想いの元、本業のフロントエンジニアとしての技術を生かし、Webサイトの作り方をYouTubeで解説しています。


Webサイトだけでなく、DTMやイラスト、Unityを使用した3D関連の制作もされており、まさに作ることがやめられないクリエイター系Vtuberさんです。
もっと知りたい！という方はこちらからどうぞ！



ロゴデザインってそもそもどうやってやるの？

制作過程をお話する前に、ざっとロゴデザインの流れを説明します！

1.ヒアリング
依頼者自身についてや、なぜ作りたいのか、どんなロゴが欲しいのかといった事柄をお伺いします。ここでお伺いした内容をもとにデザインを考えていきます。
この工程がロゴデザインの良しあしを決める最も重要な部分だと考えています！

2.ラフ制作/提案
ヒアリングした内容をもとにデザインを描き起こします。その時々や人によってラフの完成度は様々です。時間をかけて制作する前に、この雰囲気で良いか依頼主に確認をします。
また、どういう意図でこのデザインにしたのかという説明もあわせて行います。
この段階できちんと修正を重ね、依頼主のイメージに近づけていきます。
納品直前に依頼主のイメージと全く違った・気に入ってもらえない等の理由で一から作り直し...なんて悲劇を生まないためにも、きちんとコミュニケーションをとります！

3.本制作
ラフにOKが出たら清書をしていきます。清書したものを再度お見せし、小さな修正を重ねて満足いただけるロゴを完成させていきます。

4.納品
満足いただけたらデータを整えて納品です！

※私が制作する場合の流れです。

おおよそこのような流れでデザインをしていきます！


さっそくヒアリング

はじめに、以下の内容についてお伺いいたしました。

・活動方針
・活動への思い
・ロゴを見た人に感じて欲しい印象
・自分の持ち味・特色
・想定される使用用途
・取り入れたいモチーフ
・イメージカラー
・希望の配色

以前の記事でも書いたように、「見ればわかるじゃん！」な質問もちらほら。
しかし、ヒアリングは制作者が制作の上で必要な事項を聞くだけのために行っているのではなく、依頼者に自身の活動について振り返ってもらい、活動方針やアイデンティティを明確に言語化・理解してもらうという目的があります。

Vtuberの方だと特に活動方針やアイデンティティについての情報が発信されていることが多いですが、活動の目的は何なのか、何を伝えたいのか、自分の特徴は何なのかという根本的な点を深く考えていただく意味でも改めて言語化していただいております。

回答

・活動方針・
Webサイトを作るための技術を試し、10分までの短い動画にして投稿する。

・活動への思い・
ターゲットは伝えたいことがあり、個人で活動する人。
企画特設ページは作ると自分の履歴になり、実績として残せるため、VTuberさんの間に企画や告知の為のWebサイト作成を普及させたいと考えている。
作る方法を自分が試して動画にまとめることで、発信したい思いがある人々に届けたい。
海外展開も考えている。

・ロゴを見た人に感じて欲しい印象・
1.わかりやすさ
現行のロゴはかっこよさがイメージとあっているが、文字部分の読みにくさが課題であるため。
2.スタイリッシュ
ここ数年のWebサイトの傾向として、立体的に見えるような影を付けないデザインが多いため、内容が時代に合っていることを印象づけたいから。
3.かっこよさ
キャラクターの見た目とイメージを合わせたい。

・自分の持ち味・特色・
VTuberの中では珍しいwebサイト作成を題材にした存在であること。
説明の分かりやすさを大事にしていること。

・取り入れたいモチーフ・
おまかせ


※一部内容を省略しております。


このほかに、別途衣装や世界観について書かれた画像資料をいただきました。

どうして衣装にそのモチーフを取り入れたのか、何を表しているのか、どういうコンセプトなのかといった資料は、活動自体の根幹の部分であったり象徴とするのにふさわしい背景があったりと、たくさんのヒントがあります。

特に衣装やデザインは多くの方が活動を始めるにあたり最初に用意するものなので、活動をはじめたときの想いや意図が濃く詰め込まれています。

いただいた資料

今回いただいた資料はこちらのツイート内の一部です。

この資料の中で制作の大きなヒントになったのは、衣装の目のモチーフです。

・アングラ文化でよく狙われやすいモチーフ
・見えること(Webフロントエンド)に興味があることへのアピール

の意図を込めて目を衣装の一部に取り入れられたそうです。
活動の軸を表すモチーフとして大きな役割を担っていると感じたため、今回はこの目のモチーフをロゴデザインに取り入れていくことにしました！

デザインの方針

ヒアリングやいただいた資料をもとに決定した方針がこちらです。

ロゴの種類：ロゴマーク(シンボルマークと文字を組み合わせたもの)
コンセプト：見えるモノに興味を持ち、時代を追う
テイスト：スタイリッシュ

これらに決定した理由を書いていきます！

ロゴの種類について

はじめに、ロゴの種類そのものについて説明します。
ロゴは大まかに以下の3つの種類に分けられます！

ロゴ説明_アートボード 1

1.シンボルマーク
シンボルマークを使用している企業は、Twitterやマクドナルド、Appleなどです。人間は文字より図形のほうが印象に残りやすいため、わかりやすい・記憶に残りやすいのがメリットです。
TwitterのロゴもAppleのロゴもすぐに描けますよね！

2.ロゴタイプ
ロゴタイプを使用している企業は、Coca-ColaやSONY、資生堂などです。企業名主体のデザインであるため、名前をしっかり覚えてもらいやすいというメリットがあります。
資生堂の化粧品を買いたい！SONYの家電がいい！といったこだわりも、名前を覚えていないと生まれませんよね。

3.ロゴマーク
ロゴマークを使用している企業は、TOYOTAや今みなさんがご覧になっているnote、adidasなどです。上に書いた両方のメリットをいいとこどりしています。用途や場面に応じて、マークだけ・ロゴタイプだけといった使い方もできます。
パッと見ただけでも覚えてもらいやすく、かつ名前も覚えてもらいやすいです！

ロゴマークを選んだ理由

今回、ツバクラロヒト様にご提案させていただいたのは、文字とマークで構成された「ロゴマーク」です。
自分だとすぐにわかるものをご希望されていること、海外展開を考えられていること、お名前及びサブタイトルの記述をご希望されていることからご提案させていただきました。
マークなら言語の壁なく世界中の方に認識・識別してもらえますし、Vの方や個人で活動されている方は「お名前」も重要になってきます。ファンを得るためにはまずそのブランド(名前)自体を覚えてもらう必要があるからです。

コンセプト

ヒアリングの内容をもとに決定したコンセプトは、「見えるモノに興味を持ち、時代を追う」です。
活動の主軸となっているWebフロントエンドや、内容が時代に合っている(トレンドを押さえている)イメージを訴求するべきだと考え、このコンセプトに決定しました。

テイスト

ツバクラロヒト様があげられていた「スタイリッシュ」なテイストでデザインをしていくのですが、その他にもいくつかキーワードをあげてデザインの細やかな部分をイメージしていきます。
私のメモ帳に書かれていたキーワードはこんな感じです！

：キーワード：
スタイリッシュ：パキッとしたデザイン/図形を用いたフラットなデザイン
トレンドを押さえている：風/疾走感
Web：目(見る)/動き
かっこよさ：直線/角

スタイリッシュという土台に、デザインの形状や細かい部分、意識するイメージを載せていき、より細かいイメージにしていきます。

いよいよラフ制作

ここまで決めてきたものをもとに、ラフを描き起こしていきます。
普段は紙やお絵かきソフトでざっと描くことが多いのですが、今回は原型のイメージがすでに固まっているため、Illustratorを使って試行錯誤しながら制作を進めました！

試行錯誤過程のものたち

画像3

ツバクラロヒト様の目の衣装モチーフと、イニシャルの「R.T」をデザインに取り入れています。
実際にはこのほかにもいろいろとパターンを試しているのですが、かなり微々たる違いですね！
大きくデザインが変わる場合は一度制作したバージョンは残したまま制作するのですが、今回は一つのイメージを固めていくような制作をしたので、本当に「過程」という感じのものですね。

そしてできあがったものがこちら！

画像2

デザイン意図
瞳のモチーフ・イニシャル・動き・スタイリッシュという要素を組み合わせたデザインです。単色で構成し、カラーを変えて様々な場面に対応できるデザインにしています。
ミニマルな線の表現で、近年のWebデザインの傾向であるフラットな奥行き感や動きを表しました。
RとTの間の空間(マークの中心部)とそれを囲うようにしている円は瞳を表しており、円に動きを与えて瞳孔が開いている様子(=興味を持っている)を表現しています。
課題であった文字部分の読みづらさは、現行のようなかっこよさとイメージに近いかつ可読性が高い書体をこちらでご提案しました。

ツバクラロヒト様には大変気に入っていただき、嬉しい言葉をたくさんいただきました！

まとめ

以上がVtuberツバクラロヒト様のロゴデザイン過程です！
ロゴデザイン自体の説明をはさみながらお話させていただいたので、どんな風にロゴがデザインされているのか、何を考えてデザインをしているのかといった部分も伝わっていると嬉しいです！
とってもボリューミーな内容になりましたが、最後までお読みいただきありがとうございました！

今回デザインさせていただいたツバクラロヒト様

▼チャンネル登録、フォローはこちらから▼


🦕お仕事たくさん募集中🦕

デザインやってるバーチャルなギャルのクリエイター、Elsel(えるせる)です！Twitterでは絵を載せたり作字を載せたり楽しいお話をしています！
TwitterのDMや以下のサービスからロゴのご依頼をたくさん募集中！まずはお見積もりから、お気軽にご相談ください！

▶制作実績

▶Twitter

▶ご依頼受付場所





つょつょギャルになるためにデザイン・ クリエイティブ関連のお勉強や環境構築に充てさせてもらいます……😭😭