シリーズ累計「110万いいね❤超え！」で大反響の”ギャップのある男の子たち”がボイスドラマ化🎤 公式サイト制作の”裏話”

先月1/16に中途入社しました、新人Webデザイナーの白井と申します！
前職でもWebデザインを手掛けており、主に制作受託案件を中心に従事しておりましたが「自分の好きなコンテンツを作ってみたい」「もっとデザインスキルを伸ばしたい」という想いでviviONに加入いたしました！

本制作は私が入社して初めてアサインされた案件になります。
緊張しながらの制作でしたが、自分の好きなテイストだった為非常に楽しく作成させていただけました！
制作する上でのこだわりや工夫など、詳細に記載しましたのでぜひ閲覧いただけますと嬉しいです💖

💻LPデザインの紹介

漫画家の「卯月ココ」先生が"X"で掲載し、大反響を呼んだギャップのある男の子たち。今回は当社が企画制作によりボイスドラマ化が決定したので公式サイトを作成いたしました！

❤️ 卯月ココ先生 ❤️
『こいで、こがれて』（「デザート」）でデビュー。
代表作に『ほてりほてってファーストキス』など。
現在講談社「デザート」にて『恋せよまやかし天使ども』を連載中。

💡デザインこだわった点

1️⃣ 配色

ポップで明るい印象に直結する要素の為、配色には気を遣いました。
キャラクターごとにカラーが設定されていたので、その3色を基準にかわいい雰囲気の配色にしました。

最終的にはこのように、メイン三色を基準としたディープカラー+ペールカラー と作って背景や文字色に使用しました。画面がガチャガチャしないように、ピンクカラーを多めに紫や黄色はキャラ示す際にのみ使用する等の工夫をしました！

今回は淡い色味が多かったため、アクセシビリティを担保しながら甘いテイストに仕上げるのが難しかったです。

2️⃣ 素材作成

雰囲気に合わせた見出しや背景をillustratorで作成し、ワンランク上のデザインを目指しました！

モリサワにかわいいフォント(Harlow Solid Italic)があったので、
加工して各見出しにwebpで配置してます。

キャラクターがルームシェアしている設定だったので、
シェアハウス感が出るような背景を作成しました！

3️⃣ 「ギャップ」の見せ方

キャラクターの最大の魅力であるギャップ部分の見せ方は時間をかけて考えました。
ただ画像を置くだけでは注目してもらえない…と思い、モーダル内にボタンを押すことでギャップのある姿を見れるギミックを実装しました。

右下のボタンをクリックすると…

ギャップのある姿が見れます♡

🎨まとめ

1. 配色
2. • キャラクターのイメージカラー三色を基準とした「ディープカラー+ペールカラー」で配色しています。淡い色合いのためコントラスト比には細心の注意をはらいました。
2. 素材作成
3. • 作風やキャラクターの世界観に合わせて、見出しや背景はゼロから作成してみました。ルームシェアをしている世界観をだすためにキャラを横並びにしたのはこだわりポイントです！
3. ギャップの見せ方
4. • キャラクターがもった隠れた一面を、ユーザーがアクションを起こすことで「発見し楽しめる作り」を心がけました。

📣卯月ココ先生「ギャップ日和」リリース記念！「恋せよまやかし天使ども」キャンペーン実施中！！

全国アニメイト、アニメイトオンラインショップにて対象商品をご購入いただくと、無料でギャップ日和の「ノベルティ缶バッジ（こちらも当社のDTPデザイナーが作成♪）」がついてきます！

なくなり次第終了となりますのでお早めにどうぞ💨

追記：弊社メンバーの情報によると、ご近所のアニメイトでは、フェアスタートの翌日には完売したそうです。他店舗のアニメイトに電話してみましたが、「在庫なかった…😿」という声も。（さすが、卯月ココ先生です👏）

🎨viviONでは中途採用でも仲間を募集しています！

ユーザーとクリエイターが楽しみながら、幸せに生きていける社会にする。株式会社viviONでは、一緒に働く仲間を現在募集しています。少しでも業務内容やカルチャーに興味を持っていただけましたら、是非お気軽にご応募くださいませ。