---
# System prepended metadata

title: カンプ合わせ
tags: [training]

---

###### tags: `training`

# カンプ合わせ

## ツールの紹介
・perfectpixl
https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ja

・mapture
https://anatoo.jp/mapture/

## 作業について
デザインと照らし合わせて余白や幅、画像の位置が合っているかを見比べます。
デザインカンプとの差がなるべく発生しないようページを完成度を上げていきましょう。

## デザインの再現性について
作業中、以下のプロパティの特性を留意しておきます。

#### ・文字の太さ(font-weight)
ブラウザによって太さが表現が微妙に違う。

#### ・文字と文字の間隔（letter-spaceing）
行末の空白などが発生し、デザインカンプ通りの折り返しにならなかったりする。

他、基本的にデザインカンプに合わせるのですが、
共通するデザインパーツ、例えば見出し１の共通パーツで上下異なる余白が取られていたり、コンテンツが微妙に中央揃えになっていないなど、デザイナーの意図した配置になっていない場合があるので、その際はデザイナーに要確認。


## ウインドウサイズや可変によるデザイン仕様について
ブラウザをデザインカンプのサイズ以上に広げた際の表示のされ方を確認する。
ブラウザ幅まで広がる画像などの場合、カンプと同じブラウザ幅のときにだけ合うような時もあります。


## テキスト量の可変によるデザイン仕様について
実際にはテキストや画像などはCMSから出力されるため、量やサイズがカンプの通りにはなりません。この場合、以下の点をコーディング時に注意する必要があります。
### テキストボリュームの増減により、破綻しないか

```
記事リストのタイトルがカンプでは1行の想定になっている場合
```

- 複数行になっても破綻しないスタイルを当てる（要　デザイナ確認）
- 出力時に文字数制限を欠けることを想定し1行とする（要　仕様確認）


```
ボタン内のテキストなど、領域に内にテキストがある場合
```
- テキスト量に応じて領域を広げる
- 領域を固定にする

など
### 画像サイズによるデザイン破綻はしないか
```
記事のアイキャッチ部分のコーディング
```
- background-imageとして実装する
- 出力時に画像をトリミングすることを想定する

など

## hoverについて

マウスを要素に重ねた際のstyle指定をhoverと呼びます。hoverはカンプ内に指定がある場合は問題ないですが、不足分はデザイナに確認が必要です。