【新エディタ対応】【HTMLガイドライン】2- コンテンツのレイアウト構成

画像のalt命名ルール

基本ルール

画像のalt属性は、下記のルールを基本とします。

• 太字は必須。

• 各項目の間は半角スペース開ける。
• ファイル名に番号をつけている場合は、Altの先頭に記載（レビュー時は確認不要）。
• サービス名称は正式名称で記載（ARGなどの略称は不可）
• 画面名は必須項目（画面名が不明な場合は、FAQ内で統一ルールを決めるといい）
• 自由記載部分は、画面上の操作内容がわかるように記載。
• サービス画面ではない画像の場合は、画像の内容がわかるように記載。

ソースコード

テキスト：画像のレイアウトルール

テキスト：画像のレイアウトについて。

４：６レイアウト（アプリ画面の手順説明など）

基本ルール

• テキストエリア ４：画像 6 のレイアウトで、おもにアプリ画面での手順説明などに使用する。
• SPでは縦積みレイアウトになる。

表示＆ソースコード

テキストテキストテキストテキストテキストテキスト

ソースコード

テキスト

５：５レイアウト - ①

基本ルール

• テキストエリア 5：画像 5 のレイアウトで、画像をそこまで大きくしない場合などに使用する。
• SPでは縦積みレイアウトになる。

表示＆ソースコード

テキストテキストテキストテキストテキストテキスト

ソースコード

テキスト

５：５レイアウト - ②（スマホ画面の手順説明など）

基本ルール

• テキストエリア 5：画像 5 のレイアウトで、おもにSP画面での手順説明に使用する。
• SPでは縦積みレイアウトになり、SP表示の場合のみ、画像が80%に縮小される。

表示＆ソースコード

テキストテキストテキストテキストテキストテキスト

ソースコード

テキスト

３：７レイアウト（画面の一部分の補足説明など）

基本ルール

• 画面の一部分を補足的に説明する場合に使用する。
• 画像のキャプション部分は、省略しても良い。
  • キャプションは画像の上に付けても下に付けても良い。
• SPでは縦積みレイアウトになる。

表示＆ソースコード

フルサイズ画像のレイアウト（ブラウザ画面の手順説明など）

基本ルール

• 画像幅100%のレイアウトで、おもにブラウザ画面での手順説明や、イメージイラストなどに使用する。
  • Airレジのバックオフィス、Airリザーブ、Airシフトなど
• 手順説明の場合は、画像の前にテキストを入れる。

表示＆ソースコード

テキストテキストテキストテキストテキストテキスト

.oneimgを使う場合

ソースコード

テキストテキスト

figureを使う場合

画像のみのレイアウトルール

画像横並びのレイアウトについて。

2カラム

基本ルール

• 画面を横並びで2つ表示する場合に使用する。
• 画像のキャプション部分は、省略しても良い。
  • キャプションは画像の上に付けても下に付けても良い。
• SPでは縦積みレイアウトになる。

表示＆ソースコード

3カラム

基本ルール

• 画面を横並びで3つ表示する場合に使用する。
• 画像のキャプション部分は、省略しても良い。
  • キャプションは画像の上に付けても下に付けても良い。
• SPでは縦積みレイアウトになる。

表示＆ソースコード

Before／After（横並び）

基本ルール

• 画面が新しく変わった時などに使用する。
  • 主に、エンハンスの事前／事後お知らせに使用。
• 変更前（Before）画像は左、変更後（After）画像は右に配置すること。
• 画像のキャプション部分は、省略しても良い。
  • キャプションは画像の上に付けても下に付けても良い。
• SPでは縦積みレイアウトになる。

表示＆ソースコード

ソースコード

矢印アイコンはをassetsに追加して画像パスを書き換えること。

Before／After（縦並び）

基本ルール

• おもにブラウザ画面のサービス用。
• 画面が新しく変わった時などに使用する。
  • 主に、エンハンスの事前／事後お知らせに使用。
• 変更前（Before）画像は上、変更後（After）画像は下に配置すること。
• 画像のキャプション部分は、省略しても良い。
  • キャプションは画像の上に付けても下に付けても良い。

表示＆ソースコード

ソースコード

配置やサイズ調整ルール

画像の配置

基本ルール

• ブロックの内で垂直（縦）位置を指定する場合に使用する。
• tableなどのコンテンツに対して使用できる。
• ブロックに下記のclassを付与する。
  • 上：valign-top
  • 中央：valign-middle
  • 下：valign-bottom
  • ベースライン：valign-baseline

表示＆ソースコード

上

真ん中

下

ベースライン

ソースコード

上

真ん中

下

ベースライン

画像のサイズ調整

基本ルール

• SP表示のときだけ、画像サイズを縮小したいときに使用する。
• PC表示ではサイズは100%で、SP表示の際に指定したサイズに縮小される。
• 親要素に.sp-downsizeのclassを付与し、縮小する画像imgに下記のclassを付与する。
  • 90％縮小：.width90
  • 80％縮小：.width80
  • 70％縮小：.width70

表示＆ソースコード

• 767px以下になると画像が縮小されます。

ソースコード

90縮小の場合

画像に枠線を付けない

基本ルール

• イメージイラストやアイコンなど、グレーの枠線が不要な場合に使用する。
  • 基本的に画像には全てグレーの枠線が付与させるため、枠線が不要な場合のみ。
  • AirレジFAQの場合は、枠線が無い画像はPC表示の際に画像をクリックしても拡大されなくなる。
• 枠線を消したいimgに.nobdrのclassを付与する。

表示＆ソースコード

• styleは不要です。コード変換時に自動付与されてしまうので削除してください。