こんにちは、さりなです。
Webデザインの勉強を始めました！
1. はじめに
WEBデザインに興味を持っているけれど、「バナー制作って何から始めればいいの？」と迷っている方は多いのではないでしょうか？
私もデザイン初心者ですが、バナー制作に挑戦することで少しずつデザインの基本を学ぶことができました。
この記事では、私のバナー制作の過程や感じたポイントをお伝えします！
2. バナー制作を始める前に知っておくこと
バナーとは、WEBサイトや広告などに使われる画像のことで、ユーザーの目を引き、伝えたい情報を効果的に伝える役割があります。
初心者として、最初に理解したポイントは以下の3つです。
- デザインの目的を理解する: 広告用？お知らせ用？目的によってデザインが変わります。
- サイズとフォーマット: 使用する場所に合わせたサイズを決めましょう（例：SNS広告は1200×628pxなど）。
- ツール選び: 初心者には「Canva」「Figma」「Photoshop」などがオススメです。
私は「Photoshop」で作成してみました！
3. 実際のバナー制作手順
ほぼ初めてのバナー制作だったため、情報を収集・整理しながら進めました。
手書きラフを作成したのですが、ラフでは具体的にイメージできず試行錯誤しました。
そして今回のバナーデザインに辿り着くまでには作っては消して、、を繰り返しましたし、
未だにこれが良いのかわかりませんが第一歩を踏み出せたのでこれから引き続き頑張りたいです。
ステップ1: イメージを固める
最初に 「どんなバナーにするか？」 を考えます。
今回はWeb鍛さんのバナーお題を使用させていただきました。
https://webtan.tech/bnr_juice/
- 目的: 有機野菜10種類でできたジュースのSNS訴求
- ターゲット: 誰に向けたものか？（30代のママ向け）
- 色やフォントの選定: イメージに合った色とフォントを選びます。
今回は2種類の味をイメージしてみました。
ツール: Pinterest や Google画像検索 でデザインの参考になる素材を探すのもオススメです！
ステップ2: テキスト要素を洗い出す
まずはテキスト要素の洗い出しをしました。
その後、優先順位をつけて、テキストだけでレイアウトを考えてみます。
バナーはシンプルでわかりやすいのが一番なので、
テキストだけでも強調したいポイントがわかるのが良いと思います！
さりな
この作業だけでも１時間ほどかかりました。。
ステップ3: 画像や写真、背景を入れて色をつけていく
色味は３色程度に抑えることを意識して、配置していきます。
さりな
迷走を重ねてしまい、2.3日かかりました。。
ステップ4: 全体の調整
チェックポイント
- 要素が見やすく整列しているか
- 文字は読みやすいか
- 伝えるべき情報が正しく伝わっているか
制作ポイント
女性に好まれるよう明るい印象で、初回半額価格が一番目立つように意識しました。
ママに子どももごくごく飲めて親子で満足できる未来をイメージしてもらえるように配置しました。
情報量が多かったので、他詳細は小さく右下にまとめてみました。
4. 添削
デザイナーさんに添削をお願いしました。
具体的なアドバイスばかりでとても勉強になりました！
デザインの4原則「近接」
「通常価格」の文字が垂直方向に揃っていない。
「子どももゴクゴク飲める！」の吹き出しが上の白枠と関係性が近いデザインになっている。
配色
「初回半額」の「半額」が赤色になっていることで目立たない状態になっている。
オレンジ色×赤、オレンジ色×白
白い文字の方が文字をハッキリ認識できる。
白い背景に対して真っ黒の文字というのは正反対の色になるためコントラストが強過ぎてしまい、 目がチカチカするような、長時間見てるのがしんどくなるハレーションという効果がある。
真っ白に対して真っ黒は、プロのデザイナーはまず使わない。
レイアウト
左下の写真はあってもなくても良いような小さなサイズ感の写真になっており、
この写真がなくてはならないのならもっとちゃんと写真を活かす設計を、
なくてもいいようなものなら無くすべき。
そのサービスや商品の良さや魅力を、最大限に引き出すための設計をしていくのがデザイン。
最適なレイアウトが出来てるか、最適な配色が出来ているか、商品の魅力が最大限表現できているか、etc.
そのように考えて作ってみる。
5. 修正
6. 初心者がバナー制作で学んだこと
今回のバナー制作を通じて、初心者として学んだポイントは以下の3つです。
- 目的を明確にすることの大切さ
- デザインはシンプルにまとめるのが基本
- 何度も試行錯誤してブラッシュアップすること
最初はうまくいかなくても大丈夫！数をこなすことで、少しずつデザインのコツがつかめてきます。
（と信じています・・）
7. おわりに
WEBデザイン初心者にとって、バナー制作はデザインスキルを学ぶ良い機会です！
まずはシンプルなものから始めて、少しずつステップアップしていきましょう。
正直、作れば作るほど正解がわからなくなってきました。
また、自分が悩んでいた箇所はあまり重要ではなく、他が指摘されることも多かったので
添削できる環境がある場合は、あまり長考せずアドバイスをいただくのが良いと思います。
私の制作記録が、これからバナー制作に挑戦する皆さんの参考になれば嬉しいです！
一緒にデザインの世界を楽しみましょう♪
