BLOG/楽天市場

2021.10.09

楽天でのバナー作成(その2)

【記事の対象となる方】

  • これからPhotoshopを学ぼうとしている方
  • デザイン初心者

【今回の記事の内容】

  • バナーサイズについて(Retina対応)
  • バナー作成の流れについて

<バナーサイズについて>

前回バナーサイズを「横幅1200px」 x「高さ500px」 に設定して新規作成しましたが、
実際に表示したいサイズは「横幅600px」 x 「高さ250px」になります。

その為、表示させたいサイズの横幅と高さを2倍で作成することになります。
この対応の事をRetina(レティナ)ディスプレイによるRetina(レティナ)対応といいます。
その説明をさせていただきます。

Retina(レティナ)対応について

まず最初に、解像度には下記の2つの意味があります。

①密度という意味[単位:ppi]
②ディスプレイのピクセル数(画面解像度)という意味[単位:px × px]

なので一言で解像度といっても、①と②のどちらの意味なのか、その時の文脈から判断する必要があります。
例えば、Webで使用する画像において「解像度2倍の画像」というと、密度が2倍なのではなく、
ピクセル数(大きさ)が縦横それぞれ2倍という画面解像度の意味を指します。

そして私たちが普段見ているパソコンやスマートフォンのディスプレイは
小さな点(ドット)の集まりでできています。

Retinaディスプレイ自体が高解像度(つまり、ピクセル数が多い)で、ピクセル密度が高い(ひとつひとつのピクセルが小さい)というディスプレイ自体の特徴があります。
それに加えて、それまでの他のディスプレイでは画像などを等倍(同じ倍数)で表現していましたが、Retinaディスプレイは違います。
例えば4つのピクセルで1つの点(ドット)を表現するといったスケーリングという技術を使用することで高精細ディスプレイを実現しています。

ドット(点)の密度が高い = 高解像度ほど、より鮮明な画像の描写が可能です。
Retinaディスプレイを簡単に言うと「通常の画面よりもとても鮮明で綺麗な画像」が見られる画面(液晶)のことです。

Apple製品の場合はiPhone、ipod。macはMacBook Airを除き、ほとんどのモデルがRetinaディスプレイを搭載しています。
Android製品の場合は高精細ディスプレイという表現や各社によって名称が変わります。
Android製品の商品説明で説明されている高精細の液晶の事を指します。

 

<バナー作成の流れについて>

まずはこちらが完成バナーになります。

「デザインのドリル」という書籍のlesson1構成(初級)演習03をアレンジして、バナーを作成しました。
なるべく少ない工程で完成できるように加工などは最小限にしています。

このバナーを作成するにあたって、下記が流れになります。

1:情報を集める

バナー作成に必要なテキスト情報や画像を集める。
このバナーの場合は画像は「デザインのドリル」という書籍で配布された画像をDLしました。
「クリスマスツリー」、「プレゼント2種」、「雪の結晶」です。
ドリルがない方は下記の無料イラストサイトからお好きなイラストをDLしてみてください。
登録が必要になりますが、登録は簡単ですのでご安心ください。
イラストの背景を透過させたい(透明にしたい)為、DLする形式ファイルはPNGになります。
イラストAC
FLAT ICON DESIGN

テキスト情報は
「ファミリーモールの」、「Happy Christmas!」、「12.20」、「▲」、「12.24」、
「キャンペーン期間中、対象店舗で5000円以上お買い上げの方、」、
「先着1000名様に素敵な商品をプレゼント!」になります。

2:集めた情報を整理する

集めたテキスト情報や画像を整理して優先順位の大中小を決める
どの文字を大きくして、どの文字を小さくするかの優先順位を決めるという作業になります。

まとめると「Happy Christmas!」(クリスマスキャンペーン)として「12.20」から「12.24」に「先着1000名様に素敵な商品をプレゼント!」したい事を伝える為のバナーという解釈になります。

その為、優先順位としては
「Happy Christmas!」 > 「12.20」、「▲」、「12.24」 > 「先着1000名様に素敵な商品をプレゼント!」 >
「ファミリーモールの」 > 「キャンペーン期間中、対象店舗で5000円以上お買い上げの方、」になります。

この順番で文字のサイズを小さくしていきます。
重要度の高さで文字サイズの大小を決めていきます。
この優先順位は制作者や制作状況により変化するので必ずしもこの優先順位ではありません。

3:余白や整列を行い、バランスよく情報や画像を配置する

情報を色や余白を使い見やすくします。

この3つが大まかな流れになります。
3つ目に関しては次回の記事にて詳しく説明していきます。

いかがでしたでしょうか。
今回はバナーサイズと作成の流れについてご説明させていただきました。

 

終わりに

弊社はECの制作代行を実施しております。
弊社へのご依頼などは、以下フォームにご入力いただき、ご連絡いただけますと幸いです。

    入力内容を確認して「送信」ボタンをクリックしてください。

    お問い合わせありがとうございます。
    折り返し担当よりご連絡させていただきますので、今しばらくお待ち下さいますよう、お願い申し上げます。

    は必須項目です。

    氏名(漢字)
    氏名(かな)
    貴社名
    電話番号
    メール
    ウェブサイトURL
    お問い合わせ内容

    こちらからご確認ください

    以下の記事も合わせてご参照ください。

    楽天でのバナー作成(その1)

    楽天でのバナー作成(その3)