Web整備室｜テンプレ

商品を比べる記事を書くと、つい情報をたくさん入れたくなります。 でも、読者が本当に困りやすいのは、 「何を見て選べばいいのかわからないこと」 です。 今回の「比較記事テンプレ 選び方編」は、ただ比べるための形ではありません。 読者が選ぶポイントを追いやすくするための形 です。 この記事では、このテンプレが何のためにあるのかと、どう使うと選びやすくなるのかをやさしくまとめます。 比較記事テンプレ 選び方編は、何をするテンプレ？ このテンプレの役目は、商品を並べることではありません。 いちばん大事なのは、 読者が「どこを見ればいいか」をわかりやすくすること です。 商品を2つか3つ並べても、見る場所がバラバラだと、読者は途中で迷います。 そこでこのテンプレでは、商品ごとに見る場所をそろえて、読みながら選びやすくする形を作りやすくしています。 読者は、何を見て選べばいいの？ この説明がいちばん大事です。 商品を選ぶとき、読者が見るポイントは、だいたい次の4つです。 自分に合うか 何が良いのか 気になる点はあるか 自分がいちばん大事にしたいことに合っているか つまり、ただ「Aが良い」「Bも良い」と並べるだけでは足りません。 読者は、 「自分はどっちを見るべきか」 を知りたいです。 このテンプレは、その見方をそろえやすくするための土台です。 ここがいちばん大事です 選び方編は、 「どっちがすごいか」を決めるテンプレではありません。 「自分にはどっちが合うか」を読者が考えやすくするテンプレ です。 このテンプレでは、何を書けばいいの？ 書くときは、商品ごとに見る場所をそろえるのがコツです。 たとえば、こんな順番で書くとまとまりやすいです。 どんな人に向いているか 良いところは何か 気になるところは何か どんな人なら選びやすいか これを商品ごとにそろえて書くと、読者は追いやすくなります。 逆に、Aは使いやすさだけ、Bは見た目だけ、Cは値段だけ、というふうにバラバラに書...

比較記事を書くとき、いきなりいろいろ足したくなることがあります。 でも、最初から比較表やFAQまで入れようとすると、かえって読みにくくなることがあります。 そこで使いやすいのが、 比較記事テンプレ 基本編 です。 これは、比較記事をわかりやすく始めるための、やさしい土台です。 実際の基本編テンプレも見たい方はこちら → 比較記事テンプレ 基本編 「まず何を書けばいいのか」 「どこをそろえれば見やすいのか」 そこをシンプルに整えるために作りました。 この記事では、この 基本編がどんな役目のテンプレなのか を、初心者にもわかりやすく説明します。 比較記事テンプレ 基本編は、はじめの形を作るためのテンプレです 比較記事は、ただ商品を並べればいいわけではありません。 読む人はまず、 「今日は何をくらべる記事なのか」 を知りたいです。 その次に、 「どこが違うのか」 を知りたくなります。 基本編は、この流れを見やすくするためのテンプレです。 いきなりたくさんの機能を入れるのではなく、まずは 記事の形を整えること を大事にしています。 いきなり全部入れないほうが、かえってわかりやすいです 比較記事というと、比較表や質問コーナーを思い浮かべる人もいるかもしれません。 もちろん、それが役立つ場面もあります。 でも、最初の段階では、そこまで入れなくても大丈夫です。 むしろ、先に入れすぎると、読む人がどこを見ればいいのか迷いやすくなります。 基本編で大事にしていること 何を比べるのか どんな違いがあるのか どんな人に合いそうか まずはこの3つが追いやすいだけでも、記事はかなり読みやすくなります。 このテンプレは、初心者に向いています ...

失敗しにくい！比べて選びやすくする3つの見せ方 比べて見せたいときは、いきなり細かく比べるより、 タイプ別に分けて見せた方がわかりやすいです。 自分に近い形が見つかりやすくなるので、読む人も迷いにくくなります。 私なら、まず 「しっかり使いたい」 「ラクに使いたい」 「見た目も大事にしたい」 のどれに近いかで分けます。 これだけでも、ちがいがかなり伝わりやすくなります。 まず決めたいこと 最初に決めたいのは、 何をいちばん大事にしたい人向けなのか です。 先にここを分けておくと、見せ方がはっきりして、 商品のちがいも伝わりやすくなります。 タイプ1 しっかり使いたい人向け 毎日使いやすいことや、長く使いやすいことを大事にしたい人向けです このタイプは、見た目よりもまず使いやすさを見せたいときに向いています。 しっかり使いたい人には、持ちやすさや手入れのしやすさが伝わると選びやすくなります。 例：大きさ、持ちやすさ、しまいやすさ、手入れのしやすさ タイプ2 ラクに使いたい人向け 手間を減らして、気軽に使いたい人向けです このタイプは、むずかしさよりもラクさを見せたいときに向いています。 準備しやすいことや片づけやすいことが見えると、 「これなら続けやすそう」と思ってもらいやすくなります。 例：準備のしやすさ、軽さ、洗いやすさ、片づけやすさ タイプ3 見た目や持ちやすさを大事にしたい人向け 見た目の好みや持ち運びやすさを大事にしたい人向けです このタイプは、気分よく使えることや、生活になじみやすいことを見せたいときに向いています。 色や形、大きさのちがいが見えると、自分に合うものを考えやすくなります。 ...

