デザインデータを正確に再現し、スムーズに制作を進めるために、ご提供いただきたいデザインデータに関するお願いをまとめました。
画像サイズについて
Webでは小数点の再現ができないため、画像サイズは小数点を含まない整数値で指定をお願いします。
これは画像だけでなく、配置など他の要素にも関わりますが、特に画像の場合、小数点を含むと書き出した際に滲んだりすることがあるためです。
フォントについて
使用フォントがGoogleフォントまたはシステムフォント以外の場合は、フォントデータをご提供ください。
また、Webフォントの種類を多用(ウェイト切り替えを含む)すると、サイトのパフォーマンスに影響を与える可能性があります。
そのため、Webフォントの使用は必要最低限にとどめていただくことをおすすめします。
行間の指定について
行間はパーセント指定を基本としてください。Figmaを使用する場合はパーセント指定が可能なのでご活用ください。
他のデザインツールを使用する場合も、できるだけパーセント指定に合わせていただけますと助かります。
例 : px指定の場合、例えば16pxのフォントに行間28pxを指定すると175%に相当します。
ただし、17pxのフォントに同じく28pxを指定するとバランスが崩れてしまいます。
そのため、例外的なケースはあっても構いませんが、基本的には本文は175%、見出しは200%といったように、用途に応じて割合を統一して指定をお願いします。
マウスオーバー時のデザインについて
ボタンやリンクなどのマウスオーバー時のデザイン指定が必要な場合は、マウスオーバー用のデザインをご用意ください。
指定がない場合は、基本的に透過(opacity)で対応します。
アニメーションについて
スクロール時のフェードインで表示するなどのアニメーションや、ローディング画面を使用する場合は、その詳細をご指定ください。
動きのイメージはデザイン内にコメントを入れていただくか、参考サイトのURLをお知らせいただく形でも問題ありません。
また、サイト全体をスクロール時にフェードインで表示するなど、大まかな指定でも対応可能です。
さらに、可能であればデザインデータのプロトタイプ機能でアニメーションを再現いただくと、より正確に理解できて制作もスムーズになります。
トップページのファーストビューについて
どの位置までをファーストビューに収めたいかご指定いただけると助かります。
指定がない場合は、デザイン通りのサイズでコーディングいたします。
スマホデザインについて
コーディング料金は、スマホとPCの両方のデザインデータをご提供いただいた場合の金額となります。
PCデザインのみをご提供いただき、スマホはお任せの場合はコーディング料金の30~50%を割り増しで頂戴しております。
PCデザインからスマホ表示画面をコーディングする場合、PC用の大きな画像を読み込むことになり、表示速度に影響が出る可能性があるため、スマホデザインのご用意を推奨しております。
その他のデザイン上の注意点
基本的に「ピクセルパーフェクト」という手法で、デザインデータを重ねてできるだけズレがないようにコーディングしています。
ただし、以下の場合はコーディング時に調整することがありますのでご了承ください。
・繰り返しのデザイン箇所で配置や余白感が統一されていない場合
・行間の指定にばらつきがある場合
・その他、Web上で再現が難しいデザインの場合 など
あわせてご用意いただきたいもの
・OGP画像
・favicon画像
その他、お知らせいただきたいこと
サイトの仕様書またはコーディング指示書をご用意いただける場合は、例として以下の内容を含めていただけると助かります。
・サイトマップ
・ヘッダーの追従の有無
・ハンバーガーメニューの表示方法(フェードイン、スライドインなど)
・descriptionに記載する内容
・スライダーにしたい箇所
・外部リンク先のURL
・動的に出力する予定の箇所(WordPress化の場合)
・お問い合わせフォームを導入する場合、管理者への送信先メールアドレスと自動応答メール文言
などになります。
※別途仕様書や指示書をご用意いただかなくても、デザインデータ内のコメント記載でも問題ありません。
納品先サーバー情報
サーバー情報(FTP情報またはコントロールパネル情報)をご提供いただけますと助かります。
ZIPファイルでの納品をご希望の場合は、その旨をお知らせください。
また、WordPressに反映する場合でインストール済みの場合は、ログイン情報もあわせてご提供いただけますと助かります。
計測タグ
GoogleアナリティクスやGoogleタグマネージャーなどの計測タグを埋め込みたい場合は、公開までにご提供をお願いいたします。