文章を書く時の王道的なもの。例えばカギカッコの使い方など、そういったものはもちろん、その他にもWEBのルールというものもあります。WEB上では「こうゆう表現をするとこう認識されてしまうよ」やSEO観点でのお話も。
WEBサイトで文章を書く人は一度目を通していただくと良い、そんなことをまとめてみました！
※ 私個人の主観もたくさん入っていますので、ご参考程度にお読みください。また情報は2020年4月現在のものです。
YUKI動画での解説がある項目もあるよ。ぜひ見てね✨
最初に
まず最初に。どのことでも共通する私なりの考え方なのですが、基本ルールや王道・慣習というような形を知った上で、それでも「こうしたいんだ」とそのルールとは違う形を選ぶ、それも一つの答えだと思っています 🙂
ですので、ここでは基本ルール等をご紹介はしていますが、それを知った上で「私はそれでもこっちの方が見やすいと思う。だからこうする」という自分なりのルールを定めてWEBサイトを運営されてくださいね。
増田ゆきあらかじめこれら（メリットデメリットetcも含めて）を知っておくことで、いざ記事を書こうとした時に余計なところで悩まなくなります。
そうすると記事内容のクオリティの方にパワーを注げますし、自分は「使い方を分かった上でこうゆうルールで書いているんだ」ということが自分の自信に繋がります。よ 🙂
※ 私自身が完璧にできていないことだらけでご紹介……しづらさがあるのですが（笑）ま、日々成長ということで……おゆるしをー
リンク
文中のリンクの文字は具体的に表記する
文中のリンクは「こちらから」というような表現ではなく、リンク先のページがどんなページなのかが分かるように具体的に表記する。どこに飛ばされるのかが具体的に分かるようになっていることはユーザーさんにとって親切ですし、イコールSEOに良いと言われています。
あなたはどちらが良いなと感じますか？
簡単にできる飾り枠の作り方は、こちらで詳しくご案内しています。
簡単にできる飾り枠の作り方は、こちらの記事（【HTML+CSS】おしゃれな飾り囲み枠（ボックス）デザイン！）で詳しくご案内しています。
青色・下線はリンクと認識される
WEBサイトのリンクのベーシックは、青色+下線です。デザイン性を高めるために、その表現でないサイトも今ではたくさんあります。
ただ、もともと青色+下線がリンクと認識されていたために、この表現（青色+下線）を使うとリンクだと認識されてしまう恐れがあります。リンクではない文字を、強調したり見た目の変化をつける時は、青色+下線を避けましょう。
リンクじゃないよ
↑どうですか？ リンクだと勘違いしてしまいそうですよね。ユーザーさんを戸惑わせないことがユーザービリティ（ユーザーさんの使い勝手の良さ）に繋がります。
とは逆に、リンクはリンクだと分かりやすいようにしましょうね。
どちらの方が、リンクとリンクではない文字の区別がつきますか？
YUKIさんのこれまでのデザイン制作一覧を見てから、依頼されるかどうかご検討くださいね。
YUKIさんのこれまでのデザイン制作一覧を見てから、依頼されるかどうかご検討くださいね。
内部リンク・外部リンクと「新しいタブで開く」
内部リンクとは、自サイト内のリンクのこと。
外部リンクとは、自サイト外へのリンクのこと。
ここで「新しいタブで開く」のお話。
内部リンクであれば、基本、同じタブで開きましょう。何もしなければ同じタブで開きます。
また、外部リンクであれば、基本的に新しいタブで開きましょう。これは設定が必要です。
外部リンクは新しいタブで開く理由は、自サイトを開かせたまま他のサイトも開いてあげられるので、自サイトから離脱させないことができるからです。
たまにないですか？ 「あれ？ さっきのサイトに戻りたいのに無くなっちゃった……」ということが（戻るボタンで戻れますが）。
そして、内部リンクは新しいタブで開かないのは、むやみやたらに新しいタブで開かせるとユーザー側はうっとおしくなるから、です。
リンクを押すたびに新しいタブが開き、タブがたくさん増えていったらちょっと邪魔ですよね。上手に使いわけましょう 🙂
実際にリンクをクリックして動作を確認してみてね
内部リンクはこゆこと。このサイトのトップページへ同じタブで開きます。
外部リンクはこゆこと。もう使っていませんが、YUKIのアメブロが新しいタグで開きます。
フォント（文字）サイズ
WEBのフォントサイズの単位はpx（ピクセル）です。このpxの数値が大きくなるほどに文字のサイズが大きくなります。逆に小さくなるほどに文字のサイズが小さくなります。
このフォントサイズに変化をつけることで、読みやすくなります。強調したい文字を大きくしたり……はもちろんのこと、さらっと読ませたい、補足のような文章は小さくする、そんなことでも記事にメリハリがついて、読ませたい部分を浮かび上がらせることができます。
フォントサイズ最小は10pxに留める
このフォントサイズ、可読性を保つため（正しく読める・認識できる）に最小は10pxに留めましょう。10pxでもかなり小さいので多用せず、必要な部分だけに。
通常サイズ（設定etcによってまちまちですが）は16px前後です。
これが10pxです
これが12pxです
これが16pxです
こんな感じにすると補足とのメリハリがつきますね
文字の大きさを変えるだけで、読ませたいものを浮かび上がらせることができます。どの部分をより読んでもらいたいか考えてフォントの調整しましょう。
※ただし、最小フォントは10pxに留めましょう。
機種依存文字・特殊文字・絵文字
⑴ ① ♡
など、これらの文字はどのデバイズ（PCやスマホetc）からでも同じように表示されるとは限らない文字です。他の方が見たときには、意図しない違う表示がされている可能性があります。そのため、使用は控えた方が良いです。
⑴ は、カギカッコと数字を自分で別に入力した（１）にするなど、置き換えられるものを使いましょう。
……が、♡ や ✨などどうしても使いたくて使うことが私はあります。笑
Macですと、下記のように「一部のメールクライアントでは表示できません」とでてくるのが機種依存文字系です。
英数字の半角全角 問題
案外、あいまいなまま記事の執筆をしてしまいがちなのが、この英数字、半角全角問題。笑
あなたは自分なりのルールを決めていますか？ 決めていないと同一記事内にいろんな表記が混在して、違和感を持たせてしまったり読みにくさを与えることにも繋がります。まだ決めていなかったらぜひ下記を読んだ上で自分はどうしようかなと決めてみてください。
オススメは英数字は半角に統一する
WEBはもともと英語圏で開発されたものなので、半角の方が読みやすかったり、便利だったりします。
ただし、カタカナやカギカッコなどは全角の方が読みやすいです。
違い１）データ量
半角は1バイト文字。全角は2バイト文字。ようは、全角は半角の2倍のデータ量を持っています。そのため、半角にすることでデータ量を増やせますので、その結果、サイトタイトルなどの文字数が決まっているようなところでその分文字をたくさん盛り込めたり……します。
違い２）半角だと途中で改行されないように自動で折り返される
英語の文章は半角。そしてその英語の文章は、単語の途中で改行されると読みにくくなってしまうために、WEBのデフォルトでは半角文字は途中でも改行されません。スペースで単語の塊として、キリのいいところで折り返す、という処置をとられます。
違い３）全角英数字は間延びする
英単語が半角の方が読みやすいように、数字も全角だと間延びしている感じがあり違和感が出ます。
違い４）半角の場合、電話番号は電話番号と認識され便利に活用
電話番号を半角で入力している場合、電話番号だと認識されてタップするだけで電話をかけることができる場合があります。
あなたはどちらが読みやすいと感じますか？
1984年2月10日生まれのyuki masudaです。
１９８４年２月１０日生まれのｙｕｋｉ ｍａｓｕｄａです。
括弧の使い方
よく使うカギカッコの王道的な使い方をご紹介します。カギカッコを上手に使えると、同じ文言でもグッと相手に分かりやすく届くようになります。
完璧にルールに沿おうとするとカチカチになってしまいますが、覚えておくと使うときに余計な迷いがなくなりスムーズですし、同一記事内でバラバラな使い方にならずに済みます。今一度確認しておきましょう（私と一緒にw）。
また、括弧は全角表記にしましょう。
「」 カギカッコ
- 強調する時に使う
- 会話を表現する時に使う
- 引用
- 文のまとまりを区別させたり
- タイトルや作品名を示す（書籍名・雑誌名・映画名etc）
「」内には句点を使わない。分の区切りとなるので正式には句点は入れないようですが、入れても間違いではないようです。同一記事内で統一できれば良いでしょう。
例：「カギカッコにも色々な種類があるのねぇ」と母は言った。
（） 丸カッコ
- 補足・解説
- 漢字や英語の読み方
文末に補足をつける時は、（）の後に句点をつける。（）も文の一部として考えるから。
例：カッコの使い方は覚えると簡単です（覚えるのが大変）。
上記の例外としては、「補足が複数の文にかかっている場合」や「引用元の表記の場合」は、句点の後に（）をつける。補足が直前の文だけにかかっているかが見極めるポイント。
例：補足したい時に使う。漢字や英語の読み方を添えたい時に使う。（丸カッコの使い方）
例：カッコを上手に使えるとカッコ良いですね。（引用元書籍：なんちゃら本）
【】 隅付カギカッコ
強調したい時に使うもの。というくらいでルールは特に無いようです。
『』 二重カギカッコ
- カギカッコの中にカギカッコを入れる、入れ子にするとき
- タイトルや作品名を示す（書籍名・雑誌名・映画名etc）
このような時に使用するようです。
例：あの時「カギカッコなんてもう『絶対』使わない」って言ってたのに。
強調させたい時は、『』二重カギカッコではなく「」や【】を使う。
『』は、「」の入れ子の時やタイトル名などを示す時に使う。として区別しておけば綺麗にまとまるなぁと感じます。
よく使う記号の使用法
“ ” ダブルクォーテーション
- 語句を引用する場合
- または文字・記号・用語などを特に明らかにする必要がある場合
に使うようです。なので、強調する時に使うものではない、ということですね。
そしてもうひとつ。ダブルクォーテーションは対で使うもので、向きにも注意。” ”ではなく“ ”。始まりは“です。
…… 三点リーダー
余韻を持たせたい時や無言を表現する時などに使う記号。どれを使っていますか？
私は・・・と、中黒という点を3つ配置して表現していました。し、良く見かける表現なのですが、実はこれ、正式には間違っているようで。
…この三点リーダーという記号を2つ配置して……と表現するのが王道のようです。…が2つでワンセット！といえど、王道はこれですが、少しづつ王道も崩れているような書籍もあったりするようなので、WEBブログのようなものであれば、王道を知っておいてその上で自分がしっくりくるものを使えばいいのではないかと思います。
どちらの方がしっくりきますか？
知らなかった……ずっと間違った使い方をしていた……
知らなかった・・・ずっと間違った使い方をしていた・・・
― ダッシュ・ダーシ
上記のように、2つでワンセットの仲間がこちら！あまり使わないような気もしますが（笑）使うと小説感がでますね。
- 間を開ける
- スピード感を表す
- 人称を切り替える
- 文中で「余談」「注釈」を挟む
の時に使えます。
――YUKIのレベルがあがった。
YUKIさんは振り返って、僕にこう言った。
「ありがとう」
――違う、そんな言葉が欲しかったんじゃない。
YUKIは嬉しさのあまりに、ガラス越しの猫――丸い目で見つめている――に笑顔を向けた。
！？ 感嘆符と疑問符
感嘆符（！）と疑問符（？）は良く使いますよね。この感嘆符と疑問符の直後にはスペースを入れるという、編集の基本としての慣習があり、JIS規格ではないのですがそういったガイドラインがあるようです。
↓直後に閉じカッコがくる場合は除く
例：感嘆符（？）ってあれのことかなぁ。
さてあなたはどれが読みやすいなと感じ、しっくりきますか？
あなたは知っていましたか？慣習は慣習として知っておき、結局のところ読者さんが読みやすい、認識しやすい、そんな形に仕上げたいですね！そのために色々学んで、まずは試してみましょう。
あなたは知っていましたか？ 慣習は慣習として知っておき、結局のところ読者さんが読みやすい、認識しやすい、そんな形に仕上げたいですね！ そのために色々学んで、まずは試してみましょう。
あなたは知っていましたか？ 慣習は慣習として知っておき、結局のところ読者さんが読みやすい、認識しやすい、そんな形に仕上げたいですね！ そのために色々学んで、まずは試してみましょう。
スペースがあることで、感嘆符・疑問符がどの文の塊にかかっているのか認識しやすいですね。スペースは全角か半角か問題がありますが、個人的には一番最後の半角も好みです（空きすぎず、くっつきすぎず）。
改行
自分なりのルールを持っていないとハマることがある、改行。あなたは改行をどう扱っていますか？
全体的な考え
「文章の途中で、良い感じのところで、読みやすいように」改行を（手動で）入れるという方は多いのですが、デメリットを知った上で決めて欲しいなと思います。
読みやすく、と手動で改行を入れても、デバイス毎に横幅が違う為に、他の方が見た時・自分が違うデバイス（パソコンで見てたけれどスマホ）で見た時に読みにくくなってしまう可能性が高いです。
パソコンで見た時は手動改行のおかげで、読みやすい……のですが
スマホで見た時は手動改行のせいで、読みにくくなってしまう。
それならば、改行を入れないこちらの方がスッキリしませんか？
また、手動改行を入れない場合は、文の塊に注意しましょう。数行の塊ができたら次の段落にして行間を開けないと、何行も文の塊になってしまうと読みにくいです。もちろん、文の内容の繋がりも意識して上手に分けましょう。
慣れないうちは、「ひと文（句点をうったら）書いたら、改行する」が、オススメ 🙂
また、HTML構文ルール的には改行（br）の連打で行間をあけるのは良くありません。
YUKI私自身は、過去は手動で改行を入れていましたが今は改行を入れずに記事を書くようになりました。今は、「どこに改行入れようかな」と考える時間が無くなったので、それがすごくメリットです。
また、ガチガチに固めずに、どうしてもここは行を変えて見せたい（目にとまらせたい）時は手動で改行することもあります（乱用しないように気をつけながら）。
ブログならではのマナー（というのもあるかも）
手動改行は基本的にオススメしませんが、積極的に手動改行している人たちをよく見かける場所があります。
それは、アメブロ。アメブロのトップブロガーさんによく見かけます。大きめのフォント（文字）にして、積極的に改行をいれている。
これは例えば、台所に立ちながらサササーっと流し読みをしている主婦さんもいるかもしれない、そう思うと「大きめの文字で改行をたくさんとってあげた方が読みやすいから」と聞きました。
大きめ文字で改行が多いと、スクロールをたくさんしないと読めなくなるので、それはそれで「ちょっと疲れるなぁ」とも私は感じるのですが、確かにそれも分ります。
ブログのようなラフな場面では、こうゆう形で読みやすさを作ってあげるのも一つですね 🙂
ただやっぱり、「サービス詳細ページ」といったような説明のようなページや、ホームページという公式のかしこまった場面では当てはまらないかなと個人的に感じています。
ちなみにFacebookでは
スマホを縦にして読んでいると想定して、その「スマホの横幅に収まるだけの塊で改行をする」を私は現在試してみています。
スマホによって横幅が異なるので、表示される文字数も変わってきますが、そのあたりは感覚で（20文字くらいなら小さいスマホでも自動改行されないかな）自動改行されないあたりの塊で、手動改行しています。
また、Facebookは冒頭の文字が数行表示されていて「もっとみる」をクリックして続きを読むスタイルなので、「冒頭数行は敢えて改行しない」をしています。
それは、「もっとみる」をクリックしなくても表示される部分で、開いてもらいたくなるような文章をしっかり盛り込めるようにです。改行しちゃうと情報量が少なくなってしまうのでね 🙂
YUKIですので！ まとめると、場面場面で読みやすさが変わり、「ブログならでは、Facebookならでは、のマナー」みたいなものも確かにあるなぁと感じるYUKIです。臨機応変にご自身で色々試してみてくださいね！
価格表記
2021年4月からは税込表記（総額表示義務）が必要です。
消費税アップなどがあったことで2021年3月31日までは、税込価格であると誤認されないための措置を講じていれば税込価格でなくても良いとなっていますが、まだ税抜表記をしている場合は早めに税込表記へ。またこれから入力する場合は税込表記にしましょう。
ここでちょっと休憩
ここまで長文をお読みくださりありがとうございます〜 🙂
ここから先は「タグ」という言葉がメインで出てきます。少し上級編となりますが、上手に使えるとWEBページがグレードアップしますので、ぜひ挑戦してみてくださいね。
H（えいち）タグ
Hタグとは「見出し」のタグのこと。Hタグで囲った部分がこのページの見出しですよ、と定義するタグです。
HタグはH1からH2……H6まであります。数値が増えるごとに階層がおりていき、H1が大見出し、H2が中見出し、H3が小見出し……と続きます。
この数値（階層）の順番を守ること。H4タグの中にH2タグを入れたり、H3タグの次にH1タグがきたりというのは間違っています。
Hタグを使うメリット
1）見た目が装飾される
設定にもよりますが、Hタグを使うことでその部分が装飾されデザインがついたりします。その結果、メリハリがついて読みやすくなりますし、目立つことで「ここにはこんなことが書かれているんだ」と分かりやすくもなりますよね。
2）SEO対策ができる
ページ内にいれた言葉を検索エンジンが拾って、「このページはこうゆう内容が書かれている」と判断し、ページを登録し、ページの評価の材料にしています。
ですので、検索エンジンで検索をするときに入れる言葉と、このページ内に書かれている言葉が一致することで、ページが表示されるのですが、このHタグに盛り込んだ言葉は優先度がとても高いのです。
ページのキーとなるワード。キーワードをこのHタグに上手に盛り込むことで、そのページの情報を届けたい人へ効率よく届けることが出来ます。少しコツが入りますが、このHタグをまずは使ってみる、ことをやってみましょう。
3）ワードプレスなら、目次を自動表示させられる
こちらはワードプレスのお話になります。もともとテーマに装備されていることもありますが、プラグインを使って各ページに目次を表示させる（自動で）ことが出来ます。
私は「Table of Contents Plus」というプラグインを現在使っています。
仕組みはこう。Hタグで入力した文字が自動で目次として出てきてくれるのです。目次はユーザーさんにとっても使い勝手が良いですし、SEO的にも良いとされています。
リストタグ
ここはリスト形式に出来る（箇条書きetc）、という部分はリストタグを使うと良いです。
例：こんな方にオススメ
- そろそろホームページが欲しいと思っていた
- 集客するのにアメブロだと限界を感じている
- 自分の場所を大切に育てていきたい
例：ホームページの作り方
- レンタルサーバーとドメインを契約する
- ワードプレスをインストールする
- テーマを選んで、さっそくブログを書く！
まだ上記の形なら文章になっているので良いと思うのですが、単語の箇条書きのようなものは「ただキーワードを並べただけだ！良くないぞ！」と検索エンジンに認識されてしまうと悪い評価を受ける可能性もあります。
そういったものではないことが前提で、リスト定義（タグを使う）してあげることで防げたり、きちんとした構造を検索エンジンに伝えることで評価を受けるのでSEOにも良いです。
また、見た目もリスト用のデザインになりますのでユーザーさんにとっても見やすくなります。
テーブルタグ
こちらもリストタグのように、単調な文字一辺倒だけではなく、自分で変化をつけられるテクニックの一つです。下記のような「料金など詳細」を表にすると綺麗にまとまりますね。
| 料金 | ○○○○円（税込） |
| 日時 | ○月○日 |
| 会場 | ○○駅徒歩○分 |
引用タグと重複コンテンツ
他サイトや書籍からの文章の引用は「引用タグ」を利用しましょう。
WEBでは「既にあるページの文章」と同じ文章がまた他ページに現れた時、重複コンテンツ・コピーコンテンツとみなされます（検索エンジンが先に登録したページがオリジナルコンテンツになり、その後に登録したページはコピーコンテンツになる）。
コピーコンテンツは評価を受けられなかったり、最悪の場合ペナルティを受けることがあるようです。
そういったことを防ぐ為に、引用をする際は、引用タグを使うことで「これはコピーコンテンツではないですよ。引用ですよ」と検索エンジンに伝えることができるのです。
また、引用タグを使うと設定によって違いますが、見た目の変化もあります（デザインがつく）。視覚的にもユーザーさんに引用と知らせる効果もあります。
このデザインを使いたいからと、引用じゃないのに引用タグを使うのはよくありません。
[1]公正な慣行に合致すること，引用の目的上，正当な範囲内で行われることを条件とし，自分の著作物に他人の著作物を引用して利用することができる。同様の目的であれば，翻訳もできる。（注5）[2]国等が行政のPRのために発行した資料等は，説明の材料として新聞，雑誌等に転載することができる。ただし，転載を禁ずる旨の表示がされている場合はこの例外規定は適用されない。
引用元 文化庁
（注5）引用における注意事項
他人の著作物を自分の著作物の中に取り込む場合，すなわち引用を行う場合，一般的には，以下の事項に注意しなければなりません。
（1）他人の著作物を引用する必然性があること。
（2）かぎ括弧をつけるなど，自分の著作物と引用部分とが区別されていること。
（3）自分の著作物と引用する著作物との主従関係が明確であること（自分の著作物が主体）。
（4）出所の明示がなされていること。（第48条）
まとめ
今回はWEBで記事を書く前に知っておくといいことをまとめました。各項目の詳細は書ききれていないものもありますが、こちらでは概要としてご紹介。詳細はまた機会があれば別の記事にしようと思います。
情報は古くなる可能性もあります（2020年4月現在）。また随時リライトする予定です。
全国出版となる文章を執筆するわけではなく、WEBのブログというものならば、そんなにルールに縛られなくてもユーザーさんが見やすいかどうかを自分なりに考えながら色々と試し、自分なりのルールで運営すればいいと私は思っています 🙂 書く側も楽しく、スムーズに。しっくりくる形に。
▼こちらもきっと参考になりますよん 😉
COMMENT