売れるデザインノウハウ

ネットショップ用バナー作成の効果的な練習方法

こんにちは。ネットショップオーナー兼デザイナーの井川です。

 

本記事の内容は、

デザイン未経験者が最短でネットショップバナーを作る事が出来るようになる具体的な方法

 

ネットショップを運営していると必ず作らないといけないのが「バナー」ですね。

広告を出したり、ショップ内を回遊させたり、最近ではメルマガもレスポンシブ可しているのでメルマガ用のバナー作成なども必要になったりします。

バナーとは言うけれどデザインやった事ないし、そもそもアイデアが浮かばないよ

私もデザインが苦手なのでその気持ちがよく分かります!「さあ!バナー作ろう!」っと思ってデザインツールを開いた瞬間に、モチベーションダダ下がりになるんですよね。

その原因は【デザイン知識が無いから】に他なりません。

そして、そんな「デザイン知識」を習得するために効果的なのが「トレース」です。

 

本記事ではデザイン知識を最短で習得するための「トレース法」をご紹介します。

 

この記事を書いたのはこんな人

ネットショップコンサルタント

 

1.簡単な構図知識

トレースを始める準備段階として簡単な構図から紹介します。

構図を知っているかどうかによってトレースする時にも「あ、これはこうやって分割してるんだ!」って言うのが分かるようになるので習得が早くなります。

構図はかなりバリエーションが豊富なのでこの記事の中で全てを紹介する事はできません。

なので、今回は簡単な構造を3つ紹介致します。

 

2分割法

一般的に多い構図としては2分割法と言って、画像と文字を左右に分けて作るデザイン構成になります。

使い勝手もよく、ファッション系の商品サムネイルとかでは頻繁に使われています。

 

実際の使い方としてはこちら

右側に商品を置いて左側にロゴ・カラーバリエーション・特徴などを記載しています。

商品画像や情報などを大きく表示出来るので視認性もよく分割も2つなので分かりやすい構図となっています。

失敗しにくい構図なので初心者は2分割から使ってみると「それっぽいデザイン」が簡単に作れます。

 

3分割法

バランス調整が少し難しくなるけれど、1画像に多くの情報を載せる事が出来る3分割法です。

よくあるのは一番上に商品名、真ん中に商品画像、一番下に「ここをクリック」みたいなバナーですね。

 

これ、縦に分割じゃなく横に分割も出来ます。

横長バナーで情報をたくさん載せれそうな大きさの時には左右に商品情報、真ん中に商品名みたいな構図も作れます。

左右を敢えて空白にして、真ん中にだけ文字を入れるような構図もあります。クーポン用のバナーなどでよく使われてますね。

 

6分割法

最近IT系バナーに多いのが6分割法です。

人の顔を6つ並べて真ん中のテキストにサービス名を入れているような広告みた事ありませんか?

 

ネットショップ系だとあまり見たこと無い構図ですね。

なんとなく作ってみました。

カラー展開を見せたい時には使えるのかな?

使い勝手はあまり良くなかったけれど、商材によっては使えるかもしれないですね。

 

色々と構造を説明してきましたが、共通している事は【分割】です。

縦に割るか横に割るか、2つに割るか3つに割るか、大雑把に構図を考えると大体は分割方法の違いでしかありません。

ざっくりで良いので【分割】と言う意識を持って次を読み進めてみてください。

 

2.トレース

ここからは実際にトレース作業をしていきます。

 

まずは、トレースしたい画像をネットで見つけてダウンロードします。

マウスを右クリックして「名前を付けて画像を保存」すればダウンロードできます。

今回トレースする画像はこれを使います。

 

次に、手に入れた画像を右クリックしてプロパティ、詳細タブをクリックすると画像の大きさが表示されます。

こんな感じに

横幅800の高さ240pxだなっと言うのが分かるのでデザインツールも800×240pxに設定して、トレース画像を読み込ませます。

トレース元を直接イラストレーターなんかで開いても良いんですけど、大きさとかも自分の手で打ち込んだ方が練習になるので敢えて新規ファイルとして作りました。

 

あとはちょっとトーレス元画像を透過させたりして上から図形やテキストを作って同じように作っていきます。

トレースするだけでもまったく同じように作るって難しいので色々と学ぶ事がありますね。

 

3.記憶トレース

ここからが本番、記憶トレースの方法です。

さきほどまでは透過させた画像の上からトレースしていましたが、記憶トレースではトレース画像を完全に非表示にします。

分かっているのは大きさだけ、非表示の状態でトレース元画像と同じバナーを作ります。

 

記憶トレースで重要なのは記憶力ではなく、観察力です。

