任意のニュースアカウントやブランドフィードをスクロールし、ほとんどの投稿は、形状を共有しています: 写真、大胆な見出し、薄いアクセントバー、日付と隅のハンドル これらは、写真カードです 彼らは言葉と画像のみが変化する固定レイアウトから構築されているため、デザインされたように見えます、それはまた、チームがそれぞれが異なるように見えずに週に数十を発行できる理由です。
このガイドでは、フィードサイズでカードを読みやすくするもの、電話でテキストサイズがどのように縮小するか、どの色がコントラストガイドラインを渡すか、カードをPNGとしてエクスポートする必要がある理由、正方形のカードを他のプラットフォームに適応させる方法、プライバシーエッジはどこにあるのかについて説明します フォトカードジェネレーター ステップバイステップの部品に使用され、以下に説明するすべての設定はツールが提供する設定です。
tl;dr: フォトカードは、テンプレートから作られたソーシャルグラフィックです: あなたの画像、固定レイアウトに配置された見出しとサポートテキスト。 Photo Card Generatorには、8 つのテンプレート (クラシック新聞、モダンボールド、ニュース速報、引用カード、ミニマリスト、機能カード、グラデーションニュースと垂直引用) 、 50 個のGoogleフォント、アクセント、背景とテキストのカラーピッカー、画像のスケールと位置のコントロール、およびオプションのロゴがあります すべてのカードは1080 x 1080 PNGとしてエクスポートし、ブラウザでレンダリングされます あなたの画像はローカルで読み取られ、アップロードされませんが、フォントはGoogleフォントから読み込まれます。
フォトカードとは?
フォトカードは、写真に重ね合わせたり隣接したりしたテキストを組み合わせた正方形または長方形のソーシャルメディア画像で、再利用可能なテンプレートからレイアウトされ、報道機関は見出しを共有するために、ブランドは発表に使用し、クリエイターは引用テンプレートはタイポグラフィ、間隔、位置を修正します; 著者はコンテンツを提供します。
その分割が全体のポイントです テンプレートはデザインの決定を一度解決します: 見出しが画像に対してどのくらいの大きさであるか、日付がどこに行くか、テキストをどのくらいのスペースで囲むか 単語を変更してもそれらの関係を破ることはできないため、同じテンプレートから作成されたカードのフィードは、1 つの一貫した出版物として読み取られます。
どのテンプレートを選択する必要がありますか?
カードが何を運ぶ必要があるかによって選択します。各テンプレートは、レイアウトで使用されているテキスト フィールドのみを公開するため、切り替えるときにコンテンツ パネルが変更されます。
| テンプレート | レイアウト | テキストフィールド | に最適 |
|---|---|---|---|
| クラシック新聞 | 大画像、下のテキスト領域 | 見出し、小見出し、日付、ドメイン | 一般的なニュースとブログ投稿 |
| モダン ボールド | 画像の上半分、以下の見出しと概要、修正"続きを読む"ボタン | 見出し、小見出し、日付 | お知らせ |
| ニュース速報 | 赤いヘッダー ストリップ、画像、見出し、スクロール スタイルのティッカー バー | 見出し、小見出し、日付 | 時間に敏感なアップデート |
| 見積カード | 暗い背景写真の上に引用します | 見出し (引用)、小見出し (帰属)、日付 | 共有する権限がある引用符を引きます |
| ミニマリスト | 余白がたっぷり入った額装画像 | 見出し、小見出し、日付 | 簡単なステートメント、イベントの日程 |
| フィーチャーカード | イメージ、重なり合う円形のロゴ、フッター ストリップ | 見出し、小見出し、日付、ドメイン | 長文記事 |
| グラデーションニュース | フルブリードイメージ、アクセントグラデーション、フッターバー | 見出し、カテゴリ、日付、ドメイン | イメージ主導の物語 |
| 垂直引用 | 引用パネル左、ポートレート画像右 | コンテンツ (引用)、作成者、指定、日付、ドメイン | 講演者の写真付きの引用 |
ほとんどのテンプレートには日付行があり、いくつかのテンプレートにはドメインまたはハンドルフィールドが追加されています; 任意のフィールドはクリアできます. " BREAKING NEWS" などのレイアウトに固定されているラベルがあります Breaking News ストリップと " Read More" モダンボールドにロゴスロットが表示されるのは、ロゴを追加した場合のみです; ロゴなしでは、テンプレートは空のフレームを表示するのではなく、ロゴ領域を隠します。
ソーシャルカードのテキストはどのくらいの大きさであるべきですか?
モニターで見るよりも大きい カードは幅 1080 ピクセルで設計されていますが、電話フィードでは画面の幅とほぼ同じ幅で表示され、一般的な電話機の幅は約 390 CSS ピクセルです。つまり、カード上のすべてのものは設計サイズの約 390 / 1080 = 36% で表示されます。
テンプレートが使用するサイズでテキストに何をするかは次のとおりです:
| 1080 px カードのサイズ | 幅 390 px のフィードのおおよそのサイズ | 可読性 |
|---|---|---|
| 64 px ヘッドライン | 23px | とても明確 |
| 48 px ヘッドライン | 17px | クリア |
| 32 px 小見出しまたはフッター | 12px | 読める |
| 24 px の詳細テキスト | 9 ピーエックス | 小さいので注意が必要です |
| 20 px メタデータ | 7 px | 読みにくい |
算術は単純にサイズ x 390 / 1080 です。 48 ピクセルの見出しの場合、48 x 0.361 = 17.3 ピクセルで、電話の快適な本文に匹敵します。 20 ピクセルでは結果は約 7 になります。そのため、カードの日付やハンドルは必須ではなく装飾的です。フッターではなく、リーダーが見なければならないものを見出しに置きます。
これは長さの実用的な制限も設定します 48 ピクセルで5 行に折り返す見出しは テンプレートに画像を圧迫したり 溢れさせたりします 6~12 語程度の見出しを目指します。
フォトカードはどの色を使用する必要がありますか?
テキストを後ろにあるものに対して読みやすく保つ色を選択します。 Webコンテンツアクセシビリティガイドラインは、有用なベンチマークを設定しています: WCAG 2.2 達成基準 1.4.3 wcagが少なくとも18 ポイント、または14 ポイントボールドと定義している、通常のテキストで少なくとも4.5:1、大きなテキストで3:1 のコントラスト比を求める。 ソーシャルイメージはWebページではありませんが、同じしきい値は、低視力または薄暗い画面を持つ人々が読むことができるものを記述します。
ジェネレータは3 つの色を与えます:
- アクセント 色バー、丸薬、グラデーションとハイライト形状。それはブランドを運びます。
- 背景 画像でカバーされていない領域を色付けします。
- テキスト メインコピーを使用するテンプレートで色を付けます。一部のテンプレートでは、アクセント パネルの上に白いテキストが設定されています。
| 組み合わせ | コントラスト比 | 通常のテキスト (4.5:1) | 大きなテキスト (3:1) |
|---|---|---|---|
ほとんど黒 #111827 オン ホワイト #ffffff |
17.7:1について | パス | パス |
デフォルトの赤いアクセントに白 #D9232D |
5.0:1くらい | パス | パス |
ミッドグレーに白 #999999 |
2.8:1 について | 失敗します | 失敗します |
淡い黄色の上に白 #facc15 |
1.5:1 について | 失敗します | 失敗します |
最初の2 行はgenerator& #39; s defaults.で、独自のブランドカラーの任意のペアを確認できます カラーコントラストチェッカー、そして カラーコントラストガイド 比率の計算方法を説明します。
写真の真上に配置されたテキストは、写真が変化するため、単一のコントラスト比を持ちません。 「グラデーション ニュース」などのテンプレートは、テキストの下にグラデーションとテキストの影が付いたものを扱います。これらのテンプレートの写真を選択するときは、見出しが置かれている領域がより暗いものまたはより穏やかなものを選択します。
フォトカードの作り方、ステップバイステップ
- を開きます フォトカードメーカー そしてテンプレートドロップダウンからテンプレートを選択します そのサンプルテキストはコンテンツフィールドにロードされます。
- 各フィールドのテキストを置き換えます。 「見出し」または「コンテンツ」ボックス内の「Enter」を押して、行を必要な場所に強制的に改行します。
- メイン画像を追加します。アップロード領域をクリックしてファイルを選択するか、画像 URL をその下のフィールドに貼り付けます。
- 被写体がテンプレートの枠に収まる位置に座るまで、スケール スライダー (0.5 倍から 2.0 倍) と X および Y 位置スライダー (それぞれ -200 ～ 200 ピクセル) で画像を調整します。
- オプションで、同じ方法でロゴを追加します。正方形のロゴ画像は、円形と正方形のロゴスロットに最もよく適合します。
- フォント ドロップダウンを開き、カテゴリ (セリフ、セリフ、表示、手書き、または単空間を除く) で検索またはフィルタリングし、フォントを選択します。
- カラーピッカーでアクセント、背景、テキストの色を設定します。
- ダウンロードPNGをクリックします。 として保存されます
photocard-<template>-<timestamp>.png、従って繰り返される輸出は決して互いに上書きしない.
設定、テキスト、画像は作業中にブラウザに保存されるため、ページをリロードするとカードが戻ります。 「リセット」するとクリアされ、クラシック テンプレートが復元されます。
カードがPNGとしてダウンロードされるのはなぜですか?
なぜなら、カードはほとんど大きなテキストとフラットカラーであり、そのコンテンツはJPEGよりもPNGとしてよりよく圧縮され、よりきれいに見えるからです。 JPEG& #39; s 非可逆圧縮は8 x 8 ピクセルブロックで機能し、細かいディテールを破棄します。 、鋭い文字のエッジの周りには、しばしばリンギングと呼ばれるかすかなハローとスペックルとして表示されます。 PNGは、すべてのピクセルを正確に保存します で定義された可逆圧縮を使用します W3C PNG仕様、従って見出しは鮮明なままです.
| フォーマット | 圧縮 | シャープテキスト | フラットな色エリア | 写真 |
|---|---|---|---|---|
| png | ロスレス | ぱりっと | 小型で正確 | 大容量ファイル |
| jpeg | 不サンク | エッジの周りのハロー | バンディングとスペックルを表示できます | 小さなファイル |
とにかく、ほとんどのプラットフォームはアップロードを再エンコードします。クリーンな PNG から開始すると、エンコーダに可能な限り最良の入力が与えられます。大きな写真を含む PNG がアップロード制限に対して大きすぎる場合、 画像圧縮ガイド 縮小する方法をカバーします.
他のプラットフォームで正方形のカードをどのように使用しますか?
すべてのテンプレートは、1080 x 1080、つまり 1:1 の正方形でエクスポートします。これは、Instagram と Facebook の標準的な正方形のフィード サイズであり、ほとんどのフィードでトリミングせずに表示されます。他の配置では、さまざまな形状が必要です。
| 先 | 募集サイズ | 1080 スクエアから |
|---|---|---|
| Instagram または Facebook フィード | 1080 x 1080 | そのまま使用します |
| Instagram ポートレート フィード | 1080 x 1350 | マットで上下にスペースを追加します |
| LinkedIn または X リンク スタイルの画像 | 1200 x 627 または 1600 x 900 | 広いストリップに切り取るか、広いマットに置きます |
| YouTube サムネイル | 1280 x 720 | 16:9 まで切り抜いてから、少し拡大します |
| Instagramストーリー | 1080 x 1920 | 背の高いマットに置きます |
トリミングするとカードの一部が失われます; マットが全てを保持します YouTubeのサムネイルでは、1080 の正方形を16:9 にトリミングすると、1080 x 608 のストリップが保持され、上部と下部から236 ピクセルが削除されます そのストリップを1280 x 720 に拡大すると、スケールは1280 / 1080 = 1.19 となり、穏やかな拡大になります これを計画している場合は、カードの垂直中心近くに見出しを保持するため、トリミングは切り裂きません ソーシャルメディア イメージクロッパー プラットフォームのプリセットを使用してトリミングを行います 画像のサイズ変更ガイド 拡大が品質に与える影響について説明します。
代わりに、正方形のカード全体をより高いキャンバスまたはより広いキャンバスに保つには、それを背景に置きます マットジェネレータ。
写真はアップロードされていますか?
写真はToolzにアップロードされません ファイルを選択すると、ブラウザはデータURLとしてメモリに読み込み、カードはページにレイアウトされ、ダウンロードはhtml2canvasライブラリによってローカルにレンダリングされ、page& #39; s HTMLをキャンバスに再描画しますが、知る価値のあるネットワークとストレージの3 つの詳細があります:
- フォントはGoogle Fontsから. フォントリストはから読み込まれます
fonts.googleapis.com、従ってあなたのブラウザはGoogleにフォントファイルのための要求をする、Googleはその中で記述する Google Fonts プライバシーに関するよくある質問。 追加したテキストと画像はそれらのリクエストの一部ではありません。オフラインでは、まだロードされていないフォントはデフォルトの書体に戻ります。 - 画像 URL はホストからフェッチされます。 ファイルをアップロードする代わりに画像 URL を貼り付けると、Web ページと同様に、ブラウザはそのアドレスから画像をロードします。
- 作業はブラウザに保存されます. テキスト、色、画像はブラウザ' s ローカル ストレージに保存されるため、リロードしても残ります。共有コンピュータでは、クリアが完了したらリセットを押します。
よくある問題とそれを修正する方法
ダウンロードしたカードはプレビューとは異なるフォントを表示します。 「PNG をダウンロード」をクリックしてもフォントの読み込みが完了していなかったので、エクスポートはデフォルトの書体に戻りました。フォントを選択してから 1 ～ 2 秒待ってから、再度エクスポートします。
URL として貼り付けられた画像がダウンロードにありません。 リモート イメージをダウンロード可能なキャンバスにレンダリングするには、イメージ ホストが CORS ヘッダーでクロスオリジン使用を許可する必要がありますが、これには制限があります html2canvas ドキュメント 注意事項 多くのサイトでは送信されません 画像をダウンロードして代わりにファイルとしてアップロードしてください。
画像が切り取られているか、空のスペースがあります。 ScaleスライダーとXとYの位置スライダーを使用します。 1.0x以下のスケーリングでは、写真の周囲のテンプレートの背景を明らかにすることができます; その上のスケーリングでは、よりきつく作ります。
テキストがその領域から溢れます. 見出しがテンプレートに対して長すぎます。短縮するか、カードのテキストを増やすテンプレートに切り替えます。
リロード後にカードがリセットされるか、大きな画像が保持されません。 ブラウザは、サイトごとに数メガバイトにローカルストレージを制限し、データURLとして保存された大きな写真がそれを超えることができます カードはまだエクスポートします; それはちょうどリロードを生き残ることができないかもしれません それらを追加する前に非常に大きな写真のサイズを変更します。
テキストの角括弧は間違っています。 テキストはマークアップとしてテンプレートに挿入されるため、改行が機能し、次のような文字が生成されます < タグの先頭と読むことができます カードテキスト内の角括弧は避けてください。
人々が読むカードのヒント
- カードごとに1 つのアイデアでリードします。 2 つの見出しが必要な場合は、2 枚のカードが必要です。
- 写真を切り取って、その被写体がテンプレートの見出し領域の下に置かれないようにします。
- ブランドを一定に保ちます。シリーズ全体で同じテンプレート、フォント、アクセントの色です。
- 投稿時に代替テキストを追加します。画像はスクリーンリーダーへの単語の画像であるため、見出しとキーの詳細を platform's の代替テキストフィールドに書き込みます。
- 使用する権利がある引用符と写真を投稿し、引用符を正確に帰属させるだけです。
テンプレート カード ジェネレーターの代替品
- 一般的なデザインツール canva、figma、adobe Express などは、通常はアカウントを使用して、はるかに多くのテンプレート、無料のポジショニング、チーム ライブラリを提供しています。
- ニュースルーム および ソーシャルスケジューリングプラットフォーム パブリッシング ワークフローに関連付けられたブランド カード テンプレートを含めることもあります。
- コードベースのジェネレータ これは、すべての記事のカードを自動的に生成するサーバー スーツ サイト上の画像に HTML をレンダリングします。
ブラウザテンプレートツールは、中間地に適合します: 高速、アカウントなし、一貫した出力、および画像はマシン上に残ります 投稿前の関連する手順については、 画像 Watermarker 写真にロゴまたはクレジットを追加します ソーシャルメディアツールハブ フルセットをリストします.
