【イラレ】10種のフォントと、シンプルな背景のアイディア(曲線)

WEBでも印刷でも、さくっとできる曲線の背景です。

f:id:mizuumi17:20190612132225p:plain

曲線を回転コピー

ペンツールで曲線を描いて回転コピーしました。時間があればグラデーションもつけられます。線幅も変えられます。しかしまったく全然もう時間がないっ!!という時もこれならいい感じで、ビジネスにも充分使える背景ができます。ぜひ!

フォントは「うつくし明朝体フリーフォント界の女王です。どんな文字を打ってもきれいでかわいくて美しくなります。ぜひ使ってみてください。

f:id:mizuumi17:20190610044803p:plain

 

同じく、曲線を回転コピー

 上のデザインに青い背景色を加えました。文字と模様は白に。今回使った青色は #00A0C6 です。はてなの青より少し黄みがかかった青です。色で迷いはじめるとほんとうにきりがないので、まずは自分の一色を決めておくと何かと便利です。

フォントは「筑紫A丸ゴシック」です。mac標準搭載。Adobefontsからも使えます。書籍や雑誌、パッケージにと近年大ブームのフォント。コンビニのお菓子コーナーでもよく見ます(フォントが気になって休憩にならないのが悩み)。それぐらいよく見る、今の日本の空気感をよく表しているフォントです。

f:id:mizuumi17:20190610044819p:plain

 

曲線をブレンド

上のデザインの続きで、曲線を回転コピペした、端っこの2本の線だけを残し消します。その2本の曲線をブレンドツールでブレンドしちゃいます。このサンプルは間隔が細かすぎてモアレをおこしちゃっています。

媒体(PCかスマホか)やモニターの種類(フルHD、WQHD、4K)の違いでも画像の見え方は変わってきますので「どーーしてもこのブレンドカラーじゃないとだめなんです!」という場合以外は、適度に間隔をあけた方が無難ですね(汗)。

フォントは「新聞ゴシック」です。サンプルではプレーンな状態で使っています。平体をかけるとさらに新聞っぽくなります。読みやすくたよりになる安心のフォントです。

f:id:mizuumi17:20190610044830p:plain

 

曲線ブレンドのステップを100に

上のデザインの続きで、曲線を回転コピペした、端っこの2本の線だけを残し消します。その2本の曲線をブレンドツールでブレンドしちゃいます。ブレンドのステップを100に設定するといい感じです!。

ぱっと見はグラデーション、よく見ると細かい線の集合体。他のソフトでも同じことはできると思いますが、イラレだとここまでが何かと早いです。素材を探す時間も惜しいぐらいとてもとても忙しい時も、曲線のブレンドツールは最強です。

フォントは「游明朝」です。こちらも安心の定番フォント。

f:id:mizuumi17:20190610044852p:plain

 

曲線ブレンドのステップを50に

上のデザインの続きで、曲線を回転コピペした、端っこの2本の線だけを残し消します。その2本の曲線をブレンドツールでブレンドしちゃいます。ブレンドのステップを50に設定。空間のある「いま風シンプル」背景になります。空間に合わせて文字の色もグレーにしてみました。

フォントはスマートフォント」です。サンプルでは小さく使いましたが、3文字ぐらいをばーんと誌面いっぱいに使うのもクールでかっこいいです。また、文字の字間を広げてパラパラに使ってもバランスがとりやすい、驚くべきフリーフォントです。今ふうシンプルなデザインにぜひ使ってみてください。

f:id:mizuumi17:20190610044901p:plain

 

リフレクトそしてリフレクト

上のデザインの続きで、曲線を回転コピペしたら、任意の線を消して調整します。グループ化して、上下リフレクト複製や左右リフレクト複製などをしてみます。正解はないのであまり悩まず「あとから調整すればいいや」ぐらいの気持ちで作ると、軽やかで勢いのある良いデザインに仕上がります。

