【資料】UI表示確認用ページ

Box系

通常Box（グレー枠）

ポイント・Tips（青背景）

見出し

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

注意（オレンジ背景）

警告（ピンク背景）

強調警告（赤枠）

補足1（クリックで表示する）

クリックすると表示されます

画像の説明

補足2（本文と関連度の低い補足）

• 現在は使用していないUI

記事構成

通常の手順

1. テキストテキストテキストテキストテキスト

   • 注釈注釈注釈注釈注釈注釈
   • 注釈注釈注釈注釈注釈注釈

   

2. テキストテキストテキストテキストテキスト

   

STEPでの手順

コンテンツの中身はインデントさせること。

STEP1.h3手順タイトル

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

画面説明

1項目名

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

2項目名

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

7項目名

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

• 注釈注釈注釈注釈注釈注釈

Q&A

困っていること

回答 回答 回答 回答 回答 回答 回答 回答 回答 回答 回答 回答 回答 回答 回答 回答

テキスト

お客様の疑問は解消されましたか？

はい いいえ

フィードバックありがとうございました。

テキスト・画像配置

テキスト4＋画像6

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

画像5＋画像5

画像3＋テキスト7

画像3つ並び

Before／After

（横並び）

縦並び

リンク

通常リンク（同一ドメイン）

遷移先の記事タイトル

通常リンク（外部リンク）

遷移先の記事タイトル

導線ボタン（同一ドメイン）

遷移先の記事タイトル

導線ボタン（外部リンク）

遷移先の記事タイトル

テキスト

通常テキスト

ノーマル

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

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

文字サイズ下げる

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

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

文字サイズ上げる

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

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

赤文字

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

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

注釈

普通の注釈

• 注釈注釈注釈注釈注釈注釈
• 注釈注釈注釈注釈注釈注釈
• 注釈注釈注釈注釈注釈注釈

特定の文言に対する注釈

テキストテキストてきすと^※1テキストテキスト

1. てきすとはテキストの間違い

table

基本のtable

項目＋説明文（tbodyのみ）

見出し＋説明文（thead + tbody）

.tbl-attrの場合（SP表示が異なる）

• data-labelに入れた値が、SP表示での項目名になる

.tbl-pcの場合（PCとSP表示が同じ）

見出し＋説明文（tdを中央揃えにしたい場合）

幅が均等のtable

長くて横にスクロールするtable

表に○と✕や記号などしか入らないtable

SP用のアコーディオンtable

• デバイス幅が640px以下のみで表示

条件の説明など	条件1 あああああああああ いいいいいいいいい 条件2 うううううううううう
画像入れる	画像の説明

その他

画面遷移

ナビゲーションリンク（複数ページのSTEP用）

• STEP1.
  最初にやること
• STEP2.
  次ににやること
• STEP3.
  最後にやること

ログイン/新規登録導線

PCのみ表示／SPのみ表示

PCのみ表示

SPのみ表示

コンテンツのスペースを開ける

スペースがない場合

スペース小：space-s

スペース中：space-m

スペース大：space-l