connpass Design

Yumi Hashizume / 20141215 / BPStudy #88

お前誰よIntroduction

橋爪由美 @uniq

株式会社ビープラウド / Designer

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

connpassには

2013.07あたりからアサイン

今回話すこと• connpassのデザインの作り方

• …からの～、connpassのデザイナーの役目とは

• connpass運用しながらCSS設計がんばったよ

• デザイン設計はCSS設計と一心同体

conppassのデザインの作り方

よくある分業制の流れ

ディレクター 考える人

デザイナー 作る人

エンジニア 作る人

戦略策定

UI ビジュアルデザインを

決める

実装

connpassの流れ

デザイナー

戦略策定

エンジニア

デザイナー

エンジニア

気になる画面は 朝会ついでに わいわい確認して デザイン決定

ワイヤーフレーム作成・確認 各自作ってくる

or みんなでホワイトボード

デザイナー

エンジニア

or デザイナー

ビジュアルデザイン作成 （たいていhtml状態）

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

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

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

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

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

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

良い点

みんな戦略を理解している！• 漏れに早く気づく

• 認識のズレが少ない

• 実装・テストしながら、不適切な箇所に気づきやすい

手戻りロスの減らせる！

独りよがりのデザインにならない• 気付きがたくさんある

• デザインのテストをみんなでやってる感じ

• ビジュアルデザインは、たいていHTMLで作るので、実際に近い状態でテストできる

つまりconnpassのDesignerって？

• みんなのデザインに関する意見・その理由をファシリテーターとして聞き出す、整理する

• デザイナーとしてベストだと思うデザインを理論的に説明する

• 最終的に何がベストかデザイナーとして判断する

• １人歩きできるところは１人歩きでデザイン作る

色々と模索中

connpass運用しながら

CSS設計し直した話

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

コードを憎んで 人を憎まず

コードは時とともに腐っていくもの

以前のconnpassのCSS

• reset.css

• common.css

• base.css

• ページ毎のcss

connpassってどんなサービスになるんだろう…？

…という時代だったので、これはこれで何とかなってた

connpass改善フェーズに突入

mission• 使いにくいところを使いやすくする

• 不便なところを便利にする

• 明確に決まった戦略を後押しするデザインにする

• => connpassのブランディングが必要

ブランディングに必要なもの

雰囲気の共通化 パーツの共通化

connpassというテーマを明確に 個性をもつ

module化されたCSSが必要

共通化されたブランドイメージ

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

common.css• 共通で使える文字色

• important, notice…

• 共通で使えるmarginのclass

• 共通で使えるcolumn

他はmodule.cssにお引っ越し

module系css• ボタン、リスト、フォーム、テーブル等

• いったんmodule.cssに詰め込む

• button.css, list.css, form.css, label.css などに分ける

デザインにテーマが出来る！

共通パーツを意識することによって…

危険なCSSを設計し直そう

例えば

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

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

新しいclass追加

.btn_red_small { background-color:#f00; color:#fff; font-size:12px; padding:3px;}

.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

赤くて小さいボタンの名前が .btn_red_small

例えばこう直す.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;}

様々な表現が可能になる！赤い大きいボタン= .btn_red.btn_large

赤い小さいボタン= .btn_red.btn_small

黒い大きいボタン= .btn_black.btn_large

黒い小さいボタン= .btn_black.btn_small

…

デザインに幅ができる！

bootstrapやfoundationなど

既存のCSSフレームワークが参考になる

おまけ

djangoのテンプレートを書くために…

DesignerだけどPython

http://www.slideshare.net/yumi-uniq-ishizaki/

pyladies-141025-uniq

ここがPythonだった！

{%  for  p  in  event.user|slice:":3"  %}      <img  src=“user_icon.png”>  {%  endfor  %}  

djangoテンプレートあわあわ書いて、

Pythonよちよち勉強中

まとめ

まとめ• いいデザインをチームみんなで模索しながらやってるよ

• デザインのメリットになるCSS設計をするよ

• Pythonよちよちやってます

よりよいconnpassをユーザーの皆さんへ！

ご清聴ありがとうございました ～次へ～