※「家を建てる」カテゴリの場合※
メインビュー画像はテンプレートを使用して作成してください。
メインビュータイトルは「主題9文字×2行」または「主題9文字、副題12文字」です。
※こちらのメインビュー画像は「SELL」で使用します
メインビュータイトルは「主題9文字×2行」または「主題9文字、副題12文字」です。
ここでは、記事を投稿する際に使われるテーブルタグや、リストタグのデザインを確認することができます。ここで大切なのは、とにかくユーザーにとって読みやすいデザインになっているか、ということです。こちらの文字のデザインを有効活用して、ユーザーがわかりやすい記事を作成していきましょう。
1.見出し例 h2～h6
見出しには自動でアンカーリンクがつくので対応不要！
1.これがh2の見出しです
1-2.これがh3の見出しです
これがh4の見出しです
これがh5の見出しです
これがh6の見出しです
2.デザインパーツ一覧
「文字の大きさをh3見出しと同程度に設定してください。」と記載があったとき
ネクストイノベーションの坪単価目安
リスト
アンオーダーリスト
- メインリスト
- メインリスト
- サブリスト
- サブリスト
- サブリスト
- サブリスト
- サブリスト
- メインリスト
- メインリスト
- メインリスト
- メインリスト
オーダーリスト
- 数字リスト
- 数字リスト
- 数字リスト
- 数字リスト
- 数字リスト
オーダーリスト（）
- 数字リスト
- 数字リスト
- 数字リスト
- 数字リスト
- 数字リスト
説明リスト
- dtdtdt
- ddddddd
リンク
同じドメインは同窓
異なるドメインは基本的に target=”_blank” rel=”noopener noreferrer” を指定する
例外的に、「家づくりのとびら」のLP（カレンダー以外）へのリンクは同窓
テーブル
| タイトル | タイトル | タイトル | タイトル | |
|---|---|---|---|---|
| なかみ | なかみ | なかみ | なかみ | なかみ |
| なかみ | なかみ | なかみ | なかみ | なかみ |
| タイトル | タイトル | タイトル | タイトル | |
|---|---|---|---|---|
| なかみ | なかみ | なかみ | なかみ | なかみ |
| なかみ | なかみ | なかみ | なかみ | なかみ |
| タイトル | タイトル | タイトル | タイトル | |
|---|---|---|---|---|
| タイトル | なかみ | なかみ | なかみ | なかみ |
| タイトル | なかみ | なかみ | なかみ | なかみ |
| タイトル | タイトル | タイトル | タイトル | |
|---|---|---|---|---|
| タイトル | なかみ | なかみ | なかみ | なかみ |
| タイトル | なかみ | なかみ | なかみ | なかみ |
| タイトル | なかみが入ります。 |
|---|---|
| タイトル | なかみが入ります。 |
| タイトル | なかみが入ります。 |
| 年数 | 減価 補正率 |
土地 | 建物 | 合計額 | ||
|---|---|---|---|---|---|---|
| 固定資産税 | 都市計画税 | 固定資産税 | 都市計画税 | |||
| 1年目 | 0.8 | 16,333円 | 7,000円 | 112,000円 | 48,000円 | 183,300円 |
| 5年目 | 0.64 | 16,333円 | 7,000円 | 179,200円 | 38,400円 | 240,900円 |
| 10年目 | 0.5 | 16,333円 | 7,000円 | 140,000円 | 30,000円 | 193,300円 |
| 固定見出し | 見出し | 見出し | 見出し | 見出し | 見出し |
|---|---|---|---|---|---|
| 固定見出し | テキストテキストテキストテキストテキストテキスト | テキスト | テキスト | テキスト | テキスト |
| 固定見出し | テキスト | テキスト | テキスト | テキスト | テキスト |
| 固定見出し | テキスト | テキスト | テキスト | テキスト | テキスト |
| 固定見出し | テキスト | テキスト | テキスト | テキスト | テキスト |
| 固定見出し | テキスト | テキスト | テキスト | テキスト | テキスト |
横スクロールのテーブル
SPだけ横スクロールにする
横スクロールとスクロールアイコンのセレクタ：js-scrollable
div class=”js-scrollable” の中にtableタグを入れる
▼テーブルにタイトル付けたいときは div class=”table_caption” に入れる
| チェック | 書類の名称 | マンション | 一戸建て | 土地 |
|---|---|---|---|---|
| サンプル | 登記簿謄本または登記事項証明書 | 〇 | 〇 | 〇 |
| サンプル | 売買契約書 | 〇 | 〇 | 〇 |
| サンプル | 物件購入時の重要事項説明書 | 〇 | 〇 | 〇 |
| サンプル | 登記済権利書または登記識別情報 | 〇 | 〇 | 〇 |
| サンプル | 土地測量図・境界確認書 | 〇 | 〇 | 〇 |
| サンプル | 固定資産税納税通知書および固定資産税評価証明書 | 〇 | 〇 | 〇 |
| サンプル | 物件の図面 | 〇 | 〇 | |
| サンプル | 設備の仕様書 | 〇 | 〇 | |
| サンプル | 建築確認済証および検査済証 | 〇 | ||
| サンプル | 建築設計図書・工事記録書 | △ | △ | |
| サンプル | マンションの管理規約または使用細則 | 〇 | ||
| サンプル | マンション維持費関連書類 | 〇 | ||
| サンプル | 耐震診断報告書 | △ | △ | |
| サンプル | アスベスト使用調査報告書 | △ | △ |
PCも横スクロールにする
PCの横スクロールのセレクタ：scrollablePC
div class=”js-scrollable” の中にtableタグを入れる（SPと同じ）
tableタグに class=”scrollablePC” を付与する
| チェック | 書類の名称 | マンション | 一戸建て | 土地 |
|---|---|---|---|---|
| サンプル | 登記簿謄本または登記事項証明書 | 〇 | 〇 | 〇 |
| サンプル | 売買契約書 | 〇 | 〇 | 〇 |
| サンプル | 物件購入時の重要事項説明書 | 〇 | 〇 | 〇 |
| サンプル | 登記済権利書または登記識別情報 | 〇 | 〇 | 〇 |
| サンプル | 土地測量図・境界確認書 | 〇 | 〇 | 〇 |
| サンプル | 固定資産税納税通知書および固定資産税評価証明書 | 〇 | 〇 | 〇 |
| サンプル | 物件の図面 | 〇 | 〇 | |
| サンプル | 設備の仕様書 | 〇 | 〇 | |
| サンプル | 建築確認済証および検査済証 | 〇 | ||
| サンプル | 建築設計図書・工事記録書 | △ | △ | |
| サンプル | マンションの管理規約または使用細則 | 〇 | ||
| サンプル | マンション維持費関連書類 | 〇 | ||
| サンプル | 耐震診断報告書 | △ | △ | |
| サンプル | アスベスト使用調査報告書 | △ | △ |
先頭のセルを固定して、横スクロール
先頭のセル固定セレクタ：sticky_cel
tableタグに class=”sticky_cel” を付与する
PCの場合は scrollablePC と sticky_cel を付与する
| チェック | 書類の名称 | マンション | 一戸建て | 土地 |
|---|---|---|---|---|
| サンプル | 登記簿謄本または登記事項証明書 | 〇 | 〇 | 〇 |
| サンプル | 売買契約書 | 〇 | 〇 | 〇 |
| サンプル | 物件購入時の重要事項説明書 | 〇 | 〇 | 〇 |
| サンプル | 登記済権利書または登記識別情報 | 〇 | 〇 | 〇 |
| サンプル | 土地測量図・境界確認書 | 〇 | 〇 | 〇 |
| サンプル | 固定資産税納税通知書および固定資産税評価証明書 | 〇 | 〇 | 〇 |
| サンプル | 物件の図面 | 〇 | 〇 | |
| サンプル | 設備の仕様書 | 〇 | 〇 | |
| サンプル | 建築確認済証および検査済証 | 〇 | ||
| サンプル | 建築設計図書・工事記録書 | △ | △ | |
| サンプル | マンションの管理規約または使用細則 | 〇 | ||
| サンプル | マンション維持費関連書類 | 〇 | ||
| サンプル | 耐震診断報告書 | △ | △ | |
| サンプル | アスベスト使用調査報告書 | △ | △ |
チェックボックスを設置
テーブルのタイトルにチェックのアイコン表示セレクタ：icn_checker
チェックボックス設置のセレクタ：input_check
tableタグに class=”input_check” を付与する
| チェック | 書類の名称 | マンション | 一戸建て | 土地 |
|---|---|---|---|---|
| 登記簿謄本または登記事項証明書 | 〇 | 〇 | 〇 | |
| 売買契約書 | 〇 | 〇 | 〇 | |
| 物件購入時の重要事項説明書 | 〇 | 〇 | 〇 | |
| 登記済権利書または登記識別情報 | 〇 | 〇 | 〇 | |
| 土地測量図・境界確認書 | 〇 | 〇 | 〇 | |
| 固定資産税納税通知書および固定資産税評価証明書 | 〇 | 〇 | 〇 | |
| 物件の図面 | 〇 | 〇 | ||
| 設備の仕様書 | 〇 | 〇 | ||
| 建築確認済証および検査済証 | 〇 | |||
| 建築設計図書・工事記録書 | △ | △ | ||
| マンションの管理規約または使用細則 | 〇 | |||
| マンション維持費関連書類 | 〇 | |||
| 耐震診断報告書 | △ | △ | ||
| アスベスト使用調査報告書 | △ | △ |
コピペ用
上記の全てのセレクタを＜table＞タグに付与しているので、不要なものを削除してお使いください。
▼▼▼▼▼START▼▼▼▼▼
| テキスト | テキスト | テキスト | テキスト | テキスト |
|---|---|---|---|---|
| テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | |
| テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | |
| テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
▲▲▲▲▲ END ▲▲▲▲▲
【確認用】既存テーブル
https://dev.ouchi-iroha.jp/design-2431から引用、既存テーブルはスクロールヒントのcssの影響を受けていないことが確認できました。
| タイトル | タイトル | タイトル | タイトル | |
|---|---|---|---|---|
| なかみ | なかみ | なかみ | なかみ | なかみ |
| なかみ | なかみ | なかみ | なかみ | なかみ |
| 固定見出し | 見出し | 見出し | 見出し | 見出し | 見出し |
|---|---|---|---|---|---|
| 固定見出し | テキストテキストテキストテキストテキストテキスト | テキスト | テキスト | テキスト | テキスト |
| 固定見出し | テキスト | テキスト | テキスト | テキスト | テキスト |
| 固定見出し | テキスト | テキスト | テキスト | テキスト | テキスト |
| 固定見出し | テキスト | テキスト | テキスト | テキスト | テキスト |
| 固定見出し | テキスト | テキスト | テキスト | テキスト | テキスト |
ブロックコートタグ（引用符）
アドレスアドレスアドレスアドレスアドレスアドレスアドレスアドレスアドレスブロックコートタグはこのように表示されます。本文の引用などを入れたい時に便利です。 出典：サイト名やページ名を書く
カコミ
アテンションa-1
- 「わくわくする」とか「えっ？何、それ？？？早く教えて！」という期待感
- 理屈抜きに「”それ、欲しい！”」という欲求の喚起
- 「そうそうそう、そうなんだよね･･･」という共感と納得
- 「簡単そう！楽そう！私にも出来そう！」というイメージ
アテンションa-2
こんな感じの計算式等はa-2です。
アテンションa-3
「わくわくする」とか「えっ？何、それ？？？早く教えて！」という期待感
理屈抜きに「“それ、欲しい！”」という欲求の喚起
「そうそうそう、そうなんだよね･･･」という共感と納得
「簡単そう！楽そう！私にも出来そう！」というイメージ
- アテンションa-3内でリストマークを使用したい場合はcircle ul__a3クラスを付与
- テキストサンプルテキストサンプル
コラム
“コラムタイトルコラムタイトル”
サンプルテキストサンプルテキスト
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
- コラム内でリストマークを使用したい場合はcircle ul__a3クラスを付与
- テキストサンプルテキストサンプル
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
関連記事
- 【注意】「関連記事タイトル」にしないこと。
- 【注意】「関連記事」の場合、 target=”_blank”の設定はしないでください！
親記事リンク（〇〇坪間取り）
ショートコード名 Parent_TsuboMadori
[Parent_TsuboMadori]
親記事リンク（坪単価）
ショートコード名 Parent_TsuboTanka
[Parent_TsuboTanka]
マーカーの色確認
※方針としては、イエローを使っていく（イエロー以外は基本的には使わない）。
ピンクマーカーを使うとこうなります。ピンクマーカーを使うとこうなります。 イエローマーカーを使うとこうなります。イエローマーカーを使うとこうなります。 水色マーカーを使うとこうなります。水色マーカーを使うとこうなります。 グリーンマーカーを使うとこうなります。グリーンマーカーを使うとこうなります。 カラー下線の色確認 ピンク下線を使うとこうなります。ピンク下線を使うとこうなります。 イエロー下線を使うとこうなります。イエロー下線を使うとこうなります。 水色下線を使うとこうなります。水色下線を使うとこうなります。 グリーン下線を使うとこうなります。グリーン下線を使うとこうなります。 ボタンの設置
ボタン
コメント・アドバイス
ユーザーコメント
※すぐ下がCTAではなくテキストの場合は3em空ける。
<div class=”user-comment–blue” style=”margin-bottom:3em;”>
▽の下に各サービスの最適なCTAを入れてください
※すぐ下がCTAではなくテキストの場合は3em空ける。
<div class=”user-comment–orange” style=”margin-bottom:3em;”>
予算について相談できたのがうれしい
ハッピーな詳細コメントがはいります。ハッピーな詳細コメントがはいります。ハッピーな詳細コメントがはいります。最大３～４行がちょうどいいと思う。
自分で探したハウスメーカーだけだと不安になった
自分で資料請求したり、住宅展示場にいったりして探したハウスメーカーで検討を進めていたが、とんとん拍子で話が進んでいることに不安になって、相談。自分では「どこのハウスメーカー」が良いのか判断がつかず困っていたので、客観的なアドバイスがもらえた。案内してもらったハウスメーカーを追加で検討を始めました。
資金計画について相談できた
資金計画の考え方について説明してもらえたことがありがたかった。営業されるのかと思ったけれど、中立的な立場でアドバイスをしてくれた。住みたいエリアの坪単価もその場ですぐに出してくれた。
小さい子どもがいても、
オンラインだから相談できた
小さい子供が３人。家づくりを始めたいけど、モデルハウスを子連れで何件もまわるのはとても無理…。とあきらめかけていたところ、「[toHouseLP_txt]」を知りました。オンライン相談だから自宅でミルク休憩をとりながら、自分の理想をかなえてもらえそうなハウスメーカーさんを案内してもらえました。
▽の下に各サービスの最適なCTAを入れてください
プロのアドバイス
ここがポイント！
プロ・専門家の視点
土地を先行して購入することは、正直おすすめしません！
住みたいエリアの「土地の坪単価」とハウスメーカーの建築費用から割り出す「物件の坪単価」の2つから、総合的に判断し、予算を配分することが大事です。
資金計画から予算配分、建築費用の内訳までシミュレーションし、具体的にご説明します。
センタリング・左寄せ・右寄せ
.is-align-cはセンタリングです。
.is-align-lは左寄せです。
.is-align-rは右寄せです。
3行空行
テキストテキスト・・・
以上が、〇〇です。・・・など、原稿で上3行あく場合はmargin-top:3.6em;を指定
【関連記事】ハウスメーカーリスト（厳選）
housemakerlist
[housemakerlist]
【関連記事】ハウスメーカーリスト（全部）
housemakerlist_all
[housemakerlist_all]
【関連記事】坪単価00万円シリーズ
TsuboTanka_list
[TsuboTanka_list]
【関連記事】平屋00坪シリーズ
TsuboHiraya_list
[TsuboHiraya_list]
【関連記事】エリア別HM・坪単価シリーズ
TsuboArea_list
[TsuboArea_list]
【家・土地の坪数別】間取り事例とポイント
TsuboMadori_list
[TsuboMadori_list]
【比較表】予算別・注文住宅の特徴
Yosantable
[Yosantable]
展示場に行った流れで、新人の営業担当者をつけられた
後悔詳細コメントがはいります。後悔詳細コメントがはいります。後悔詳細コメントがはいります。最大３～４行がちょうどいいと思う。
「担当者を変更してほしい」と途中で言い出せなかった
後悔詳細コメントがはいります。後悔詳細コメントがはいります。後悔詳細コメントがはいります。最大３～４行がちょうどいいと思う。（ユーザー主語で）
カタログ請求をしてみたが、よくわからなくなってしまった
とりあえず各ハウスメーカーのカタログや資料請求をやってみたが、イメージ写真や専門用語ばかりで情報量が多すぎたため、よくわからなくなってしまった。
展示場に行った流れで、新人の営業担当者をつけられた
後悔詳細コメントがはいります。後悔詳細コメントがはいります。後悔詳細コメントがはいります。最大３～４行がちょうどいいと思う。
「担当者を変更してほしい」と途中で言い出せなかった
後悔詳細コメントがはいります。後悔詳細コメントがはいります。後悔詳細コメントがはいります。最大３～４行がちょうどいいと思う。（ユーザー主語で）
カタログ請求をしてみたが、よくわからなくなってしまった
とりあえず各ハウスメーカーのカタログや資料請求をやってみたが、イメージ写真や専門用語ばかりで情報量が多すぎたため、よくわからなくなってしまった。