h1見出しが入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h2見出しが入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h3見出しが入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h4見出しが入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h5見出しが入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h6見出しが入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h1見出し（リンク）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h2見出し（リンク）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h3見出し（リンク）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h4見出し（リンク）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h5見出し（リンク）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h6見出し（リンク）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h1見出し（装飾オフ）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h2見出し（装飾オフ）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h3見出し（装飾オフ）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h4見出し（装飾オフ）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h5見出し（装飾オフ）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h6見出し（装飾オフ）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
文字色
肯定
文字色を水色に変更することができます。
否定・禁止
文字色を赤色に変更することができます。
シンプルな強調
文字色をオレンジ色に変更することができます。
文字色をピンク色に変更することができます。
文字色を紫色に変更することができます。
用語の解説・例示
文字色を緑色に変更することができます。
その他の色
文字色を青色に変更することができます。
文字色を黄色に変更することができます。
文字色をオリーブ色に変更することができます。
文字色をライム色に変更することができます。
文字色を黒色に変更することができます。
文字色を灰色に変更することができます。
文字色を白色に変更することができます。
文字色を茶色に変更することができます。
マーカー表示
文字に黄色の背景色をつけることができます。
文字にオレンジ色の背景色をつけることができます。
文字にピンク色の背景色をつけることができます。
文字に青色の背景色をつけることができます。
文字にライム色の背景色をつけることができます。
文字に灰色の背景色をつけることができます。
テキストの表現
リスト
ul要素
- リストが入ります。
- リストが入ります。長めのリストはこのようなデザインになります。長めのリストはこのようなデザインになります。長めのリストはこのようなデザインになります。
ol要素
- リストが入ります。
- リストが入ります。
横並び
リストを横並びにして表示します。
- リストが入ります。
- リストが入ります。
リストの先頭に表示するマーカー文字を非表示
- リストが入ります。
- リストが入ります。
リストのデザインその1
- テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
- テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
- テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
- リスト
- リスト
- リスト
- リスト
- テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
リストのデザインその2
- テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
リストのデザインその3
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
リストのデザインその4
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- 長文のリストが入ります。長文のリストが入ります。長文のリストが入ります。長文のリストが入ります。長文のリストが入ります。
リストのデザインその5
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- 長文のリストが入ります。長文のリストが入ります。長文のリストが入ります。長文のリストが入ります。長文のリストが入ります。
チェックリスト
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
記述リスト（旧定義リスト）
「定義リスト（definition list）」は、html5では「記述リスト（description list）」と改められました。
- dt要素
- dd要素dd要素dd要素dd要素
定義リストとして使用する場合
- dt要素とdfn要素で用語をマークアップ
- dd要素に定義を記述します。
記述リストのデザインその1
- 記述リストのデザインその1
- 要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。 - 記述リストのデザインその1
- 要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。 - 記述リストのデザインその1
- 要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその2
- 記述リストのデザインその2
- 要素が縦に並びます。
- 記述リストのデザインその2
- 要素が縦に並びます。
- 記述リストのデザインその2
- 要素が縦に並びます。
Q&Aリスト
- ここには質問文が入ります。
- ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。 - ここには質問文が入ります。
- ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。
アコーディオン
- ここには質問文が入ります。
- ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。 - ここには質問文が入ります。
- ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ランキングリスト
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。 -
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。 -
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。 -
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。 -
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。 -
項目名などが入ります
-
項目名などが入ります
-
項目名などが入ります
-
項目名などが入ります
-
項目名などが入ります
情報比較エリア
-
商品名が入ります（メーカー名）
- 価格：
- 2,000円（税込）
- 容量：
- 100ml
価格 5.0 使用感 3.5 効果 4.0 商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
管理人のレビュー
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
-
商品名が入ります（メーカー名）
- 価格：
- 2,000円（税込）
- 容量：
- 100ml
価格 5.0 使用感 3.5 効果 4.0 商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
管理人のレビュー
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
-
商品名が入ります（メーカー名）
- 価格：
- 2,000円（税込）
- 容量：
- 100ml
価格 5.0 使用感 3.5 効果 4.0 商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
管理人のレビュー
管理人のレビューが入ります。管理人のレビューが入ります。
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
注意書き
※注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。
傍点
テキスト上に傍点を打ちます。
整形済みテキスト
整形済みテキストです。コードなどを記述する場合は以下のようにcode要素でマークアップします。
<code>コード</code>
インラインの装飾
em要素: 強勢する（アクセントを付ける）箇所を表す
strong要素: 強い重要性を表す
small要素: 免責・警告・著作権などの注釈や細目を表す
s要素: すでに正確ではなくなった内容を表すテキストが入ります。
abbr要素: HTML等の略語
引用エリア
blockquote要素
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。引用元: 参照記事のタイトル
q要素
ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります。
ここにテキストが入りますここにテキストが入ります。
ここにテキストが入ります文中に出てくる短文の引用部分への装飾です
ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります。
マルチカラム
6カラム
5カラム
4カラム
3カラム
2カラム
6カラム（余白無し）
5カラム（余白無し）
4カラム（余白無し）
3カラム（余白無し）
2カラム（余白無し）
テーブルのデザイン
テーブル（レスポンシブ） デザイン01
| 見出し1 | テーブルデータ1 |
|---|---|
| 見出し2 | テーブルデータ2 |
| 見出し3 | テーブルデータ3 |
| 見出し1 | 見出し2 | 見出し3 |
|---|---|---|
| テーブルデータ1-1 | テーブルデータ1-2 | テーブルデータ1-3 |
| テーブルデータ2-1 | テーブルデータ2-2 | テーブルデータ2-3 |
| テーブルデータ3-1 | テーブルデータ3-2 | テーブルデータ3-3 |
| 項目名 | 項目名 | |
|---|---|---|
| 項目名が入ります | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 |
ステップ図
- ステップ1のテキストが入ります。
- ステップ2のテキストが入ります。
- ステップ3のテキストが入ります。
- ステップ4のテキストが入ります。
- ステップ1が入ります
- ステップ2が入ります
- ステップ3が入ります
- ステップ4が入ります
装飾ボックス
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
タブメニュー
- コンテンツ1が入ります。コンテンツ1が入ります。
- コンテンツ2が入ります。コンテンツ2が入ります。
- コンテンツ3が入ります。コンテンツ3が入ります。
吹き出し
ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。
ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。
笑顔の登場人物A笑顔の登場人物Aここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。
笑顔の登場人物B笑顔の登場人物Bここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。
登場人物Aここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。
登場人物Bここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。
画像の装飾
アイコンリスト
- ポイント
- 注意
- 別ウインドウ
- 矢印上
- 矢印右
- 矢印下
- 矢印左
- ダウンロード
- ZIP
- メール
- ショッピングカート
- 虫眼鏡
- ホーム
- フォルダ
- 時計
- カレンダー
- ビル
- マップ
- NEW
- 初心者マーク
著者紹介
この記事を書いている人
著者名
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
代表的な執筆作品
次回予告
次回のキャッチコピーが入ります！
次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。
次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。
登場人物紹介
- 登場人物A
- ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
- 登場人物B
- ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
- 登場人物C
- ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
お客さまの声
- Bさんご職業：ネットショップ制作ご購入年：2013年
- ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
- Bさんご職業：ネットショップ制作ご購入年：2013年
- ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
- Bさんご職業：ネットショップ制作ご購入年：2013年
- ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
画像とテキストの組み合わせ
画像の上にテキストを配置
背景画像の上にテキストを配置
動画
文章中の間の表現
本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。
本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。
本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。
本文がこちらに入る予定です本文がこちらに入る予定です、本文がこちらに入る予定です本文がこちらに入る予定です本文がこちらに入る予定です。
メールフォーム
入力画面
| お名前必須 | 例：賢威太郎 |
|---|---|
| メールアドレス | 例：support@seo-keni.jp |
| ラジオボタン | |
| チェックボックス | |
| プルダウン | |
| お問い合わせ内容 |
送信内容確認画面
| お名前 | 賢威太郎 |
|---|---|
| メールアドレス | support@seo-keni.jp |
| ラジオボタン | ラジオボタン選択項目名１ |
| チェックボックス | チェックボックス選択項目名１ |
| プルダウン | 京都府 |
| お問い合わせ内容 | お問い合わせ内容が入りますお問い合わせ内容が入りますお問い合わせ内容が入りますお問い合わせ内容が入りますお問い合わせ内容が入ります |
送信完了画面
お問い合わせありがとうございました。
送信完了に関する文章が入ります送信完了に関する文章が入ります送信完了に関する文章が入ります送信完了に関する文章が入ります。
コンバージョンボタン
CTA関連
書籍「沈黙のWebライティング ?Webマーケッター ボーンの激闘?」
- 価格：
- 2,160円（税込）
謎のWebマーケッター「ボーン・片桐」の活躍を「ハードボイルドに」描いたストーリーから楽しくWebライディングを学べる実用入門書。
マンガコンテンツを通じてWebで「成果を上げる」ための文章の書き方、SEOに強いライティングのノウハウの基礎を学んだあとは、各章の終わりにある実践的・専門的な解説を読めばより深い知識を身に付けることができます。
ブロガーやライターだけでなくすべてのWeb担当者にもオススメできるライティング本です。
メールマガジンを購読する
ブログの更新情報を週1度お届けします。
メールアドレスを入力
お問い合わせはこちらから
（受付時間 平日9:00～18:00）
ボーンが教える
説得ではなく「納得」してもらう
文章の組み立て
何かを主張するときには、それを聞く相手が「自分事」となるような要素を見つけるようにしろ。
主張を支える具体的な言葉が読み手の「自分事」になれば、読み手はその言葉が作り上げる主張を「自分事」と感じ始める。
そうなればやがて、相手はあなたの主張に「納得」するだろう。
「納得」は「説得」とは異なる。
説得とは相手を説き伏せることを指すが、納得とは、相手が自分の意志で他人の意見を理解することだ。
ビジネスにおいて大切なのは「人を動かす」こと。
人を動かすためには、相手を説得しようとするのではなく、相手に自分で納得してもらうことが大切なのだ。