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

by 448jp | OKI Yoshiya

Slide 1

Slide 1 text

デザインとWebを楽しく学ぶLT大会in中野 Webデザイナー連携ポイントが押さえておきたいエンジニアとの合同会社世路庵沖良矢 | 2024.12.5THU

Slide 2

Slide 2 text

目次 1 デザインカンプが抱える課題 2 モダンウェブデザインにおけるマインドセット 3 押さえておきたい連携ポイント

Slide 3

Slide 3 text

おき沖よしや良矢 @448jp ⚫ 合同会社世路庵代表 ⚫ デザイナー／エンジニア ⚫ 受託制作一筋21年

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

スイカゲーム公式サイト（2024-）

Slide 6

Slide 6 text

スターバックスの窓（2019-2021）

Slide 7

Slide 7 text

RUZE Classique（2023-）

Slide 8

Slide 8 text

藤ダイレクト（2023-）

Slide 9

Slide 9 text

Net4U（2020-）

Slide 10

Slide 10 text

JAN統合管理（2020-）

Slide 11

Slide 11 text

Adobe MAX Japan 長岡造形大学 LinkedInラーニング Web Designing MdN × Bau-ya DIST

Slide 12

Slide 12 text

Figma基礎入門（20２３）

Slide 13

Slide 13 text

1 デザインカンプが抱える課題 Web design comps issues

Slide 14

Slide 14 text

作り込んだデザインなんか違う？実装されてみると……

Slide 15

Slide 15 text

作り込んだデザインなんか違う？実装されてみると…… ギャップはどこから生まれるのだろう？ギャップはどこから生まれるのだろう？

Slide 16

Slide 16 text

スマートデバイスの登場

Slide 17

Slide 17 text

実装デザイン設計レスポンシブウェブデザインの登場による、従来ワークフローの限界デザイン時の考慮漏れで必要なページ・パーツを追加作成！想定よりも使いづらいので思い切って設計変更！

Slide 18

Slide 18 text

OpenSignalによるAndroid Fragmentation Visualized (2014)

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

スマートフォン 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製デバイスの解像度

Slide 21

Slide 21 text

RWDにおけるデザインカンプのバッドパターン

Slide 22

Slide 22 text

1 カンプ外の幅で破綻する

Slide 23

Slide 23 text

デスクトップ向けデザインカンプモバイル向けデザインカンプ

Slide 24

Slide 24 text

デスクトップ向けデザインカンプカンプの間の場合は？カンプより小さい場合は？カンプより大きい場合は？モバイル向けデザインカンプ

Slide 25

Slide 25 text

2 デスクトップ用カンプしかない

Slide 26

Slide 26 text

デスクトップ向けデザインカンプモバイル向けデザインカンプ

Slide 27

Slide 27 text

デスクトップ向けデザインカンプモバイル向けデザインカンプスマホはよしなにしてください！デザイナー

Slide 28

Slide 28 text

3 スマートフォン用カンプが倍の解像度になっている

Slide 29

Slide 29 text

倍の解像度とは 2010年に発売されたiPhone 4以降、高密度ディスプレイ（Retinaディスプレイ）が急速に普及した。高密度ディスプレイでは、ドットバイドットの画像を表示するとぼやけてしまうため、倍以上の解像度で画像を制作する必要がある。これに対応するため、一部界隈からiPhone 4の解像度である320x480に対して、倍の640x960pxでデザインカンプを作る手法が生まれた。実際にはCSS座標の計算に手間がかかる、デスクトップの高密度も考慮すると巨大なカンプが必要になる、などのデメリットが多いため、推奨されない。デザインカンプ 640x960px 実際の表示 320x480px

Slide 30

Slide 30 text

4 チーム内で共通認識が不足している

Slide 31

Slide 31 text

