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

Post on 15-Apr-2017

5.764 views 6 download

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

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

Mignon Style

WebデザイナーMignon Style

Mignon StyleWebデザイナー

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

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

@mignon_stylemignonxstyle

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

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

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

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

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

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

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

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

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

ムッ

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

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

一切関係ありません。

jQuery の実装お願いします!

トップへ戻る ボタン!!

いいですよー

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

簡単…?

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

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

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

ほんとに簡単…?

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

ふわっと?

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

???

ゆっくりついてきて

ゆっくり?

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

???

ふわふわする感じの!!

ふわふわ?

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

???

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

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

めちゃ早!!さすが

プログラマーさん!!

ポチッ

全然違う!!!

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

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

お願いしますー

このデモページ

実装が全然違いますよね

えっ?

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

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

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

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

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

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

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

……

どうしてこうなった?

デザイン脳

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

感じでー

説明が抽象的

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

指示がアバウト

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

要望が細かい

そんなこと言われても…

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

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

プログラミング脳

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

説明が具体的

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

指示が細かい

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

どうなりますか

要望が細かい

そんなこと言われても…

2次関数の曲線???

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

あれっ?

共通点みつけた

そう

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

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

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

仕様書があると

わかりやすい!!

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

サンプルがあると

わかりやすい!!

Win-Win な関係を

これにて終結