比較記事テンプレ 基本編 【タイトル】○○と△△をくらべてみた｜まずは基本の見方だけ知りたい人向け 【導入文】「どっちが自分に合うのかな」と迷ったときに、まず見ておきたいポイントだけを、やさしくまとめた記事です。むずかしい話は抜きで、使いやすさと選びやすさを中心に見ていきます。 先にひとこと 【ひとこと結論】しっかり比べたいなら○○、気軽に使いたいなら△△という見方で考えるとわかりやすいです。 今回くらべるもの ○○ 【ひとことで言うと】しっかり使いたい人向け 【使う場面】毎日使いたいとき、長く使いたいとき、少しこだわりたいとき △△ 【ひとことで言うと】気軽に使いたい人向け 【使う場面】まず試したいとき、シンプルさがほしいとき、使いやすさを大事にしたいとき 見るポイントはこの3つ 1. 使いやすさ 【例】持ちやすいか、開けやすいか、すぐ使えるかなど 2. 続けやすさ 【例】毎日使っても負担が少ないか、お手入れが楽かなど 3. 合う人のちがい 【例】ていねいに選びたい人向けか、まず気軽に使いたい人向けか ○○のよかったところ 【説明】○○は、しっかり使いたい人に向いている形です。見た目だけではなく、使ったときの安定感や安心感を重視したい人に合いやすいです。 【良い点1】作りがしっかりしていて使いやすい 【良い点2】長く使いたい人にも向いている 【良い点3】少しこだわって選びたい人に合いやすい △△のよか...

このHTMLを入れると何がラクになるのか 「HTMLって難しそう」と感じる人は多いです。 でも、むずかしく考えなくて大丈夫です。 HTMLを入れる意味は、かっこよくするためだけではありません。 いちばん大きいのは、自分も読者もラクになること です。 何がラクになるの？ まず1つ目は、 見やすくなる ことです。 ただ文章を並べるだけだと、どこが大事なのか分かりにくくなります。 でも、見出しや箱やボタンがあると、目で追いやすくなります。 読む人が「どこを見ればいいか」で迷いにくくなります。 2つ目は、 伝えたいことをまとめやすくなる ことです。 たとえば、 大事な話を箱に入れる 次に見てほしい場所をボタンで出す 説明を見出しごとに分ける こうすると、記事の中が散らかりにくくなります。 3つ目は、 あとで自分が直しやすい ことです。 最初から形があると、「どこに何を書くか」が分かりやすいです。 毎回ゼロから考えなくていいので、作業が少しラクになります。 読む人にとってのメリット HTMLを入れると、書く人だけがラクになるわけではありません。 読む人にもメリットがあります。 大事な場所が分かりやすい 次に読む場所が見つけやすい 長い文章でも疲れにくい つまり、 読者が迷子になりにくい です。 これがかなり大きいです。 BloggerでもWordPressでも考え方は同じ 使う場所がBloggerでもWordPressでも、考え方は同じです。 HTMLを入れる目的は、 見やすくする 伝わりやすくする 次の行動をわかりやすくする この3つです。 つまり、「HTMLを使う＝むずかしいことをする」ではありません。 読む人にも、自分にも、やさしくするために使う ということです。 最初から全部やらなくていい いきなり全部入れなくて大丈夫です。 最初は1つだけでOKです。 説明を見やすい箱にする 次に見てほしい場所へボタンを置く 見出しを整える このどれか1つでも、記事は少し読みやすくなります。 まとめ HTMLを入れる意味は、コードをかっこよく見せることではありません。 読者が読みやすくなって、自分...

