1カラムページの画像の活用方法

アクセスアップ

ワンカラムページの画像配置でスマホでも読みやすい記事を作る

更新日:

ワードプレスの良いところは記事のデザイン(装飾)も出来るところ、今回は平坦なブログ記事を画像を使って読みやすくしてみましょう。

 

さて、このページをご覧になって気が付いたと思いますけど

1カラムでページを作ってます。

 

1カラムだと記事幅に余裕があって、こんな感じで挿絵を入れても全然余裕です!

何度もプレビュー見ながら画像の配置と余白を確認してみると画像の横の文章量を減らせばスマホでもいい感じで表示されます。

今やスマホユーザーが主流ですから画像を入れることで読みづらくなったら意味がありません。

 

今回は記事幅が広がったことで利用範囲の増えた画像の取り扱いについて書いてます。最後までお付き合いよろしくです。

 

画像の活用で記事の読みやすさをアップ

ブログで画像といえば、思い浮かぶのはアイキャッチですよね?

このページのアイキャッチ、バカみたいに大きいでしょう!最初見たとき「これはヤバいんじゃない?」と思ったほど。

でも見ていたら慣れちゃいました、今では「インパクトあっていいんじゃない」と思ってます。

 

メモ

アイキャッチとはブログのページ先頭などにある画像のことで、読者の目を引くために設置します。サイトを訪れるユーザーのほとんどがすぐに離脱してしまうのでアイキャッチに関連性の高い画像などを使ってユーザーの興味を引くことに使います。元々はテレビなどで使われてる手法です。

 

スマホでは普通に表示されるので安心してください。

 

文字入りアイキャッチはCanvaで作ると便利

このアイキャッチはCanvaという無料サイトで作りました。

作ったというか、画像を選んで文字入れしただけなんですが良い感じでしょう?文字入れだけならフォント選んで文字を入れ替えるだけだけなのでお手軽です。

まだ慣れないので少し時間がかかりましたが、慣れれば5分もかからんなぁこれは。

今後は大いに利用する予定です。

 

今回はPNGで保存すると重たいので、JPEGで保存ブログにアップした後ワードプレス画像編集でさらに減量して65KBにしました。
(その分鮮明さには欠けてしまいました、その後はPNGを圧縮してます。)

1カラムの場合は大きい画像を扱うことが多くなるので画像サイズには気を使います。

装飾に気を使いすぎてサイトの速度が落ちたりしたらガッカリですよね。

Googleさんもスピード重要視してますからね。

 

 

Twitterでの画像表示

別記事の画像です。

Twitterのタイムラインはどんどん流れていくので画像にテキストをいれていると、内容が分かりやすくなりますね。

ツィッターではこんな感じで表示されました。ツィッターサイズで合わせたのでバッチリですね。

はてブの恩恵が見込めない今はTwitterからの流入がふえてくれると嬉しいのです。

 

Canvaは無料でしかも使いやすいので一度お試しください。

 

 

画像は圧縮してから設置します

サイトトップのアイキャッチの様子は・・

残念、両側がカットされてます。文字がどちらかに寄り気味の場合は注意が必要ですね。

これから色々試していけば上手になっていくでしょう。

 

Canvaから生成された画像をそのまま使うとかなり重いので、TinyPNGで圧縮しておきましょう。

NAGO
ひと手間かけるだけで凄く軽くなりますよ。

 

ワードプレスに画像をアップロードすると自動で圧縮してくれるプラグインも2つ使ってます。

サイト閲覧する立場になれば重いのは罪です。

 

 

会話風吹き出しを使う

はてなブログでも使っていた吹き出し。

ワードプレスでも使えます、AFFINGER4では記事作成画面で簡単に使うことが出来ます。

NAGO
会話ボタンを押した後セリフを入力するだけ!

あ、これサイトのキャラクターです。はてなブログでも使っていた吹き出しですが、WordPressテーマのAFFINGER4を使えば編集画面から1クリックでコードを貼り付けることが可能です。手間がはぶける分記事に集中できるという事ですね。

 

今回からキャラもアプリを使わず自作しました。せっかくペンタブ買ったんで少しは使わないとね。漆さんみたいに上手なイラストなんて描けるわけないです。僕の場合はらくがきみたいな漫画キャラですが後3人ほど増やしたいと思っています。

 

こういった会話風吹き出し効果のひとつに、書きにくいことをキャラに代弁してもらうということがあります。

会話Aボタン[st-kaiwa1 r ]にこんな風に【r】を加えることで会話風にすることができるよ
NAGO

AFFINGER4では右寄せにすることも簡単です。ちなみに画像は反転したものを使ってます。

同じ右向きの画像を使ってしまうと違和感しか残りません、ひと手間を惜しまずキャラの向きもかえておきましょう。

 

管理人キャラを使う事で名前を覚えてもらったり親近感が増すこともあります。

 

吹き出しは適度に使うことで効果が上がる

