名探偵コナン 緋色の弾丸の映画サイトを分析してみた
今日は探偵の日!探偵といえばコナンですね!
大ヒット上映中の名探偵コナンの映画「緋色の弾丸」のサイトについて分析してみました。躍動感のあるビジュアルで、コピーもかっこよく決まってます!
KNAPのデザイナー3人でトークしてます。
あくまでメンバーで個人的に分析をさせていただいておりますことをご了承ください。
デザイン分析元の基本情報
商品の特徴:劇場版『名探偵コナン 緋色の弾丸』のプロモーションサイト
#探偵の日 #名探偵コナン #映画 #ポスター #Webデザイン #アニメ
URL:https://www.conan-movie.jp/
企業名:名探偵コナン製作委員会
トップページ
随所にコナンの世界観が散りばめられたサイトになってます。
-ファーストビュー
コナンでよく使われるレンガ風の背景も使用されていて世界観を上手く出してます。臨場感のあるビジュアルで、存在感があります。また、コナンが使ってる麻酔銃やスナイパーが照準をあわせるようなデザインのあしらいを使用したりと映画の要素がたくさん散りばめられてます。
-共通箇所
ナビゲーションの色合いなどもロゴに合わせていました。サブタイトルのシルバーブレットに合わせてシルバーカラーになってます。
スマホデザイン(レスポンシブ)
スマホ版はサイトにアクセスした際にKVが動き、臨場感がPCサイトよりもありました。トップページではPCには無いニュースや予告映像が見れるようになってました。バナーの並び順なども若干変わってました。
PCとスマホでドメインも違っていて検索でも2つ出てきました。PCでスマホの方をクリックしてもPC版にリダイレクトされます。
下層ページ
-タブロイド型新聞
コナンの事件にちなんで、記事っぽい感じで展開されています。複雑な家族関係を楽しく読んでる間に理解できるようになってます。
-キーパーソン
文字が大きく左右に展開されており、勢いのあるデザインになってます。破られた写真やザラザラした背景が世界観を表現するいい味を出してました。
-総選挙
広告展開
-ティザービジュアル
赤井ファミリーが主役だと分かるティザーで、色んなストーリーが出そうなワクワク感の出るビジュアルになってます。
緋色=赤をテーマにしたかっこいいデザインですね!
-メインビジュアル2020年公開ver
内容がわかりやすいビジュアルになってます。場所や登場人物が分かりやすくなってます。歴代のポスターも同じような雰囲気で、コナン映画のポスターらしさがあります。
-メインビジュアル2021年公開ver
今のサイトのKVと同じデザイン。主要キャラクターをアップで見せているので、インパクトが2020verよりも強く、魅力的に見えます。動きや勢いがあって緊迫したドキドキ感が伝わってきて見たくなりますね。ポスター1枚で映画のワンシーンを見ているようです。
-映像
名古屋がテーマなので、名古屋弁のCMを作るなど話題作り&地元の方を巻き込む戦略もされてました。
-雑誌
ananとのコラボもやっており、Twitterやテレビで盛り上がっていました。アニメのキャラクターがバックカバーに入るなんてすごいですね!それだけ人気が高いことが伺えました。
フォント
こだわりのある文字が多く使われているため、ほとんど全てが画像フォントとなっています。ニュースページの情報の部分のみNotosansが使用されていました。こちらも画像になりますが、スポーツ新聞の部分は、実際の新聞の見出しのように、ベースとなる青と黄色を赤で囲んだ袋文字にしています。
日本語デバイスフォント:Noto Sans JP
フォントのカラー:#FFFFFF
フォントの説明
Googleフォントのひとつで、あらゆるデバイスで共通して表示できるものになります。クセがなく、誰でも使用できるフォントなので重宝されています。ウェイトも十分に用意されているのも嬉しいところです。
カラースキーム分析
映画タイトルにもある「緋色」=赤を全体的に使用しまとめてありました。メインビジュアルの炎をバックにしたコナンとも相性が良いですね。
ファビコン
OG画像
タイトル
劇場版『名探偵コナン 緋色の弾丸』
引き裂かれた運命— いま〈世界〉が動き出す!劇場版第24弾『名探偵コナン 緋色の弾丸』大ヒット上映中!
この記事を書いているメンバーが働いている会社
よかったら見に来てください!