みなさまこんにちは！

先日4月8日にDLsiteを運営する株式会社エイシスから、音声コンテンツ×コミックのサービス「DLsite comipo」がリリースされました！

PRTIMES様にも掲載させていただきましたので詳細は下記をご覧いただければと思います。

リリースと同時にオーディオブックの取り扱いも開始し、まずは人気ラノベ作品のオーディオブックから取り扱いがスタートいたしました。

学生時代、ラノベが図書室にあったのですが、ラノベでオタクの道が開かれていく人も多かったのではないかという印象があります。なんとなく○リーポッ○ーを読んで中学でラノベにハマるという90年代後半生まれのオタクの登竜門的な存在です。

そんな、普段オタク向けの文化に触れない人までも虜にしていけるようなサービスを目指して「DLsite comipo」をデザイン側でも盛り上げていきます！

新サービス「DLsite comipo」リリースに向けたデザインのあれこれ
vol.01 ロゴ制作のプロセス
vol.02 トップページのUI　before/after 編
vol.03 検索結果ページのUI　before/after 編

「新サービス"DLsite comipo"リリースに向けたデザインのあれこれ」は、デザイン別に分けて紹介予定です！

本日はDLsite comipoのロゴができるまでのプロセスについてお話ししようと思います。

DLsite 「comipo」について

「DLsite comipo」の名前の由来は「コミック（comic）」と「音(pop)」という意味が含まれています。名前の由来通りポップなイメージで作成していますが、この名前とロゴに確定するまで長い道のりがありました。

フェーズ1. とにかく方向性を見定めるパターン出し

DLsite comipoは「comipo」という名前が定まるまでいくつか名称の候補があった上で確定しました。

・DLsiteから全年齢向けコミックサービスを開始するので新しいロゴを考えたい
・名称は決まっておらず、DL BOOK JOY / DL BOOK / DL BOOK+ / DL COMIC / DL COMIC POP etc... ポップな名称にしたい
・ライト層をターゲットにしたい(普段一般少年誌などを購読する方)
・明るい感じにしたい

はじめの用件はこのような感じでザックリとしています。

まずは「DLsite」ロゴを元にした違和感のない文字の形を作り、各名称に当て嵌めてみました。

DLsiteのロゴはグリッドから直線と正円を組み合わせたタイポグラフィーになっているので、同じようにマス目と角度などを揃えながらバランスを調整して作成しました。

ここから、「ポップな感じにしたい」「明るい感じにしたい」「若者向けにしたい」という意向もふまえてちょっと踏み込んだデザインも考えてみます。

・斜めに切れ込みを入れたり
・部分的にオブジェクトを伸ばしたり
・色を変えたり
　など、アレンジを加えていく
・ひらがな/カタカナなどの表現の仕方も考えてみる

などなど、オブジェクト先端のアールは丸めにしたり様々なパターンでアレンジを加えつつ、マス目に沿って配列のバランスを見ながら形を一文字ずつ作成していきます！

フェーズ2.名称別に 「シンプルな提案」と「踏み込んだ提案」で分ける

1.DL COMIC POP
2.DL COMIPO
3.DL BOOK+
4.COMIC POP
5.COMIPO
6.BOOK+

こちらの名称で展開します。

▶︎ シンプルな提案の場合

1.DL COMIC POP

3.DL BOOK+

というように、1-6つの名称別に分けます。

ウェイト別（細字・太字）
カーニング別（字間の違い）
レターケース別（大文字・小文字）
で並べます。

確認いただく相手はデザイナーの方ではない（最初のレビューではデザインチームの方に見てもらいますが決定判断は上層部や関係者各位の方）ので、「シンプルなものでもウェイトやレターケースが違うだけでこんなに印象が違うんですよ！！！！」という違いがわかりやすいように作成しました。

例えば、見比べてみると文字が太いと力強い印象を受けます。

一方、細いと繊細な感じはしますが新しい印象/綺麗/今っぽい感じもします。小文字より大文字の方が力強い印象もありますが、小文字＋太文字、大文字＋細文字、などのように「印象の力強さの組み合わせ」も見比べてるとバランスが分かりやすくなります。

名称6パターンと各ウェイトやレターケース別の12パターンが必要なので用意は大変ですが、やっておくと会議などで意見を出し合う際に比べやすいのでオススメです！

▶︎踏み込んだ提案の場合

斜めに切れ込みを入れたり、部分的にオブジェクトを伸ばしたり、色を変えたり、ひらがな/カタカナなどの表現の仕方も考えてみたり…
シンプルな提案からアレンジを加えていったもので「これだ！」と思った提案を並べます。

