Web design

【1年前と比較】webデザイナーの想いを込めたブログバナー(アイキャッチ)作りのポイント

【1年前と比較】webデザイナーの想いを込めたブログバナー(アイキャッチ)のポイントのバナー

こんにちは、shioです^^

私はブログのバナー(アイキャッチ)を作りながら、デザインの勉強をするようにしてます。
コーディングの仕事が多い時期は、デザインする機会がなくなってしまうからです。

なので記事を書くより、バナー作りの方が時間がかかることも❋!

shio
shio
デザインのアウトプットになるので、想いを込めて考えてデザインしています。

最近、1年前に作ったバナーを見たのですが、、、ひどいデザインにびっくりしました!笑

そこで、今までのブログのバナー(アイキャッチ)のデザインを振り返り、バナー作りで重要なポイントをまとめてみました。

  1. どんな思いでバナーを作っているのか
  2. デザインのポイント
  3. 作り方
  4. 気をつけた部分
  5. 過去との比較
  6. 反省・改善点

 

shio
shio
過去と比べたら、上手くデザインできるようになりましたが、全然まだまだなデザインです。
でも過去のひどいデザインもお見せしているので、webデザインの勉強を始めた方に、勉強を続けていくとこうなっていくというのを見て、参考にしてほしいと思います。

まずは最近のバナーから♪

初心者に向けたデザインのバナー

webデザイン初心者おすすめ勉強本3冊|未経験webデザイナーが最初に読んだのバナー
  1. 初心者むけなので、優しく柔らかい親しみやすいフォントを選択
  2. 上に載せる文字は白一色でごちゃごちゃしないように
  3. 背景画像はそのままだと上の文字が読みづらいので、カラーオーバレイでこげ茶をのせた
  4. 背景は本棚→木製と連想したのでこの画像を選択
  5. それだけだとイマイチ「本」の記事ということが伝わりにくいので、本のイラストを入れた
    (馴染むように、ほんのり透かして)
webデザイン初心者おすすめ勉強本3冊|未経験webデザイナーが最初に読んだのバナー
未経験webデザイナーが最初に読んだwebデザイン初心者おすすめ勉強本今回はこれからwebデザインを勉強し始める方に向けてお勧めしたい本をご紹介します。 未経験から勉強を始めた私も実際この3冊を読んで...

デザインのあしらいを勉強しながら作ったバナー

【webデザイナーおすすめ】デザインする時に役立つデザイン勉強本8選のバナー
  1. 「本」シリーズの記事なので先ほどのバナーと同じ雰囲気になるようデザインを揃えた
  2. なので、フリー素材の画像はピンク系の本がある写真を探した(「ぱくたそ」から)
  3. 文字を入れるエリアが小さかったので、写真を複製して左側に余白を作った
  4. 文字が読みやすいように、文字の下はぼかしを効かせた
  5. 手書き文字にゴシック体を使って可愛すぎないように
  6. あしらい今時に・・・
    抜け感のあるイラスト、文字の何箇所に色を付ける
  7. カラーは花の色の部分からくすみピンクと写真に合った茶色
shio
shio
使ってるフォントがお気に入りなのでご紹介!

フォント:見出ゴMB/ペンレター/Duos Round Pro

【webデザイナーおすすめ】デザインする時に役立つデザイン勉強本8選のバナー
【webデザイナーおすすめ】デザインする時に役立つ勉強本8選+こんにちは ^^💐 今回は私がデザインする時によく読んでいる本をご紹介します。 私はデザインに困ったとき、本...

文字だけのデザインに挑戦したバナー

