トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

あるあるデザイン45種類使ってみる!【23/45】

あるあるデザイン

この本を買いました。

あるあるデザイン

45種類のあるあるデザインに名前をつけて、それぞれ六つずつデザイン例が載っています。

どれも今すぐ使いたくなるようなものばかり!

これはよくやるっていうやつから、気づいてなかったけどこういう手法使ってたのか!みたいなのまであって本当に読んでて楽しかった!

頭の中でついそのデザインを作ってしまいました。

ということで実際にも作っていきましょう。

やり方

・XDしかツールがないのでできるだけXDで頑張る

・1日1個ぐらい作りたい気持ち

・一つの題材に複数の手法を使うこともある

・使った手法は済マーク

f:id:bibinbaleo:20200716220057p:plain

まあこういうのはだいたい続くのは最初の方だけで、途中で飽きるので自分に期待はしない。

作る題材

架空のものを作ってても楽しくないので、何か使えるものを作りたい。

各種SNSのサイズとかそのXDサイズのXDはここでダウンロードできる

socialsizes.io

ブログアイキャッチ画像

記事のサムネにするものがない時に使えるアイキャッチ画像。

ブログで一つ設定できる。今はこれ

f:id:bibinbaleo:20200716211125p:plain

これを「学ぶ」と「日記」用で二つ作る

Twitterだと1040 x 584かな?

f:id:bibinbaleo:20200716212848p:plain

Youtubeのサムネ

写真使う系のデザインはYoutubeのサムネとか作りたい。

f:id:bibinbaleo:20200716213641p:plain

www.youtube.com

Boothサムネ

Boothに商品出していることすら忘れてたけど、いいね13とか14もついてるし商品のサムネ作ろうかな〜

bibinbaleo.booth.pm

サムネは正方形

f:id:bibinbaleo:20200716214745p:plain

ついでにカバー画像作ってないので作ろう

1500px x 500p

その他各種カバー画像等

VIVIVITとかいろいろ使っているサービスのカバー画像

bibinbaleo.hatenablog.com

色のメモ

赤:eb5930

青緑:77c6c6

1.だいたいツートンで行ける+44.またがる文字

f:id:bibinbaleo:20200716214554p:plain

ツートンってシンプルな題材すぎてどうしていいかわからなかったから、またがる文字という強いやつに頼っちゃった!

違和感が目を引いていいね。アイキャッチは目を引くべきかは分からないけど。

2.丸インパクト

まるは好きよ。名刺作った時も真ん中に丸

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bibinbaleo/20190908/20190908204053.png

3.太枠を入れてみる

f:id:bibinbaleo:20200717202044p:plain

一部切り取り。XDでこれするのめっちゃ大変だった。長方形で二箇所ぐらいマスクした

f:id:bibinbaleo:20200717202613p:plain

どうだろう・・・写真とあってないかも

www.youtube.com

04.左から4分の1の法則

f:id:bibinbaleo:20200723103316p:plain

横画像で使うときは4分の1が画像の時に使ったほうがいい気がする

狭い範囲に文字を入れるのきついよ

youtu.be

05.さんかく散らす/20.抜け感中抜き文字

散らす系、地味に大変なんだよなー自然に散らばっているように角度や大きさを一つ一つ愛を込めて配置する

f:id:bibinbaleo:20200723110358p:plain

youtu.be

丸っぽい漢字ないか探したけど、すぐには見つけられなかった。

f:id:bibinbaleo:20200723110348p:plain 

bibinbaleo.hatenablog.com

図形をランダム配置するプラグインあった。Confetti

f:id:bibinbaleo:20200723144557p:plain

f:id:bibinbaleo:20200723144600p:plain

06.ライン区切り

f:id:bibinbaleo:20200724232027p:plain

bibinbaleo.booth.pm

07.背景シロ透過の術

f:id:bibinbaleo:20200724234159p:plain

よく使う技。活かし方を間違っている気がするけど

youtu.be

08.ナナメスタイリッシュ