Bloggerで記事を書いていて、タイトルが2行になると、1行目と2行目の文字が近すぎて当たることがありました。 最初は「行間の数字が悪いのかな？」と思ったのですが、原因はそこだけではありませんでした。 本当の原因は、CSSを入れる場所が違っていたことです。 どんな状態だったの？ 記事タイトルが1行なら大丈夫でした。 でも、2行になると文字と文字が近すぎて、見た目がつまって見えました。 原因はこれでした CSSを書く場所をまちがえていました。 Bloggerでは、テーマのHTML編集でCSSを入れるとき、 <b:skin><![CDATA[ の中 に入れないと反映されないことがあります。 私は最初、この外に書いていたので、認識されませんでした。 直し方 手順はこれです。 Bloggerで「テーマ」を開く 「HTMLを編集」を押す <b:skin を検索する <b:skin><![CDATA[ のすぐ下にCSSを書く 保存する 入れたCSS .post-title, .post-title a, .entry-title, .entry-title a, h1 { line-height: 1.4 !important; } 大事なポイント このCSSは、<b:skin><![CDATA[ の外ではなく、中に入れること です。 ここをまちがえると、コードを書いても反映されません。 どう変わったの？ タイトルが2行になっても、1行目と2行目の間に少し余白ができて、読みやすくなりました。 まとめ Bloggerで記事タイトルの文字が2行で当たるときは、行間だけではなく、 CSSを入れる場所 も確認した方がいいです。 今回のポイントはこれです。 行間は line-height: 1.4 CSSは <b:skin><![CDATA[ の中 に入れる 同じことで困っている人の参考になればうれしいです。

「無料版と有料版、どっちを選べばいいの？」 そんな人向けに、できるだけやさしくまとめました。 このページでは、むずかしい言葉を使わずに、ちがいだけをはっきり書きます。 まず、かんたんに言うと 無料版は、おためし用です。 有料版は、まとめてすぐ使いたい人向けです。 無料版はこんな人向けです まず1つ試してみたい人 HTMLがまだよくわからない人 少しずつ使ってみたい人 無料版は、単品です。 「どんな感じか見てみたい」「自分に合うか試したい」という人に向いています。 有料版はこんな人向けです まとめてすぐ使いたい人 記事を見やすくしたい人 ブログの流れを整えたい人 1つずつ探す手間を減らしたい人 有料版には、次の内容をまとめています。 CTAボタン 見やすい箱 導線ボックス 商品紹介テンプレ やさしい説明書 おまけ つまり、 無料版は「1つ試す」ためのもの 、 有料版は「まとめて整える」ためのもの です。 無料版と有料版のちがい 無料版 ・単品です ・まず試したい人向けです ・小さく始めたい人向けです 有料版 ・まとめ版です ・見やすさと導線を一気に整えたい人向けです ・手間を減らしたい人向けです やり取りは少なめです この商品は、基本的に 置き売り です。 コピペして使える形を目指しています。 何度も無料で直す前提ではありません。 また、個別の修正は別料金です。 どっちを選べばいいの？ まず1つ試したいなら無料版。 まとめて使いたいなら有料版。 この考え方でOKです。 最後に はじめての人は、まず無料版で試してみてください。 「もっとまとめて使いたい」「記事を見やすくしたい」と思ったら、有料版が向いています。 無理に選ばなくて大丈夫です。自分に合う方を選んでください。 選ぶ場所はこちら まず試したい方は無料版、まとめて使いたい方は有料版をどうぞ。 ▶ 無料版を見る ▶ 有料版を見る ※まずは無料版で試してからでも大丈夫です。

これだけHTMLを使えば読みやすい記事になる！説明書 このページでは、 「ここからここまでは何のコードなのか」 を、やさしく説明します。 HTMLは、むずかしい暗号ではありません。 1つ1つに名前と役目がある部品 です。 全部覚えなくて大丈夫です。まずは、どのコードが何をしているかがわかればOKです。 このHTMLでできること 記事が読みやすくなります 大事な文を目立たせやすくなります コピペして文字を変えるだけで使いやすくなります このページのコード例について このページに出てくるコードは、 説明のための例 です。 「このタグはこんなふうに使われることがある」と見るためのものなので、まずは意味だけつかめば大丈夫です。 タグ というのは、 <p> や <h1> のような、HTMLの部品の名前です。 コードは「部品の集まり」です HTMLは、1つ1つの部品が集まってできています。 それぞれの部品には、ちゃんと役目があります。 まずは 「この部品は何をするものか」 だけわかれば十分です。 例1：大きな見出しのコード <h1>これだけHTMLを使えば読みやすい記事になる！</h1> ここからここまでが 大きな見出し です。 <h1> から </h1> までは、 ページの大きな見出しを表すときによく使う部品 です。 このページが何について書かれているかを、最初に伝えたいときに使われることが多いです。 例2：本文のコード <p>このテンプレは、コピペしてすぐ使える記事用のHTMLです。</p> ここからここまでが 文章のひとかたまり です。 <p> から </p> までは、 文章を1つのまとまりとして書くときによく使う部品 です。 説明文、本文、案内文など、いろいろな文章に使えます。 この例では説明文として使っていますが、 <p> は説明文だけのためのタグではありません。 例3：囲み箱のコード <div style="border:1px solid #ddd; padding:12px;"> ここが大事なポイ...

コピペですぐ使える無料HTMLあります 「これだけHTMLを使えば読みやすい記事になる！」をBOOTHで無料配布しています。 記事にコピペするだけで、読みやすい形にしやすいテンプレです。 Google Bloggerなら、Googleアカウントがあればすぐ試せます。 無料で見る

商品紹介やまとめ記事を、見やすい形にすぐ整えたい人向けのHTMLです。 下にあるHTMLをそのままコピペすれば使えます。 Google Bloggerなら、Googleアカウントがあればすぐにブログを作って試せます。 WordPressでも使えますが、まずはBloggerのほうが手軽です。 このページの見方 上は完成見本です 下はコピペ用HTMLです 変えるのはタイトル・本文・ボタン文字・リンク先だけです 完成見本 これだけHTMLを使えば読みやすい記事になる！ コピペして、文章を少し変えるだけ この記事では、商品やサービスの良さをわかりやすく伝えるための形を、すぐ使えるHTMLでまとめています。文章は自分で書いて、見た目だけ先に整えたい人にぴったりです。 この記事で伝えたいこと 読みやすい記事は、内容だけでなく見せ方も大事です。このHTMLを使えば、見出しやポイント、まとめやボタンまで一気に整えられます。 おすすめポイント3つ 1. 形が最初から整っている 見出し、説明、ポイント、まとめ、ボタンまで入っているので、ゼロから考えなくて済みます。 2. コピペ後すぐ使える HTMLが苦手でも大丈夫です。必要なところだけ自分の言葉に変えれば、すぐ記事として使えます。 3. 見た目の変化がすぐわかる 文章だけの記事より、ぐっと読みやすくなります。見た瞬間に「変わった」とわかるのが強みです。 こんなときに便利 商品紹介の記事を書きたいとき おすすめ記事を見やすくまとめたいとき 普通の記事を少しオシャレにしたいとき まとめ 記事を読みやすくしたいなら、まず形を整えるのが早いです。このHTMLは、その最初の一歩をすぐ始めやすくするための素材です。 くわしく見る ...

この記事でわかること S01を入れると、ブログがどんな見た目になるか コピペ用コード （そのまま使える） 入れ方 （Bloggerで迷子にならない手順） 「どんな見た目になるの？」を一発で分かるように、 プレビュー（実物） を置きました。 ※無料配布ページ： ここ / BOOTH： ここ ① 見た目プレビュー（これが表示されます） 🧭 まずはここ（迷子防止） S01の配布ページを見る BOOTHで配布ページを見る Xの固定ポストを見る ⚠️ ここだけ注意 文字が読めない場合は、 背景を明るく（白系） にすると解決しやすいです。 ✅ 次の1つだけやる S01を見に行く（無料） BOOTHで見る ※導線は増やさず「次の1つ」だけにすると強いです。 ② コピペ用コード（そのまま貼れます） 下のコードを そのまま コピペして使ってください（URLだけ差し替え）。 📌 コピペ用 <div style="border:1px solid #e7e7e7; background:#ffffff; padding:14px; border-radius:16px; margin:14px 0; line-height:1.8;"> <div style="font-weight:800; font-size:18px; margin:0 0 6px;">🧭 まずはここ（迷子防止）</div> <ul style="margin:0; padding-left:18px;"> <li><a href="【S01配布ページURL】" target="_blank" rel="noopener">...

「ただ文章を書くだけだと、少し見にくいな」と感じることがあります。 今回は、 普通の文章 を 見やすい箱 にすると、どう変わるかを見本でまとめました。 ビフォー まずは、ふつうの文章です。 ▼ 前はこう 無料テンプレはこちらです。使いたい方は下を見てください。 アフター 同じ内容を、箱に入れるとこうなります。 ▼ 後はこう 無料テンプレはこちら 使いたい方は下を見てください。 どう変わったの？ 前：ただの文章 後：箱に入って、少し目立つ 前より「ここが大事」と伝わりやすい 初心者でも見た目の変化がわかりやすい 使うコード 下のコードをコピーして使えます。 ▼ コピーするコード 下の灰色の中を、そのままコピーしてください。 無料テンプレはこちら 使いたい方は下を見てください。 使い方 上の「アフター」の見た目を確認する 下の「使うコード」をコピーする BloggerのHTMLモードに貼る 文字だけ自分の記事に合わせて変える まとめ 今回は、ただの文章を 見やすい箱 にしてみました。 大きく難しいことはしていませんが、前より少し見やすくなります。 初心者向けなら、まずはこういう 見た瞬間に違いがわかる形 から始めるのが分かりやすいです。