長文になると読んでいる方も疲れてきます、そのため見出しの下に一定の間隔で画像をはめこんだりします。

関連する画像を探すのもたいへんなので、会話風ふきだしを利用するのもいいでしょう。

ただ使いすぎると効果が薄れます。

 

画像が並ぶとウザいのと同じです。

 

 

冒頭文に挿絵をいれて離脱を防ぐ

サイトを訪問したユーザーは一瞬でこのページを読み進めるか他のサイトに飛ぶか判断します。

文章も斜め読みなので出来るだけ文章を左に寄せておきました。

余白をいっぱい取って小学生でも一瞬で理解できるように本文の内容を書きます。

 

 

離脱するひと

 

冒頭の誘導文がつまらなかったら

ちょっと見ただけでサヨナラされてしまいます。

 

 

そんな悲惨なことにならないように冒頭に書く文章は簡潔にスッキリまとめましょう。

 

冒頭に挿絵をいれるだけで読みやすさがアップする

スマホで見てもらうと違いがわかります。スマホ画面はちいさいのでPCだと1行だけの文章もスマホだと3行4行と文字が詰まった状態で表示されます。

この状態が冒頭から続いたら・・・書かなくてもわかりますよね。

挿絵と余白をいれることでスッキリ読みやすくなります。

 

無料サイトのイラストを利用する

フリーのイラスト素材で有名なのがいらすとや、ここ使えばだいたいの記事に対応できると思います。

有名で人気となると「かぶる」確率が高くなるのはしかたありません。

それは画像サイトにも同じことが言えて同じモデルの画像をアチコチで見かけたりします。

 

僕が使っているのはイラストレイン、ちょいゆるめの画像が気に入りました。

僕の場合はペンタブも使っているので、オリジナルキャラとの併用になります。

でもね、イラストはできるだけ1つに絞って統一感をだしたほうが良いのは確かだと思います。

 

文章中の画像はプラグインからお手軽に

文章が長くなってイラストや吹き出し以外で画像を使うこともあります。

画像サイトから選んで引っ張ってくるのもめんどくさいですよね?

 

画像をプラグインから挿入できる

Lazare / Pixabay

 

pixabayというプラグインを使えば投稿画面から簡単に写真を記事に追加することができます。

これって地味に凄い事なんです。

今は、ワードプレスに変更して色々な機能を楽しんでいるところです。

 

引っ越しして記事を書くという姿勢が変わった

ワードプレスに移行して最初に行ったのは、アイキャッチを張る事でした。記事数は80程度だったので1記事づつ本文のチェックと合わせてのんびりと作業してました。

プラグインで一気にという方法もあるようでしたがアナログ派の僕にとって地道な作業は苦になりません。

次にアドセンスを設置、これはもう自動広告におまかせしました。

プラグインは一番最初に基本的なものは入れてましたが作業の都度必要なぶんを追加してます。

 

はてなブログとは又違った感覚で記事を書いてます。

記事を公開しても反応がとても薄いことに気が付きます、Twitterから多少の反応があったくらいでワードプレスでは記事を更新したところでアクセスが来るわけではないのです。

その点「はてなブログ」は凄いと思います。

更新した瞬間にアクセスがあるもんね、ワードプレスではそんなことはおきません。

記事を更新すればブクマが付くのは当たり前の環境でしたから、記事を装飾するとか考えたこともありませんでした。

 

とにかく記事を書いて更新は終わり

はてなでは、アクセスを稼ぐのは難しい事ではなく。スマートニュースやはてブの新着人気にもよく掲載されました。

ワードプレスに移行後、アクセスは100pv/日前後まで落ち込んでます。

5月から記事を書いて無い、80記事ほど削除したといえ僕の実力はこの程度だと気づきました。

全てははてなの恩恵の上のPVということです。

 

今記事を仕上げるのに意図的ではありませんけど、1週間程度かかってます。

もちろん他の作業と並行して書いてるんだけど、急いで更新する必要がなくなったので内容的には良くなってきてるんじゃないかなと思ってます。

長文を狙って書く必要は今でもないと思ってます。

しかしこれだけゆっくり記事を書いていると色々アイディアが浮かんできたりして自然と長文になってしまうんですね。

 

はてなの時は短くても更新して、足りない分はリライトで

と思ってましたが実際そういう記事はリライトする価値もなく削除してしまいました。

 

1カラムにしたのはスマホの画面と同じということ、これからはスマホの小さい画面を意識した記事を書く必要があると思います。

記事を書き終えたらスマホで一度チェックすることをおススメします。

スマホの画面でも、飽きさせず最後までよんでもらう記事がかけたらいいですね。

 

NAGOでした。

 

 

 

  • この記事を書いた人

nago

このサイトの管理人はブログ歴だけは長い普通の会社員です。今回はてなからワードプレスに戻ってきました。思っていた通りここは静かすぎる世界でした。

-アクセスアップ

Copyright© NAGOLOG , 2018 All Rights Reserved Powered by AFFINGER4.