こんにちは、じゅんにかです。
ブログのライティングとして最後になります。
読みやすく、わかりやすく、面白い記事を書く。
これまで書いてきたのは文章力についてでした。今回は少し違います。
文章力ではなく、デザイン（見た目）です。
今回は「ブログ記事のデザインについて考える」お話です。
ブログ記事のデザイン
ブログのデザインは大きく２つに分けられます。
- ブログの印象を決める「サイト全体のデザイン」
- 読みやすさやわかりやすさを決める「ブログ記事のデザイン」
「１．サイト全体のデザイン」はやるやると思いながらまったく進んでません。
早く変えたいんですが後回しになってます。
時間があるときに全体をやって微調整していきたいと思ってます。
今回は「２．ブログ記事のデザイン」について解説します。
文字ばかりで視覚に圧をかけない工夫の仕方です。
文字装飾はシンプルに
僕は文字装飾について深く考えずに書いてきました。
特にこだわりもなくWord Pressにある、太字・アンダーライン・色太字をなんとなく使っています。
ただ、こだわりはなくともルールは必要です。
記事によってバラバラだと読む人に、どこを強調しているのか伝えたいのかがわかりません。
これからはルールを決めて記事作成に取り組みます。
シンプルなルールなのでまだ決まってない人は参考にしてください。
記事内の重要度が高いものを太字で強調する
太字で重要度の高いものを強調します。
記事内の強調したい部分に使います。できるだけ少ないほうがいいです。
少なければいいのは複数になると強調したい部分が分散するからです。
僕はなにも考えずに使ってました。
見出しごとに０～２までに抑えることを意識します。
また、０でもいいです。この見出しはさらっと読んでもらって次に繋げるのもいいと思います。
あとは、記事内や見出し内で統一性を持たせることです。
色は赤・青の２つのみ
青文字・青アンダーライン
ブログはなにもかもが自由なのでなんでもありです。
僕はそう思っていたのですが、文字装飾の色についてルールを知りました。
ご存じの方もいると思いますが、青・青アンダーラインのことです。
「青＝リンク」というルールです。Web上の基本ルールです。
昔からの一般的なルールとして青文字＋青アンダーラインでリンクをあらわします。
最近はデザイン性が多様なので他の色を使っているサイトもありますが、一般的に浸透しているルールなので、リンクと思いクリックしたのにリンク先にいけないというストレスを与えます。
こだわりをもって自分の個性を貫きたいのではないなら、読む人に誤解させることになるので強調や注目してほしい箇所に「青文字」「青アンダーライン」は使わないでおきましょう。
僕の今までのリンクは青ではなかったので直しました。
赤文字・赤アンダーライン
太文字で重要度の高い部分を強調するといいました。
赤文字・赤アンダーラインも同じで強調する部分に使います。
僕は赤は太文字よりもより強調したいときに使うことに決めました。
「赤」が持つイメージはポジティブとネガティブの２つがあります。
- ポジティブ：力・情熱・自信・アクティブなど
- ネガティブ：怒り・警戒・危険・注意など
太文字で重要な部分を強調し、赤文字でより強調することにします。
赤アンダーラインも同じような使い方をしますが、僕はしばらくは使わないでおこうと思っています。
理由は１度、スッキリと読みやすく、わかりやすくするためです。
必要であれば増やしていこうと思っています。
画像と動画を使う
画像を使い理解度をあげる
文字ばかりのブログは読むのがしんどくなります。面白さもないです。
僕のブログがまさにそうです。これからは取り入れていきます。
まず、画像です。文字だけで説明するよりも画像があったほうがわかりやすいです。
動画なら、もっとわかりやすいです。文字だけで伝えるのは難易度が高いです。
先程、リンクの話をしました。リンクをつけるとWord Pressのテーマのサイトリンク色が選ばれます。テーマによっては青が選ばれるかもしれませんがテーマによります。
僕はWord Pressのコクーンを使っています。
サイトリンク色の変更の仕方を説明します。
①Word PressのダッシュボードのCocoon設定をクリックします。
②全体をクリックします。
③下にスクロールしていくと「サイトリンク色」とあるので矢印の部分をクリックします。
④右横の枠の中に「#1a0dab」と入力します。このカラーコードはGoogle検索と同じ色になります。
⑤下にスクロールしていくと「変更をまとめて保存」とあるのでクリックします。
⑥リンクを貼りたい箇所をドラッグし、右上のリンクマークをクリックします。
⑦最後にURLを貼りつけて完了です。
これでリンクを貼りつけると自動でGoogle検索と同じ色になります。
また、Word Pressの青太文字を選んでもいいと思います。
ただ、忘れることもあると思うので設定することをオススメします。
次に、画像の貼りつけかたを解説します。
画像の貼りつけは２種類あるので、手順②で好きなほうを選んでください。
①矢印をクリックし、下にスクロールしていきます。
②
画像のみ：青矢印をクリックし右下の「メディアエリア」から選択します。
画像とテキスト：真ん中の赤矢印をクリックし右下の「メディアエリア」から選択します。
これで画像の貼りつけをすることができます。
動画の貼りつけかた
WordPressに簡単にSNSを埋め込みする方法ー結城おさむ・ブログでカジュアル起業のすゝめ
動画の埋めこみかたはこちらの動画で詳しく解説されています。
Xやinstagramなどの埋めこみかたも解説されているので参考にしてください。
画像や動画を記事内にいれることでメリハリがでてきます。
読みやすく、見やすくする装飾
上記以外のブログの装飾の基本となるものを集めました。
- 箇条書きを使う
- 目次を使う
- BOX（囲み）を使う
- 余白（改行）を入れる
- 見出しを装飾する
- 図解を使う
- 吹き出しを使う
- 文字の表記ゆれをなくす
他にもありますが、まずはシンプルにこれくらいにします。
僕は上の５つは使ってますが、下の３つは使ってません。今後は使っていきます。
表記ゆれとは
文字の表記を統一することです。
例えばWord press・WORD PRESS・ワードプレスなど同じ言葉の表記を統一することです。
英語で書くのか、大文字小文字なのか、カタカナにするのか。
マクドナルド・マック・マクドなど正式名称か略語を使うのかを統一します。
記事単位はもちろん、ブログ全体で統一しましょう。
まとめ
僕は今まで特に考えずに書いてきました。
調べて知ってはいたので使いやすいものは使っていました。
これからはルールをつくり使っていきます。
この記事をみても簡単なことしかしていませんが、マシにみえます。
あくまで１例です。僕はこういう風にしていきますというだけです。
色も３色使ってもいいし、もっといろんなものを取り入れても構いません。
ただ、多くのブログがシンプルなつくりになってます。
検索すると多くの記事がシンプルなのをすすめています。
大切なのは書く人の気持ちと読む人の気持ちです。
いいバランスと取りながら楽しくブログを書いていきましょう！
ここまで読んでいただき、ありがとうございます。
読みやすく、わかりやすく、面白い記事を書くというテーマの最後の記事です。
もちろんテーマのことを知って勉強することが目的です。
もう１つ、ここまで１つのテーマで書いてきたのは「まとめ記事」を書くためです。
勉強もできテーマもちゃんとしていて、後から補足・補完ができるもの。
今後、関連する本などを読んでいきリライトしていきたいと思います。
気になったら、覗きに来ていただけると嬉しいです。
ほなまた、お会いしましょう！ありがとうございました！！
コメント