コーディングしやすいデザインデータをつくるために意識していること
こんにちは。今日はwebデザインの話です。
今回はコーディングしやすいデザインデータをつくるために意識していることを紹介したいと思います。
１．ワイドビューのデザインをどうするか考える
デザインカンプは大体1280～1440pxでつくりますが、
忘れられがちなのがファーストビュー。
ワイドビューになったときにどうするかを決めましょう。
・目いっぱい広げるのか？
・画面の最大幅を決めておくのか？
・両端をいい感じにぼかしておくのか？
などなどです。
２．サイト構造やレスポンシブを考えながら作る
ワイヤーフレームの段階では、構造やルールを考えながらデザインします。
ここはsection、ここはh3など…。情報設計を意識します。
デザインの段階では、スマホならこういうレイアウトにしよう、と考えながら作業しています。デザインの時点で色々想定しておくことで、コーディングしやすくなります。
３．フォントは３種類以内で
多くの種類のGoogleフォントを読み込むとサイトが重くなってしまうので、原則2種類、多くても3種類以内にします。
※沢山の種類のフォントを使いたい、でもサイトの読み込みを早くしたい、という場合には、「Googleフォントのサブセット化」という手段もあるそうです。
４．レイヤーは整理整頓する、名前もつける
htmlの構造を意識しながら整理整頓します。
同じグループの素材なのに、全然別のレイヤーにあると調整や修正が大変なので、グループ化をします。
またコーディング用のデータを書き出す場合を想定し、レイヤーには名前を全部つけます。…名前をつけないまま書き出した結果、ひどい目に遭いました。
５．できる限り余白やフォントサイズのルールを統一する
余白やフォントサイズはできる限りルールを統一します。
コンポーネントとインスタンスの考え方も大事です。
（共通にする部分と違う部分を意識する）
例）h2のタイトル、「私たちについて」「サービス一覧」「お客様の声」
（共通部分）
フォントの種類：NotoSans
フォントサイズ：36px
フォントカラー：#222222
ウェイト：Bold
（違う部分）
「サービス一覧」のみ、フォントカラーを赤にする。
６．コーディングを想定しながらレイアウトを決める
ここはspacebetweenだな～、containerは1文字分の内側余白（padding）をつけようかな～などです。ポイントは、画面幅が端末によって変わることを忘れないようにすることです。左右の余白を〇px！と決めていても、画面幅が狭くなれば難しくなったりするので…。中間サイズのレスポンシブ対応は地味に大変なのです。
７．スタイルガイドはできる限り詳細に
スタイルガイドでは、主に以下の内容をいれます。
フォントの種類
フォントサイズ（セクションタイトル、本文など）
カラーコード
行高
レタースペーシング
余白
ホバー時の変化 （参考サイトもあればつけると尚Good！）
スタイルガイド用にアートボードは作っておきましょう。
コーディングする人の確認の手間を減らせる工夫が必要かなと思います。
８．アイコンのサイズはそろえる
素材サイトからダウンロードした素材は、サイズがバラバラです。
透明な長方形の中にいれて、サイズをそろえましょう。
（スクールの先生からフィードバックがありました汗）
９．OGP、ファビコンはつくって引き渡す
OGPとファビコンをつくって引き渡します。
■OGPの作り方
1200px×630pxが基本ですね。
■ファビコンの作り方
いつも32px×32pxで作っていたんですが、スマホ専用のサイズ（ホーム画面におくときのやつ）とかあるんですね。知らなかった…。
おまけ：デザインカンプ作るときの目安表
コンテンツ幅…1000px～最大1200px
コンテンツの左右の余白…10％ぐらい
本文の文字…16px（最小14px）、行高1.6～2ぐらい
ヘッダーの高さ（PC）…70～140px
ヘッダーの高さ（SP）…50pxあたり
ハンバーガーメニューへの切り替え ヘッダーのボリュームにもよる
FV（メインビジュアル）…高さ600pxあたり、下層ページは400px付近
FV（スマホ）…600px付近
セクションの上下余白…80～100pxあたりで調整
※これが正解というわけではなく、おおまかな基準を決めておくことでデザインがしやすくなりました。
それでは失礼いたします。
この記事が気に入ったらサポートをしてみませんか？