【cloudpackデ部会・女子部】第3回 コーディングどこまでできる？ webデザイナー女子相談会 https://devkai.connpass.com/event/51792/

1. 2017.03.29 Wed
Masami Kanemoto
1
デザイナー＋コーディングで
できること

2. 2
自己紹介
1

3. 3
cloudpack事業部 デザインセクション デザイナー
2016年6月入社
兵庫県生まれ 大阪育ち
グラフィックデザイナー => Webデザイナーに
前職まではコーディングも担当
金本 正美（愛犬：まる）
実家の犬に逢いたくて毎日ふるえてます

4. 4
こんなチームで仕事してます
2

5. 5
デザインセクション
中村チーム！
Section Leader
/ Director
Frontend
Engineer
Designer Designer

6. 6
結論という名の持論
3

7. 7
デザイナー（である私）が
フロントエンド側の事が分かることで、
スピードアップにつながっている
(と、信じている)

8. 8
Frontend Engineer Designer
ここのボタン
作っといてくれへん？
はい～
某日、某案件にて
html/cssコーディング
Vue.jsによるフロント開発
デザイン制作
ボタン等css調整
開発環境
ソース一式
git管理

9. 9
Frontend Engineer Designer
了解です
このペラいページ
こちらで作りますね
某日、別の某案件にて
html/cssコーディング
JSフロントエンド開発
デザイン制作
html/cssコーディング
開発環境
ソース一式
git管理

10. 10
Frontend Engineer Designer
・・・。
ここ上手く動きません！
ｺﾞﾒﾝﾅｻｲ！
某日、別の某案件にて
html/cssコーディング
JSフロントエンド開発
デザイン制作
html/cssコーディング
開発環境
ソース一式
git管理

11. 11
• フロントエンド開発の分担作業に加われる
• 赤入れ、微微々調整なんかを口頭や書面に起こす時間を短縮
• 何度も微調整を入れてフロントエンドエンジニアの時間を拘束
しないですむ
やってみてよかった点
=> 開発スピードがUP！

12. 12
• CMS化するものであれば、ここはこうやってデータ取得するんじゃないかなー
が分かるようになる
• レスポンシブでここは切り替えさせやすいけど、ここはCSS構造的に工数かかり
そうだなーが分かるようになる
• コーディング後の調整作業で、問題が起きた時にもさっと代替案が出せるように
なる
• 今の関心事である、マイクロインタラクションとかAtomic designなどコーディ
ング作業と密接に関与するデザインを考えられるようになりはじめた
デザインを作る工程にもこうつながった

13. 13
• gitこわい
• gulpこわい
• 黒い画面こわい
• はじめは開発環境の構築に時間かかってしまう
• 技術スピードが早い＆後追いになるので、勉強は必要だし
ミスしないようにというプレッシャーがある
もちろん課題もありました

14. 14
まとめ
4

15. 15
フロントエンドサイドから邪魔すんなばーかと言われるまでは頑張る
スピードアップと効率化が図れるならデザイナーなりに色々トライしたい
そしてそれが大事なことかなと思っている