Download free for 30 days
Sign in
Upload
Language (EN)
Support
Business
Mobile
Social Media
Marketing
Technology
Art & Photos
Career
Design
Education
Presentations & Public Speaking
Government & Nonprofit
Healthcare
Internet
Law
Leadership & Management
Automotive
Engineering
Software
Recruiting & HR
Retail
Sales
Services
Science
Small Business & Entrepreneurship
Food
Environment
Economy & Finance
Data & Analytics
Investor Relations
Sports
Spiritual
News & Politics
Travel
Self Improvement
Real Estate
Entertainment & Humor
Health & Medicine
Devices & Hardware
Lifestyle
Change Language
Language
English
Español
Português
Français
Deutsche
Cancel
Save
EN
Uploaded by
Eigoro Yamamura
7,441 views
プログラマがWebデザインについて考えてみた
Creator's village in EHIMEの資料
Read more
5
Save
Share
Embed
Embed presentation
Download
Download to read offline
1
/ 82
2
/ 82
3
/ 82
4
/ 82
5
/ 82
6
/ 82
7
/ 82
8
/ 82
9
/ 82
10
/ 82
11
/ 82
12
/ 82
13
/ 82
14
/ 82
15
/ 82
16
/ 82
17
/ 82
18
/ 82
19
/ 82
20
/ 82
21
/ 82
22
/ 82
23
/ 82
24
/ 82
25
/ 82
26
/ 82
27
/ 82
28
/ 82
29
/ 82
30
/ 82
31
/ 82
32
/ 82
33
/ 82
34
/ 82
35
/ 82
36
/ 82
37
/ 82
38
/ 82
39
/ 82
40
/ 82
41
/ 82
42
/ 82
43
/ 82
44
/ 82
45
/ 82
46
/ 82
47
/ 82
48
/ 82
49
/ 82
50
/ 82
51
/ 82
52
/ 82
53
/ 82
54
/ 82
55
/ 82
56
/ 82
57
/ 82
58
/ 82
59
/ 82
60
/ 82
61
/ 82
62
/ 82
63
/ 82
64
/ 82
65
/ 82
66
/ 82
67
/ 82
68
/ 82
69
/ 82
70
/ 82
71
/ 82
72
/ 82
73
/ 82
74
/ 82
75
/ 82
76
/ 82
77
/ 82
78
/ 82
79
/ 82
80
/ 82
81
/ 82
82
/ 82
More Related Content
PDF
プログラマがデザインをがんばってみた
by
だいすけ ふるかわ
PDF
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
by
Tsuyoshi.
PDF
WordBench 東京 とは
by
Mignon Style
PDF
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
by
Mignon Style
KEY
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
by
Eri Sawada
PDF
マークアップエンジニアと情報アーキテクチャ
by
力也 伊原
PDF
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
by
Yuji Nojima
PPTX
バレンタイン直前開催Web勉強会
by
Takahide Hosokawa
プログラマがデザインをがんばってみた
by
だいすけ ふるかわ
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
by
Tsuyoshi.
WordBench 東京 とは
by
Mignon Style
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
by
Mignon Style
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
by
Eri Sawada
マークアップエンジニアと情報アーキテクチャ
by
力也 伊原
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
by
Yuji Nojima
バレンタイン直前開催Web勉強会
by
Takahide Hosokawa
What's hot
PDF
〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
by
Mignon Style
KEY
これくらいはやってほしいWebデザイン
by
Yuya Takahashi
PDF
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
by
Mignon Style
PPT
090801 ライトニングトーク
by
雄一郎 安倍
PDF
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
by
Kazumich YAMAMOTO
PDF
OrenoHP
by
Yuko Taniguchi
PPTX
2013年のWordBench神戸
by
BREN
PDF
メニューは管理画面で設定できるようにしよう
by
Mayuko Moriyama
PDF
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
by
parkn-park
PDF
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
by
Mignon Style
PDF
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
by
文樹 高橋
PDF
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
by
Mignon Style
PDF
プロジェクトでRubocopを使って自動コードレビューしてみた話
by
Cake YOSHIDA
PDF
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
by
Mignon Style
PDF
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
by
Yuki Kuramochi
PDF
Comableを支える技術〜できるだけコーディングせずにズルして作るRailsアプリ〜
by
Cake YOSHIDA
PDF
プログラムと名前にまつわる座談会
by
infinite_loop
PDF
西区勉強会用スライド
by
Hiromi Kai
PPTX
ABC 第2回スライド
by
Sawada Makoto
PDF
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
by
Mignon Style
〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
by
Mignon Style
これくらいはやってほしいWebデザイン
by
Yuya Takahashi
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
by
Mignon Style
090801 ライトニングトーク
by
雄一郎 安倍
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
by
Kazumich YAMAMOTO
OrenoHP
by
Yuko Taniguchi
2013年のWordBench神戸
by
BREN
メニューは管理画面で設定できるようにしよう
by
Mayuko Moriyama
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
by
parkn-park
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
by
Mignon Style
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
by
文樹 高橋
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
by
Mignon Style
プロジェクトでRubocopを使って自動コードレビューしてみた話
by
Cake YOSHIDA
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
by
Mignon Style
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
by
Yuki Kuramochi
Comableを支える技術〜できるだけコーディングせずにズルして作るRailsアプリ〜
by
Cake YOSHIDA
プログラムと名前にまつわる座談会
by
infinite_loop
西区勉強会用スライド
by
Hiromi Kai
ABC 第2回スライド
by
Sawada Makoto
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
by
Mignon Style
Viewers also liked
PDF
Web design
by
kazuko kaneuchi
PDF
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
by
Ayaka Sumida
PDF
デザインのためのデザイン
by
Masayuki Uetani
PDF
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
by
Sasaki Kouhei
PDF
Webデザインのセオリーを学ぼう
by
Toshiaki Sasaki
PPT
色彩センスのいらない配色講座
by
Mariko Yamaguchi
PDF
ノンデザイナーのためのWebデザイン講座
by
光利 吉田
PDF
Webデザインのトーン&マナーを導き出す手法
by
Katsumi Tazuke
KEY
ノンデザイナーのための配色理論
by
tsukasa obara
PDF
しごとで使うTitanium 第2版
by
忠利 花崎
PDF
CSS の歩き方
by
Seiichiro Mishiba
PDF
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
by
Yoshiki Hayama
PDF
ブラウザにやさしいHTML/CSS
by
Takeharu Igari
PPTX
2016年版 フロントエンド開発フォーマット
by
Kenya Kodaira
PDF
メンテナブルでありつづけるためのCSS設計
by
拓樹 谷
PDF
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
by
Horiguchi Seito
PDF
なんでCSSすぐ死んでしまうん
by
Hayato Mizuno
PDF
大規模サイトにおける本当は怖いCSSの話
by
井上 誠
Web design
by
kazuko kaneuchi
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
by
Ayaka Sumida
デザインのためのデザイン
by
Masayuki Uetani
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
by
Sasaki Kouhei
Webデザインのセオリーを学ぼう
by
Toshiaki Sasaki
色彩センスのいらない配色講座
by
Mariko Yamaguchi
ノンデザイナーのためのWebデザイン講座
by
光利 吉田
Webデザインのトーン&マナーを導き出す手法
by
Katsumi Tazuke
ノンデザイナーのための配色理論
by
tsukasa obara
しごとで使うTitanium 第2版
by
忠利 花崎
CSS の歩き方
by
Seiichiro Mishiba
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
by
Yoshiki Hayama
ブラウザにやさしいHTML/CSS
by
Takeharu Igari
2016年版 フロントエンド開発フォーマット
by
Kenya Kodaira
メンテナブルでありつづけるためのCSS設計
by
拓樹 谷
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
by
Horiguchi Seito
なんでCSSすぐ死んでしまうん
by
Hayato Mizuno
大規模サイトにおける本当は怖いCSSの話
by
井上 誠
Similar to プログラマがWebデザインについて考えてみた
PDF
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
by
Hideki Akiba
PDF
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
by
Hideki Akiba
PDF
プログラミングってなに?
by
Kazuki Saito
KEY
Webサイトのようには作れない!Webアプリ設計の考え方
by
girigiribauer
PDF
Sacss WordPress Special with Fireworks
by
YUKI YAMAGUCHI
ODP
Bpstudy26
by
monjudoh
PDF
福井で「しあわせデザイナー」になるために
by
Miho Yamamori
PDF
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
by
Kazuhiro Hara
PDF
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
by
Yusuke Hirao
PPTX
エンジニアと"協同"してサービスをつくる
by
Ishikawa Yuya
PDF
趣味プログラマの先輩からのアドバイス
by
Hiroaki Murayama
PDF
デザイナーとプログラマーの 仲良し大作戦
by
sogawaminoru
PDF
id=nagano nseg 合同新年会 LT資料
by
Masashi Takahashi
PDF
ブラウザだけで学ぶWebアプリ開発【デザイン編】
by
schoowebcampus
PDF
Slide14080401 140804043205-phpapp01
by
Maki Daigaku
PDF
コーディングを考慮したWebデザインガイドライン
by
Hiroyuki Makishita
PDF
A05 角田研究室5 竹田帆杏
by
AOMORI SIX
PDF
Tips of Design
by
Toshiaki Sasaki
PDF
HTMLデザインを崩さないテンプレートエンジンの作り方
by
kwatch
PDF
eZ Publish 2012年4月勉強会 - eZ Publish設計ベストプラクティス
by
ericsagnes
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
by
Hideki Akiba
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
by
Hideki Akiba
プログラミングってなに?
by
Kazuki Saito
Webサイトのようには作れない!Webアプリ設計の考え方
by
girigiribauer
Sacss WordPress Special with Fireworks
by
YUKI YAMAGUCHI
Bpstudy26
by
monjudoh
福井で「しあわせデザイナー」になるために
by
Miho Yamamori
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
by
Kazuhiro Hara
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
by
Yusuke Hirao
エンジニアと"協同"してサービスをつくる
by
Ishikawa Yuya
趣味プログラマの先輩からのアドバイス
by
Hiroaki Murayama
デザイナーとプログラマーの 仲良し大作戦
by
sogawaminoru
id=nagano nseg 合同新年会 LT資料
by
Masashi Takahashi
ブラウザだけで学ぶWebアプリ開発【デザイン編】
by
schoowebcampus
Slide14080401 140804043205-phpapp01
by
Maki Daigaku
コーディングを考慮したWebデザインガイドライン
by
Hiroyuki Makishita
A05 角田研究室5 竹田帆杏
by
AOMORI SIX
Tips of Design
by
Toshiaki Sasaki
HTMLデザインを崩さないテンプレートエンジンの作り方
by
kwatch
eZ Publish 2012年4月勉強会 - eZ Publish設計ベストプラクティス
by
ericsagnes
More from Eigoro Yamamura
PDF
Kotlin勉強会 in ehime
by
Eigoro Yamamura
PDF
コストエクスプローラーをつかいこなそう
by
Eigoro Yamamura
PDF
はじめてのクラウドサーバー AWSとGCEを使い比べてみた
by
Eigoro Yamamura
PDF
Twitter bootstrapのススメ
by
Eigoro Yamamura
PDF
CMSについておさらいしてみよう
by
Eigoro Yamamura
PDF
すだちハッカソン発表資料
by
Eigoro Yamamura
PDF
すごいぞ!Google Chrome
by
Eigoro Yamamura
PDF
「LESS」ことはじめ
by
Eigoro Yamamura
PDF
よんでよんでよまれてよんで
by
Eigoro Yamamura
Kotlin勉強会 in ehime
by
Eigoro Yamamura
コストエクスプローラーをつかいこなそう
by
Eigoro Yamamura
はじめてのクラウドサーバー AWSとGCEを使い比べてみた
by
Eigoro Yamamura
Twitter bootstrapのススメ
by
Eigoro Yamamura
CMSについておさらいしてみよう
by
Eigoro Yamamura
すだちハッカソン発表資料
by
Eigoro Yamamura
すごいぞ!Google Chrome
by
Eigoro Yamamura
「LESS」ことはじめ
by
Eigoro Yamamura
よんでよんでよまれてよんで
by
Eigoro Yamamura
プログラマがWebデザインについて考えてみた
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.
デザインの 原則は4つ!
43.
「近接」
44.
関連する項目をまとめて グループ化すること
45.
関連する項目 をまとめて
46.
「整列」
47.
すべての項目が他のものと 視覚的に関連すること
48.
視覚的に つながる
49.
「反復」
50.
特徴を全体を通して 繰り返すこと
51.
一体化と 視覚的楽しさ
52.
「コントラスト」
53.
2つの項目が、同じでない なら、異ならせること
54.
はっきり ちがうよう
55.
「近接」「整列」「反復」 「コントラスト」
56.
デザインは センスだけじゃなかった
57.
理論付けされた 技術のかたまりだった
58.
Webデザイナーさん すごいっす!!
59.
この技術 プログラムにも活かしたい
60.
プログラム + デザイン =
?
61.
デザインの技術って プログラミングにも使える
62.
例えば
63.
FizzBuzz問題 1から100までの整数を表示 ただし、3の倍数の時は「Fizz」、 5の倍数の時は「Buzz」と表示 公倍数なら「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.
見づらいので4つの原則を
適用してみる
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.
ご清聴 ありがとうございました
Download