トマシープが学ぶ

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

あるあるデザイン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はアーチ文字できない;;

どうしよ・・・

自分で角度つけた

f:id:bibinbaleo:20200815152358p:plain

youtu.be

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.モノクロ写真さえあれば

モノクロ写真が映えるような動画ないよ!

f:id:bibinbaleo:20200815154307p:plain

水玉は本の参考デザインパクった

youtu.be

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もないけど。いつ使うんだ 

というか、このロゴっぽくっていう技は、「HappyBirthday」とか「Now on sale」とかロゴじゃない文字をロゴっぽくするっていう技なのに、トマシープブログをロゴにしたらただのロゴじゃん!

27.間持たせフレーム

f:id:bibinbaleo:20200804231655p:plain

色間違ってる気がする。

迷走の途中

f:id:bibinbaleo:20200804231715p:plain

youtu.be

28.洗練グラデーション

洗練されたグラデーション素材を昔買っていたのでそれを使う 

f:id:bibinbaleo:20200807202956p:plain

最初は普通にこんな感じだった

f:id:bibinbaleo:20200807203007p:plain

ただ、本の見本で文字がぼやけているやつがめっちゃかっこよくて、真似したらいい感じになった気がしないこともない

f:id:bibinbaleo:20200807203013p:plain

アイキャッチに使った。ふわふわ

f:id:bibinbaleo:20200807203212p:plain

29.筆記体で魅せる

muzui

f:id:bibinbaleo:20200807210313p:plain

f:id:bibinbaleo:20200807210417p:plain

youtu.be

30.正方形中央まとめ

f:id:bibinbaleo:20200807211411p:plain

なんの文字を置くか迷った。結局適当になった。

youtu.be

ちなみにサムネ詐欺。

同じ日に同じ場所で撮ったものだけど、動画にはこのような高画質の紅葉は写ってない

31.ふにゃふにゃでくり抜く

 ふにゃふにゃ作るの大変だった!

f:id:bibinbaleo:20200808230605p:plain

作った素材置いておく。

f:id:bibinbaleo:20200808230749p:plain

youtu.be

32.白背景に切り抜き写真

雑誌の化粧品紹介みたいでかっこいいよね。切り抜き

Macのプレビューで切り抜けた

f:id:bibinbaleo:20200808233917p:plain

qiita.com

デザインはクソ

f:id:bibinbaleo:20200808233957p:plain

こっちがいいかな?

f:id:bibinbaleo:20200808234210p:plain

youtu.be

33.文字散りばめ

あんまり散りばめてない。それより参考デザインであったこの黒シャドウの使い方の方が気に入った。

f:id:bibinbaleo:20200809215506p:plain

本当はこれぐらい散りばめる。すごい下手だけど

f:id:bibinbaleo:20200809215859p:plain

やっぱちらばそ〜

f:id:bibinbaleo:20200809220135p:plain

youtu.be

そういえば文字の塗りを半透明にしたら影も半透明になってしまう;;

 

34.写真の余白多め

余白の多い写真をいざ見つけるとなると大変だな

f:id:bibinbaleo:20200809221320p:plain

余白全く関係ないけど、絶対こっちの方が映えるからサムネはこっちにした

f:id:bibinbaleo:20200809221815p:plain

youtu.be

35.水玉のせとく

文字の上にも載せるのおしゃれ

f:id:bibinbaleo:20200809230950p:plain

youtu.be

36.反復反復反復

f:id:bibinbaleo:20200810211208p:plain

37.動く文字

f:id:bibinbaleo:20200810211845p:plain

何で香の字が角度ついているのか、その理由は定かではない。一応お香の角度に沿っている

youtu.be

38.ギリギリカツカツ

本読んでる時も思ったけど、はみ出す勢いと似ているよね。

f:id:bibinbaleo:20200729223906p:plain

なんかどっかで見たことあるようなデザインだな〜

f:id:bibinbaleo:20200810212915p:plain

この動画にひどいコメントついてた;;

youtu.be

39.写真ペタペタ

難しすぎる・・・

f:id:bibinbaleo:20200811225241p:plain

youtu.be

40.全部見えないチラリズム

f:id:bibinbaleo:20200811230640p:plain

muzui

youtu.be

41.フレームずらし

f:id:bibinbaleo:20200813215821p:plain

むずい

youtu.be

42.文字でフレーム

どっちがいいかな

f:id:bibinbaleo:20200813221415p:plain

f:id:bibinbaleo:20200813221310p:plain

結局フレームに文字置いているだけになった

youtu.be

43.装飾ラインでいい感じ

f:id:bibinbaleo:20200814230813p:plain

free-line-design.com

youtu.be

45.写真2枚並べ

f:id:bibinbaleo:20200814233120p:plain

youtu.be

最後に

 

参考デザインが6つもあったら、自分でもうまくできるだろうと思ったけど、全然下手だった;;

デザイン難しい!!!違和感のないデザインをできている人全員尊敬する。

そんな気持ちが膨らみました。

でもやりきれてよかった!いつか役に立てばいいなー

XDの機能やプラグインも知れてよかった。