あなたのPWAヒーロー画像を刺激する映画のポスターデザイン

公開: 2022-03-10
簡単な要約↬PWAへの訪問者の注意を引く時間があまりありません。 混雑したヒーローのイメージでその時間を無駄にしたり、さらに悪いことに、光沢のないデザインで彼らを失望させたりするのではなく、あなたが折り畳みの上にある小さなスペースで創造的になりましょう。 このための最高のインスピレーションの源の1つ? 映画のポスター。

私は先週末、ファンダンゴのウェブサイトにアクセスし、エアコン付きの映画館で数時間過ごすための言い訳を見つけたいと思っていました。 これは私がそこに着いたときに最初に私の目を引いたものです:

ファンダンゴのホームページには、人気の映画とそのポスターが掲載されたスライダーが表示されます
ファンダンゴのホームページには、人気の映画とそのポスターが表示されたスライダーが表示されます。 (画像クレジット:ファンダンゴ)(大プレビュー)

正直なところ、これらの映画のポスターのほとんどは、私が家を出る動機を与えるためにまったく何もしませんでした。 そのような印象的なカラーパレットを持っているライオンキングと、タイポグラフィでいくつかのクールなことをしているハリウッドのワンスアポンアタイムを除いて。

他の誰かがこれまでにこれを経験したことがありますか? あなたは映画を見たい気分で、次のいずれかをしています。

  • あなたが興味を持った映画のポスターを垣間見ることができますが、それが見る価値があるかどうかを疑問視するだけですか?
  • あまり考えていなかった映画のポスターを垣間見るが、計画を変更して代わりにそれを見た?

そして、ここでは映画の予告編についても話していません。 私たちは、映画を宣伝し、人々にそれを見るように誘うためにデザインされた単一のポスターが、あなたの知覚に何ができるかについて話している。

考えてみれば、PWAのヒーロー画像は、初めての訪問者と同じくらい大きな影響力を持っています。

ヒーローのイメージで印象を与えるのにほんの数秒しかありません。 訪問者にどのように感じてもらいたいですか?

「「

あなたの訪問者は、彼らが見つけようとしているものに興奮してPWAを進めていますか? それとも、最初の画像によって引き起こされた失望や混乱のために、彼らは不安を持ってそうしますか?

良い映画ポスターと悪い映画ポスターの例をいくつか見て、PWAヒーローのデザインを支援するためにどのようなレッスンを使用できるかを見てみましょう。

ジャンプした後もっと! 以下を読み続けてください↓

1.できる限りストックフォトを避ける

PWAの他の部分では、GettyやiStockなどのサイトから購入した高品質のストックフォトで十分な場合があります。 しかし、あなたのヒーローのイメージは?

特に、簡単に認識できるストックフォトを使用する場合は、これに十分注意する必要があります。 それが魅力的な写真であり、ブランドのストーリーと完全に一致しているとしても、他の誰かの画像がPWAの一番上にあると本当に思いますか?

2018年にアクアマンが発売されたとき、彼らはそれを宣伝するために一連の映画ポスターをリリースしました。 しかし、オンラインで大騒ぎを引き起こしたのはこの特定のポスターでした。

アクアマンの映画ポスターには、サメのストックフォトが含まれています
アクアマンの映画ポスターには、サメのストックフォトが含まれています。 (画像クレジット:IMDBの「アクアマン」)(大プレビュー)

基本的に、Twitterでの苦情は、ゲッティからのこのストックフォトの使用に要約されます。

Twitterユーザーはアクアマンの映画ポスターに大騒ぎしていました
Twitterユーザーはアクアマンの映画ポスターに大騒ぎしていました。 (画像クレジット:Twitter)(大プレビュー)

今、あなたはスーパーヒーロー映画について大きな批判がなされるときはいつでも議論があることを期待することができます。 キャンプがマーベル映画とDC映画に明確に分けられているので、誰かがスーパーヒーローを侮辱したときにスーパーヒーローの歯と釘を守りたくないのは難しいことです。 サメのストックフォトのせいでも。

しかし、批判に反対する人々には意味があります。 映画の本当の星が生きているサメと一緒に水域に沈むことができるようではありません。 ストックフォトやCGI以外に、ポスターデザイナーは実際にどのような選択肢を持っていましたか?

とはいえ、本当の問題は、これが巨大なスタジオ予算のある巨大な映画であり、ストックフォトを含めると、映画の他の場所で手抜きをしているのではないかと思うことだと思います。

ヒーロー画像で認識可能なストックフォトを使用すると、訪問者がその背後にあるブランドからのエンドツーエンドのプレミアムエクスペリエンスを期待している場合、同じ種類のシグナルを訪問者に送信する可能性があります。

2.ユニークにする

私と同じくらい多くの映画を見ると、映画のポスターに関しては特定の傾向に気付くはずです。 これは特に、デザイナーが独創的または創造的であることを気にしないように感じられるrom-comジャンルではそうです。

この見た目の品質の映画ポスターは、特定のジャンルのファンが見たい映画の種類を即座に特定するのに役立ちますが、別のシグナルも送信します。

