マンガアプリ「マガポケ」10周年記念特設サイト

Creative Direction

盛りだくさんのコンテンツと勢いのあるデザインで、10周年のお祝いと未来のマガポケを応援

講談社さまが運営するマンガアプリ「マガポケ」編集部の皆さんから直接お問い合わせをいただき、このプロジェクトが始動しました。10周年のお祝いコメントやダービー、プレゼント、マガポケチーフからのコメントなどなど盛りだくさんの特設サイトになりました。

neccoではキービジュアルのキャラクターのポージングや服装などの提案・企画からお手伝いさせていただき、良いデザイン、ウェブサイトになるよう、編集部のみなさんと一緒にしっかりと時間をかけて調査、制作などを進めていきました。

著名な作品のキャラクターのポージング制作やキャラクターが揃った集合絵などは初めての挑戦でした。全員集まった時の各キャラクターのサイズ感や配置、お祝い感や未来を予見するような勢いなどが、キービジュアルの色やあしらい、コピーなどのデザインと合致するように調整を重ねていきました。

キービジュアルのみならず、オープニングの動画やページ中央セクションにあるヒストリー動画なども、編集部のみなさんと協力しながら素材整理や動画ストーリーを構築し制作しています。

15、20周年とマガポケがこれからも続くよう、この特設サイトのデザインや動画、サイトが少しでも支援となれば嬉しいです。

Graphic Design / Web Design

10周年もこれからも、攻めの姿勢で少年漫画の最前線を走り続けるマガポケの節目を彩るデザイン

お祝いコスチュームをまとった描き下ろしキャラクターが画面を割って全面に飛び出すような演出と力強いタイポグラフィを組み合わせ、少年マンガの最前線を走り続け、さらに10周年の次に進んでいくマガポケの勢いが伝わるデザインを目指しました。


王道からアウトローまで攻めの姿勢を崩さず幅広いジャンルの作品を生み出し続けてきたマガポケ。記念すべき節目を彩る様々なコンテンツを楽しんでもらえるよう、セクション毎に異なる表現を取り入れています。
浮遊感と奥行きのあるカラフルな破片、手触り感のある漫画のモチーフを組み合わせ、マガポケらしいお祝いの空気を随所から感じられる没入感を持たせました。

お祝いコメントやサイト全体に散りばめた破片モチーフと多種多様な作品を連動させ、それぞれがマガポケの歴史を形作る大事なピースに見立てています。
フッターは動くトレーディングカードのような仕掛けになっているので、魅力的な描き下ろしキャラクターを単体でもじっくり楽しんでいただけたら嬉しいです。

Motion Design / Opening Movie / History Movie

マガポケの勢いを表現するアニメーション

オープニングは、10年間の歴史を振り返りながら、その先へと進んでいく様子を表現しています。
キャラクターの集合絵に切り替わるタイミングでガラスが割れるような表現は、イメージ共有のため実装前にAfter Effectsでアニメーションを作成しました。
ヒストリームービーは、過去10年の作品をテンポよく振り返られるよう、リズミカルなアニメーションに仕上げています。

また、タイトルのテキストなどにグランジ感のある質感やアニメーションを加えることで、ラフでエネルギッシュな雰囲気をプラスしています。
勢いを表現するため全体を通しダイナミックでスピード感のあるアニメーションを目指しました。

Web Development

Astro×Tailwind CSSをベースに、GSAP・Three.jsで空間を感じる演出をプラス

フロントエンドの構成には、Astroを、CSSフレームワークにはTailwind CSSを採用。

サイトのオープニングでは、動画からスムーズに繋がるガラスが飛び散るような演出を実装。これにはThree.jsを使用し、GSAPを組み合わせることで、インタラクティブかつ立体感のあるアニメーションを表現しています。

飛び散った破片にはパララックス効果を加えることで、ユーザーに「奥行き」や「没入感」を感じてもらえるよう工夫しました。細部に動きを持たせることで、静的なコンテンツに動的な魅力を加えています。

Client Voice

10周年に相応しい、ワクワクするサイトが完成しました

マガポケ10周年を盛り上げるためのウェブサイト作りで、neccoさんにご協力いただきました。

毎回の打ち合わせでは、弊社からの要望に応えていただくだけでなく、プラスアルファのご提案を積極的にいただけたのがとても印象的でした。（ヒストリー動画やページ下部のカードデザインも、neccoさんからご提案いただいた素晴らしいアイディアです！）

そのお陰で10周年に相応しい、遊び心に溢れたワクワクするページとなりました！リリース直前に発生したシステム上のトラブルにも迅速にご対応いただき、非常に助かりました。この度は本当にありがとうございました！

株式会社講談社
週刊少年マガジン編集部
土方 遼太郎