こんにちは。フロントチームのよこです。
今回はWEBサイトデザインをしたことがないデザイナー向けに、コーディングしやすいデザインカンプの作り方について、コーダーの視点から書いていきたいと思います。
目次
１．数値は整数で指定
コーダーなら誰もが指摘したくなるのがこちら。
私自身もデザインをするので拡大縮小などの調整をするとついつい見落としがちになるのですが、画像サイズ、余白、フォントサイズ（XDの場合はほぼないですが）など、数値に少数が発生していることがあります。
なぜ小数がダメなのか。
コードで小数を指定すると、ブラウザによって小数が利用できるのか、第何位まで認識するのか、切り捨てか切り上げかなど解釈が異なり、場合によってはカンプの再現度が下がるためです。
サイズ指定に少数が含まれていないか、カンプ提出前に一度見直しを行うことをお勧めします。
また、Photoshopなどでスマホ版のカンプを画像の書き出しの関係で2倍サイズで作成する場合には、コーディング時に数値をすべて半分で割るため、少数が発生させず、かつ割り切れる数値である必要があります。
２．そのフォント、使える？
世の中にはたくさんのフリーフォントがありますが、まずは商用利用可でWEBフォントが存在することの確認は必須です。
そして、気を付けたいのがAdobe Fonts。
Adobe CCを契約している方が利用できるAdobe Fontsは種類も豊富で商用利用可、WEBフォントも利用できます。
ただし、クライアント案件で利用する場合には公開元のエンドクライアントがAdobe CCを契約している必要があります。
クライアントがAdobeアカウントを保有していることはあまり多くないため、WEBフォントを利用する場合には、Google Fontsを利用するのが無難ですね。
また、最近はCSSで加工の幅が広がっているのでできることは増えてきていますが、PhotoshopやIllustratorなど文字加工をしすぎるとコーディングで再現するのが難しくなるため、画像で書き出さない文字情報の加工は最低限に留めたほうがよいと思います。
３．可変するWEBサイト
モバイル端末での閲覧やブラウザ縮小などにより、WEBサイトは画面の幅が変わったらレイアウトが崩れるなんてことも多々。。。
コンテンツ幅よりも画面が小さくなった場合の考慮が必要です。
ここに関してはコーダーが良きに計らう場合もありますが、デザインの段階で考慮されているとコーダーは感極まって泣くことでしょう。
…というのは冗談ですが
ボタンにカーソルを当てたらどういった変化が起きるのか。
ハンバーガーメニューを展開させたあとどんなデザインのメニューを表示させるのか。
初期表示されないようなエラーメッセージはどこに表示させるのか。
など、ユーザーの操作によって変化する部分はたくさんあるため、そういった部分も予めデザインを用意しておくと、デザイナーとコーダー間の確認などが減って効率が上がると思います。
４．画像は書き出しやすくする
背景に画像を敷くときにカンプサイズを超えて敷いているが、マスクを掛けてない場合。
１枚画像かと思いきや、特に可変のないマスクのレイヤーがグループ化されずに上に重なっている。
画像の命名がバラバラ。
などなど。
書き出しの際にコーダーがデータを触る必要が出てきます。
そうなるとデザイナーが意図していていない書き出し方をされることもあり得るため、できるだけ書き出しを意識したデータ作りを心がけるとミスの防止や効率アップに繋がると思います。
最後に
WEBデザインで大切なのはデザインはもちろんですが、わかりやすいデータづくりも大切です。
今回記載したことをいきなりすべて意識するのはなかなか難しいですが、レイヤーがきれいに整っている、ちゃんと命名がされているなど基本的なことですが細かい部分まで気を使われたデザインデータは、自分以外にもわかりやすくチームの作業効率を上げると思います。
ぜひ意識してみてください。
