多くのビジネスにとって、Facebookは顧客とつながるための主要ツールです。 また、それが唯一のツールである企業もあります。 そのため、あなたのビジネスのFacebookページの外観が、人々があなたのビジネスにどれだけ真剣に取り組んでいるかに大きな影響を与えることは、驚くことではありません。 ちょっとした手間と配慮が、将来的に大きなお金を生むことになるのです。 この記事では、完璧なFacebookのカバー画像を毎回作成するために使用するトリックのいくつかを共有します。
まず、ビジネスページのFacebookのカバー画像を作成するとき、メッセージを伝えるためにロゴ、グラフィック、または文字を含めることができます。 Facebook の iOS または Android アプリを使用してカバー画像を作成することもできますが、デスクトップ コンピュータやラップトップを使用する方が簡単です。
背景
Plates は架空のレストランです。 他のローカル企業と同様に、彼らは Facebook のページを持っています。 そして、Facebook ページを持つすべてのビジネスと同様に、顧客はデスクトップ、ラップトップ、および携帯電話を使用してそのページを訪問します。 壊れてますね。
Facebook cover photo guidelines
Facebook は、自分のページにカバー画像を追加したいユーザーに対して、ガイドラインを提供しています。
ページのカバー写真：
パソコンでは横820ピクセル×縦312ピクセルで表示され、スマートフォンでは横640ピクセル×縦360ピクセルで表示されます。
幅 851 ピクセル、高さ 315 ピクセル、100 キロバイト未満の sRGB JPG ファイルとして最速で読み込みます。
ガイドラインはわかりにくいかもしれません。 このガイドラインは混乱する可能性があります。Facebookのカバー写真やグラフィックを作成する作業を始める前に、知っておくべきことがあります。 ここでは、同じガイドラインを少し変えて表示しています。
- 851px width x 315px height: Recommended size for desktop
- 820px width x 312px height: display on desktop
- 640px width x 360px height: Recommended size for desktop: スマートフォンでの表示
- 400px width x 150px height: カバー画像の最小サイズ
Refining Facebook’s guidelines
Facebookの推奨する4つのうち2つだけ必要です。 この2つを満たすことで、実は副産物として4つの条件をすべて満たすことになるのです。 1586>
- 851px width x 315px height: Recommended size for desktop
- 640px width x 360px height: Display on smartphones
保持しているカバー寸法を見ると、デスクトップの高さは315px、モバイルは360pxであることがわかるでしょう。 デスクトップとモバイルで同じFacebookカバーを使用しなければならないため、絶対的な高さの最小値は360pxでなければならないことになります。 このため、必要な Facebook カバーのサイズは次のようになります。
- 851px width x 360px height: desktop and mobile の最小表示サイズ
さて、デスクトップでは高すぎ、モバイルでは広すぎる Facebook カバー サイズになっています。 これは望ましいことではありませんが、まさに望ましいことです。 少し後で、なぜそうなのかが明らかになります。
もう 1 つ、Facebookのカバー サイズを変更する必要があります。 高解像度のデスクトップおよびラップトップ画面がますます普及しています。 Facebook の画像サイズの推奨値は、すでに高解像度のモバイル ディスプレイに対応しています。 しかし、デスクトップやラップトップのディスプレイの場合はそうではありません。 Facebook のカバー画像を大型ディスプレイで鮮明に表示するには、画像サイズを 2 倍にする必要があります。
- 1,702px width x 720px height: desktop and mobile
以上で、最終的なキャンバス寸法がわかりました。
よくある落とし穴を避ける
Facebook カバーの寸法がわかったので、カバー画像の設計を開始できます。 あなたのページへの訪問者は、大きな画面（デスクトップやラップトップ）から訪問しているか、モバイル機器から訪問しているかによって、カバー画像の一部または全部を見ることになります。
大きな画面の訪問者には、カバー画像全体が表示されます。 モバイルでは、水色の部分のみが表示されます。 Facebook は側面を切り落とします。
Plates の壊れた Facebook カバー画像の再検討
以前、Plates の壊れた Facebook カバー画像をご覧いただきました。 ラップトップやデスクトップでは問題なく見えます。
Plates の Facebook ページは、モバイルではかなり違って見えます。 以下は、顧客が携帯電話で見るものです。 ロゴの大部分が欠けており、テキストも読めません。
Plates の Facebook カバー画像を、先に確認した寸法の上に置くと、何が起こったかが簡単に分かります。 Facebook は、モバイルではカバーとして画像の中央部のみを表示します。
Creating your Facebook cover template
Facebook カバー画像をデザインするには、先に提供した寸法を使用します。
- 幅 1,702 ピクセル、高さ 720 ピクセルのボックスを描画する
- 別の色を使って、幅 1,280 ピクセル、高さ 720 ピクセルの別のボックスを描く
- 小さいボックスを大きいボックスの上に中央揃えする
以下のテンプレートのようなものができていると思います。 ここでは、「三分の一の法則」を示す構図の補助として、水平線と垂直線をいくつか追加しています。 Facebookの大画面と小画面の画像は比率が異なるため、縦線は正確な位置ではありません。 太字のプラス記号の側面は、両者の違いを表しています。
Designing your Facebook Cover image
次に、好きな画像を選択し、作成した2つのボックスの上に配置しましょう。 画像はほとんど透明にして、その下のボックスが見えるようにします。 これは後で修正します。 次のように表示されるはずです。
水色の領域はデスクトップとモバイルで表示されます。 濃い青の部分はデスクトップとラップトップでのみ表示されます。 画像が思い通りに配置されたら、テキストやグラフィックを追加します。
画像から透明度を削除する。 この時点では、作成した背景ボックスは全く表示されていないはずです。
ここまでで、すべてのハードワークは完了しました。 完成した画像をFacebookにアップロードし、カバー画像として設定します。 次に、モバイル端末から自分のFacebookページにアクセスしてみてください。 このように表示されます。
You did it！
このガイドがお役に立ったことを願っています。 もしそうなら、私たちにお知らせください。 1586>
- Sketch ファイルとしてテンプレートをダウンロードする
- 1,702px x 720px の JPG としてテンプレートをダウンロードする
コメントを残す