6月の活動記録〜web制作会社に勤めて1年・ブログも頑張る〜の画像
  1. 文字だけのシンプルなデザインに挑戦
  2. 活動記録は毎月ある記事なので、シリーズ化しやすいデザイン
  3. 6月は「ジュンブライド」というイメージがあるので綺麗な印象を与えたい
  4. 6月を連想できる紫陽花の画像をメインの「6」に入れる
  5. 「6」は思い切って大きく目立たせて、メリハリをつけたデザインに
  6. 上品な欧文フォントを使用(Trajan Pro 3)
  7. 余白をとって綺麗な印象を
  8. 左右に入れた文字は、上下真ん中・上下のラインを揃える
shio
shio
7月のデザインはどうしようかな〜
6月の活動記録〜web制作会社に勤めて1年・ブログも頑張る〜の画像
webデザイナー6月の活動記録〜制作会社に勤めて1年・デザインブログを書く〜こんにちは! 今回は久しぶりにwebデザイナーとしての活動記録のブログです。 web制作会社に勤めて1年 今月でweb制作...

フリー素材をアピールしたバナー

フリー素材サイトのまとめ記事なので、それぞれのフリー素材を主役になるように使ったデザインを意識して作りました。

配色をオシャレにしたバナー

制作会社WEBデザイナーが良く使うフリーイラストサイトまとめ11選
  1. デザインの本で「イラストを使ったデザイン」を参考に作成
  2. 子どもっぽくならないように、ビビットピンクで大人っぽく
  3. ビビットピンクとくすんだグレーの配色でバランスをとる
  4. ぎゅうぎゅうにならないように、余白も意識
  5. 「フリーイラストサイト」は目立たせたいので、帯を敷いた
shio
shio
ユーモアのあるイラストが多いイラストサイトのものを使わせていただいたので、ユーモアが活きるように、ちょっとふざけて並べてみました。笑
制作会社WEBデザイナーが良く使うフリーイラストサイトまとめ11選
制作会社WEBデザイナーが良く使うフリーイラストサイトおすすめ11選【無料/商用可】こんにちは! 今回は制作会社に勤めて毎日webサイトのデザインをしている私が よくお世話になっているフリー(無料)のイラスト素材...

アイコンの可愛さを活かしたバナー

【無料/商用可】WEBデザインで使いやすいおすすめフリーアイコンサイト7選
  1. アイコンをたくさん紹介しているので、アイコンをいっぱい使ったデザインに
  2. 黒と黄色の2色で目立たせる
  3. 文字部分は読みやすいように白い背景を
  4. 影をうっすら付けて奥行きを出す
  5. シンプルになりすぎないように「7選」部分はデザインをつけて、楽しい雰囲気を出す
shio
shio
ちょこんところんとしていてかわいい♡
このサイトのアイコンは150個一気にダウンロードできますよ✌️🧡
【無料/商用可】WEBデザインで使いやすいおすすめフリーアイコンサイト7選
【無料/商用可】WEBデザインで使いやすいおすすめフリーアイコンサイト7選こんにちは! 今回は制作会社に勤めて毎日webサイトのデザインをしている私が よくお世話になっているフリー(無料)のアイコンサイ...

女性のフリー素材を活かして雰囲気が出るよう作ったバナー

【無料/商用可】WEBデザインで使えるおすすめフリー画像・写真素材サイト11選
  1. フリー素材を使用「unsplash」
  2. 女性の着ている服の赤が綺麗だったので、赤をアクセントにシンプルでオシャレな雰囲気に
  3. 人と文字をかぶせて奥行きを出す
  4. 文字は縁文字にして抜け感を出して女性向けデザインに
  5. 写真の雰囲気を壊さないように文字は小さめに
  6. でも数字は大事なので目立つようにデザイン
  7. 雑誌ぽさを、左上の文字ゾーンで出す。(読ませる気はない・・・飾り)
  8. 余白はきちんとてオシャレさを崩さないように
【無料/商用可】WEBデザインで使えるおすすめフリー画像・写真素材サイト11選
【無料/商用可】WEBデザインで使えるおすすめフリー画像・写真素材サイト11選webサイトを作る時、バナーを作る時など、写真素材を使いますよね。 ですがなかなかいい写真素材が見つからず、気が付いたら写真を探す...

