こんにちわ！ふじしろです！
そういえば！今日はiphone7の発売日！！
やっと替えれるので楽しみです！
さて、今日は週末最終日ですからデザインもほぼ完成！しとかないといけない日です！
ふじしろは。。。。。
この3連休存分にphotoshopと戦うことになりそうですｗ
しかし！デザイン本当にたのしい！
もっとはやく効率を上げたいですね！
今日学んだことは、
余白の重要性
写真の上に文字を置くときの工夫
になります！
余白の重要性
まず余白の重要性ですが、
ぼくはデザインしてるときコンテンツごとにばらばらだったり、
フォントサイズの統一ができていなかったりしていました。
しかし、今回ご指摘いただき、そこを修正するためにgoogle先生にもご教授いただきながら、
それなりに形になってきました。
伝わるデザイン｜研究発表のユニバーサルデザイン
http://tsutawarudesign.web.fc2.com/index.html
つみきブログ
http://blog.tsumikiinc.com/article/20150402_%20appropriate-margin-of-heading.html
この２サイトが非常に参考になりました！
現在は2つ目の記事を参考にデザインを進めております！
どういうことかというと、
たとえば、32pxの見出しがあるとします。
そのあとに中身を入れていくと思うんですけど、
この距離感ですね。
この距離感を大体1文字分くらいあけるといいとのことだったので、
32pxあけています。
これをするだけで、
すっごい、いい（ハート）ｗ
きれいです！
統一感あります！
どや！って作りながらなってます！
このように幅や余白のとり方などをルール化することで、見え方がぐっと替えることができます。
本来はもっといい方法があると思うんですけど、
ぼくはコンテンツごとに上記のように色を変えながら余白用の図形を作って、間隔を作っています！
写真に文字を置くときの工夫
つぎに学んだことは、
画面に広がる写真の上に文字があったり、ロゴがあるサイトって結構目にしませんか？
すごい見やすいし伝わりますよね？
ふじしろもやってみました！
結論から言うと、
ぜんぜん文字見えないね。
わからないね！
こんな感じに白色の文字でおしゃれに♪
なんて思ってたんですけど、
そうゆうことです。
めっちゃ苦戦してますｗ
で、今日教えてもらったことと、自分でやったことがありまして、
ひとつは、
写真の部分的に、すりガラスみたいなものを敷いて、文字をうつ。
分かりにくいですよね。ｗ
https://design.tutsplus.com/tutorials/quick-tip-add-a-frosted-background-to-photo-captions–psd-9014
これとか参考になるかもです！
これは、白い長方形を文字を書くところに作成し、
↓
レイヤースタイルで、不透明度を２０％、境界線も白にし、不透明５０％に設定
↓
【ここちょっと意味がわからなかった】背景画像レイヤーを選択した状態で、
白い長方形を作ったレイヤーを【ctrl+クリック】して選択範囲を決めて、
フィルター→ぼかし→ぼかし(ガウス)２０％
↓
文字レイヤーを乗せる。
すると、
ちょっとありそうなかんじですよね！！
いい感じに出来てきました！
配色をミスった感じはしますが、ｗ
また別の方法としましては、
文字に対して工夫を加えてあげる。
これは境界線を作ってあげているパターンですね！
ただ少し古臭いといいますか、アプリでできそうですねｗ
次は、
ドロップシャドウをくわえてあげてます。
不透明度３０％ですこしくっきり目にやっています。
これがとてもいい感じです。
こういった工夫でまだまだおしゃれにしていきますよ！
ではまた来週！！