なりたてデザイナー

WEBデザイン|サイドバナーの制作手順とデザインのポイント

こんにちは。
フリーランスデザイナーのIKUE(@198_note)です。

先日サイドバナーのデザインをリニューアルしました。

リニューアルした時の手順とデザインのポイントをご紹介します。

普段のリアルな手順です〜。

なりたてデザイナーさんやPhotoshopが使える方向けです。
少しでもお役に立てたら嬉しく思います。

それでは、どーぞ!

どんなバナーにしよう?からはじめる

今回は元のデザインがある状態からのリニューアルということで進めていきます。

何もない状態から新しく作る場合は、参考イメージを探すところからはじめるといいかも。参考イメージの中から良いものを選び、その後どんなところが良いと感じて選んだのか?……を深掘りしていくと方向性が見えてくると思います。

WEBデザインの参考に|おすすめギャラリーサイト集

問題点の洗い出し

はじめに現状の問題点、気付いた点・気になっていた点などを洗い出します。
画像を元に洗い出した点はこちら

  • バナー全面の画像が重たい
  • テキストが読みづらい(可読性が低い)
  • なんか重たい……
  • 古い?……古く感じてきた

無理にちゃんと言葉にしなくてもOK。個人的には感覚で良いかなと。問題点が出なくなるより、なんでも感じたまま出した方が良いと思ってます。

改善点を出していく

問題点が出たら、その問題が解決する方法を出していきます。

  • 画像が重い問題 → 画像の分量を減らす
  • テキストが読みづらい → テキストを読みやすくする(可読性を上げる)
  • なんか古い → 余白を作りヌケ感を出す

ヌケ感については、こちらの本が参考になります!

設置場所を気にかける

改善点が出た後は、バナーの設置場所を確認します。
他のデザイン仕事の場合でも結構大事なポイント。
周りにどんな要素があるのかによってデザインが変わります。
目立つようにする場合は、周りと対照的に。また馴染むようにするなら、周りのトーンと合わせる。など……「どう見せたいか」で決めます。

例えばですが、駅のポスターとカラオケボックス(今は行けないけど)など、明るさも考慮する場合があります。

どんなバナーにするか方向性をまとめる

ここまで出てきた内容を踏まえ、どんなバナーにするか?方向性をまとめていきます。

  • 画像とテキストを分けてレイアウトする
    → 画像が重たい・テキスト読みづらい問題を解消
  • 細めのフォントを使用する
    → 余白を作りヌケ感UP
  • カラーは、モノクロ+ピンクの2色以内
    → 周りと馴染むデザインにするため
  • バナーぽさは残るようにする

最後の「バナーぽさ」は、テキストと画像のみのようなランキングと似せない感じです。

以上、ここまでがデザインの計画部分になります。
次は実際にバナーを作っていきます。

サイドバナー制作手順

バナーサイズの確認

バナーを作る時以外も重要なサイズ確認。

以前担当したことがある案件で、再度お願いされた時によく勘違いしがち。
前回A6サイズのハガキでも、今回は変形サイズのハガキをお願いしたつもりだった……なんてことも。いただいた案件ごとにサイズの確認は必ずした方がスムーズです。

今回作るサイズは 742px × 300px
サイズが小さいと作りづらいので、実寸の2倍で作るようにして最後リサイズしています。
※実寸サイズの確認は必ずする前提で。

素材用意

使用画像はセレクトし、テキスト内容は必要に応じて修正します。
画像のセレクトポイントは、実寸サイズで表示しても分かりやすいもの です(できるだけ)。
ごちゃごちゃしているものがさらに小さく表示されると、余計分かりづらい傾向にあります。

レイアウト

画像の分量

デザインの方向性をまとめた時、テキストと画像を重ねず可読性を上げると決めました。
それを踏まえて画像の分量を決めていきます。

文字組み

日本語と英語のバランスを考えます。
今回は日本語を大きくし、伝わりやすさ・分かりやすさ優先しました。デザイン性やオシャレな感じを優先する場合は、英語をデザインすると効果的だと思います。

カラー設定

ブログで使用しているカラーが、モノクロ + ピンク なので、この2色を使用しました。
もしも1色プラスするなら蛍光イエローが万能かと。ブルー系でもOKですが、ピンクが暖色なので寒色のブルーよりイエローの方が全体的にまとまりやすい気がします。
目立たせる場合は、対照的なブルー系がいいかも。

ブラッシュアップ

デザインがまとまった後はブラッシュアップ。
仕事の場合も時間に余裕がある場合は、細部をブラッシュアップする時間にします。

ブラッシュアップする箇所は

  • 余白調整
  • 文字組み
  • 質感の足し算・引き算

など。

完成はこちら。
バナーの内容も変更し、前回よりだいぶスッキリしました。

以上、サイドバナーの制作手順とデザインのポイントでした。
また、実際に制作している動画をUPしました。
よろしければこちらもご覧くださいませ。


それでは、また!

-なりたてデザイナー
-,