INDEX
目次
前の章に戻る☑️ サンプルデータはこちら
Figma
Created with Figma
📷 バナー画像素材はこちら
【8-1】バナー広告とは
■ 他のWebページに誘導する為に設置する広告
✅ ポータルサイトやECサイト等で、見せたいページに誘導する為に良く使われます。
バナーのクオリティや見せ方によって、効果が変わることも良くあります。
バナーのクオリティや見せ方によって、効果が変わることも良くあります。
【8-2】バナー画像を作る際の心得やコツなど
■ まず初めにポイントを抑えよう
- バナー画像の趣旨は何か？を考えよう。
- アイキャッチ・情報の優先順位をどのようにするか？
- 必要な素材・文言・リンク先のトンマナ（コンセプトや雰囲気に一貫性を持たせること）をチェック。
- バナー画像のデータ容量の制限はあるか？（例えば、100KBまで…など。）
【8-3】実際に作ってみよう
下記にサンプルデータがあります。こちらを模写してみましょう。（各サイズ2種類ありますが、どちらでもOKです。）
模写をすることでFigmaのツールの使い方が身に付き、デザインスキルも上がります。まずは、オリジナルのデザインにこだわらず、模写をコツコツ進めてスキルアップを目指しましょう。
☑️ サンプルデータはこちら
Figma
Created with Figma
📷 バナー画像素材はこちら
■ 作成時の注意点
- バナーのサイズ
バナーで使用されるサイズはおおむね決まっており、以下ピクセル（横 x 縦）が良く使われるサイズになります。
|
300 x 250
|
336 x 280
|
300 x 300
|
468 x 60
|
728 x 90
|
|
320 x 50
|
320 x 100
|
120 x 600
|
160 x 600
|
- 基本的には “フレーム” で設定します。
※このテンプレートを入手したい場合は下記。
☑️ テンプレートはこちら
「2章【2-1】C」にてこのファイルの利用方法を説明しております。
☑️ テンプレートはこちら
「2章【2-1】C」にてこのファイルの利用方法を説明しております。
バナーテンプレート.fig (19.8 KB)
- リンク先とのトンマナを維持。
- フォントの可読性に注意。※限られたスペースの中、文字数が多いとそれだけ小さくする必要がある。
- 適度なスペースを確保（上下左右のスペースはなるべく均等に）
【8-4】書き出ししてみよう（エクスポート）
１つデザインが完成したら、書き出ししてみましょう。
Figmaの画面右下「エクスポート」より、画像を書き出すことができます。
☑️ エクスポートして書き出し
一般的に良く使われる画像形式は「.png」 です。
写真が多く占める場合は「.jpg」を選択するのがベターです。
【8-5】リサイズしてみよう
同じ広告バナーでも、様々な媒体・異なった場所に掲載されるのは良くあります。
配置場所に準じたサイズになるよう、リサイズしてみましょう。
どのサイズのバナーでも同じトンマナになるよう作成するのがポイントです。