理解の齟齬が生まれがちなポイント ⚫ ピクセルパーフェクトを目指してしまう ⚫ タップできる領域が小さい ⚫ マウスオーバーを前提としてデザインしてしまう ⚫ フォントサイズに関する認識が違う ⚫ オブジェクトサイズに関する認識が違う

Slide 32

Slide 32 text

ピクセルパーフェクトを目指してしまう

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

デザインカンプはRWDにおけるに過ぎないスナップショット

Slide 38

Slide 38 text

タップできる領域が小さい

Slide 39

Slide 39 text

各社のガイドライン ⚫ Apple: Human Interface Guideline ⚫ タップには44 x 44px以上の領域が必要 ⚫ Google: Material Design 3 ⚫ ボタンは40px以上の高さが必要

Slide 40

Slide 40 text

マウスオーバーを前提としてデザインしてしまう

Slide 41

Slide 41 text

マウスオーバーのバッドパターン ⚫ タッチデバイスにはマウスオーバーが存在しない ⚫ つまり、マウスオーバーで表示される情報にアクセスできない

Slide 42

Slide 42 text

フォント、オブジェクトのサイズに関する認識が違う

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

CSSでサイズを指定できる単位絶対指定 px 相対指定 ( vw / v' e& rem

Slide 45

Slide 45 text

2 モダンウェブデザインにおけるマインドセット The mindset in modern web design

Slide 46

Slide 46 text

Webデザイナーがはなんだろう？デザインすべきもの

Slide 47

Slide 47 text

色校正・印刷印刷物カンプ色校正・印刷グラフィックデザインでは…… 使いたいインクや紙によってデザインを調整します！デザイナー大事

Slide 48

Slide 48 text

カンプコーディング Webサイト Webデザインでは…… ココがデザインと違うので修正をお願いします！デザイナー大事？

Slide 49

Slide 49 text

Webデザイナーがはなんだろう？デザインすべきもの

Slide 50

Slide 50 text

Webデザイナーがはなんだろう？デザインすべきもの松田直樹（まぼろし）

Slide 51

Slide 51 text

Webデザイナーが（見た目）だけを作る時代はスタイル終わった

Slide 52

Slide 52 text

チームにもっとをコミュニケーション

Slide 53

Slide 53 text

カンプ制作前にやるべきこと ⚫ チーム内、クライアントと基礎知識を共有する ⚫ 誰がどこまで品質を担保するのか決定する ⚫ ターゲットを明確化する（デバイス、解像度、OS、ユーザー層……） ⚫ デザインをオープン化する仕組みを整える

Slide 54

Slide 54 text

3 押さえておきたい連携ポイント Cooperation Points to Keep in Mind

Slide 55

Slide 55 text

デザインカンプにはが指示書必須指示書＋デザインカンプ

Slide 56

Slide 56 text

指示書と言ってもどう作ればいいのやら……

Slide 57

Slide 57 text

引用：CodeGrid「デザイン指定のポイント 1」小原司

Slide 58

Slide 58 text

引用：CodeGrid「デザイン指定のポイント 1」小原司

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

指示書はどう作る？ ⚫ 指示書の目的はデザインの意図を伝えること ⚫ 目的を達成できれば手段は何でもOK  （デザインカンプへのコメント、画像、テキスト、PowerPoint...） ⚫ 100%人真似では現場にフィットしない可能性あり

Slide 61

Slide 61 text

押さえておきたい連携ポイント

Slide 62

Slide 62 text

1 カラー

Slide 63

Slide 63 text

Webサイトで使っているカラーはデザインファイルで指定したはずなのに、きちんと反映されていないのはなぜ？デザイナーエンジニアデザインファイルの指定をそのまま実装したんだけどな……。

Slide 64

Slide 64 text

POINT! 原則、Webサイト内で使っているすべてのカラーを一覧化しようカラーに名前をつけるとチームで共通認識が高まる一覧用のアートボードを作ると見やすいどういうところで使うカラーなのかメモを添えると複数人で作りやすくなる

Slide 65

Slide 65 text

2 フォント

Slide 66

Slide 66 text

指定したフォントが反映されていたり、されていなかったり…… 場所によって違うのはなぜ？デザイナーエンジニアこんなにたくさんの日本語フォントを使うと重くなってしまいますよ！　優先度を決めないと。

Slide 67

Slide 67 text

POINT! Webにおけるフォントの扱いを理解し、どう使い分けるかを決めようデバイスフォント各OSでデフォルトでインストールされているフォントで表示します。他の方法に比べて最も高速に動作します。ただし、インストールされているフォントはOSやバージョンによって異なります。主な利用箇所：本文 Webフォントフォントファイルを配信し、どの環境でも同じフォントで表示します。見た目の再現性は高いですが、日本語フォントは字形が多く、ファイルサイズも数MBになるため、ページ表示速度が遅くなります。主な利用箇所：見出し、キャッチコピー、ビジュアルを重視する本文画像文字を画像として書き出し、表示します。見た目とファイルサイズのバランスは取れていますが、文字修正をするたびに画像を書き出し直す手間が発生します。また、手軽に選択してコピーすることもできなくなります。主な利用箇所：ロゴ、図版、グラフ

Slide 68

Slide 68 text

3 状態変化

Slide 69

Slide 69 text

どういうデータが入るのか想定できていれば二度手間は避けられたけど、どういうことを想定しておけばいいんだろう？デザイナーエンジニアデザインでダミーデータが入っていたところに実データを入れたら、レイアウトが破綻してしまった！　デザイナーさんに修正をお願いしなきゃ。

Slide 70

Slide 70 text

データが空の状態読込中の状態データが部分的な状態エラー状態理想的な状態 POINT! UI Stackを参考にデータの状態変化を想定しよう

Slide 71

Slide 71 text

あれ、こんな半透明のデザイン作ったっけ？　ダサいので直してください！デザイナーエンジニアこのボタン、状態によっては押せないんだけど、見た目が変わらないと押せないことが分からないな…… とりあえず半透明にしとくか。

Slide 72

Slide 72 text

POINT! UIコンポーネントのよくある状態を想定し、あらかじめデザインしようマウスホバー時非アクティブ時文字が省略される？ボタン幅は固定で文字が改行される？ボタン幅が広がる？

Slide 73

Slide 73 text

4 アイコン

Slide 74

Slide 74 text

アイコンの位置がなんだかガタガタしている……デザインファイルの見た目に合わせて！デザイナーエンジニア 1つ1つサイズが違うからCSSが面倒なんだよな……。

Slide 75

Slide 75 text

パスをそのまま書き出すとサイズがバラバラ正方形でコンポーネント化すると吉

Slide 76

Slide 76 text

POINT! アイコンは正方形で作り、一覧化しようアイコンに名前をつけるとチームで共通認識が高まる塗りなしの矩形を背景に置いてコンポーネント化すると、アイコンが扱いやすくなる一覧用のアートボードを作ると見やすい

Slide 77

Slide 77 text

5 画像書き出し

Slide 78

Slide 78 text

コーディングで楽をしてもらうために画像を書き出しておいたのに、エンジニアの手間はあまり変わってないみたい……。デザイナーエンジニアコードを考慮した画像じゃないからそのまま使えないし、差し替えが発生すると余計に面倒なんだよな……。

Slide 79

Slide 79 text

POINT! 書き出す画像の名前、範囲、品質はコーディングをふまえてエンジニアと相談しよう角丸は画像にする？　 C S S で表現する？背景の丸とロゴは別々の画像？丸は C S S で表現する？

Slide 80

Slide 80 text

まとめ Conclusion

Slide 81

Slide 81 text

デザインの意図を伝えるために ⚫ デザイナー以外のメンバーと一緒に「デザイン」する ⚫ デザインカンプの外側を考える ⚫ デザインカンプに向かないコミュニケーションがある ⚫ チームのゴールは何か？を常に意識しよう