何をどこにどのくらいの大きさで配置するのか?しっかりトレース元の画像を観察していないと作れません。

 

この記憶トレースのコツとしては【分割法】を活用する事です。

例えば「縦に2分割」「下の部分は横に3分割で真ん中にテキスト」などと言うように分割する事で、「このバナーを作った人がどういう構成で作ったのか」が分かります。

フォントの種類は?文字の大きさは?なぜこの配色なのか?1つ1つを疑問に思い自分なりに答えを出していく事でバナー作りのデザイン技術がどんどん上がっていくし、実際に自分で作る時にも役立ちます。

 

4.複合トレース

記憶トレースもだいぶ出来るようになったな。っと感じたら次は複合トレースの時間です。

複合トレースとは、記憶トレースで見につけた技術を複数合わせて1つのデザインを作っていく工程になります。

「値段のフォントはこのバナーのやつ!」「画像の配置はこの商品のやつ!」「キャッチコピーの配置箇所はこのデザインのやつ!」っと言うように複数のバナーの知識を合わせて新しい1つのデザインを作り上げます。

記憶トレースの応用でしかないので、記憶トレースが出来れば複合トレースも出来ます。

 

難しい点としては複数の違うバナーデザインを使うので、そのまま使っただけでは統一感がでません。

そこに統一感を与えてあげるのがオリジナリティになります。

単体ではバラバラの物を1つに繋げて自然な1つのデザインが出来るようになれば自分のデザインの完成です。

 

まとめ

ネットショップ用のバナーを作るために必要なのは「トレース」、トレースを行う理由は上手な人のバナーデザイン構成を身体に覚えさせる事です。

デザインが苦手な人はデザインに必要な知識が足りていないだけなので、不足している知識をトレースによって増やしていけば自然とデザインへの苦手意識はなくなっていきます。

トレース元の画像を分割、観察(インプット)し、しっかりと吸収してから実際に作る(アウトプット)。

これだけでデザイン技術はどんどん上がっていくのでネットショップに必要不可欠なバナーがいくらでも作れるようになります。

 

デザイン苦手だし何から勉強すればいいのか分からないって人はぜひともこの記事のトレース法を試してみてください。

 

 

お得な特典があるサービス一覧

注目コンテンツ

ネットショップ開業におすすめなショッピングカート10選!現役ネットショップ店長が徹底比較!

ネットショップ開きたいけどネットショップのショッピングカートって種類多すぎてどれを選べばいいのか分からない。各サービス毎に特徴を教えて!ついでにおすすめはどれ? ショッピングカートは機能や規模によって ...

続きを見る

新着記事一覧

COMICA CVM-VM20 ショットガンマイク

ファンを作るSNS運用とは

【動画撮影向け】Canon EOS Rにピッタリのマイク『COMICA CVM-VM20 ショットガンマイク』購入レビュー

Youtubeの動画撮影でCanon EOS Rに使えるマイクを知りたい Canon EOS R用の外部マイク『COMICA CVM-VM20 ショットガンマイク』の実使用レビューを知りたい &nbs ...

起業 商工会議所 メリット

社長になる第一歩!開業方法まとめ

起業した経営者が商工会議所に入会するメリット・デメリット

商工会議所ってどんな所なのか知りたい 起業したばかりの経営者が商工会議所に入るメリットを知りたい 商工会議所で人脈って作れるのか知りたい 本記事では、このような悩みを解決します。   &nb ...

Excel 自分の時間を作るプログラミング技術

エクセルの単価表から新しい単価を抽出して反映させる関数

メーカーから貰った単価表の単価だけを抽出して、既存の単価表に移植させたい! 本記事では、このような悩みを解決します。     メーカーが値上げすると商品全部の値段を見直さないといけ ...

excel 半角カタカナ 全角

Excel 自分の時間を作るプログラミング技術

excelで半角カタカナの文字を全角の文字に変換する方法

半角カタカナが入ってるセルを全角に変換したい! 本記事では、このような悩みを解決します。     excelで半角カタカナの文字を全角の文字に変換する方法 画像のように半角カタカナ ...

Excel

Excelで特定の文字が含まれていたら処理を起こす関数

Excelで特定の文字が含まれていたら処理を起こす関数と使い方を知りたい 本記事では、このような疑問を解決します。     特定の文字が含まれていたら処理を起こす関数【COUNTI ...

新着記事一覧を見る

  • この記事を書いた人
  • 最新記事

井川 裕輝

元倉庫業からEC総合責任者へ昇進。副業でもやってたEC事業で独立。その後Lステップと言うツールに出会い、岡山県でLステップ構築代行者として活動を始める。

-売れるデザインノウハウ
-

© 2023 ネットショップ情報メディア『WellMaga』