きっちりデザインを作り込んでも、どんなに大御所先生の作ったデザインでも、必ず修正のフローはあります。最初はポイントだけ押さえてクライアントに伝わればいいと思います。この場合は、シンメトリーな模様がいい感じなのでそれに合わせて文字組全体も中央ぞろえにしてみました。

フォントは「いろはまる」です。筑紫系にも引けをとらない、かわいい丸ゴシックです。なんと言ってもこれフリーフォントです。すごい。

f:id:mizuumi17:20190610044910p:plain

 

オブジェクトを縦にしてみる

上のデザインの続きで、曲線を回転コピペ、ブレンドしたオブジェクトを、縦に複数並べると、波打ちぎわのような、あるいは砂漠の砂のような面白い模様になりました。自分でもびっくり。

フォントは「筑紫ゴシック」です。解説不要の美しいフォントです。

f:id:mizuumi17:20190610044922p:plain

 

オブジェクトを拡大してみる

上のデザインの続きで、曲線を回転コピペし、オブジェクトの半分以上がアートボードからはみ出るぐらい拡大しました。不透明度25%で重ねるときれいに見えます!。背景の主張が強いので、それに合わせてタイトル文字もがつんと大きくしました。

フォントは「筑紫ゴシック」です。上のと同じく、解説不要の美しいフォントです。

f:id:mizuumi17:20190610044933p:plain

 

線のイメージを合わせる

上のデザインの続きで、曲線を回転コピペし、複数をバランスを見ながら配置します。極細のフォントを使って、背景の線と文字のイメージを合わせました。「100」「の」「背景」の中で「の」だけがなんか細いかも……。そういう時はフォントのウエイト(太さ)で調整します。また、ウエイトがないフォントの場合は、線幅でも調整できます。

最初のアイディア出しの時点ではクオリティをそこまで細かくする必要はないと思いますが、連絡事項に「最終納品時には全体を揃えて仕上げます!」とひとこと添えて伝えてください。ちゃんとしたクライアントさんなら、それだけで充分に伝わります。

フォントは「Rounded-L M+」です。たいへん美しい驚くべきフリーフォントです。ウエイトも種類もたくさん提供されていますので、ぜひ使ってみてください。明るく快活なフォントは、ビジネスシーンでも大活躍すること間違いなし!

 f:id:mizuumi17:20190610045107p:plain

 

ぐるっと一周360°回転コピー

上記で作ったオブジェクトを、ぐるっと一周360°回転コピーしました。「イラレのわざ」としては回転コピーはそんなに難しいことではないのですが、一般の視点ではすごいわざです。私はつい2-3年前まで一般の視点で見ていたので、その感覚がよくわかります。すごいわざほどさりげなく、不透明度を下げて全体と調和させたらできあがり!

フォントは「kazesawa」です。なんだかすっきりしないなーと悩んだ時には必ず使う、たよりになるイケメンなフリーフォントです。

 f:id:mizuumi17:20190610044944p:plain

 

 大忙しの時にもさくっとできる、こんなアイディアを少し知っていると何かと心強いです。ご興味がありましたらぜひ!

 

🔗ご参考

うつくし明朝体フリーフォント

https://www.flopdesign.com/freefont/utsukushi-mincho-font.html

 

筑紫A丸ゴシック(有料フォント)(Mac 標準装備)

https://fontworks.co.jp/fontsearch/item?TsukuARdGothicStd-R

 

新聞ゴシック(有料フォント)

https://www.typebank.co.jp/fontfamily/tbnewspapergothic/

 

游明朝(Win Mac 標準装備)

 

スマートフォンフリーフォント

https://www.flopdesign.com/freefont/smartfont.html

 

いろはまるフリーフォント

http://modi.jpn.org/font_irohamaru.php

 

筑紫ゴシック(有料フォント)

https://fontworks.co.jp/fontsearch/item?TsukuGoPr5-R

 

Rounded L +Mフリーフォント

http://jikasei.me/font/rounded-mplus/about.html

 

Kazesawaフリーフォント

https://kazesawa.github.io/