Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

B051d2bcb69590fd33f86f356c645920?s=47 Uni Ishizaki
January 30, 2019

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

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

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

B051d2bcb69590fd33f86f356c645920?s=128

Uni Ishizaki

January 30, 2019
Tweet

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. おわり