今回は以前制作したWordPressサイトのトンマナを合わせたバナーを作成します。
トンマナとは？
トンマナ とは、「トーン＆マナー」の略で、 広告 におけるデザインの一貫性を持たせることを指します。 また、ブランドのイメージカラーとホームページのデザインカラーを合わせる必要があるなど、「 トンマナ 」は企業部 ブランディング においても重要です。
仕事では既存のコーポレートサイトとは別に定期的にキャンペーンサイトやランディングページ、バナーなどを制作する事がよくあります。その場合、既存のコーポレートサイトとある程度デザインを合わせる事で、その「企業っぽさ」や「らしさ」などを判りやすくユーザーに伝える事が出来ます。
ランディングページ
上記のランディングページのトンマナに合わせて作ったバナー
バナーを作る上で必要な情報
・サイトで使用しているテキスト情報
・サイトで使用しているフォント情報
・サイトで使用しているカラー情報
OGP用画像を作成
今回は通常のバナーでは無く、SNSで使用するOGPを作成します。
OGP（Open Graph Protcol）とは、SNSでシェアされた時に表示されるサムネイル画像です。
検索キーワードを使用する場合とは違い、SNSで気になるサイトや記事を見つけた場合、クリックする・しないの判断はOGP次第なので、とても影響のある要素です。
OGPの設定
Facebookが提唱した仕様で、標準化されていないので、各メディアによって仕様が異なります。
基本設定
htmlのheadタグに以下のコードを設定
<head prefix="og: https://ogp.me/ns#"> </head>
Facebookの設定
<meta property="og:url" content="ページのURL"/> <meta property="og:type" content="ページの種類（website または blog または article）"/> <meta property="og:title" content="ページのタイトル"/> <meta property="og:description" content="ページの概要"/> <meta property="og:site_name" content="ページのサイト名"/> <meta property="og:image" content="サムネイル画像のURL"/>
設定する内容
| プロパティ | 設定される項目・内容 |
| title | ページのタイトル見出し |
| discription | ページの紹介文 |
| url | このページのURL |
| type | このページの種類 （article、blog、websiteのどれかを指定する） |
| site_name | このページが所属するWebサイトの名前 |
| image | 表示したいイメージ画像のURL |
X(Twitter)の設定
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@your_account">
