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
Submit search
EN
Uploaded by
Mignon Style
10,039 views
〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
2016年3月5日に開催されたFRONTEND CONFERENCE 2016 http://kfug.jp/frontconf2016/ でのLTのスライドです。
Design
◦
Read more
17
Save
Share
Embed
Embed presentation
Download
Downloaded 17 times
1
/ 88
2
/ 88
3
/ 88
4
/ 88
5
/ 88
6
/ 88
7
/ 88
8
/ 88
9
/ 88
10
/ 88
11
/ 88
12
/ 88
13
/ 88
14
/ 88
15
/ 88
16
/ 88
17
/ 88
18
/ 88
19
/ 88
20
/ 88
21
/ 88
22
/ 88
23
/ 88
24
/ 88
25
/ 88
26
/ 88
27
/ 88
28
/ 88
29
/ 88
30
/ 88
31
/ 88
32
/ 88
33
/ 88
34
/ 88
35
/ 88
36
/ 88
37
/ 88
38
/ 88
39
/ 88
40
/ 88
41
/ 88
42
/ 88
43
/ 88
44
/ 88
45
/ 88
46
/ 88
47
/ 88
48
/ 88
49
/ 88
50
/ 88
51
/ 88
52
/ 88
53
/ 88
54
/ 88
55
/ 88
56
/ 88
57
/ 88
58
/ 88
59
/ 88
60
/ 88
61
/ 88
62
/ 88
63
/ 88
64
/ 88
65
/ 88
66
/ 88
67
/ 88
68
/ 88
69
/ 88
70
/ 88
71
/ 88
72
/ 88
73
/ 88
74
/ 88
75
/ 88
76
/ 88
77
/ 88
78
/ 88
79
/ 88
80
/ 88
81
/ 88
82
/ 88
83
/ 88
84
/ 88
85
/ 88
86
/ 88
87
/ 88
88
/ 88
More Related Content
PDF
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
by
Mignon Style
PDF
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
by
Mignon Style
PDF
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
by
Mignon Style
PDF
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
by
Mignon Style
PDF
WordPress公式テーマ登録のための5ステップ
by
Mignon Style
PDF
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
by
Mignon Style
PDF
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
by
Mignon Style
PDF
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
by
Mignon Style
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
by
Mignon Style
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
by
Mignon Style
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
by
Mignon Style
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
by
Mignon Style
WordPress公式テーマ登録のための5ステップ
by
Mignon Style
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
by
Mignon Style
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
by
Mignon Style
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
by
Mignon Style
What's hot
PDF
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
by
Mignon Style
PDF
Dreamweaver コードヒントHowTo
by
Akira Maruyama
PDF
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
by
Mori Kazue
PDF
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
by
Akira Tachibana
PDF
TwentyTwelveの子テーマつくったらハマった話
by
Cherry Pie Web
PDF
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
by
タカシ キタジマ
PDF
WordPressテーマ Foundation for WordPress の紹介
by
Takashi Uemura
PDF
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
by
タカシ キタジマ
PDF
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
by
Mignon Style
PPTX
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
by
Takahiro Nakahata
PDF
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
by
Junko Nukaga
PDF
第3回WordPress Cafe プラグイン紹介
by
foom_in
PDF
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
by
Mignon Style
KEY
WordPressってブログじゃないの?
by
tokumotonahoko
PDF
WordBench 東京 とは
by
Mignon Style
PDF
Wordpressスマートフォンテーマ作成
by
Yoshie Nakayama
PDF
メニューは管理画面で設定できるようにしよう
by
Mayuko Moriyama
PPTX
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
by
Yoshinori Kobayashi
PDF
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
by
Akari Doi
PDF
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
by
parkn-park
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
by
Mignon Style
Dreamweaver コードヒントHowTo
by
Akira Maruyama
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
by
Mori Kazue
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
by
Akira Tachibana
TwentyTwelveの子テーマつくったらハマった話
by
Cherry Pie Web
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
by
タカシ キタジマ
WordPressテーマ Foundation for WordPress の紹介
by
Takashi Uemura
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
by
タカシ キタジマ
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
by
Mignon Style
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
by
Takahiro Nakahata
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
by
Junko Nukaga
第3回WordPress Cafe プラグイン紹介
by
foom_in
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
by
Mignon Style
WordPressってブログじゃないの?
by
tokumotonahoko
WordBench 東京 とは
by
Mignon Style
Wordpressスマートフォンテーマ作成
by
Yoshie Nakayama
メニューは管理画面で設定できるようにしよう
by
Mayuko Moriyama
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
by
Yoshinori Kobayashi
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
by
Akari Doi
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
by
parkn-park
Similar to 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
PDF
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
by
Chieko Aihara
KEY
WordPress プラグイン Infinite Scroll を試してみた
by
Yuji Nojima
KEY
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
by
Odyssey Eightbit
KEY
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
by
Yuji Nojima
PDF
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
by
YUKI YAMAGUCHI
PDF
なんでCSSすぐ死んでしまうん
by
Hayato Mizuno
PDF
20120824_ハンズオンセミナー資料_第1部
by
Hiroaki Yoshimoto
PDF
コードをさわらずにビジネスサイトを作ろう!
by
FLOW web planning & design
PDF
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
by
Takashi Uemura
KEY
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
by
Eri Sawada
PDF
WordBenchTokyo-20111126
by
webourgeon
PDF
リリース直前WordPress3.5をみてみよう
by
Seto Takahiro
PDF
CSS の歩き方
by
Seiichiro Mishiba
PDF
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
by
rie05
PDF
レスポンシブWebデザイン@マカベンvol.5
by
Shogo Tamura
KEY
WordPressプラグイン作成入門
by
Yuji Nojima
PDF
フロント作業の効率化
by
Yuto Yoshinari
PDF
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
by
invogue
PPTX
Ie10正式リリース版のhtml5 css3
by
Yoshihisa Ozaki
PDF
Firefox with HTML+CSS
by
dynamis
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
by
Chieko Aihara
WordPress プラグイン Infinite Scroll を試してみた
by
Yuji Nojima
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
by
Odyssey Eightbit
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
by
Yuji Nojima
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
by
YUKI YAMAGUCHI
なんでCSSすぐ死んでしまうん
by
Hayato Mizuno
20120824_ハンズオンセミナー資料_第1部
by
Hiroaki Yoshimoto
コードをさわらずにビジネスサイトを作ろう!
by
FLOW web planning & design
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
by
Takashi Uemura
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
by
Eri Sawada
WordBenchTokyo-20111126
by
webourgeon
リリース直前WordPress3.5をみてみよう
by
Seto Takahiro
CSS の歩き方
by
Seiichiro Mishiba
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
by
rie05
レスポンシブWebデザイン@マカベンvol.5
by
Shogo Tamura
WordPressプラグイン作成入門
by
Yuji Nojima
フロント作業の効率化
by
Yuto Yoshinari
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
by
invogue
Ie10正式リリース版のhtml5 css3
by
Yoshihisa Ozaki
Firefox with HTML+CSS
by
dynamis
〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
1.
∼ デザイン脳 ×
プログラミング脳 ∼ デザイナーとプログラマーの 72 時間戦争 Mignon Style
2.
Web デザイナー Mignon Style
3.
Mignon Style Web デザイナー WordPress
公式ディレクトリ テーマ「Chocolat」 プラグイン「MS Custom Login」デベロッパー WordPress スターターテーマ「_s」コントリビューター http://mignonstyle.com/ @mignon_style mignonxstyle https://profiles.wordpress.org/mignonstyle Adobe Brackets の WordPress 用コードヒントも作ってます!
4.
テーマ「 Chocolat 」https://ja.wordpress.org/themes/chocolat/
5.
プラグイン「 MS Custom
Login 」https://ja.wordpress.org/plugins/ms-custom-login/
6.
WordPress スターターテーマ「_s」コントリビューター http://underscores.me/
8.
Gulp? なにそれおいしいの?
9.
でも Git は
CUI 使ってまーす!! 難しいことはできないけど
10.
プログラマー KT さん(仮名)
11.
CUI 使ってるなら Gulp くらい使えよ!!
12.
ムッ
13.
∼ デザイン脳 ×
プログラミング脳 ∼ デザイナーとプログラマーの 72 時間戦争
14.
このお話はフィクションです。 実在の人物・団体などとは 一切関係ありません。
15.
jQuery の実装 お願いします!
16.
トップへ戻る ボタン!!
17.
いいですよー
18.
トップへ戻るボタン なら簡単だし
19.
簡単…?
20.
わぷーがふわっと出てきて ゆっくりついてきて ふわふわする感じの!! わぷーボタン
21.
プログラマーさんなら 簡単ですよね!!
22.
ほんとに 簡単…?
23.
わぷーがふわっと出てきて
24.
ふわっと?
25.
「ふわっと」って どんなん??
26.
???
27.
ゆっくりついてきて
28.
ゆっくり?
29.
「ゆっくり」って 速度は??
30.
???
31.
ふわふわする感じの!!
32.
ふわふわ?
33.
「ふわふわ」って どんな動き??
34.
???
35.
実装したので 確認お願いします リンク URL から行けますか?
36.
めちゃ早!! さすが プログラマーさん!!
37.
ポチッ
49.
全然 違う!!!
50.
ふわふわ とっても可愛いですー!
51.
スクロールの動きは このデモページみたいに お願いしますー
52.
このデモページ
53.
実装が全然 違いますよね
54.
えっ?
55.
提示いただいたデモページだと、スクロールバーの位置はあまり関係なく、 スクロールが 0 のときはブラウザ上辺から100px、 それ以外のときはブラウザ上辺から
70px の位置まで遅れてスクロールしてきて固定される、 ではないですか?なので、例えば少しだけスクロールして「Floating Box」の文字が ブラウザ上辺にくるくらいの場合はスクロールバーの上辺より Sidemenu の位置が下になっています。
56.
今回の pagetop の場合はページ最下部にいったときは最下部に固定、 ページ最上部にいったときはわぷーが画面外に外れる位置まで動いて固定、 というふうにブラウザ上辺から⃝px・ブラウザ下辺から⃝px
というわけではないので、 もう少し動きを細かく検討しないといけないような気がします。
57.
僕が難しく考えすぎているだけの可能性も高いので、 スクロール位置を何箇所が区切って その場合のわぷーの位置を示した仕様書などがあるとたすかります
58.
……
59.
どうして こうなった?
60.
デザイン脳
61.
「ふわっ」として 「どーん」「ずぎゃーん」って 感じでー
62.
説明が 抽象的
63.
このへんで 表示させてください
64.
指示が アバウト
65.
あと気持ち 早くなりませんか?
66.
要望が 細かい
67.
そんなこと 言われても… 「気持ち」ってどんな単位?
68.
とにかく もっと良くしましょう!
69.
プログラミング脳
70.
フェードインの 速度は何秒ですか
71.
説明が 具体的
72.
上から何 px 右から何 pxですか
73.
指示が 細かい
74.
イージングでも 何種類もあるので 2 次関数の曲線だと どうなりますか
75.
要望が 細かい
76.
そんなこと 言われても… 2次関数の曲線???
77.
そうですね もっと良くできますよ
78.
あれっ?
79.
共通点 みつけた
80.
そう
81.
もっと いいものを 作りたいだけ
82.
そのためには どうすれば?
83.
プログラマーさんへの 指示は具体的に
84.
仕様書が あると わかりやすい!!
85.
デザイナーさんには 見える化を
86.
サンプルが あると わかりやすい!!
87.
Win-Win な 関係を
88.
これにて終結
Download