Creator's village in EHIMEの資料

1. プログラマが Creator’s village
in EHIME Vol. 2
Webデザインについて
考えてみた

2. 自己紹介
アイムービック勤務
Webシステム作ってます
GDG四国(旧四国GTUG)所属
bornknow108

3. 話すこと
プログラマ Vs Webデザイナ
Webデザイナに歩み寄ってみる
プログラム + デザイン =？

4. プログラマ VS
Webデザイナ

5. Webデザインについて
考える前に

6. Webデザイナーを
理解しよう

7. まずは
いろいろ調べてみよう！

8. Googleさんに
聞いてみる

9. Webデザイナーは
プログラマの敵らしい

10. Web
Designers VS
Web
Developers
一昔前に、話題になった
インフォグラフィック。

11. VS Part.1

12. Webデザイナーおしゃれ
Webデベロッパー非おしゃれ

13. VS Part.2

14. Webデベロッパーが圧倒！

15. VS Part.3

16. Webデザイナは
データベース、PC、Perl etc...
Webデベロッパーは
サーバークラッシュ、EPSファイル
プログラムのわからない上司 etc...
ともに、女性は苦手

17. けっこう、似てる？

18. ただ、デザインに
関して考えると

19. Webデザイナーのデザインを
プログラマが見ると

20. プログラマは
こう思ってる
なんかすげー
センスだよね
色使いがきれいだなー
1pxの余白、1pxのシャドウ、はぁ？
(私の主観のみで構成されています。)

21. プログラマのデザインを
Webデザイナが見ると

22. Webデザイナは
こう思ってる？
すっきりしてるよね
なんでもセンタリング？
色彩感覚・・・
(私の主観のみで構成されています。)

23. Webデザインの分野では
勝てるはずがない

24. だから、相容れない

25. でも、仲良くしたい

26. じゃあ、どうしようか？

27. Webデザイナに
歩み寄ってみる

28. Webデザイナに
歩み寄るには、どうする？

29. プログラマは
デザインがわからない

30. デザインは
センスだと思ってる

31. 直感的？

32. すぐに
身につくわけでもないし

33. プログラマって

34. 論理的に考えるのは
それなりに得意なはず？

35. じゃあ、論理的に
デザインを理解してみよう

36. 理解するためには

37. 勉強してみた

38. これで→
ノンデザイナーズ・
デザインブック
Robin Williams 著

39. デザイナさんは
既知の事かもしれませんが

40. 気付かされることばかり

41. せっかくだから
伝えたい

42. デザインの
原則は４つ！

43. 「近接」

44. 関連する項目をまとめて
グループ化すること

45. 関連する項目
をまとめて

46. 「整列」

47. すべての項目が他のものと
視覚的に関連すること

48. 視覚的に
つながる

49. 「反復」

50. 特徴を全体を通して
繰り返すこと

51. 一体化と
視覚的楽しさ

52. 「コントラスト」

53. ２つの項目が、同じでない
なら、異ならせること

54. はっきり
ちがうよう

55. 「近接」「整列」「反復」
「コントラスト」

56. デザインは
センスだけじゃなかった

57. 理論付けされた
技術のかたまりだった

58. Webデザイナーさん
すごいっす！！

59. この技術
プログラムにも活かしたい

60. プログラム +
デザイン = ?

61. デザインの技術って
プログラミングにも使える

62. 例えば

63. FizzBuzz問題
１から１００までの整数を表示
ただし、３の倍数の時は「Ｆｉｚｚ」、
５の倍数の時は「Ｂｕｚｚ」と表示
公倍数なら「ＦｉｚｚＢｕｚｚ」と表示

64. これをPHPで書くと

65. <?php
for ($number = 1; $number < 100; $number++) {if
($number % 15 === 0) {echo ‘FizzBuzz’;} else if ($number
% 3 === 0) {echo ‘Fizz’;} else if ($number % 5 === 0) {echo
‘Buzz’;} else {echo $number;}}

66. 見づらいので４つの原則を
適用してみる

67. 「近接」

68. <?php
for ($number = 1; $number < 100; $number++) {
if ($number % 15 === 0) {echo ‘FizzBuzz’;
} else if ($number % 3 === 0) {echo ‘Fizz’;
} else if ($number % 5 === 0) {echo ‘Buzz’;
} else {echo $number;
}
}

69. 「整列」「反復」

70. <?php
for ($number = 1; $number < 100; $number++) {
if ($number % 15 === 0) {
echo ‘FizzBuzz’;
} else if ($number % 3 === 0) {
echo ‘Fizz’;
} else if ($number % 5 === 0) {
echo ‘Buzz’;
} else {
echo $number;
}
}

71. 「コントラスト」

72. <?php
/*******************************************
* FizzBuzz問題
*******************************************
// 1から100まで繰り返す
for ($number = 1; $number < 100; $number++) {
// 3と5の最小公倍数の場合
if ($number % 15 === 0) {
echo ‘FizzBuzz’;
// 3の倍数の場合
} else if ($number % 3 === 0) {
echo ‘Fizz’;
// 5の倍数の場合
} else if ($number % 5 === 0) {
echo ‘Buzz’;

73. どうですか？

74. きれいじゃないですか？

75. よみやすくないですか？

76. プログラム + デザイン =

77. さいこー！！

78. さいごに

79. 人に伝えるということは
同じ

80. すべての人にわかりやすく
伝えていきたい

81. デザイナーさん
仲良くしてネ

82. ご清聴
ありがとうございました