BPStudy #88 で話した connpass Design まわりネタ http://bpstudy.connpass.com/event/10139/

1. connpass Design
Yumi Hashizume / 20141215 / BPStudy #88

2. お前誰よIntroduction

3. 橋爪由美
@uniq
株式会社ビープラウド / Designer

4. デザインが好き
企画・ディレクションも好き
コードを書くのも好き
チーム開発が好き

5. connpassには
2013.07あたりからアサイン

6. 今回話すこと
• connpassのデザインの作り方
• …からの～、connpassのデザイナーの役目とは
• connpass運用しながらCSS設計がんばったよ
• デザイン設計はCSS設計と一心同体

7. conppassのデザインの作り方

8. よくある分業制の流れ
ディレクター
考える人
デザイナー
作る人
エンジニア
作る人
戦略策定
UI
ビジュアルデザインを
決める
実装

9. connpassの流れ
デザイナー
エンジニア
戦略策定
デザイナー
エンジニア
気になる画面は
朝会ついでに
わいわい確認して
デザイン決定
デザイナー
or デザイナー
エンジニア
ワイヤーフレーム作成・確認
各自作ってくる
or
みんなでホワイトボード
ビジュアルデザイン作成
（たいていhtml状態）

10. みんなで考えて
みんなで作る

11. 戦略策定ブレストをレコーディング
ホワイトボードに皆でわいわい

12. しゃちょうの
すごい要求分析つりー

13. ワイヤーフレーム作成
Balsamiq markups
ラフな感じなので、デザインに左右されずにワイヤーフレーム検討できる
エンジニアも作る

14. ワイヤーフレーム作成
ホワイトボードに手書き。みんなでわいわい。

15. 印刷してペーパープロトタイプのテスト
ちょっと乱暴ですが、ホワイトボード等をそのまま印刷
してペーパープロトとして遷移テスト

16. 良い点

17. みんな戦略を理解している！
• 漏れに早く気づく
• 認識のズレが少ない
• 実装・テストしながら、不適切な箇所に気づ
きやすい

18. 手戻りロスの減らせる！

19. 独りよがりのデザインにならない
• 気付きがたくさんある
• デザインのテストをみんなでやってる感じ
• ビジュアルデザインは、たいていHTMLで作る
ので、実際に近い状態でテストできる

20. つまりconnpassの
Designerって？

21. • みんなのデザインに関する意見・その理由をファ
シリテーターとして聞き出す、整理する
• デザイナーとしてベストだと思うデザインを理論
的に説明する
• 最終的に何がベストかデザイナーとして判断する
• １人歩きできるところは１人歩きでデザイン作る

22. 色々と模索中

23. connpass運用しながら
CSS設計し直した話

24. 最初に言っておきたいことが
あります

25. コードを憎んで 人を憎まず
コードは時とともに腐っていくもの

26. 以前のconnpassのCSS

27. • reset.css
• common.css
• base.css
• ページ毎のcss

28. connpassってどんなサービスになるんだろう…？
…という時代だったので、これはこれで何とか
なってた

29. connpass改善フェーズに突入

30. mission
• 使いにくいところを使いやすくする
• 不便なところを便利にする
• 明確に決まった戦略を後押しするデザインに
する
• => connpassのブランディングが必要

31. ブランディングに必要なもの
雰囲気の共通化
パーツの共通化
connpassというテーマを明確に
個性をもつ

32. module化されたCSSが必要
共通化されたブランドイメージ

33. そうだ、CSSを設計し直そう

34. common.css
• 共通で使える文字色
• important, notice…
• 共通で使えるmarginのclass
• 共通で使えるcolumn

35. 他はmodule.cssにお引っ越し

36. module系css
• ボタン、リスト、フォーム、テーブル等
• いったんmodule.cssに詰め込む
• button.css, list.css, form.css, label.css などに
分ける

37. 共通パーツを意識することによって…
デザインにテーマが出来る！

38. 危険なCSSを設計し直そう

39. 例えば
.btn_red {
background-color:#f00;
color:#fff;
font-size:24px;
font-weight:bold;
padding:10px 20px;
}

40. これよりも小さい赤いボタン
を作りたい時はどうすれば？

41. 新しいclass追加
.btn_red_small {
background-color:#f00;
color:#fff;
font-size:12px;
padding:3px;
}

42. 赤くて大きいボタンの名前が
.btn_red
.btn_red {/* 赤いボタンといいつつ、大きいボタンでもある。class名として良くな
い */
background-color:#f00;/* 色の表現。共通化できる */
color:#fff;/* 色の表現。共通化できる */
font-size:24px;/* 大きさの表現 */
font-weight:bold;/* 大きさの表現 */
padding:10px 20px;/* 大きさの表現 */
}
.btn_red_small {
background-color:#f00;/* 色の表現。共通化できる */
color:#fff;/* 色の表現。共通化できる */
font-size:12px;/* 大きさの表現 */
padding:3px;/* 大きさの表現 */
}
赤くて小さいボタンの名前が
.btn_red_small

43. 例えばこう直す
.btn_red {
background-color:#f00;/* 色の表現 */
color:#fff;
}
.btn_black {/* 色の表現 */
background-color:#000;
color:#fff;
}
.btn_large {/* 大きさの表現 */
font-size:24px;
font-weight:bold;
padding:10px 20px;
}
.btn_black_small {/* 大きさの表現 */
font-size:12px;
padding:3px;
}

44. 様々な表現が可能になる！
赤い大きいボタン= .btn_red.btn_large
赤い小さいボタン= .btn_red.btn_small
黒い大きいボタン= .btn_black.btn_large
黒い小さいボタン= .btn_black.btn_small
…

45. デザインに幅ができる！

46. bootstrapやfoundationなど
既存のCSSフレームワークが参考
になる

47. おまけ

48. djangoのテンプレートを書く
ために…
DesignerだけどPython

49. http://www.slideshare.net/
yumi-uniq-ishizaki/
pyladies-141025-uniq

50. {%
for
p
in
event.user|slice:":3"
%}
<img
src=“user_icon.png”>
{%
endfor
%}
ここがPythonだった！

52. djangoテンプレートあわあわ書いて、
Pythonよちよち勉強中

53. まとめ

54. まとめ
• いいデザインをチームみんなで模索しながら
やってるよ
• デザインのメリットになるCSS設計をするよ
• Pythonよちよちやってます

55. よりよいconnpassをユーザーの皆さんへ！
ご清聴ありがとうございました
～次へ～