ニコラス・スパークスが誰であるかわからない場合、彼は20冊以上の本の著者であり、そのほとんどが同様のプロットを持っています。

このバニティフェアの映画ポスターの編集で私のポイントを示します。

バニティフェアの記事は、ニコラススパークスの映画のさまざまな表紙を披露しています
バニティフェアの記事は、ニコラススパークスの映画のさまざまな表紙を披露しています。 (画像クレジット:バニティフェア)(大プレビュー)

これらの映画の1つについて誰かと話す場合、次のように要約できます。

「あなたは映画を知っています…最初はお互いを本当に好きではない男の子と女の子がいる映画ですが、その後彼らは狂ったように恋に落ち、離れて立つことができませんか? そうそう、最後に死ぬ人がいる。」

これは、これらのストーリーの約80%を表しています。そのため、それぞれの映画のポスターが非常に似ていることはそれほど驚くことではありません。

私が言ったように、彼らが映画ファンの非常に特定のサブセットにアピールしようとしているなら、同様にデザインされたポスターは彼らに有利に働くことができます。 ただし、PWAではそのようには機能しません。

別のブランドを直接補完するPWAを構築しているのでない限り、他の人と同じように見えるようにヒーローの画像をデザインする理由はありません。 訪問者が類似点を見つけたときにのみ混乱を引き起こします。 または、同じように見えるのは画像だけでなく、その中のサービスや製品でもあると仮定して、なぜPWAを見るのが面倒なのか疑問に思うでしょう。

PWAを群衆から目立たせたい場合は、ヒーローのイメージがユニークである必要があります。

3.1つのことにゼロイン

オールスターキャストで映画を作る際の問題の1つは、プロット内だけでなく、映画のポスターでも1人だけに焦点を合わせることができないことです。

適切な例:期待しているときに何を期待するか:

あなたが期待しているときに何を期待するかからのオールスターキャスト
あなたが期待しているときに何を期待するかからのオールスターキャスト。 (画像クレジット:IMDBの「期待しているときに何を期待するか」)(大プレビュー)

初めてこのポスターに出くわしただけでは、どこから始めたらいいのかわからない。

タイトルが真ん中にあるのは助かりますが、競合する写真は圧倒的です。 さらに、上の写真をよく見ると、それぞれの女性が個別に写真に重ねられていることがわかります。 映画の実際のショットの横に、コンパイルが不十分な写真を使用するのはなぜですか? それは非常にバラバラな体験を生み出します。

単一の焦点がどのような違いを生むことができるかを示すために、ET theExtra-Terrestrialの映画ポスターを見てみましょう。

E.T.のポスター少年とエイリアンの関係を強調しています
ETのポスターは、少年とエイリアンの関係を強調しています。 (画像クレジット:IMDBの「ETtheExtra-Terrestrial」)(大プレビュー)

この映画に素晴らしいスターのキャストがいないわけではありません。 これを設計したチームが、映画の中心に真の焦点が1つあり、それがエリオット(少年)とET(エイリアン)の関係であることを認識しただけです。

ヒーローのイメージをデザインするときは、似たようなものを探すことをお勧めします。クライアントがあなたのところに来て、すべてのサービスが等しく重要であり、PWAがすべてのことをすべての人のためにできることを実証することを望んでいる場合でも。 そのようなメッセージを画像に変換しようとすると、失敗します。 だから、あなたの焦点を見つけてください。

4.市に微妙なうなずきを与える

映画は、さまざまな設定で上映できます。 映画の種類によっては、ストーリーの中で設定がキャラクターになりそうな場合もあります。 説明させてください。

リチャード・リンクレイターは、ジュリー・デルピーとイーサン・ホークと一緒に三部作の映画を撮影しました。

最初の映画は「恋人までの距離」と呼ばれ、デルピーとホークが電車を降りてウィーンの街を歩き回ってから翌朝別れることを決めたときに行われます。

恋人までの距離の映画のポスターは、背景にウィーンが描かれています
恋人までの距離の映画のポスターは、背景にウィーンが描かれています。 (画像クレジット:IMDBの「BeforeSunrise」)(大プレビュー)

2番目の映画はビフォアサンセットと呼ばれ、パリの街の周りで行われます。

ビフォアサンセットの映画のポスターは、背景にパリを備えています
ビフォアサンセットの映画ポスターは、背景にパリが描かれています。 (画像クレジット:IMDBの「日没前」)(大プレビュー)

最終的な映画はビフォアミッドナイトと呼ばれ、ギリシャで行われます。

ビフォアミッドナイトの映画のポスターは、背景に日当たりの良いギリシャの島を備えています
ビフォアミッドナイトの映画のポスターは、背景に日当たりの良いギリシャの島が描かれています。 (画像クレジット:IMDBの「BeforeMidnight」)(大プレビュー)

これらのポスターのそれぞれで、物語の背景がデザインに大きく影響していることがわかります。 そしてそれは、地理的な環境がなければストーリーは実際には存在しないからです。

二人が話し合う映画だけではありません。 2人が新しい都市を探索するときに、お互いを知るようになります。この都市は、映画全体で視聴者が精通する3番目のキャラクターのようになります。

