〜 デザイン脳×プログラミング脳 〜...

88

Upload: mignon-style

Post on 15-Apr-2017

5.764 views

Category:

Design


6 download

TRANSCRIPT

Page 1: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

~ デザイン脳×プログラミング脳 ~ デザイナーとプログラマーの72時間戦争

Mignon Style

Page 2: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

WebデザイナーMignon Style

Page 3: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

Mignon StyleWebデザイナー

WordPress 公式ディレクトリ テーマ「Chocolat」プラグイン「MS Custom Login」デベロッパー

WordPress スターターテーマ「_s」コントリビューターhttp://mignonstyle.com/

@mignon_stylemignonxstyle

https://profiles.wordpress.org/mignonstyleAdobe Brackets のWordPress 用コードヒントも作ってます!

Page 4: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

テーマ「 Chocolat 」 https://ja.wordpress.org/themes/chocolat/

Page 5: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

プラグイン「 MS Custom Login 」 https://ja.wordpress.org/plugins/ms-custom-login/

Page 6: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

WordPress スターターテーマ「_s」コントリビューター http://underscores.me/

Page 7: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
Page 8: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

Gulp?なにそれおいしいの?

Page 9: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

でもGit は CUI 使ってまーす!!

難しいことはできないけど

Page 10: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

プログラマーKTさん(仮名)

Page 11: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

CUI 使ってるならGulpくらい使えよ!!

Page 12: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

ムッ

Page 13: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

~ デザイン脳×プログラミング脳 ~ デザイナーとプログラマーの72時間戦争

Page 14: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

このお話はフィクションです。実在の人物・団体などとは

一切関係ありません。

Page 15: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

jQuery の実装お願いします!

Page 16: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

トップへ戻る ボタン!!

Page 17: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

いいですよー

Page 18: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

トップへ戻るボタンなら簡単だし

Page 19: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

簡単…?

Page 20: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

わぷーがふわっと出てきてゆっくりついてきて

ふわふわする感じの!!わぷーボタン

Page 21: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

プログラマーさんなら簡単ですよね!!

Page 22: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

ほんとに簡単…?

Page 23: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

わぷーがふわっと出てきて

Page 24: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

ふわっと?

Page 25: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

「ふわっと」ってどんなん??

Page 26: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

???

Page 27: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

ゆっくりついてきて

Page 28: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

ゆっくり?

Page 29: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

「ゆっくり」って 速度は??

Page 30: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

???

Page 31: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

ふわふわする感じの!!

Page 32: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

ふわふわ?

Page 33: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

「ふわふわ」って どんな動き??

Page 34: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

???

Page 35: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

実装したので確認お願いします

リンクURL から行けますか?

Page 36: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

めちゃ早!!さすが

プログラマーさん!!

Page 37: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

ポチッ

Page 38: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
Page 39: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
Page 40: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
Page 41: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
Page 42: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
Page 43: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
Page 44: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
Page 45: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
Page 46: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
Page 47: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
Page 48: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
Page 49: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

全然違う!!!

Page 50: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

ふわふわとっても可愛いですー!

Page 51: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

スクロールの動きはこのデモページみたいに

お願いしますー

Page 52: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

このデモページ

Page 53: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

実装が全然違いますよね

Page 54: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

えっ?

Page 55: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

提示いただいたデモページだと、スクロールバーの位置はあまり関係なく、スクロールが 0のときはブラウザ上辺から100px、

それ以外のときはブラウザ上辺から70pxの位置まで遅れてスクロールしてきて固定される、ではないですか?なので、例えば少しだけスクロールして「Floating Box」の文字が

ブラウザ上辺にくるくらいの場合はスクロールバーの上辺よりSidemenu の位置が下になっています。

Page 56: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

今回の pagetop の場合はページ最下部にいったときは最下部に固定、ページ最上部にいったときはわぷーが画面外に外れる位置まで動いて固定、

というふうにブラウザ上辺から◯px・ブラウザ下辺から◯pxというわけではないので、もう少し動きを細かく検討しないといけないような気がします。

Page 57: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

僕が難しく考えすぎているだけの可能性も高いので、スクロール位置を何箇所が区切って

その場合のわぷーの位置を示した仕様書などがあるとたすかります

Page 58: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

……

Page 59: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

どうしてこうなった?

Page 60: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

デザイン脳

Page 61: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

「ふわっ」として「どーん」「ずぎゃーん」って

感じでー

Page 62: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

説明が抽象的

Page 63: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

このへんで表示させてください

Page 64: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

指示がアバウト

Page 65: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

あと気持ち早くなりませんか?

Page 66: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

要望が細かい

Page 67: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

そんなこと言われても…

「気持ち」ってどんな単位?

Page 68: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

とにかくもっと良くしましょう!

Page 69: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

プログラミング脳

Page 70: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

フェードインの速度は何秒ですか

Page 71: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

説明が具体的

Page 72: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

上から何px右から何pxですか

Page 73: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

指示が細かい

Page 74: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

イージングでも何種類もあるので2次関数の曲線だと

どうなりますか

Page 75: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

要望が細かい

Page 76: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

そんなこと言われても…

2次関数の曲線???

Page 77: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

そうですねもっと良くできますよ

Page 78: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

あれっ?

Page 79: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

共通点みつけた

Page 80: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

そう

Page 81: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

もっといいものを作りたいだけ

Page 82: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

そのためにはどうすれば?

Page 83: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

プログラマーさんへの指示は具体的に

Page 84: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

仕様書があると

わかりやすい!!

Page 85: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

デザイナーさんには見える化を

Page 86: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

サンプルがあると

わかりやすい!!

Page 87: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

Win-Win な関係を

Page 88: 〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争

これにて終結