プログラマが   Creator’s village
              in EHIME Vol. 2
Webデザインについて
      考えてみた
自己紹介
アイムービック勤務
Webシステム作ってます
GDG四国(旧四国GTUG)所属
  bornknow108
話すこと


プログラマ Vs Webデザイナ

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

プログラム + デザイン =?
プログラマ VS
Webデザイナ
Webデザインについて
    考える前に
Webデザイナーを
  理解しよう
まずは
いろいろ調べてみよう!
Googleさんに
  聞いてみる
Webデザイナーは
プログラマの敵らしい
Web
Designers VS
Web
Developers
一昔前に、話題になった
インフォグラフィック。
VS Part.1
Webデザイナーおしゃれ

Webデベロッパー非おしゃれ
VS Part.2
Webデベロッパーが圧倒!
VS Part.3
Webデザイナは
データベース、PC、Perl etc...

Webデベロッパーは
サーバークラッシュ、EPSファイル
プログラムのわからない上司 etc...

ともに、女性は苦手
けっこう、似てる?
ただ、デザインに
 関して考えると
Webデザイナーのデザインを
   プログラマが見ると
プログラマは
         こう思ってる

なんかすげー

センスだよね

色使いがきれいだなー

1pxの余白、1pxのシャドウ、はぁ?
         (私の主観のみで構成されています。)
プログラマのデザインを
 Webデザイナが見ると
Webデザイナは
      こう思ってる?

すっきりしてるよね

なんでもセンタリング?

色彩感覚・・・

          (私の主観のみで構成されています。)
Webデザインの分野では
  勝てるはずがない
だから、相容れない
でも、仲良くしたい
じゃあ、どうしようか?
Webデザイナに
歩み寄ってみる
Webデザイナに
歩み寄るには、どうする?
プログラマは
デザインがわからない
デザインは
センスだと思ってる
直感的?
すぐに
身につくわけでもないし
プログラマって
論理的に考えるのは
それなりに得意なはず?
じゃあ、論理的に
デザインを理解してみよう
理解するためには
勉強してみた
これで→
ノンデザイナーズ・
デザインブック
Robin Williams 著
デザイナさんは
既知の事かもしれませんが
気付かされることばかり
せっかくだから
  伝えたい
デザインの
原則は4つ!
「近接」
関連する項目をまとめて
 グループ化すること
関連する項目
 をまとめて
「整列」
すべての項目が他のものと
 視覚的に関連すること
視覚的に
つながる
「反復」
特徴を全体を通して
 繰り返すこと
一体化と
視覚的楽しさ
「コントラスト」
2つの項目が、同じでない
 なら、異ならせること
はっきり
ちがうよう
「近接」「整列」「反復」
  「コントラスト」
デザインは
センスだけじゃなかった
理論付けされた
技術のかたまりだった
Webデザイナーさん
 すごいっす!!
この技術
プログラムにも活かしたい
プログラム +
デザイン = ?
デザインの技術って
プログラミングにも使える
例えば
FizzBuzz問題
1から100までの整数を表示
ただし、3の倍数の時は「Fizz」、
5の倍数の時は「Buzz」と表示
公倍数なら「FizzBuzz」と表示
これをPHPで書くと
<?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;}}
見づらいので4つの原則を
   適用してみる
「近接」
<?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;
}
}
「整列」「反復」
<?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;
    }
}
「コントラスト」
<?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’;
どうですか?
きれいじゃないですか?
よみやすくないですか?
プログラム + デザイン =
さいこー!!
さいごに
人に伝えるということは
     同じ
すべての人にわかりやすく
   伝えていきたい
デザイナーさん
仲良くしてネ
ご清聴
ありがとうございました

プログラマがWebデザインについて考えてみた