本ページでの用語について
- 親レイヤー：トップレベルのレイヤー（赤枠）
- アイテム：レイヤーの中に入るパスや画像、グループ（黄色）
- ボタン：クリックしたら〇〇する。というもの全てをボタンと呼びます。ページ内のどこかにスクロール、外部のページを開く、何か出てくる。など。
データ作成幅（最小画面幅）を決める
WEB上での見栄えを保証する最小サイズで、データを作成してください。最小画面幅の決め方は様々ですが、現在のスマホの画面幅のシェアから320pxまたは375pxを推奨しています。
最小画面幅を元にコーディングをいたしますので、そのサイズより小さな画面幅の端末からページを閲覧するとレイアウトが崩れる恐れがあります。
コンテンツごとに親レイヤーを作成する
親レイヤーごとに画像を書き出しします。大きすぎる画像は、表示（読み込み）に時間がかかるため好ましくありません。縦の長さが1000pxを超えてくるとレイヤーを複数に分けることも検討してください。
全ての親レイヤーの幅は等しく。
最初に決めた画面幅で全てのレイヤーを作成します。高さはコンテンツに応じて調整します。
上図の場合、header,price,point,lesson,・・・どのレイヤーを選択しても、同じ幅で作成します。上図では全てのレイヤーを375pxで作成しています。
背景が白、もしくは透明なコンテンツは、透明な長方形でコンテンツ全体を覆ってください。これにより、上下左右の余白を判断します。
画像やパスは不要な部分はクリップグループ（クリッピングマスクをするとできるグループ）にします。
親レイヤーのサイズに端数はNG
一つの親レイヤー内の全てのアイテムを選択した時に、横幅はもちろん高さも端数が出ないようにデータを作ります。web上では1px単位でしか色を表示できません。端数があるとその部分がぼやけて表示されます。
ボタンはグループにして遷移先を示す名前「btn__***」をつける
上図のように、1つの機能を持つボタンごとにグループ化します。
上図のように文字列だけのボタンの場合、どこからどこがクリックできる範囲なのか、デザインによって解釈が分かれてしまいます。そのため、このケースでは透明の長方形を使ってクリック範囲を明確にし、ボタンのアイテムをまとめてグループ化します。
そして、ボタンには、「btn__任意の名前（半角英数字）」という名前をつけます。
ボタンは、親レイヤー直下の階層に設置してください。上図のように、親レイヤーを1階層目としたとき、2階層目に設置をしてください。
複数のボタンを設置する場合は、
ご入稿時アウトラインされていない文字は「文字列」としてコーディングします
グーグルなどの検索エンジンは、画像の中に書かれている文字を認識できませんので、画像ばかりのページはSEOに不利となります。また、WEB広告で配信する場合も、広告ランクが上がりにくいとも言われています（媒体によります）。このページに何が書いてあるのかを検索エンジン等に正しく伝えるためには、文字列としてコーディングする必要があります。
ご入稿データでアウトラインのされていない文字は、文字列としてコーディングいたしますが、いくつか注意点がございます。
フォントサイズは、12px以上にしてください。
閲覧するブラウザにより、文字列を表示する最小サイズが異なります。ブラウザによる差異をなくすため、文字列としてコーディングする場合は、フォントサイズを12px以上にしてください。
それより小さな文字サイズは、レイアウト崩れも起こりますが、それ以上にユーザーが読みにくいです。
万一、ご入稿データチェック時に12pxよりも小さなアウトラインされていない文字が見つかった場合は、エラーとしてお客様に再度データを修正していただくことになります。（アウトラインするか、文字サイズを大きくするかしてから再入稿してください）
使えるフォント
ブラウザによって、表現できるフォントの種類に差異があります。どのブラウザでもなるべく正確に表示するために、フォントの種類に制限を掛けさせていただいています。使えるフォントは以下の通りです。
ゴシック系
- ヒラギノ角ゴシックProN w3
- ヒラギノ角ゴシックProN w6
明朝体
- ヒラギノ角明朝ProN w3
- ヒラギノ角明朝ProN w6
丸ゴ
- ヒラギノ丸ゴ ProN W4
英文字
- Times New Roman
- Arial
コメントを残す