Xemono.inc

東方我楽多叢誌リニューアル

リニューアル日 : 2021年6月14日カテゴリ : ウェブメディア+CMS Xemono社 ディレクション : とりいめぐみデザイン : とりいめぐみ、庭石コーディング : あまみや 社外関係者 メディア運営 : 株式会社ワイソーシリアスイラスト : shihou

ウェブメディア「東方我楽多叢誌」創刊から一年。

創刊にあたり、弊社は同ウェブメディアのプラットフォーム作成を担当しておりました。今回、創刊一周年を迎えた東方我楽多叢誌の編集部様より、ウェブサイトトップページのデザインリニューアルを請け負いました。

編集部様からのご依頼は、トップページを現代風のデザインに一新すること。

すばらしいイラストが引き立つようにしつつ、いにしえのインターネットへのリスペクトも忘れずに。「東方Project」キャラクターのイラストが目に鮮やかな、華やかなウェブサイトにしました。

デザイン

デザイン制作にあたり、まずは目を引くウェブサイトの特徴を分析しました。

例えば、見る者の注意を引くために、ページトップでは記事の紹介が横にスライドするようにしています。

少し冒険もしました。いにしえのインターネットで使われ、当時は目がチカチカすると忌み嫌われていたマーキー（文字が流れる処理）を、今あえて取り入れました。ふるいものとあたらしいものの融合を目指しています。

「東方Project」のウェブメディアだからこそできることを意識しています。「東方Project」のファンたちが愛するキャラクターのイラストを大写しにし、キャラクター同士の物語を感じさせる演出をこらしています。

絵師の shihou さんにキービジュアルを描いてもらうにあたって、サイト内のイラストの配置を設計しました。

縦にスクロールして見るウェブページの構造を活用し、スクロールするにつれて物語が展開するようにしてあります。

絵があると、人の目線は動きます。目線があっちこっちに行くと、人は楽しくなってきます。イラスト配置場所を工夫し、自然で楽しい目線の動きになるよう狙いました。

キャラクターたちには、各々の物語があります。キャラクター同士の関係を考慮して配置の順番を決め、サイト内に物語性・連続性が生まれるようにしました。

たとえば、射命丸文と姫海棠はたてはライバルです。

文の羽根が、はたてのほうに散っているようにすることで、ふたりのあいだにつながりを持たせました。

このように、対になるキャラ同士で、一方が他方を意識しているのが分かるようにしてあります。

作業は、配置のラフを弊社で作成し、編集部様と shihou さんに見てもらうことで進めました。 shihou さんが描いて下さったキービジュアルがすばらしかったので、キービジュアル完成後に、絵のよさを最大限引き出すために配置や色の修正を行いました。

コーディングに際して、エンジニアは、デザイナーが描いたものをそのままパソコンの画面上に再現することを目指しました。

（「マーキー、まじでやるんですか」「はい！　やります！」という会話が、エンジニアとデザイナーのあいだで交わされました。）

キャラクターが魅力的に見えるようにレイアウト、各画面サイズなどの調整を丁寧に行いました。

また、リニューアル前にサイトに備わっていた機能を、後方互換性を保ってリニューアル後にも使えるよう、工夫することもしました。そのほか、ページ遷移を速くし、ウェブサイト編集画面も使いやすいよう改修しました。

キャラクター同士の物語を感じさせるなど、「東方Project」専門ウェブメディアならではの表現を心がけつつ、華やかで動作も速いウェブメディアに仕上がっています。