1.DL COMIC POP (アレンジver)

3.DL COMIC POP (アレンジver)

こちらも各名称A~Fの6パターンとデザイン別8-9パターンで揃えて用意します。

なぜシンプルな提案と踏み込んだ提案を分けるのかというと、こうして見比べたときに「思い切ったロゴにすると他社と差別化しやすい・形によっては今っぽさがある・個性が出る！！」ということがわかりやすくなるからです。

フェーズ3. 絞り込まれた案でロゴをブラッシュアップ

phase2でシンプルverとアレンジverで提案した結果「comipo」名称の太字に決定しました。

もう少しカラーをポップな感じにしたいというご意見をいただいたので、カラーの提案を追加で行うことにしました。また、ゴシックか丸ゴシックかは確定していないのでどちらも含めて作成します！

カラーのイメージは「ターゲットの性別は男女どちらも」ということと「若い人向けに親しみやすいイメージにしたい」ということだったので、性別に左右されないカラーと親しみやすさをイメージして青・黄・ピンクで作成しました。

最終的に上記の中からこちらのロゴが選ばれたのですが、カラーの方向性はもう少し練りたいとのことで関係者各位で相談しながらカラーは後ほど確定という流れになりました。

フェーズ4.FIXデザイン

FIXしたロゴデザインはこちら！

関係者各位の方の中でカラーの方を再検討していただき、最終的にこちらのデザインになりました！

※WEBアップロード時にカラーが異なるため色味に少々差異を感じる場合がございます。ご了承くださいませ。

形の微調整

細かい部分になりますが、角のRはオブジェクトにラウンドをつけて作成していたのでパスをきちんと正円に作り直すなど細かい部分の調整を行いました。
（Illustratorではオブジェクトを作成するとパスの端に◎が出るので、そこを調整するとRがつくようになっています:上記画像参照)

カラーの変更

「コミック（comic）」と「音(pop)」という組み合わせの2つの要素を2色で構成し、業界におけるミックス感も出せるカラー構成に変更になりました。

カラーイメージは改めて「青・黄・ピンク」ではなく「オレンジ・緑」に変更になりましたがこの2色への展開になった経緯としては、
3色ではなく(comic/popの)それぞれを2色で表現した方がユーザーにとってもより伝わりやすくなるのではないか？という点と、
ポップなカラーリングで様々なユーザーに対し高感度の持てるような配色（ワクワク感・興味・楽しさ・面白さ・安心感を持てる色）を検討した結果、ポジティブで親しみやすさを持ってもらえるような「グリーン」「オレンジ」を採用することになりました！

こうして見比べるとcomic/popで分けた配色にすることにより、名称の認識がしやすく、バラついた印象の配色からまとまりのある印象に変わったのがわかるかと思います。

まとめ

今回はDLsite comipoのロゴ作成についてご紹介させていただきました。

最終的に色でガラッと印象が変わりましたが、例えばバナーなどでロゴを使用した際にカラーは重要だというのがわかります！

例えば、右のロゴの色味だと他の要素が交わった際に主張が強くバラついた印象を受けませんか？

ロゴを使用するシーンを考えたときに、かなりシンプルなデザインの広告だと主張が強すぎて宣伝したい内容が負けてしまう可能性があります。
一方オレンジ・緑だとまとまった印象がありますしどんなデザインにも割と当てはまるのではないかと思います。

ロゴ作成までのプロセスはとても長く大変ですが、いかに案をたくさん出してその中で詰めて行けられるかが重要になってきます。
今回紹介したようにウェイト、字間、レターケース、カラー、微々たる調整のなかでデザインの印象は変わっていきます。初期から最終段階まで手を抜くことなく違いがわかりやすいように作成するのがサービスロゴを作る上で大事だと思います。

vol.02ではDLsite comipoリリースに伴ったWEB版UIのbefore/afterを紹介していきます！

以上、新サービス"DLsite comipo"リリースに向けたデザインのあれこれ
vol.01 -ロゴ制作のプロセス- 編でした。

エイシスでは新サービスを立ち上げています！

株式会社エイシスでは、秋葉原から世界へ二次元コンテンツを共に盛り上げていく仲間を募集しています。
「新サービスを立ち上げていきたい！」
「新しいサービスのデザインに携わりたい！」
などなど、デザインチームの仕事やエイシスの社風に興味をお持ちいただけた方がいましたら是非お気軽にご応募くださいませ。