connpass design at bpstudy #88
TRANSCRIPT
![Page 1: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/1.jpg)
connpass Design
Yumi Hashizume / 20141215 / BPStudy #88
![Page 2: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/2.jpg)
お前誰よIntroduction
![Page 3: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/3.jpg)
橋爪由美 @uniq
株式会社ビープラウド / Designer
![Page 4: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/4.jpg)
デザインが好き 企画・ディレクションも好き コードを書くのも好き チーム開発が好き
![Page 5: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/5.jpg)
connpassには
2013.07あたりからアサイン
![Page 6: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/6.jpg)
今回話すこと• connpassのデザインの作り方
• …からの~、connpassのデザイナーの役目とは
• connpass運用しながらCSS設計がんばったよ
• デザイン設計はCSS設計と一心同体
![Page 7: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/7.jpg)
conppassのデザインの作り方
![Page 8: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/8.jpg)
よくある分業制の流れ
ディレクター 考える人
デザイナー 作る人
エンジニア 作る人
戦略策定
UI ビジュアルデザインを
決める
実装
![Page 9: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/9.jpg)
connpassの流れ
デザイナー
戦略策定
エンジニア
デザイナー
エンジニア
気になる画面は 朝会ついでに わいわい確認して デザイン決定
ワイヤーフレーム作成・確認 各自作ってくる
or みんなでホワイトボード
デザイナー
エンジニア
or デザイナー
ビジュアルデザイン作成 (たいていhtml状態)
![Page 10: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/10.jpg)
みんなで考えて みんなで作る
![Page 11: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/11.jpg)
戦略策定ブレストをレコーディングホワイトボードに皆でわいわい
![Page 12: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/12.jpg)
しゃちょうの すごい要求分析つりー
![Page 13: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/13.jpg)
ワイヤーフレーム作成Balsamiq markups ラフな感じなので、デザインに左右されずにワイヤーフレーム検討できる エンジニアも作る
![Page 14: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/14.jpg)
ワイヤーフレーム作成ホワイトボードに手書き。みんなでわいわい。
![Page 15: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/15.jpg)
印刷してペーパープロトタイプのテストちょっと乱暴ですが、ホワイトボード等をそのまま印刷してペーパープロトとして遷移テスト
![Page 16: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/16.jpg)
良い点
![Page 17: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/17.jpg)
みんな戦略を理解している!• 漏れに早く気づく
• 認識のズレが少ない
• 実装・テストしながら、不適切な箇所に気づきやすい
![Page 18: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/18.jpg)
手戻りロスの減らせる!
![Page 19: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/19.jpg)
独りよがりのデザインにならない• 気付きがたくさんある
• デザインのテストをみんなでやってる感じ
• ビジュアルデザインは、たいていHTMLで作るので、実際に近い状態でテストできる
![Page 20: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/20.jpg)
つまりconnpassのDesignerって?
![Page 21: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/21.jpg)
• みんなのデザインに関する意見・その理由をファシリテーターとして聞き出す、整理する
• デザイナーとしてベストだと思うデザインを理論的に説明する
• 最終的に何がベストかデザイナーとして判断する
• 1人歩きできるところは1人歩きでデザイン作る
![Page 22: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/22.jpg)
色々と模索中
![Page 23: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/23.jpg)
connpass運用しながら
CSS設計し直した話
![Page 24: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/24.jpg)
最初に言っておきたいことがあります
![Page 25: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/25.jpg)
コードを憎んで 人を憎まず
コードは時とともに腐っていくもの
![Page 26: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/26.jpg)
以前のconnpassのCSS
![Page 27: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/27.jpg)
• reset.css
• common.css
• base.css
• ページ毎のcss
![Page 28: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/28.jpg)
connpassってどんなサービスになるんだろう…?
…という時代だったので、これはこれで何とかなってた
![Page 29: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/29.jpg)
connpass改善フェーズに突入
![Page 30: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/30.jpg)
mission• 使いにくいところを使いやすくする
• 不便なところを便利にする
• 明確に決まった戦略を後押しするデザインにする
• => connpassのブランディングが必要
![Page 31: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/31.jpg)
ブランディングに必要なもの
雰囲気の共通化 パーツの共通化
connpassというテーマを明確に 個性をもつ
![Page 32: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/32.jpg)
module化されたCSSが必要
共通化されたブランドイメージ
![Page 33: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/33.jpg)
そうだ、CSSを設計し直そう
![Page 34: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/34.jpg)
common.css• 共通で使える文字色
• important, notice…
• 共通で使えるmarginのclass
• 共通で使えるcolumn
![Page 35: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/35.jpg)
他はmodule.cssにお引っ越し
![Page 36: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/36.jpg)
module系css• ボタン、リスト、フォーム、テーブル等
• いったんmodule.cssに詰め込む
• button.css, list.css, form.css, label.css などに分ける
![Page 37: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/37.jpg)
デザインにテーマが出来る!
共通パーツを意識することによって…
![Page 38: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/38.jpg)
危険なCSSを設計し直そう
![Page 39: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/39.jpg)
例えば
.btn_red { background-color:#f00; color:#fff; font-size:24px; font-weight:bold; padding:10px 20px;}
![Page 40: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/40.jpg)
これよりも小さい赤いボタンを作りたい時はどうすれば?
![Page 41: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/41.jpg)
新しいclass追加
.btn_red_small { background-color:#f00; color:#fff; font-size:12px; padding:3px;}
![Page 42: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/42.jpg)
.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
![Page 43: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/43.jpg)
例えばこう直す.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;}
![Page 44: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/44.jpg)
様々な表現が可能になる!赤い大きいボタン= .btn_red.btn_large
赤い小さいボタン= .btn_red.btn_small
黒い大きいボタン= .btn_black.btn_large
黒い小さいボタン= .btn_black.btn_small
…
![Page 45: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/45.jpg)
デザインに幅ができる!
![Page 46: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/46.jpg)
bootstrapやfoundationなど
既存のCSSフレームワークが参考になる
![Page 47: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/47.jpg)
おまけ
![Page 48: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/48.jpg)
djangoのテンプレートを書くために…
DesignerだけどPython
![Page 49: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/49.jpg)
http://www.slideshare.net/yumi-uniq-ishizaki/
pyladies-141025-uniq
![Page 50: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/50.jpg)
ここがPythonだった!
{% for p in event.user|slice:":3" %} <img src=“user_icon.png”> {% endfor %}
![Page 51: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/51.jpg)
![Page 52: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/52.jpg)
djangoテンプレートあわあわ書いて、
Pythonよちよち勉強中
![Page 53: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/53.jpg)
まとめ
![Page 54: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/54.jpg)
まとめ• いいデザインをチームみんなで模索しながらやってるよ
• デザインのメリットになるCSS設計をするよ
• Pythonよちよちやってます
![Page 55: connpass design at BPStudy #88](https://reader034.vdocuments.pub/reader034/viewer/2022052602/55a05b921a28ab04688b4774/html5/thumbnails/55.jpg)
よりよいconnpassをユーザーの皆さんへ!
ご清聴ありがとうございました ~次へ~