元々「04.左から4分の1の法則」を使おうとしたけど、入れる文字が思い浮かばなかったので斜めを使用。

f:id:bibinbaleo:20200722232606p:plain

題材は適当に選んだけど、ARも斜めになってるし、お手本通り文字の下に線を入れたら時計の針みたいになったので短針を斜めに入れたらいい感じ!!!

www.youtube.com

09.ちっちゃい文字飾り

f:id:bibinbaleo:20200725105358p:plain

完全に蛇足になった・・・

マジでさっきから活かす場所を間違えすぎている

youtu.be

10.イラストありき/12.まわり余白最高/13.文字間あけて整列

この三つそれぞれ別に作ろうと思ったんだけど、どれも思いつかなくて最終的に怒りの全部詰め込み

f:id:bibinbaleo:20200725112918p:plain

youtu.be

イラストはこちら

www.ac-illust.com

11.アーチってステキ

XDはアーチ文字できない;;

どうしよ・・・

14.極太ライン締め

f:id:bibinbaleo:20200726222118p:plain

太さと長さ難しい。

白文字だけ置いたら背景の画像の白と被って見にくかったので、すりガラスをおいた。XDの背景をぼかす機能本当好き。

youtu.be

15.線でかこむ

f:id:bibinbaleo:20200726223306p:plain

デザインにアクセントが加わってオシャレに。この筆記体の使い方は本を参考にした。

筆記体はBradley Hand

フォントビューワーで探した。便利〜

f:id:bibinbaleo:20200726223627p:plain

youtu.be

16.オビでリズム

むずかった。奥文字を考えるのが大変(考えてない)

f:id:bibinbaleo:20200727204117p:plain

youtu.be

17.フキダシ親近感

f:id:bibinbaleo:20200727205337p:plain

突然すごい素人感出しちゃった。もっとメインとして吹き出し使ったらかっこいいんだろうなー

youtu.be

吹き出しはこちらから

fukidesign.com

18.はみ出す勢い

f:id:bibinbaleo:20200729223310p:plain

なんかダサい〜

youtu.be

こっちの方がいいかな?

f:id:bibinbaleo:20200729223906p:plain

youtu.be

19.オビで敷くだけ

f:id:bibinbaleo:20200730215459p:plain

youtu.be

21.斜線で切るやつ

むっず!

f:id:bibinbaleo:20200731220801p:plain

文字切るのむずい。

作成途中

f:id:bibinbaleo:20200731220752p:plain

youtu.be

22.グリッドってかしこそう

f:id:bibinbaleo:20200802231038p:plain

なんか違う・・・

youtu.be

23.困ったらストライプ 

f:id:bibinbaleo:20200802233330p:plain

ストライプを手動でおいたら、感覚がバラバラになった;;

下手すぎる

そしてYoutubeのサムネにしたら、半透明は背景黒になるんだ。学びー

f:id:bibinbaleo:20200802233744p:plain

変更した

youtu.be

24.モノクロ写真さえあれば

パス

25.かわいい手書き文字

かわいい〜〜

f:id:bibinbaleo:20200803221755p:plain

久しぶりにいい感じにできた〜

youtu.be

26.ロゴっぽくしてみる

むずすぎない!ロゴなんて作れなーい

装飾使うしかない

frames-design.com

f:id:bibinbaleo:20200803223042p:plain

Roseloreleiっていうフォントが凄かった

f:id:bibinbaleo:20200803223221p:plain

記憶があまりないけど、入れたらしい

でも団体の顔として使うのはやめてくださいって書いてある。

これ良さそう

f:id:bibinbaleo:20200803223711p:plain

このブログっぽさが1mmもないけど。いつ使うんだ 

最後に

途中だけど一旦公開する。4連休は毎日2つずつやった!

明らかに下手なのもあるけど、ジョジョに上手くなっていけばいいのだ。

XDの機能やプラグインも知れるし、デザインの勉強にもなるし楽しいなー

あるあるデザイン

あるあるデザイン

  • 作者:ingectar-e
  • 発売日: 2019/01/18
  • メディア: Kindle版