Webデザイナーが押さえておきたいエンジニアとの連携ポイント

2024/12/5 「デザインとWebを楽しく学ぶLT大会 in 中野」

Transcript

1. デザインとWebを楽しく学ぶLT大会in中野 Webデザイナー 連携ポイント が 押さえておきたい エンジニアとの 合同会社世路庵 沖良矢 | 2024.12.5THU
2. 目次 1 デザインカンプが抱える課題 2 モダンウェブデザインにおけるマインドセット 3 押さえておきたい連携ポイント
3. おき 沖 よ し や 良矢 @448jp ⚫ 合同会社世路庵 代表 ⚫ デザイナー／エンジニア ⚫ 受託制作一筋21年
5. スイカゲーム公式サイト（2024-）
6. スターバックスの窓（2019-2021）
7. RUZE Classique（2023-）
8. 藤ダイレクト（2023-）
9. Net4U（2020-）
10. JAN統合管理（2020-）
11. Adobe MAX Japan 長岡造形大学 LinkedInラーニング Web Designing MdN × Bau-ya DIST
12. Figma基礎入門（20２３）
13. 1 デザインカンプが抱える課題 Web design comps issues
14. 作り込んだデザイン なんか違う？ 実装されてみると……
15. 作り込んだデザイン なんか違う？ 実装されてみると…… ギャップはどこから生まれるのだろう？ ギャップはどこから生まれるのだろう？
16. スマートデバイスの登場
17. 実装 デザイン 設計 レスポンシブウェブデザインの登場による、 従来ワークフローの限界 デザイン時の考慮漏れで 必要なページ・パーツを追加作成！ 想定よりも使いづらいので 思い切って設計変更！
18. OpenSignalによるAndroid Fragmentation Visualized (2014)
20. スマートフォン iPhone 14 Pro Max iPhone 14 Plus iPhone 14 Pro iPhone 14 iPhone 13 mini iPhone SE（第2世代） 430 x 932 428 x 926 393 x 852 390 x 844 375 x 812 375 x 667 タブレット iPad Pro 12.9inch iPad Pro 11inch iPad Air（第4世代） iPad（第8世代） iPad mini（第6世代） 1023 x 1366 834 x 1194 820 x 1180 810 x 1080 744 x 1133 デスクトップ 24inch iMac MacBook Pro 16inch
 （2020） MacBook Air
 （Late 2020） 2240 x 1260 1792 x 1120
 1440 x 900 近年のApple製デバイスの解像度
