HTML/CSSを意識して Webアプリをデザインしてみる（仮）/ yuruhachi.it-20190130

実装について詳しくなくてもできる！いくつかのポイントをおさえて、手戻りの少ないWebアプリのデザイン・UI仕様を考えられるようになりましょう。

…と、ちょっとしたコツを伝えつつ、
言葉が通じれば異業種でもなんとかなる！「いいアプリを作りたい」という気持ちは一緒なので、コミュニケーションとりならがやっていきましょ〜という内容です。

Transcript

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