Upload
yumi-uniq-hashizume
View
929
Download
0
Embed Size (px)
Citation preview
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って?
• みんなのデザインに関する意見・その理由をファシリテーターとして聞き出す、整理する
• デザイナーとしてベストだと思うデザインを理論的に説明する
• 最終的に何がベストかデザイナーとして判断する
• 1人歩きできるところは1人歩きでデザイン作る
色々と模索中
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をユーザーの皆さんへ!
ご清聴ありがとうございました ~次へ~