柔らかい印象にするよう作ったバナー

WEBデザイナーになった最初の1年のバナー
  1. 1年目のお話なので、柔らかい印象になるようデザイン
  2. 丸・曲線を使う
  3. 文字も親しみやすいフォント
  4. webデザイナーの仕事の記事なので、パソコンを使うイラストの素材を探す
  5. リモートワークなので、お家にいる雰囲気を出す
    (ふにゃふにゃの中に入れた)
WEBデザイナーになった最初の1年のバナー
未経験からwebデザイナーになった1年目の反省|フリーランスから制作会社入社こんにちは! 私は去年の今頃から、webデザイナーとして活動を始めていました。 ちょうど1年経ったので、今までの活動・仕事について振...

遊びで作った手書きのバナー

制作会社勤務webデザイナーの「リモートワークルーティン」のバナー
  1. 記事で使用したお家の写真を時間系列で並べてルーティン感を出す
  2. 気軽に見て欲しい記事なので、手書き文字で
  3. 写真の色味に揃えたカラーを選択
shio
shio
気休め記事なのでこちらのバナーはチャチャっと作りました。
制作会社勤務webデザイナーの「リモートワークルーティン」のバナー
制作会社勤務webデザイナーの「リモートワークルーティン」〜在宅勤務4ヶ月〜こんにちは。 制作会社に勤務しているwebデザイナーのshioです。 2度目の緊急事態宣言が出て、今年の1月からリモートワークに...

経験を活かし本気で作ったこども向けデザインのバナー

webデザイナーが考えるこども向けデザインのポイントのバナー
  1. イラストはフリー素材の「イラストAC」からカラフルなもの探した
  2. 1つだけではこどもらしい元気で賑やかな雰囲気が出せなかったので、同じテイストのイラストを探す。
  3. 3つの素材をダウンロードして、バランスを見て組み合わせて作成。
  4. 虹やガーランドはこども向けデザインの鉄板!
  5. 文字も1文字ずつブライトトーンから選んでカラフルに

仕事でこども向けサイト(保育園や幼稚園などの施設)を4つ作ってきた経験を活かして、作りました。

こども向けデザインをもっと学びたい方はこの記事も合わせて読んでみてください^^
「こども向けデザインのあるある」などまとめています!

webデザイナーが考えるこども向けデザインのポイントのバナー
保育園サイトを4つ作ったwebデザイナーが考える【こども向けデザイン】のポイントこんにちは! webデザイナーのshioです^^ 最近お仕事でこども向けのサイトを作る機会があり、 4つの保育園や...

 

shio
shio
ここまでは、制作会社で働いて経験を積んだ状態で作ったデザインのバナー達でした。

未経験感のあるデザインのバナー

