本棚アプリ「DLsite Library」のロゴのデザインディレクションを行いました
こんにちは！デザインチームの山下です！
DLsite専用の本棚アプリ「DLsite Library」のロゴ制作において、初のデザインディレクションを担当しました📐
DLsite Libraryとは、DLsiteで購入した電子書籍を閲覧し、いつでも自分だけの本棚を楽しめる専用アプリです📚
今回はそのプロセスを備忘録として紹介したいと思います📝
理想のロゴデザインプロセス
上記が理想的なロゴデザインのプロセスですが、実際にデザインディレクションとして入ってみると、アプリ側とデザイン側のチームの意見や方向性がうまく合わないことがあり、2番と3番のプロセスを行き来したり、最初の段階に戻ることがありました。
プロジェクトの背景
先ほどご紹介したように、DLsite LibraryはDLsiteで購入した電子書籍作品を閲覧するための専用アプリです。
ユーザーが「自分だけの本棚」を作り作品を楽しむことを目的に、シンプルで洗練されたデザインが求められました。
初期案
まずは以下のデザインを作成し、アプリ側のメンバー間で方向性を確認しました。
「DLsite Library」の方向性をビジュアルに落とし込む際、アプリの特長やコンセプトを踏まえつつも、具体的なイメージが定まらない部分がありました。そのため、デザイナー側で「自分好みを選べる」「親しみやすさ」「DLsiteらしさ」という3つのテーマを設定し、それぞれの方向性に基づいたデザイン案を作成しました。
自分好みを選べる・ポップ・多様性
「自分だけの本棚」を作ることができるアプリの特長を、カラフルなデザインで表現しました。親しみやすさ・簡単・お手軽
幅広いユーザーに親しまれるシンプルなデザインで、「DLsiteらしさ」に配慮したカラーになっています。DLsiteのトンマナ踏襲
既存のロゴを流用して、DLsiteらしさを活かしたデザインを目指しました。
イメージ的には2番のデザインが近いというところで、こちらの方向性で進めることに決まりました。
その後、上記の2番目の案をベースに、さらに以下の3つの案を作成しました。
Slackを通じて、社内アンケートをGoogle Formにて実施し、1番目の案に多くの票が集まり、こちらをブラッシュアップしていくことに決まりました。
ブラッシュアップ - 1回目
ロゴマークにおいて重要である「サービスの独自性」や「視覚的なフック」が弱いと感じました。例えば、viviONのロゴでは「V」×「稲妻」でビビッとくるイメージを表現していることと、ピンクと紫のカラーリングにも意味を込めて作成しています。（viviONのロゴについて詳しく知りたい方はこちらの記事をどうぞ）
「サービスの独自性」と「視覚的なフック」のあるロゴマークにするためにも、コンセプトの「カスタマイズ性」や「本」「本棚」に焦点を当てて、ブレインストーミングやディスカッションを通じてアイデアを深めました。
ブラッシュアップ - 2回目
「カスタマイズ性」「本」「本棚」をどのようにして、独自性を持たせたロゴマークにするのかが次の課題です。
「本棚」と認識できるギリギリの形状や表現方法の追求と、「サービスの独自性」の表現方法の追求を行いました。
開発メンバーにもフィードバックをいただき、「本棚」であることがわかるフォルムにしたいという意向をいただきました。
DLsite Libraryを表すシンボルは「本」ではなく「本棚」とする方針を固めて、もう少し形を詰めていきました。
ブラッシュアップ - 3回目
再度ブレインストーミングを重ね、シンプルな2本の横線で棚を表現するデザインに落ち着きました。棚をシンプルに表現したことにより、ロゴ全体の洗練さが向上し、同時に「DL」の文字を本に見立てたアイデアも際立つ仕上がりとなりました。
最終調整
ディテールの詰め
最終段階では、デザイン全体の完成度を高めるため、細かいディテールの調整やカラーの再検討を行いました。
グリッドや斜線、曲線を駆使してロゴのバランスを細かく整える方法を図解でわかりやすく解説しながら進めました。全体の重心が偏らず、視覚的に洗練された形状を目指しました。
形状の一貫性と安定感を追求して、最終的なディテールは以下のようになりました。
次に、カラーの最終調整を行いました。
カラーの再検討
カラー面では、全体的に寒色系でシックすぎる印象がサービスのイメージと少し離れていたため、明度を上げて、遊び心のある引き立つポイントカラーを取り入れた案で再検討することになりました。
結果、初期案にあったポップで楽しい印象のあるカラーを取り入れることになりました。
棚部分と本部分の色が近く、遠目で見たときの視認性が低いという課題は、棚部分の色をグレーに変更したことによりコントラストが明確になり、ロゴ全体の見やすさが向上しました。
このようにして完成したDLsite Libraryのロゴは、シンプルでありながらもポップで、アプリの「カスタマイズ性」と「独自性」を感じられるデザインとなりました。
ロゴ運用においては、ライトモード・ダークモード用のカラー設定や、ガイドラインの作成、アイソレーションの定義（適切な余白設定）を行い、視認性や誤用を防ぐ仕組みを整えました📝
最後に
ロゴデザインは単なるビジュアルの作成ではなく、サービスの本質を表現し、その魅力をユーザーに伝える重要な役割を持っています。
デザインディレクションの過程で、異なる要件や要望をうまく調整したり、方向性をすり合わせて最適な結果を作り出すのは難しかったですが、調整力を鍛えることができとても良い経験になりました。成長を実感できる大きな一歩となったと思います！
この経験を活かして、今後もより多くのユーザーの心に響くデザインを追求していきたいです！
viviONではデザイナーを募集しています
株式会社viviONでは、秋葉原から世界へ二次元コンテンツを共に盛り上げていく仲間を募集しています。
「新サービスを立ち上げていきたい！」「新しいサービスのデザインに携わりたい！」などデザインチームの仕事やviviONの社風に興味をお持ちいただけましたら是非お気軽にご応募くださいませ。
今後とも株式会社viviONを何卒よろしくお願いいたします。