【★デザイン】本業UI/UXデザイナーだけどVTuberデザインブックの紙面デザインに挑んだお話
この記事は「VTuberとデザイン Advent Calendar 2022」11日目の記事になります。
こんにちは、蓬莱軒のクリエイティブ関係担当のまー博士です。今回は今年参加させていただいたプロジェクト『VTuberデザインブック』に関するデザインの話をしていきたいと思います。
ことのはじまりと本職について
ある日、プロジェクト発起人の小栗さえさんからDMでお誘いいただきました。VTuberの活動に欠かせないサムネや各種画像制作のなかでみんなが悩むデザイン、それを底上げするためのデザインサンプルや知恵袋、素材などを集めた資料集『VTuberデザインブック』を作りたい！VTuber向けツールや素材を作ってたりする蓬莱軒としても何かお手伝いできたら嬉しいし、なにより弱小極まりないVTuberグループにお声がけいただいたのが嬉しくて二つ返事で参加させていただきました。
僕の本職はUI/UXデザイナーというもので、Webサイト・Webサービス・アプリに関する見た目だけでなく、使いやすさ・わかりやすさ・楽しさ・気持ちよさといった利用者とコンテンツの接点をデザインするお仕事です。
印刷に関するノウハウで言うと、名刺や広告、展示会のパネルや印刷物あたりを取り扱ってた程度のものでした。
結果から言うとチーフデザイナーという役割で全体のデザイン統括をすることになったんですが、つよつよ参加デザイナーさんたちに囲まれてそういう話になったのは単純に皆さんより時間が取れたという点に尽きます。できることをできる限りお手伝いしようと思っていたのと、弱小ゆる活Vにつき時間が割と取れたこともあり表紙や紙面デザインの募集にばしばし提案してたら拾っていただいた形です。印刷方面の不足したノウハウについては本当にみなさんに助けていただきました。
そんな経緯で、今回はVTuberデザインブックで練り上げたデザインについて普段あまり気にされないような基盤のデザインやレイアウトを考える部分をメインに深掘りしていきますのでよかったらお付き合いください。
VTuberデザインブックの紙面デザイン
いただいた大役、デザインを生業としているものとして半端なことはできません。考えうる最高の仕事をする以外ないでしょう。
では今回僕が全体の紙面デザインを考える上でポイントとなるものはなにか、以下の３つだと思います。
コンテンツ自体がデザインだということ
多数の参加デザイナーによる共同制作の想定
僕なりに上乗せできること
ここからはそれらを踏まえてVTuberデザインブックで実際に考えて構築したデザインとレイアウトのお話です。
デザインの大洪水と調和
前述の通り、VTuberデザインブックの収録コンテンツ一つひとつが『デザイン』そのものです。それらはVTuber一人ひとりのアイデンティティ・計画・思想を極限まで編み込み計算され練り上げられた結晶体です。人によっては「それぞれのデザインを邪魔しないように余計なことはしません」という作り方もあるかもしれませんが、ここは百花繚乱のVTuber界。自重しない生命力溢れるデザインが鬩ぎ合う大洪水を、活かせ・調和させろ・輝かせろ、これがVTuberデザインブックでやるべきデザインだと決めました。
その考えに至ったのは、手始めにロゴデザインを集めたページのデザインに手をつけた時でした。白いアートボードにロゴを並べてみると、とたんにロゴ同士がバチバチにぶつかり合って色や明暗のコントラストでなんか目がチカチカするし、そのせいなのか個々のカラーがすごく認知しにく、このままページをめくっていくの疲れるしなんか情報入ってこないなって感じました。
試行錯誤のすえ辿り着いたのは、『ロゴの中心色を薄めてロゴの後ろに敷く』というシンプルなアプローチでした。
めちゃくちゃ小さなことですが、以下の効果を実感しました。
ロゴそれぞれのテリトリーがブロック分けできて見やすくなる
ロゴが他のロゴの色や印象に干渉しなくなる
ぱっと見でロゴの色の概要がザックリ掴め色が認知しやすくなる
広い視野で見た時に『虹色』『カラフル』といった❝全❞としての印象が現れた＝調和した
レイアウトなど基礎的なことではないアプローチで調和がとれたということから『VTuberデザインブックらしさ』としてのひとつ形になった気がしたので、この方向で全体的にまとめて行こうと決めたのでした。
UXと秩序
だいたいどういったノリで制作していくかが定まりましたが、もう一つの重要な要素であるレイアウトについてどう詰めていくか。本来デザイン職の中でも印刷側の人間でないので本に関する制作ノウハウなんかはごく一般的な水準です。なので道は踏み外さないように参加デザイナーさんにご意見いただきながら、僕だからできることを積んでいきたいと考えてました。要するにUI/UXの人間として『読みやすさ』『わかりやすさ』『楽しさ』『気持ちよさ』のような考え方を落とし込みたいということです。
最終的に構築できたのは以下のような体系です。
全体を通して一貫したグリッドシステムで構成してページを進めても同じリズムで読めるようにすることで読みやすく疲れにくくなるように
余白を多めにとり『黄金比』を取り入れることで人間が自然と美しい・気持ちいいと感じるように
前述の『中心色を薄めて敷き詰める』アプローチによって目を疲れにくくコンテンツ同士の区分けをわかりやすく
これで全体的な枠組みの基盤が整いました。
ちなみに今回のVTuberデザインブックは『無線綴じ』という製本方法です。雑誌のような中央をホチキスで綴じる『中綴じ』に比べて本が平らに開きづらいので、中央の綴じ部分付近（印刷用語でノドと呼ぶエリア）は巻き込まれて想定より狭くなります。この点については考慮して中央には広めな余白を置いてますが、きっと出来上がるとそこが狭くなりちょうど左右ページのコンテンツがいい感じに地続きになるだろうと考えてました。ここは実際出来上がってみると期待通りでホッとしましたねぇ。
また多数のデザイナーによる共同作業も前提としてあるため、どういったフォントをどのように使用するかという定義や、各自が担当する自身のVTuber向け素材紹介ページのレイアウトテンプレートも用意することで、最終的に全体を通してブレのない一貫したものにできたと思います。テンプレートをメンバーに渡して帰ってきた素材ページが全て意図したことを汲んで完璧に作ってくださってたのを見てさすがつよつよデザイナー陣と感動したもんです。
ちなみにこの他にも参加メンバーによるVTuberのデザインや活動に関する知恵袋コンテンツがありますが、参加メンバーのモンブランさんがいち早く執筆したうえで基盤デザインを元にレイアウトテンプレートを組んで他メンバーに配布してくださいました。ほんと素晴らしくて感動したし、つくづくデザイナーという職人は他者の意図を汲みあげて足取り合わせて効率的に問題解決していく能力が高くて、もしなにか企画するときは絶対デザイナーを仲間にした方がいいと思いましたねぇ。
というところで長くなってしまいましたがVTuberデザインブックの基盤デザインに関するお話でした。こういったことの積み重ねでVTuberデザインブックは完成した次第です。上記のような僕の担当した部分はごく一部で、企画からクラファン、制作から販売など膨大なタスクをこなしてやりきった企画運営チームと参加メンバーにはマジリスでしかないです。
そんなVTuberデザインブック、発売からあっという間に書籍版が完売しましたが、第二版の販売が始まっています。電子版もありますので、まだお手にとられていないVTuberさんや界隈デザイナーさんはぜひ覗いてみていただけると嬉しいです。
それではまた🖐