ここからは1年前に作った未経験感たっぷりのデザインです。
お恥ずかしいですが、お見せしてコメントしていきたいと思います(^^;

私のポートフォリオとリンクさせたデザインのバナー

webデザイナーの就職活動で使うポートフォリオのバナー
  1. わたしのポートフォリオはナチュラルなデザインなので、その雰囲気に合うバナーデザインに
  2. 人の影はフォトショップでつけて奥行きを出した
  3. 人の形に沿って文字を沿わせてナチュラルに
  4. ポートフォリオの記事なので、実際に自分のポートフォリオのメインビジュアルをモックアップに入れてデザインからどんな記事なのか分かるように

改善点:文字をもっと大きく読みやすいデザインにする

webデザイナーの就職活動で使うポートフォリオの作り方のバナー
【ポートフォリオの作り方・ポイント】未経験からwebデザイナーに転職したい方へこんにちは、webデザイナーのshioです^^ 私はほぼ未経験で制作会社のwebデザイナーに転職しました。 未経験からwebデザ...

シリーズもののバナー

webデザイナーの就職活動前編〜未経験からwebデザイナー〜のバナー webデザイナーの就職活動中止編〜外出自粛期間中にレベルアップ〜のバナー webデザイナーの就職活動後編〜コロナ渦の就活〜のバナー
  1. シリーズものの記事になるので、最初に3パターンデザインをざっと決めておいた
  2. ナチュラルなデザインになるように

改善点:文字が一部見づらい→周りに光彩をつけるなり工夫する

「ほんとに、フォント。」のバナー

『ほんとに、フォント。』を読んで、アウトプットして学んだこと。〜レビュー〜のバナー

本の表紙は著作権で載せられないので、

  1. 自分で作った作品を下に敷いた
  2. カラーを本の色のイエローに合わせた

ん〜。。。微妙ですね。。。

改善点:下に敷いた背景が少ししか見えなくて中途半端
→作品画像を目立つようなデザインにする

みようみまねに作ってみたデザインのバナー

ネイルの記録〜2020上半期〜のバナー
  1. 文字を全体に載せるようなデザインに憧れて、真似して作成。

改善点:うすすぎてみづらい!
→メリハリをつけるなり工夫する!

色味を揃えて作ったバナー

wixでwebサイト制作した感想のバナー
  1. 思っている部分「知っておいたほうがいいことがあった」は吹き出しでデザイン
  2. サボテンカラーとリボンの色を合わせて全体的にデザインをグリーンに統一

改善点:WIXについての記事ということが伝わりにくい。。。
これでもいいけど、PCのイラストなどの素材を使ったほうが○

文字サイズを調整シンプルデザインのバナー

私が保育業界からwebデザイナーに転職した理由のバナー

光彩の付け方がイマイチ。読みやすい工夫を工夫する。

超初心者なバナー

1番最初に作ったバナーです。。。
突っ込みどころがたくさんです。。。
初心者がやりがちな、あしらい。。。

文字を読ませたいバナーなので、余白があるものを選ぶなど、まずは素材選びから!

一番ヤバいひどいデザイン・・・

デジタルハリウッドbyLOG紹介のバナー

先ほどのバナー作りをしたの最初の状態。。。データが残ってました。
さらにひどい・・・笑 言葉が出ない・・・笑

この頃はwebサイトはいくつか作っていたけど、バナーの勉強は全くしていませんでした。【webサイトのデザイン】と【バナーデザイン】は違うので「バナー作るの難しい・・・」と撃沈したのを覚えています。

この後バナートレースの勉強をして、少しマシになりました。

shio
shio
本当に恥ずかしい。。。

1年前とバナーデザインを比較してみた・・・

分かりやすいのが、こちらの活動記録の記事。

ちょうど6月なので比較しやすいですよね^^

5月の活動記録のブログのバナー → 6月の活動記録〜web制作会社に勤めて1年・ブログも頑張る〜の画像

去年のものは余白の付け方微妙だし、線も太くて野暮ったさが出ています。

shio
shio
実務経験したり日々素敵なデザインを見て、こんな感じに成長しました。

おわりに

いろいろなことを考えながらデザインしてきたので、熱弁して長くなってしまいました。。。

最後まで読んでくださってありがとうございます^^

自分のデザインを比較するのも、面白いですね。

「これからももっとデザインの仕事を頑張っていこう!」と思いました。

shio
shio
また作ったバナーが溜まった頃にコメント・比較していきたいと思います。

では、また^^❋

webデザイナー|Canva公式クリエイター
shio
webデザイナーshioのアイコン
*月7000人が読んでるデザインブログ運営 *ナチュラルな婚姻届を心を込めて制作 webデザイナーを目指したい方向けに、 【勉強方法|転職活動|ポートフォリオ制作|制作会社で働いてからのこと|webサイト制作 etc... 】について発信しています。 このブログとともにwebデザイナーとして成長していきます!
\ Follow me /
webデザイナーの就職活動で使うポートフォリオのバナー