Slide 1
Slide 1 text
HTML/CSSを意識して
Webアプリをデザインしてみる
(仮)
Slide 2
Slide 2 text
自己紹介
@uniq
うに
萌え絵描きデザイナー
埼玉県の大宮あたりでワンコと暮らしている
Slide 3
Slide 3 text
Sketchなどでデザイン作る
↓
実装してもらう
↓
なんか違う？？？
こんな経験はありませんか？
デザインをうけとる
↓
実装する
↓
なんか違う？？？
デザイナー エンジニア
Slide 4
Slide 4 text
いろいろと理由はあると思いますが、今回の注目ポイントはこちらを！
1. タブレットで見た時のデザインはどうするの？
2. 実際のデータいれたら、こんなふうになっちゃったよ
3. このデザイン実装むずかしい～
Slide 5
Slide 5 text
こんな写真と
こんなテキストを
使う予定！
目標PV達成するぞ
誰しも自分の領域以外は知らないor見えにくい
エンドユーザー
運用する人
あの写真を
見せたい。
いいねがほしい。
こんなデザインにしたら
ユーザーさんに
喜んでもらえそう
このデータは
こう使われるから
こう構成する…
デザイナー エンジニア
Slide 6
Slide 6 text
デザイナー エンジニア
それでも同じ部分はある
「いいWebアプリをつくりたいね」
お互い歩み寄っていいものを作りましょう
Slide 7
Slide 7 text
サンプルのWebアプリ
Slide 8
Slide 8 text
架空のペットSNS
Slide 9
Slide 9 text
？
複雑な曲線にあわせる大変だよ Part 1
SVGで書き出したとしても
文字が多いときは
吹き出しが横長になるのかな？
Slide 10
Slide 10 text
こういったのはhtml/cssで表現するの大変
* 四角でも三角でもない。
* アンカーポイントの
ハンドルで曲線を作ってる。
Slide 11
Slide 11 text
四角いもの、角丸しか作れないよ！
Slide 12
Slide 12 text
円も実は正方形を角丸で作ってます。円が作れるわけではない。
Slide 13
Slide 13 text
実はこうやって作れなくもない
丸いのと
三角を組み合わせる…。
でも大変です。
Slide 14
Slide 14 text
どうしてもモコモコ吹き出しがほしい！というときもある
ワイワイにぎやかな感じを出したい…など。
工夫しだいで、表現する技術はいくつかあるので、
別途相談しましょう～
Slide 15
Slide 15 text
こういう吹き出しなら現実的
bootstrapやMaterialで
表現できるデザインは現実的な例！
ドキュメントを見ておくと良さそう
https://material.io
https://getbootstrap.com/
Slide 16
Slide 16 text
複雑な曲線にあわせる大変だよ Part 2
Slide 17
Slide 17 text
アンカーポイントのハンドルで曲線を作ってる
↓
坂道はSVGにしよう
Slide 18
Slide 18 text
犬とCopyrightは
右から●px、下から●pxと配置しよう
Slide 19
Slide 19 text
画面ひろげたら
犬とCopyrightが浮いてるよ…
Slide 20
Slide 20 text
例えば
こういうフッターでもいいかもしれない…。
ここらへんもお互い相談しましょう～
Slide 21
Slide 21 text
カードの並び
Slide 22
Slide 22 text
https://datavizproject.com/#
中途半端なカード数の場合はどう見えるの？
真ん中あわせ 左寄せ
Slide 23
Slide 23 text
https://datavizproject.com/#
Hoverもかっこよくデザインしたいよね
Slide 24
Slide 24 text
ありがちだけどテキスト量
多い時は
どう表現する？
少ない時の見た目は
大丈夫？
Slide 25
Slide 25 text
センタリングの罠
こんなデザインを作ったけれども こんなふうに実装された
Slide 26
Slide 26 text
デザイナーが作ったもの 実装されたもの
Slide 27
Slide 27 text
エンジニア
* ユーザーがストレスなく読めるような
画面にしたい（軽く作りたい）。
* このスタンプは全部上下左右中央。
* 繰り返しはまとめて書く方法にしよう。
実装担当者の脳みそ
Slide 28
Slide 28 text
デザイン担当者の脳みそ
デザイナー
* 良さげなデザインのために、
別途調節するの当たり前。
Slide 29
Slide 29 text
繰り返しに見えて繰り返しじゃないデザイン
実装されたものをじ～っくり見る。
事前にここはセンタリングにみえて実はセンタリ
ングじゃないよアピールとか。
お互いコミュニケーションをとりながら！
Slide 30
Slide 30 text
実際に使ってもらった！
Slide 31
Slide 31 text
文字が見えない！
←作ったデザイン
←天気によって変わる画像で
白い写真がきてしまって
白い文字が見えなくなっちゃった
Slide 32
Slide 32 text
文字のdropshadowで白写真でも白文字見えるように
Slide 33
Slide 33 text
あと写真に透明度が一桁の黒いのをかぶせる
Slide 34
Slide 34 text
白い画像がきて、目立たない感じになっちゃった
Slide 35
Slide 35 text
これも透明度が一桁の黒いレイヤーかさねましょう
After
Before
Slide 36
Slide 36 text
Google 画像検索もPinterestも
透明度が一桁くらいの黒いレイヤーをかぶせている！
（たぶん）
Slide 37
Slide 37 text
写真が切れちゃって残念な感じに…
Slide 38
Slide 38 text
* システム側で画像自体を切って、それを載せている方法
* 全部表示された画像を使って、CSSではみだした部分を隠して見
せてる方法
どちらにしろ、端っこから切り取るか、真ん中だけ切り取るか
Slide 39
Slide 39 text
アップロード画面は、正方形に切られるイメージを出してあげる。
正方形の画像が表示される。
…とした方が良さそう。
Slackの画面です
Slide 40
Slide 40 text
まとめ
Slide 41
Slide 41 text
アンカーポイントの
ハンドルで描画されたものは
html/cssで表現するのは大変。
実装担当者は
繰り返し系はまとめる。
まとめられたら困るデザインは？
ブロック状に並べるとき
中途半端な場合どうなるかを
意識しよう
どんな画像が入るか
どんなテキストが入るか
想像して試してみよう
時にはユーザーに
制限をかけるのもあり
Slide 42
Slide 42 text
デザイナー エンジニア
最後に
「いいWebアプリをつくりたいね」
分からないことがあったら聞けば良し！
Slide 43
Slide 43 text
おわり