■庄司美雪さん
Webデザイナー / エンジニア
合同会社いろは 代表
株式会社WellSideMeeting 執行役員
仙台出身
卓球台を買うくらいの卓球好き
インフラエンジニア
↓
広告・マーケティング
↓
フロントエンジニア
↓
Web・UIデザイン
↓
教育
フリーランス5年を経て法人化
セミナーはあくまでも1コーダーの視点
■Web制作系のデザイン
▼コーポーレートサイトの例
2年前のデータ。
今だったらPCとスマホと同時に並べる
・コーダーとの連携
・アニメーションの指定（参考URL）
・ボタンをホバーでの指定
（Figmaのプロトタイプでアニメーション付ける人もいるが、
今回の例では指示。）
・リンク先もコメント
・使用しているGoogleフォントの指示（リンクも張ってあげる）
・使用画像は参考に。
・タブレットの指示（あってもなくてもいいかな）
・スマホ→展開したハンバーガーメニューも作る
・ローカルスタイル
・使う色・テキストを登録できる。
・シャドウ・エフェクトを登録する人もいる。
・日本語フォントと英語フォントは階層分けしとく。
・プロトタイプの設定
・Ｗeb制作だとあまりしない
・プロトタイプのアニメーションはキリがない
・コンポーネント
・共通のパーツなもの
・親を作っておいて、コピーを実デザインに使う。
・ヘッダーとかフッターに使うとよい
・子だけ変えることもできる。
▼サービスサイトの例
・コンポーネント
・没案も削除しない（あとから復活もありえる）
・3ページ以上になったらコンポーネント化する
・オートレイアウト
・自動で調整してくれる
・グループしてからオートレイアウト
・オートレイアウトのなかにオートレイアウト
※背景にクリック範囲をコンテナで作っている。
・コーディングに近いコードにしてくれる
・Variants
・紫の点線で囲まれているのがVariants
・親がコンポーネントになっていることが前提
※設定したら名前を変えるのを忘れずに。
・考えることは多い。
・工数との相談
■Webアプリ系のデザイン
▼電子カルテアプリの例
・Variantsを駆使している。
・アイコンとかをVariantsにしておくと便利
・システムのUI設計ではやっておく。
・devモード（閲覧権限みたいなもの）
・デザイン終わったら「開発準備完了」にする
■コーダーへの配慮・気を付けていること
・余白をスペースで代用しない。（テーブルにありがち）
・微妙な色の違いを透過で表現しない
・背景によるので、コーディング時に同じ色を出せない
・パススルーも使わない
・フレームに頼らず画像のマスクをする
・width,heightの指定に時間がかかる
・行間にpx指定しない
・都度計算する工数がかかる
・リストなどを改行でつくる（1個1個分ける）
■まとめ
・最低限、使用したフォントやカラーコードをまとめる
・具体的な指示があれば参考サイトのURLや該当箇所のスクリーンショットなどを添える
・サイトの動きをイメージしてもらいたかったらプロトタイプも設定してみる。
・効率よく変更に強いデザインを作るならオートレイアウトやVariants、コンポーネントを使ってみる。
・同じデザインでも、データの作り方を工夫するだけでコーダーが喜び、良好な関係値を作れる。
■Q&A
・コンポーネントとvariantsの違いがわからない。
→コンポーネントのバリエーション違い
・デザインを共有した後、修正過程が見られてしまうのは。
→コピーしたファイルをお客さんに共有する。
・コーダーさんにファイルを渡すときに画像の書き出し等はどうしているのか。
→コーダーさんに任せている。画像を探すのが大変。
コメント