魔法属性別ライトノベルフェアLPのつくりかた

こんにちは。デザイナーの吉田です。
前回は11周年キャンペーンLPのつくりかたについてご紹介しました。

今回は前回に引き続き、LPのつくりかた第2弾です。
ご紹介するLPはこちら。

今年2月に行われたいた、「魔法属性別ライトノベルフェア」についてご紹介します。
キャンペーンは終了していますが、ページは閲覧可能ですので、よろしければ見てみてくださいね。

テーマ決め

今回は具体的にこういうイメージがいいと打ち合わせの時点で決まっており、それを元にこちらで補足して固めていきました。
どういうイメージかというと

  • (魔法属性という良い意味で)やや厨二病っぽい
  • 洗練
  • 神秘的
  • 格好良い

この4点です。

厨二病で思い浮かぶ物は何でしょうか。
私は、剣や包帯、眼帯...確かに魔法陣もあるなぁと考えてはいましたが、それ以外何も思い浮かばず、「やや厨二病っぽい」に頭を悩ませるのでした…。

厨二病とは?
思春期頃によく見られる背伸びしがちな言動や行動、特別な世界観を妄想することなどを指します。
なお、実際の医学的な病名ではありません。

参考調査

タイトルにもある通り、魔法がメインになってくる企画だったのと、「やや厨二病っぽい」を出すためにはどうすればと考え、ゲームのサイトやUI、ロゴなどを探しこれは近いかも…と思うものを片っ端から手元に残していきました。

デザイン制作

制作にあたり、「やや厨二病っぽい」に最初はかなり引っ張られていたのですが、一旦頭をリセットして魔法らしさが出させるLPにしよう!と考え直しました。最終的にイメージ通りの物を作ることができました。

まず初めにメインビジュアルの「魔法属性別ライトノベルフェア」のタイトルのデザインを制作しました。魔法なので、いくつか明朝体を見比べ、細いイメージでもぴったりかなと考えたのですが、太めのと比べるとやや印象が薄くなってしまいました。ただ最初の時点では細めなイメージも捨てきれず、比較的使いやすいリュウミン朝を使用することにしました。

魔法陣は依頼の時点でこういう風にしたいと要望があったので、それに合わせて制作しました。今回は装飾ではなく、メニューとして操作する部分だったので、魔法をイメージできるように、それぞれの属性のところにカーソルを合わせると光彩がかかるようにしました。

ホバーイメージ

またスマホの時は魔法陣だとタップしにくくなるため、ボタンに変更しています。ただ、魔法陣が今回の企画で見せたい部分だったので、メインビジュアルの背景に不透明度を下げて大きく入れました。

スマホメインビジュアル

ボタンやタイトル周りの装飾も雰囲気に合わせて素材を選定しました。ボタンの形は、ボタンだけどしっかり馴染むように作れたので、すごくお気に入りです。

一覧へのボタン

属性タイトル

対象作品を今回のテーマに沿って魔法書のように見せたかったので、背景はアンティークのパターンを使用し、洋館の壁紙のようにしました。またコーディングの最後に作品それぞれがふわっと浮き上がるような動きをつけて、より魔法らしさが出せたと思っています。

実際のページはこちら。

※キャンペーンは終了しています。

そして全体のデザインはこちら!魔法属性が多かったので長めのページになりました。

最後に

実は今回のLPはすごく悩んだ時間が多く、デザインもいいところまでできているのに、途中からどんどん煮詰まってきてしまって、頭の切り替えが大変だったことを覚えています。
制作するにあたって調べていた、たくさんの参考サイトやデザインが助け舟となり作り切ることができました。
またありがたいことに、前回に引き続き今回も社内で好評でした。私個人としても勉強になりましたし、素敵な企画に携われて大変光栄でした。

BOOK☆WALKERストアでは日々たくさんのキャンペーンを行っています。
ぜひチェックしてみてくださいね~!