あなたがデザインしている会社が特定の地理的地域と強い結びつきを持っているなら、それをどうにかしてヒーローのイメージに組み込む方法を見つけることができるかどうか見てください。 実際の街並みを背景に、これほど明確である必要はありません。 しかし、地元の訪問者に「ねえ、それが私の出身です!」と思わせる特別なタッチを追加する他の方法があるかもしれません。 または「私はそこに行ったことがあります!」

5.ホワイトスペースでクリエイティブに

空白がデザインの重要な部分であることはすでにご存知でしょう。特に、PWAで大きなメッセージを伝えようとしている場合はなおさらです。 訪問者を圧倒しないように、物事をシンプルに保ちたいと思います。 しかし、それはあなたがその空白を埋める方法で創造的になることができないという意味ではありません。

たとえば、独立記念日のポスターを見てみましょう。

独立記念日のポスターは、その空白を宇宙船で埋めます
独立記念日のポスターは、その空白を宇宙船で埋めます。 (画像クレジット:IMDBの「独立記念日」)(大プレビュー)

宇宙船は恐怖感を伝えますが、それがなければこの写真の上部を占める空白をすべて埋めるのは本当に創造的な方法でもあります。

ホワイトスペースで遊ぶもう1つの楽しい例は、Scarfaceのポスターにあります。

スカーフェイスの映画ポスターデザイナーは、この空白を作成するために象徴性を使用した可能性があります
スカーフェイスの映画ポスターデザイナーは、この空白を作成するために象徴性を使用した可能性があります。 (画像クレジット:IMDBの「Scarface」)(大きなプレビュー)

一見すると、これを印象的なイメージと見なすことができます。 しかし、トニー・モンタナが麻薬カルテルの頭であり、コークスを吸い込むのが卑猥な傾向があることを知っているので、彼を消費する白はここで別の意味を持ちます。

これはあなたが持っているスペースで創造的であることがすべてであるため、あなたに厳密なガイダンスを与えるのは少し難しいです。 しかし、このルートに行きたいのであれば、写真の中でそれらを明示的に提示することなく、象徴性で遊ぶ方法を考えることをお勧めします。 影と光と空間で遊ぶことができれば、それははるかに大きな影響を与えるでしょう。

6.タイポグラフィで遊び心を持ってください

ほとんどの場合、映画のポスターのデザイナーは、タイポグラフィに関しては非常に保守的である傾向があります。 彼らはフォントに単一の色を選択し、それはほとんどの場合、大きなブロック状のサンセリフフォントです。

しかし、それを少し楽しんでみませんか? 画像に創造的な繁栄を吹き込むことができるのと同じように、2つが互いに補完し合う限り、テキストで同じことを行うのはそれほど悪い考えではありません。

この美しい例は、ジョンウィックのポスターにあります。

ジョンウィックの映画ポスターのタイポグラフィには独特のエッジがあります
ジョンウィックの映画ポスターのタイポグラフィには、独特のエッジがあります。 (画像クレジット:IMDBの「JohnWick」)(大プレビュー)

画像を一目見ただけでは、デザインの繊細さに気付かないかもしれません。 しかし、彼らはそこにいます。

手始めに、銃の銃身は文字「o」の代わりになります。 しかし、リムが残りの文字と同じ色を帯びていることに注意してください。 これは、一見しただけでうまくブレンドするのに役立ちます。

次に、文字自体がヒンジなしで表示され、中央で分割されて傾斜しています。

映画を見たことがない人にとって、これは本質的にキアヌ・リーブスのキャラクターに起こっていることです。 彼はかつて暗殺者でしたが、愛のためにそれをあきらめました。 彼の妻が亡くなり、彼女の最後の残党が彼から連れ去られたとき、彼は引き裂かれました。 彼は普通の人の人生を続けていますか? それとも彼はそれをすべてあきらめて殺人的な大暴れを続けますか?

ヒーローの画像をデザインするときに賢明なことは、画像にストーリーを伝えることだと知っていますが、テキストに微妙なタッチを加えることで、それを一段と高めることができると思います。

まとめ

では、ここで何を学びましたか? 確かに、映画のポスターとPWAのデザインには正しい方法と間違った方法があります。 しかし、それ以上に重要なことは、最初の数秒間に視聴者に伝えたいことを実際に考えてみることです。

PWAが何であるかを把握できなかったり、退屈で、独創的でなく、漠然としていて、安っぽい方法でそれを行った場合、ほとんどすぐに彼らの興味を失うことになります。

だが…

ブランドのすべてと、それを特別なものにする微妙なニュアンスを完全に捉えることができれば、より多くの訪問者に1つの画像でスクロールしてクリックするように促すことができます。

SmashingMagの推奨読書

  • プログレッシブWebアプリケーションの広範なガイド
  • PWAはネイティブモバイルアプリに取って代わりますか?
  • モバイルアプリまたはPWAでより多くのお金を稼ぐことができますか?
  • ネイティブとPWA:挑戦者ではなく、選択肢!