2016年3月5日に開催されたFRONTEND CONFERENCE 2016 http://kfug.jp/frontconf2016/ でのLTのスライドです。

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. そんなこと
言われても…
２次関数の曲線？？？

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

78. あれっ？

79. 共通点
みつけた

80. そう

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

82. そのためには
どうすれば？

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

84. 仕様書が
あると
わかりやすい！！

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

86. サンプルが
あると
わかりやすい！！

87. Win-Win な
関係を

88. これにて終結