21. RWDにおけるデザインカンプの バッドパターン
22. 1 カンプ外の幅で破綻する
23. デスクトップ向け デザインカンプ モバイル向け デザインカンプ
24. デスクトップ向け デザインカンプ カンプの間 の場合は？ カンプより 小さい場合は？ カンプより 大きい場合は？ モバイル向け デザインカンプ
25. 2 デスクトップ用カンプしかない
26. デスクトップ向け デザインカンプ モバイル向け デザインカンプ
27. デスクトップ向け デザインカンプ モバイル向け デザインカンプ スマホはよしなにしてください！ デザイナー
28. 3 スマートフォン用カンプが 倍の解像度になっている
29. 倍の解像度とは 2010年に発売されたiPhone 4以降、高密度ディス プレイ（Retinaディスプレイ）が急速に普及した。 高密度ディスプレイでは、ドットバイドットの画像を表 示するとぼやけてしまうため、倍以上の解像度で画 像を制作する必要がある。 これに対応するため、一部界隈からiPhone 4の解像 度である320x480に対して、倍の640x960pxでデザ インカンプを作る手法が生まれた。 実際にはCSS座標の計算に手間がかかる、デスク トップの高密度も考慮すると巨大なカンプが必要に なる、などのデメリットが多いため、推奨されない。 デザインカンプ 640x960px 実際の表示 320x480px
30. 4 チーム内で 共通認識が不足している
31. 理解の齟齬が生まれがちなポイント ⚫ ピクセルパーフェクトを目指してしまう ⚫ タップできる領域が小さい ⚫ マウスオーバーを前提としてデザインしてしまう ⚫ フォントサイズに関する認識が違う ⚫ オブジェクトサイズに関する認識が違う
32. ピクセルパーフェクトを 目指してしまう
37. デザインカンプはRWDにおける に過ぎない スナップショット
38. タップできる領域が 小さい
39. 各社のガイドライン ⚫ Apple: Human Interface Guideline ⚫ タップには44 x 44px以上の領域が必要 ⚫ Google: Material Design 3 ⚫ ボタンは40px以上の高さが必要
40. マウスオーバーを 前提としてデザインしてしまう
41. マウスオーバーのバッドパターン ⚫ タッチデバイスにはマウスオーバーが存在しない ⚫ つまり、マウスオーバーで表示される情報にアクセスできない
42. フォント、オブジェクトの サイズに関する認識が違う
44. CSSでサイズを指定できる単位 絶対指定  px 相対指定  (  vw / v'  e&  rem
45. 2 モダンウェブデザインにおける マインドセット The mindset in modern web design
46. Webデザイナーが はなんだろう？ デザインすべきもの
47. 色校正・印刷 印刷物 カンプ 色校正・印刷 グラフィックデザインでは…… 使いたいインクや紙によって デザインを調整します！ デザイナー 大事
48. カンプ コーディング Webサイト Webデザインでは…… ココがデザインと違うので 修正をお願いします！ デザイナー 大事？
49. Webデザイナーが はなんだろう？ デザインすべきもの
50. Webデザイナーが はなんだろう？ デザインすべきもの 松田 直樹 （まぼろし）
51. Webデザイナーが （見た目）だけを 作る時代は スタイル 終わった
52. チームにもっと を コミュニケーション
53. カンプ制作前にやるべきこと ⚫ チーム内、クライアントと基礎知識を共有する ⚫ 誰がどこまで品質を担保するのか決定する ⚫ ターゲットを明確化する（デバイス、解像度、OS、ユーザー層……） ⚫ デザインをオープン化する仕組みを整える
54. 3 押さえておきたい連携ポイント Cooperation Points to Keep in Mind
55. デザインカンプには が 指示書 必須 指示書 ＋ デザインカンプ
56. 指示書と言っても どう作ればいいのやら……
57. 引用：CodeGrid「デザイン指定のポイント 1」 小原 司
58. 引用：CodeGrid「デザイン指定のポイント 1」 小原 司
60. 指示書はどう作る？ ⚫ 指示書の目的はデザインの意図を伝えること ⚫ 目的を達成できれば手段は何でもOK
 （デザインカンプへのコメント、画像、テキスト、PowerPoint...） ⚫ 100%人真似では現場にフィットしない可能性あり
61. 押さえておきたい 連携ポイント
62. 1 カラー
63. Webサイトで使っているカラー はデザインファイルで指定した はずなのに、きちんと反映されて いないのはなぜ？ デザイナー エンジニア デザインファイルの指定をそのまま 実装したんだけどな……。
64. POINT! 原則、Webサイト内で使っているすべてのカラーを 一覧化しよう カ ラ ー に 名 前 を つ け る と チ ー ム で 共 通 認 識 が 高 ま る 一 覧 用 の ア ー ト ボ ー ド を 作 る と 見 や す い ど う い う と こ ろ で 使 う カ ラ ー な の か メ モ を 添 え る と 複 数 人 で 作 り や す く な る
65. 2 フォント
66. 指定したフォントが反映されて いたり、されていなかったり…… 場所によって違うのはなぜ？ デザイナー エンジニア こんなにたくさんの日本語フォント を使うと重くなってしまいますよ！　 優先度を決めないと。
67. POINT! Webにおけるフォントの扱いを理解し、 どう使い分けるかを決めよう デバイスフォント 各OSでデフォルトでインストールされているフォントで表示します。他の方法に比べて最も高速に 動作します。ただし、インストールされているフォントはOSやバージョンによって異なります。 主な利用箇所：本文 Webフォント フォントファイルを配信し、どの環境でも同じフォントで表示します。見た目の再現性は高いです が、日本語フォントは字形が多く、ファイルサイズも数MBになるため、ページ表示速度が遅くなり ます。 主な利用箇所：見出し、キャッチコピー、ビジュアルを重視する本文 画像 文字を 画像として 書き出し、表示します。見た目 とファイルサイズのバ ランスは 取れていますが、 文 字 修正をするた びに 画像を 書き出し 直す 手間が 発生します。また、 手軽に 選択して コピーする こと もで きなくなります。 主な利用箇所： ロゴ、 図版、 グラフ
68. 3 状態変化
69. どういうデータが入るのか想定 できていれば二度手間は避けら れたけど、どういうことを想定し ておけばいいんだろう？ デザイナー エンジニア デザインでダミーデータが入って いたところに実データを入れたら、 レイアウトが破綻してしまった！　デ ザイナーさんに修正をお願いしな きゃ。
70. データが空の状態 読込中の状態 データが部分的な状態 エラー状態 理想的な状態 POINT! UI Stackを参考にデータの状態変化を想定しよう
71. あれ、こんな半透明のデザイン 作ったっけ？　ダサいので直して ください！ デザイナー エンジニア このボタン、状態によっては押せな いんだけど、見た目が変わらないと 押せないことが分からないな…… とりあえず半透明にしとくか。
72. POINT! UIコンポーネントのよくある状態を想定し、 あらかじめデザインしよう マ ウ ス ホ バ ー 時 非 ア ク テ ィ ブ 時 文 字 が 省 略 さ れ る ？ ボ タ ン 幅 は 固 定 で 文 字 が 改 行 さ れ る ？ ボ タ ン 幅 が 広 が る ？
73. 4 アイコン
74. アイコンの位置がなんだかガタ ガタしている……デザインファ イルの見た目に合わせて！ デザイナー エンジニア 1つ1つサイズが違うからCSSが面 倒なんだよな……。
75. パスをそのまま書き出すとサイズがバラバラ 正方形でコンポーネント化すると吉
76. POINT! アイコンは正方形で作り、一覧化しよう ア イ コ ン に 名 前 を つ け る と チ ー ム で 共 通 認 識 が 高 ま る 塗 り な し の 矩 形 を 背 景 に 置 い て コ ン ポ ー ネ ン ト 化 す る と 、 ア イ コ ン が 扱 い や す く な る 一 覧 用 の ア ー ト ボ ー ド を 作 る と 見 や す い
77. 5 画像書き出し
78. コーディングで楽をしてもらうた めに画像を書き出しておいたの に、エンジニアの手間はあまり変 わってないみたい……。 デザイナー エンジニア コードを考慮した画像じゃないから そのまま使えないし、差し替えが発 生すると余計に面倒なんだよ な……。
79. POINT! 書き出す画像の名前、範囲、品質はコーディングを ふまえてエンジニアと相談しよう 角 丸 は 画 像 に す る ？ 　 C S S で 表 現 す る ？ 背 景 の 丸 と ロ ゴ は 別 々 の 画 像 ？ 丸 は C S S で 表 現 す る ？
80. まとめ Conclusion
81. デザインの意図を伝えるために ⚫ デザイナー以外のメンバーと一緒に「デザイン」する ⚫ デザインカンプの外側を考える ⚫ デザインカンプに向かないコミュニケーションがある ⚫ チームのゴールは何か？を常に意識しよう
82. チームの を深めて よい を創り出しましょう！ 相互理解 体験
83. ありがとうございました 合同会社世路庵　沖 良矢 @448jp