飽き性な男のムダ話

飽き性な男のムダ話

飽き性な男のムダ話

日常お返事スタンプ

Web・WordPress

2020/06/28

【SEO・ブログ修正】アクセシビリティを意識してブログを修正してみた

こんにちは~Taku(@takumuda_1093)です。
今回はこのブログ全体を色々修正してみたので、そのまとめをしていこうと思います。
皆さんのブログにも共通する修正点があるかもしれません。
Webデザインの専門用語や考え方も紹介しているので、このブログと見比べながら「良い点」や「悪い点」を見つけてもらえると嬉しいです。

管理者視点ではなくユーザー視点で見る

このブログを開設してもう少しで3ヶ月が経ちます。
ブログへのアクセスもちらほらではありますが、増えてきました。
そこで、一度初心に帰ってブログ全体を見直すことにしました。
管理者・筆者としてではなく「自分が訪問者でこのブログに訪れたらなにをするか」「どう記事を読むのか」を意識して見直しました。
こうして客観的に見てみると、気になる箇所がいくつか出てくるのでおすすめします。

リツキ
リツキ
もう3ヶ月も経つんだね〜。閲覧数も上がってきたみたいだし、頑張って継続してきた甲斐があったね〜!
うん!最近は仕事が忙しくて更新に時間がかかることもあるけど、諦めずに頑張っていくよ!
Taku
Taku

アクセシビリティのテストをやってみた

自分で見直すだけでなく「アクセシビリティのテスト」をやってみました。
「アクセシビリティ」の意味は以下の通りです。

  1. アクセシビリティとは、Webサイトの情報やサービスへのアクセスのしやすさのことをいいます。
    なので、どんな人でも簡単に操作ができ、見ることのできるWebサイトを作らなければなりません。

今回のテストでは、家族や友人といった身近な人に「アクセスのしやすさ」「ブログの見やすさ」「記事の読みやすさ(記事の長さ)」の3点を中心に見てもらって感想をもらう方法で実施しました。

リツキ
リツキ
身近な人に実際に見てもらうのは凄く良いね!…て言いたいけど、このブログ見せたんだ?
うちらと会話してる文章見られるの恥ずかしくなかった…?笑
え?全然恥ずかしくないよ〜!家族にも友達にも、もう引ききれないほど引かれてるからさ!HAHAHA☆
Taku
Taku

①クリックできるリンク箇所を増やした

まずはこの箇所「記事一覧」のところです。

この画面で、記事のリンクを押すとき、皆さんはどこを押すでしょうか?

リツキ
リツキ
うちは、①と④を押すかな〜。

ほとんどの方は「①アイキャッチ」や「④タイトル」の2箇所を押すのではないでしょうか?
しかし、修正前のこのブログは「⑤MOREボタン」を押さないと、リンク先の記事に飛ぶことはできませんでした。
知り合いや家族にも、操作テストをしてもらいましたが、必ずと言っていい程、始めに「①アイキャッチ」と「④タイトル」を押そうとしました。

リツキ
リツキ
そうだったんだ…じゃあうちは記事のページにいくことが出来ないじゃん…
よくよく考えると、自分もアイキャッチとタイトルを押そうとするな…
Taku
Taku

右下に「⑤MORE」のボタンを配置していますが、そこを押す人は少ないことが分かります。
一般的に、記事の画像、ボタンを含めて、どこを押してもリンク先に飛べる作りでプログラムするのが良いです。
アクセシビリティの面から見ても、誰でも簡単に操作ができるWebサイトでないといけません。
「⑤MORE」のみにリンクがある状態は決して良いサイトとは言えません。
なので、「①アイキャッチ」「④タイトル」「⑤MOREボタン」の3箇所は必ず押せるようにコーディングし直しました。
視覚的にも押せることが分かるように、「CSSアニメーション(:hoverとtransitionを使用したアニメーション)」も入れました。

このブログみたいに一箇所のボタンしか押せないサイトをよく見かけるから、もしそうなっていたら対策しておこう!
Taku
Taku

②サイト内のカラーをできるだけ統一した

主にWebサイトは「メインカラー」「ベースカラー」「アクセントカラー」3種類のカラーでデザインされています。
ちなみにこのブログは主に以下の3色でデザインしています↓

しかし、他にも違う色がいくつか使用していたため、統一性がありませんでした。
3種類のカラー以外に色を増やしてしまうと、デザイン全体のまとまりがなくなってしまいます。
ブログの記事を読む分には問題はありませんが、デザイン面ではあまり良い状態じゃないため、3色にまとめるのがベストです。なので、変えられる色は配色し直し、統一感のあるデザインにしました。
皆さんのサイトのカラーデザインも、今一度見直して、必要なら再配色をしてみて下さい。

ちなみにブログは、落ち着きのあるカラーデザインが良いとされていて、ホワイトベース、寒色をアクセントに使うと綺麗だよ!(学生時代の担当講師からの情報)
Taku
Taku
リツキ
リツキ
優しい色合いの方が心地よく文章が読めるもんね〜!

③フリー画像を使用したアイキャッチをなくした

前回「フリー画像を使わずに、オリジナルのアイキャッチを作ろう!」という内容の記事を公開しました。

しかし、4月に公開した「メルカリ」の記事では、アイキャッチに思い切りフリー画像を使用していました。

これじゃあ「説得力」が皆無だよね〜
Taku
Taku

