エンジニアのための”それっぽい”デザインに見せる講座 レイアウトデザインの基本のお話ですね

1. 2 0 1 4 . 0 9 . 0 3

2. 突然ですが

3. デザインなんてもんは
やれば誰でもできます

4. さすがにクオリティを
求めちゃうとなかなか難しいこともあ
りますが
ちょっとしたことを
気をつけるだけで
それっぽく見せることは
可能なんです

5. 本日は“それっぽく”見せるための
デザインのコツをおしえます
アプリケーションの使い方とか
テクニック云々は無

6. あ く ま で
” そ れ っ ぽ い ” だ け な の で
付 け 焼 き 刃 に 過 ぎ ま せ ん

7. よって
ちゃんとしたデザイナーからしたら
なめんなよ！
といわれちゃうかもしれません

8. 悪 しか らず

9. ソレっぽく見せるための第１歩

10. その１
『そろえるのですなにごとも』

11. まずはこちらをご覧下さい

13. ガイドラインを引いて
揃えてみましょう

16. 見えないラインで
揃えることで
若干ですが
まとまりができて
美しく見えます

17. その２
メリハリをつけましょう

18. メリハリ？
メリハリって何？

19. 簡単に言えば
目立たせるものは大きく
どうでもいいもの（ 語 弊 あ り ） は
小さくすることですね。

21. この場合はタイトルとかボタンとかの
サイズやウエイトを変更して
メリハリをつけました
場合によっては
テキスト内でサイズを変えたり
並んだ画像の一部のサイズを変えて
アクセントをつけるのも
よいですね。

22. ▼

23. その３
それっぽい画像を使いましょ

24. どんなにレイアウトがオシャレでも
画像のクオリティが低ければ
それっぽく見えません。

25. そこらへんにいるデザイナーひろった
り
お金にものを言わせて素材つかったり
タダでつかえるフリーの素材なんかも
あるんで
意外とどうにかなるもんです。

27. 今回はこんな画像にしました

28. ついでにボタンも変えちゃいました
（ P h o t o s h o p 使 い ま す ）

30. ツールのここから四角をつくって

31. メニューバー＞
ウィンドウ＞
属性

32. 属性パネルの数値をいぢって

33. レイヤーウィンドウのここ

34. 境界線と
光彩（内側）の
数値をいぢると

35. こんなのができます

36. その４
色はY字で

37. １２色相環

38. １２色相環
オ レ ン ジ が 補 色
に な り ま す ね
メ イ ン の カ ラ ー を 青
と す る と

39. 補色を素直に使うとこんな感じ
悪くはないんだけど…う〜ん

40. １２色相環のY字バランス
そこで
補色の両側の
２色を使います
ここがY字になってますね

41. Y字バランスで配色すると…
さっきよりメリハリが出ましたね

42. その５
余白をデザインする

43. 余白をデザインといっても
揃えるだけです

44. それぞれの余白が同じサイズになってますね

45. これで“それっぽく“なりましたね

46. まとめます。

47. それっぽく見せるためのポイントは４つ
（ 5 つ あ っ た け ど ま と め る と ４ つ ね ）
一、とにかくそろえる（線はもちろん余白もね）
一、サイズの変化は大胆に
一、素材はなるべく良いものを
（ボタンはシェイプとレイヤースタイルで）
一、色の決め手は１２色相環のY字バランス

48. この法則を思い出せば
きっと
それっぽいデザインが
完成するはずです

49. 完