きれいなWebデザインデータ
Creative Member T.S WEBチーム
こんにちは。WebチームのSです。
最近、恥ずかしながら業務内容の割にタイピングが遅いため、今更ながら寿司打で練習をしています。
1ヵ月で\3000分程記録が伸びて楽しいのですが、利き手でない方が明らかに遅いため出題の運もあり、体調にも左右されやすいため自分のコンディションを見るのにも良い気がします。
上級編で元を取ることを目下の目標に頑張りたいと思います！
突然ですが、デザインデータにはどのような役割があるでしょうか？
何のデザインかによると思いますが、一般的には「クライアントにお見せする完成予想図」を作るためのものとお考えの方が多いのではないでしょうか。
Webデザインの場合、これに加えて「コーダーへの指示書・資料」としての役割もあるため、見た目だけでなく中身もしっかりしている必要があります。
では、具体的にどうすれば「中身もしっかり」するのでしょうか？
今回は、主に一般的なLPを想定し、コーダーがデザインデータで何を見ているのか、何が「きれいなデザインデータ」なのかをご紹介いたします。
これを押さえておくとクライアントだけでなく、コーダーからも「わかってる！」「仕事が丁寧で反映しやすい」と重宝されるかもしれません！
最初に
・主にAdobe及びXDがなんとかしてほしい話・ここで述べる内容は、会社や業界全体としてこれが望ましいとされているわけではなく、あくまで経験則による個人的な感想になります。
❝きれいな❞デザインデータとは？
結論から言うと、見やすい・書き出しやすい ものがきれいです！・フォルダ構造がきれい イラレ
・ソースがきれい ガビガビの素材やスクショを使わない・完成前には差し替える
・コーディングの参考資料として意味がある
→総じて書き出しやすい ということになる？
フォルダを整理する
原因：イラレからコピーしてくると余計なフォルダ構造が自動で作成され、データとして汚くなるソフトへの要望：そもそもAdobe同士なんだからそこはがんばってほしい！
人への希望：現状こうなので、できたらフォルダ整理してほしい 具体的には...↓
・無駄にぶあついフォルダ層
要因：イラレからコピーした際に起こりがち
・画像のトリミング、テキストボックスの無駄な包括、
テキストをアウトライン化しすぎない
要望：文字はOL化しないでおいてほしい、するとしたらテキストデータを非表示+OL化のみ表示でフォルダにまとめておくとか・テキスト→フォント
・画像化する必要があるもの→画像として書き出すが、OL化はしないでおいてほしい
・理由１：画像化する必要があるかの判断材料としてフォントを知りたい
・理由２：alt用 何にせよ反映
書き出しやすいように配置・調整する
・小数点が残らないようにする・画像内の余白を残さずトリミングしておく
例外）リスト要素内でバランスを調整する場合はサイズを統一（トリミングするか余白を足すか）して1グループにする
・角度のついたアイテム 画像は必要最小サイズで書き出したい
現状：毎回上下左右トリミングし、それを基準として大きさや配置を計っている
ソフトへの要望：自動トリミング機能がほしい！
人への希望：レイアウト時には一々してられないと思うが、確定したらしてほしい
・角度を付けているもの：
・別箇所で同じ画像があり使いまわしが想定できる、アニメーションを付ける
→一度まっすぐに直して書き出した上でcssで角度をつける
・見たままの角度で書き出せば良さそう
→垂直な長方形でトリミングする
上級編 できたら最高！
・フォント明記・格納・色 まとめ
・コンポーネントまとめ・各ホバーアクション見本
機能を正しく使う
Webデザイン作成ソフト独自の機能はどれも複雑で、デザインのみを作成される方からすると何のためにあるものなのか想像しにくく、余計なことはしないでおこう...と触らないでおく方も少なからずいるのではないでしょうか。確かにこれらはコーディングのためにあることが多く、デザイナーの方にはあまり関係ないように思われるかもしれません。
ですがこれらには大概、デザインに統一性をもたせ、デザイン作成・修正の手間を省くことができるといった実用的な面もあり、使えるようになると双方に多様なメリットが存在します。
例）XD：コンポーネント、リピート、ライブラリ 等
参考：Adobe XD ラーニングとサポート
Figma：コンポーネント、バリアブル、スタイル 等
参考：Figma Learn
どちらにも公式・非公式問わず使い方や解説の記事・お手本のデータなどもありますので、気になった方は是非一度見てみると良いと思います！
レスポンシブを意識して作り、伝える
データの整え方というよりデザイン思想そのもの！？と思われるかもしれませんが、レスポンシブを意識しろ！ということではなく、実装されるためにはどこがどのように変化するかを具体的に想定できており、コーダーに伝わるように作成しておく必要があります。・PC版の画面幅として想定しているキャンバスより大きく横にはみ出すようなデザイン
→「PC版の画面幅として想定しているキャンバス」は、あくまでも平均的な値＝シェア率の高いサイズにすることが多く、「PC版」より大きい端末がこの世にある限り「＝最大サイズのデザイン」ではありません。
参考：stascounter>Desktop Screen Resolution Stats Japan
引用：MDN＞レスポンシブウェブデザインの紹介
レスポンシブウェブデザイン (RWD) とは、利用できるあらゆる端末と画面サイズに対応する設計手法であり、タブレット、スマートフォン、テレビ、スマートウォッチなど、コンテンツがどの画面で表示されても自動的に適応することができる。
（もちろんスマートウォッチ程小さいものまで想定しろというのは酷で現実的ではなく、私自身対応したことはありませんが、大きい分には対応しやすくその甲斐もあるものだと思います）
デザインデータに明記されていないことについてはコーダーの想像力・好み・力量に依ることになってしまいますし、
はみだした時にどこまでどのように広がるのが「美しいのか」は、何よりデザイナーさんとしても拘りたい箇所だと思います。
FVだけでも想定・作成しておくことをおすすめします！
いかがだったでしょうか。
考えてもみなかった方にはこの機会にご一考を、改善したいけどどこをどうすればという方には参考にしていただけますと幸いです。
ご一読いただきありがとうございました！