なので、フリー画像を使用したアイキャッチを全て作り直し、完全オリジナルのデザインにしました。
これで、このブログに使用されている写真は全て、自分で撮影したものだけになりました。

みんなもオリジナルのアイキャッチ画像を作ってみてね!
Taku
Taku

④記事のタイトルを見直した

タイトルを一通り見直しました。
過去の記事を見てみると、キーワードが含まれていなかったり、ムダに長いタイトルも多くありました。
これではパっと見でなんの記事か分からないため、記事を読んでもらえない原因になってしまいます。
さらに、キーワードが含まれていないと、クローラーに何のページなのか認識してもらえず、SEO的にも最悪な状態になってしまいます。
なので、タイトルの文章中に必ずキーワードを入れ、簡潔に短く決めていきましょう。
検索したときにヒットしやすい言葉を選びながらタイトルを決めるのも重要です。

タイトル決めって結構難しいんだよ〜。
Taku
Taku
リツキ
リツキ
短く分かりやすい内容にしないといけないもんね〜。
色々なブログにお邪魔して、どんなタイトルを付けているのか勉強するのも良いね!
Taku
Taku

⑤文章を読み返す&読んでもらう

記事を書き換える前に、もう一度記事の文章を読み直しましょう。
記事を書いている最中には気が付けなかったミスを見つけることができます。
また、身近な人に記事を読んでもらうことも重要です。
自分では正しいと思っている言い回しや言葉でも、間違った使い方をしていることもあります。
一記事全てに目を通してもらい、間違った表現がないかを確認してもらうようにしましょう。

このとき、記事の感想を聞くようにしよう!
Taku
Taku
リツキ
リツキ
身近な人なら遠慮なく、厳しいフィードバックも貰えそうだよね〜!

⑥改行を減らす

今までは、「見た目重視」で空欄だけの改行を多くとっていました。
しかし、改行を多くとりすぎるとスクロール量が多くなり、離脱率が上がってしまいます。
さらに、SEO的にも内容のない価値のないページと判断されてしまうので、ムダな改行は減らしましょう。

見た目よりも、文章の内容に合わせてバランスよく改行していこう!
Taku
Taku

⑦吹き出しのアバター画像の表情を増やした

このブログでは、吹き出しとキャラクター(アバター)のイラストを使用しています。
最近のブログでは、こういった吹き出しを使用したデザインも多くなってきています。
しかし、当ブログのキャラクターイラストですが、1種類の表情しか描いていませんでした。
怒っているセリフでも、表情が満面の笑顔など、違和感のあるイラストになっていました。
なので、以下のように喜怒哀楽を基準に表情を描き分けました。

 

1種類だけの表情よりも表情豊かに描かれている方のが、ブログの世界観に引き込まれて楽しく記事を読むことができます。
顔写真を使用しているブログも多く見かけますが、こちらも1種類だけではなく、色々な表情で撮影してみてください。

ちなみにこの吹き出しはWord Balloon」というWordPress用のプラグインを使っているよ!
有料版を使用すれば、沢山のアバターを登録できるよ!無料版でも十分使えるからおすすめ!
Taku
Taku

⑧ムダなセリフ(会話)は減らした

このブログの最大の売りは、記事をキャラクターと一緒に進行していくところにあります。
しかし、今までの会話の内容を読み返すと、相づちなどの短いセリフが多くありました。
例えばこんな会話↓

最近仕事が忙しくてさ〜。
Taku
Taku
リュウイチ
リュウイチ
そうなのか。
残業ばかりで大変なんだよね〜。
Taku
Taku
リュウイチ
リュウイチ
それはキツイな。
でも、頑張るしかないよね…。
Taku
Taku
リュウイチ
リュウイチ
そうだな。でも、無理しないで定期的に休憩するとかしろよな。
うん…。
Taku
Taku
とにかくムダになげぇ!!
Taku
Taku

全体的に数文字程度の短いセリフが多く、ダラダラと書いてあるので、読む気が失せますよね。
こちらもムダな改行同様、ページのスクロール量が多くなり、離脱率が上がってしまいます。
なので、極力セリフを簡潔にまとめて、シンプルに読みやすく書き換えましょう。
書き換え後はこんな感じ↓

最近仕事が残業ばかりで忙しくてさ〜…でも頑張るしかないよね…。
Taku
Taku
リュウイチ
リュウイチ
そうだな。でも無理しないで定期的に休むとかしろよな。

7つもあったセリフを、たった2つで終わらすことができました。

リツキ
リツキ
おぉ!シンプルになって、すごく読みやすくなったね〜♪

まとめ

今回はブログ全体を客観的に見直して、自分以外の人にも目を通してもらいました。
「記事を作ってはい終わり!」ではなく、公開後も定期的に見直して、こまめな修正をするようにしていきましょう。
そして、自分で気が付けないミスも発見できるので、恥ずかしがらずに身の周りの人に見てもらってくださいね。

最後まで読んでいただきありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


SEARCH

検索

SPONSOR LINK

スポンサーリンク

PROFILE

プロフィール

プロフィール画像

Taku

新米のWeb兼グラフィックデザイナー

専門学校でWebやグラフィックの技術を2年間学び、
印刷会社のデザイナーとして就職。

保育園児の頃からイラストを描くことが大好き。
オリジナルキャラクターのイラストを描いている。

ハマって得た「ムダ知識」も、
誰かの役に立つはずだと信じてブログを開設。

好きになると誰よりも詳しくなるタイプだが、
冷めるのも凄まじく早いのが難点。