この記事は
- バナータイトルのレパートリー
- バナータイトルのバランス
- 視認性を高めるためのあしらい方
具体的なアイディアが浮かばない、悩んでいる、時間ばかり過ぎていく…
バナー作成時短に少しでも参考になればと、私自身が駆け出しのときに知りたかったデザインを詰め込みました💡
添付画像はすべてIllustratorで作成しています💡
Illustratorを公式サイトの約半額で使いたい方はこちら
まめぶろぐ
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/fb81c8e46d6dbee36ea059cd61f098cf.jpg)
【5社比較】Adobe CCをお得に買う方法 デジハリが一番お得な理由とは? | まめぶろぐ
Adobe Creative Cloud(CC)を公式サイトから購入すると、年間プランで約86,880円かかります。 …正直、めちゃくちゃ高い💦 でも、、、Adobe CCがないと仕事にならないって…
2ヶ月間無料で使いたい方はこちら
まめぶろぐ
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/73de3eb75cfd2da313539cf125dfc79a-1.jpg)
IllustratorもPhotoshopも2ヶ月間無料で使える裏ワザ | まめぶろぐ
IllustratorもPhotoshopも使ってみたいけど値段が高いんだよね… 実はAdobeのコンプリートプランを2ヶ月間無料にできる方法があるんです 今回はAdobe Creative Cloudを2ヶ…
1分〜5分ほどで簡単にできるのに、デザインの引き出しがぐっと増えるレパートリーにしています。
デザインを始めたばかりのかたはぜひ参考にしてみてください♩
もくじ
文字に座布団を敷く
文字の背景に図形を配置するだけなので、すぐにできます!
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
文字に背景色を敷くことをデザイン業界では「座布団をしく」といいます
文字に座布団を敷く
↑読みたい項目をクリックするとジャンプします
背景色を敷く
![](https://webdesign-mame.com/wp-content/uploads/2024/07/68ba761519517e02ab67672ffabba470-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/68ba761519517e02ab67672ffabba470-1024x321.jpg)
助詞だけ背景色を敷く
![](https://webdesign-mame.com/wp-content/uploads/2024/07/55b25c7c673b4b80005e072b86750641-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/55b25c7c673b4b80005e072b86750641-1024x321.jpg)
助詞以外に背景色を敷く
![](https://webdesign-mame.com/wp-content/uploads/2024/07/76e1d90659bd4271f60bdecf1f0e19f2-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/76e1d90659bd4271f60bdecf1f0e19f2-1024x321.jpg)
最初の文字を強調する
![](https://webdesign-mame.com/wp-content/uploads/2024/07/07c48fe7e6a106f76be90da52d6de439-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/07c48fe7e6a106f76be90da52d6de439-1024x321.jpg)
正方形で囲む
![](https://webdesign-mame.com/wp-content/uploads/2024/07/7d011e0b62abdde2bc62e124cd537fbf-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/7d011e0b62abdde2bc62e124cd537fbf-1024x321.jpg)
丸で囲む
![](https://webdesign-mame.com/wp-content/uploads/2024/07/e1f11645e8cb84978f5a06dc5ae5cc18-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/e1f11645e8cb84978f5a06dc5ae5cc18-1024x321.jpg)
文字に加える
英文字を加える
![](https://webdesign-mame.com/wp-content/uploads/2024/07/965b2769fd5067bff78fac4d9b0c7972-1-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/965b2769fd5067bff78fac4d9b0c7972-1-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/5bff47f9914b215dc0d91ef1f4f7d548-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/5bff47f9914b215dc0d91ef1f4f7d548-1024x321.jpg)
ふきだしを加える
![](https://webdesign-mame.com/wp-content/uploads/2024/07/0a66c329dddbc11e23fb58290d9ca94c-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/0a66c329dddbc11e23fb58290d9ca94c-1024x321.jpg)
文字の角度を変える
ななめにする
![](https://webdesign-mame.com/wp-content/uploads/2024/07/1e843ef5d6130c071c2080e6cb77d0c8-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/1e843ef5d6130c071c2080e6cb77d0c8-1024x321.jpg)
縦にする
![](https://webdesign-mame.com/wp-content/uploads/2024/07/03c8423d88c310d2eff82432f8858022-1-1024x640.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/03c8423d88c310d2eff82432f8858022-1-1024x640.jpg)
カーブをかける(ゆるい)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/3c0739e42ec8f6eeba486add7abb9297-1-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/3c0739e42ec8f6eeba486add7abb9297-1-1024x321.jpg)
文字を加工する
テクスチャを加える
![](https://webdesign-mame.com/wp-content/uploads/2024/07/59b87546d30a28820b089c2774524187-1-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/59b87546d30a28820b089c2774524187-1-1024x321.jpg)
文字を柄にする
![](https://webdesign-mame.com/wp-content/uploads/2024/07/3995f08aa268a7842ad02a86d07d5bb7-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/3995f08aa268a7842ad02a86d07d5bb7-1024x321.jpg)
文字をパーツ毎に分解する
![](https://webdesign-mame.com/wp-content/uploads/2024/07/337e705fd6b1365b69e55adb51f7604f-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/337e705fd6b1365b69e55adb51f7604f-1024x321.jpg)
文字の一部だけ色を変える
![](https://webdesign-mame.com/wp-content/uploads/2024/07/84b4abdc273c0b8757c4566f415509dd-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/84b4abdc273c0b8757c4566f415509dd-1024x321.jpg)
文字の一部を図形にする
![](https://webdesign-mame.com/wp-content/uploads/2024/07/b7fcc38be93011c388e9be91e18b4278-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/b7fcc38be93011c388e9be91e18b4278-1024x321.jpg)
文字に立体的にする
![](https://webdesign-mame.com/wp-content/uploads/2024/07/f3e0b7c78c22df6f810baa93a61a7c73-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/f3e0b7c78c22df6f810baa93a61a7c73-1024x321.jpg)
文字の一辺だけ長くする
![](https://webdesign-mame.com/wp-content/uploads/2024/07/0ef6f154f95667c0da7b25b9d723fad2-1-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/0ef6f154f95667c0da7b25b9d723fad2-1-1024x321.jpg)
文字にフチをつける
![](https://webdesign-mame.com/wp-content/uploads/2024/07/fddfe2c795ada61f7082f15cf0062a7a-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/fddfe2c795ada61f7082f15cf0062a7a-1024x321.jpg)
文字の色を変える
![](https://webdesign-mame.com/wp-content/uploads/2024/07/7ad73c3f2747d867103bec87333fe9ec-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/7ad73c3f2747d867103bec87333fe9ec-1024x321.jpg)
塗りをずらす
![](https://webdesign-mame.com/wp-content/uploads/2024/07/0310aa6965678fc05060830dca735c3f-1024x321.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/0310aa6965678fc05060830dca735c3f-1024x321.jpg)
まとめ
バナータイトルのあしらい21選をご紹介しました🌸
アイディアを組み合わせることでご希望のデザインに近づけてみてくださいね!
Illustratorをお得に使ってみたい方
まめぶろぐ
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/fb81c8e46d6dbee36ea059cd61f098cf.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/fb81c8e46d6dbee36ea059cd61f098cf.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/fb81c8e46d6dbee36ea059cd61f098cf.jpg)
【5社比較】Adobe CCをお得に買う方法 デジハリが一番お得な理由とは? | まめぶろぐ
Adobe Creative Cloud(CC)を公式サイトから購入すると、年間プランで約86,880円かかります。 …正直、めちゃくちゃ高い💦 でも、、、Adobe CCがないと仕事にならないって…