# デザイン制作を請け負ってくれるみなさまへ
本ドキュメントはNKOHwebからの発注を受け、デザイン制作を行っていただく方に向けて、ご留意いただきたい事項などをまとめた資料です。
作業を開始する前に本ドキュメントをご一読のうえ作業を行ってくださいますようお願い申し上げます。
不明な点があれば弊社担当までお気軽にお問い合わせください。
## アウトライン
- [ご納品いただくデザインデータについて](#ご納品いただくデザインデータについて)
- [コーディングについて](#コーディングについて)
- [ご共有資料リンク集](#ご共有資料リンク)

# ご納品いただくデザインデータについて
## 納品形式
- PSD、Ai、XD のいずれかでご納品をお願いいたします。
※ 素材郡はパッケージ化をお願いします。
※ XDは大きな改変に適していないので可能であればPSDかAiだと大変助かります。

## アートボードサイズ
- PC版： W 1920px H 自由
- SP版： W 750px H 自由

## 命名ルールについて
コーディング時の命名規則は厳格には定めておりませんが
参考はこちらです。:link:[別紙](https://hackmd.io/@BNllOmPTRE2XStBeEs-hqA/HynHxl9m0)

なお、必ずしもデザインデータ上でこの状態になっている必要はございませんが、後工程のスムーズな進行を意識していただきながら制作いたけますと幸いに存じます。

## コンテンツサイズについて
メインコンテンツ領域は 最大1040pxでお願いします。
メインビジュアル領域については特に制限を設けておりませんが、実装イメージをご共有いただけますようお願い申し上げます。

## フォントについて
カバヤ食品の基本フォントは**NotoSansCJKjp**、基本サイズは16pxです。
テキストについては特にご指定がない場合、コーディング時にこちらに変換させていただきます。

### 導入可能な有料WebFont
AdobeFont、モリサワが提供しているモリサワパスポートに含まれる書体は使用可能です。

### 無料WebFontについて
GoogleFontなど無料で使えるサービスの利用も可能ですが、使用状況を把握しておきたいため、使用する場合はその旨一報ください。

---

# コーディングについて
後工程のコーディングでは、制作いただいたデザインデータから想定するイメージを汲み取り実装していく必要がございます。
そこで弊社サイトルールについて予め実装の条件などをあらかじめご共有、コーディングフェーズでの手戻りや認識の相違を最小限にすることを目的とし、この章を設けています。
実装はレスポンシブが絶対条件となりますので、デザイン制作時においても、実装を想定しながら制作いただけますと幸いです。

## SEOについて

今回のページが新規であることからSEO評価もページに対してはゼロからのスタートとなりますため、テキスト化できそうなところは可能な限りテキストで対応したいと考えております。
そのあたりもご配慮いただきながら制作をお願いできればと思います。

## レスポンシブ対応について
レスポンシブはブレイクポイントを設定した固定幅レイアウトでの実装を想定しています。
今回ご納品いただくデータはPC版とSP版のみとなりますが、
レスポンシブに変化する実装を想定して制作いただけますと幸いです。

### レスポンシブ注意事項
- 特定の画面サイズで不要な横スクロールバーがでることは禁止です。
- 特定の画面サイズで表示が崩れることがないように検証をお願いします。

### ブレイクポイントと最大幅の目安
**設定値パターン例**
0~767px 最大幅: none
768px~1040px 最大幅: 1040px
1041px~1920px 最大幅: 1040px
1921px 最大幅: 1040px

※ 最大幅は目安です。デザイン上の配置や特性に応じて、コーダーとすりあわせてください。

また :link:[動きのイメージはこちら](https://responsive-grid-designer.netlify.app/?gridSystem=%7B%22gridPreferencesList%22%3A%5B%7B%22breakpointRange%22%3A%7B%22minWidth%22%3A0%2C%22maxWidth%22%3A767%7D%2C%22columns%22%3A4%2C%22gutter%22%3A16%2C%22margin%22%3A16%2C%22rem%22%3A1%2C%22demo%22%3A%7B%22heading1%22%3A%7B%22start%22%3A1%2C%22end%22%3A5%7D%2C%22heading2%22%3A%7B%22start%22%3A1%2C%22end%22%3A5%7D%2C%22paragraph%22%3A%7B%22start%22%3A1%2C%22end%22%3A5%7D%7D%7D%2C%7B%22breakpointRange%22%3A%7B%22minWidth%22%3A768%2C%22maxWidth%22%3A1040%7D%2C%22maxWidth%22%3A1040%2C%22columns%22%3A8%2C%22gutter%22%3A16%2C%22margin%22%3A16%2C%22rem%22%3A1%2C%22demo%22%3A%7B%22heading1%22%3A%7B%22start%22%3A1%2C%22end%22%3A9%7D%2C%22heading2%22%3A%7B%22start%22%3A1%2C%22end%22%3A9%7D%2C%22paragraph%22%3A%7B%22start%22%3A1%2C%22end%22%3A8%7D%7D%7D%2C%7B%22breakpointRange%22%3A%7B%22minWidth%22%3A1041%2C%22maxWidth%22%3A1920%7D%2C%22maxWidth%22%3A1040%2C%22columns%22%3A12%2C%22gutter%22%3A32%2C%22margin%22%3A16%2C%22rem%22%3A1%2C%22demo%22%3A%7B%22heading1%22%3A%7B%22start%22%3A1%2C%22end%22%3A13%7D%2C%22heading2%22%3A%7B%22start%22%3A1%2C%22end%22%3A13%7D%2C%22paragraph%22%3A%7B%22start%22%3A1%2C%22end%22%3A9%7D%7D%7D%2C%7B%22breakpointRange%22%3A%7B%22minWidth%22%3A1921%7D%2C%22maxWidth%22%3A1040%2C%22columns%22%3A12%2C%22gutter%22%3A32%2C%22margin%22%3A32%2C%22rem%22%3A1.25%2C%22demo%22%3A%7B%22heading1%22%3A%7B%22start%22%3A1%2C%22end%22%3A13%7D%2C%22heading2%22%3A%7B%22start%22%3A1%2C%22end%22%3A13%7D%2C%22paragraph%22%3A%7B%22start%22%3A1%2C%22end%22%3A7%7D%7D%7D%5D%7D)を参考になさってください。
※ Gridレイアウトにしたい、というわけではございません。
ただそのほうが作成しやすいようであればそうしていただいても問題ございません。 :link:[カバヤ食品サイト](https://www.kabaya.co.jp/)でもブランドページ以外はGridレイアウトを採用しています。