スマートフォンサイトを表示する

  1. TOP
  2. アクセスアップに効果的!ブログをつかったホームページ活用術 : 第4回 ブログ記事をたくさんの人に読んでもらおう!

エキスパートコラム

アクセスアップに効果的!ブログをつかったホームページ活用術(全6回)

第4回:ブログ記事をたくさんの人に読んでもらおう!

執筆:浅木 輝美(WEBデザイン研究所BEE)

2019年4月1日更新

  • このエントリーをはてなブックマークに追加

閲覧数843views

このコラムをPDF形式でダウンロードする

WEBデザイン研究所BEEの浅木です。

このコラムでは、はじめてWEBのブログ機能について全6回で徹底解説していきます。

前回のコラムでは、ブログの使いかたポイントとして、ブログテーマとブログカテゴリによるブログ記事の整理について解説しました。
今回は、ブログの魅せかたポイントとブログの広めかたポイントをお伝えしましょう。

どうぞ最後までお付き合いください。

1)ブログの魅せかた:ブログページをキレイにスッキリまとめる

ブログ記事をただ思うままに更新していると、ブログページ(ブログ記事が一覧されるページ)の見え方が不揃いに見えてしまうことがあります。

たとえば、こんなブログページを見かけたことはありませんか?

ブログページでは、投稿されたブログ記事が上から順に並びます。このように一定の繰り返しによって出来上がるページにおいては、ある「規則性」を持たせるだけで、とても見やすくなります。

例えば、個々の画像サイズを統一したり、ブログ記事ごとの概要文のボリュームを揃えたりすることが、ここでいう「規則性」をつくることにあたります。

このブログページの例では、各ブログの一覧に使われている画像の大きさがあまりにもバラバラです。
縦長であったり横長であったり、はたまた小さかったり・・・。
これでは、ブログ記事の一覧全体が、なんだか凸凹に見えてしまいますね。

まずは、このサムネイル画像を同じ大きさに整えるだけでも、もっと統一感のある見え方になりそうです。

画像編集ツールで画像サイズを揃えよう!

それでは、さっそく画像サイズを修正しましょう!と、言いたいところですが、実は、はじめてWEBには画像を加工して整えるという機能がありません。

そこで、手軽に扱える画像編集ツールのCanva(キャンバ)という外部のサービスを使って、画像サイズを整えていきます。

Canvaは、はじめてWEBと同じようにPCとインターネット環境さえあれば、すぐに始めることができる便利なツールです。スマートフォンでも編集できますが、ここではPCでの操作を例に解説していきます。

Canva(キャンバ)

Point!

はじめてWEBのブログには、ブログページに表示される画像のサイズを自動で揃えてくれる機能がありません。ブログページ一覧時の画像サイズを揃えるためには、あらかじめサムネイルに使う画像サイズを決めておき、画像編集ツールなどで同じサイズにしたものを使うとブログページでの見映えが整います。このあたりは手間をかけた分、見映えに差がつくポイントです。

本コラムでは、執筆時点でのCanvaの操作画面を解説しています。Canvaは外部サービスにつき、操作画面は予告なく変更される場合があります。本コラムと実際の操作画面において相違がある場合は、操作の参考として置き換えながらお読みください。

Canvaを使う場合の推奨環境は、公式ページでご確認ください。

手順1:Canvaのアカウントを作成します

Canvaを使うためには、まずアカウントを作成する必要があります。
アカウント作成の仕方は、Canva公式のヘルプを参照してください。

手順2:Canvaを開きます

アカウントを作成したら、登録初期に表示される案内画面にしたがって、デザイン作成画面までたどり着いてください。

途中、スキップできる画面はスキップしてかまいません。

①登録後の流れでこのような画面が出てきたら、何か適当なデザインを選んでクリックします。

②選んだデザインの作成画面が開きます。(ここで開いたデザインはここでは使いません)

手順3:新しいデザインを作成します

今回はブログ用のオリジナルサイズで画像を作成するので、Canva規格のデザインを使わずに、メニューの「ファイル」から、新しいデザインを作成します。

ここでは例として、「1000px(幅)×645px(高さ)」カスタムサイズのデザインを作成します。(「px」は「ピクセル」と読みます。ピクセルとはデジタル画像のサイズを表す単位です。)

①メニューの「ファイル」をクリックし、②プルダウンが現れたら「新しいデザインを作成」をクリックします。

③プルダウンの内容が変わるので、「カスタムサイズ」をクリックします。

④カスタムサイズを半角数字で入力します。(ここでは幅1000、高さ645、単位pxで設定します)⑤「新しいデザインを作成」ボタンをクリックします。

⑥幅1000px、高さ645pxのサイズで新しいデザイン作成画面が開きました。

手順4:画像をアップロードします

次に、Canvaでサイズを整えたいブログ用の元画像を、Canvaにアップロードします。

サイドバーにあるアイコンの「アップロード」をクリックし、以下のいずれかの方法で画像をアップロードしてください。

  1. 「画像をアップロード」ボタンをクリックして、PC内の画像を開く。
  2. 画像フォルダをウインドウで開き、直接アップロードエリアにドラッグする。

どちらでも、画像のアップロードは可能です。

ちなみに、この手順では画像を一枚ずつアップロードしていますが、複数の画像を選択してアップロードすることもできます。たくさんの画像を一気に作りたい場合などは、まとめてアップロードするとよいでしょう。

アップロードで気をつける点は、適切なサイズの元画像を用意するということです。

小さな画像を大きく引き伸ばすこともできますが、それでは画像がボケるなどの画質劣化がおこります。アップロードする画像は、必ず完成画像サイズ以上のもの(この手順では幅1000px、高さ645px以上の画像サイズ)を選ぶようにします。

手順5:画像をデザイン作成画面に表示させます

アップロードした画像のサムネイルをクリックするだけで、画像がデザイン作成画面に表示されます。

あるいは、サムネイルを作成画面までドラッグすることでも、画像をデザイン作成画面に表示させることができます。

手順6:画像のサイズを変更します

続いて、デザイン作成画面に表示した画像サイズを変更していきます。

画像の四隅にある小さな白丸を斜めにドラッグすると、画像の大きさが拡大します。 デザイン作成画面の下地(白い余白)が見えなくなるまで拡大しましょう。

上下左右の位置は画像の中心あたりをドラッグすると画像全体が移動します。

配置とサイズが決まったら画像の外側どこかをクリックするか、キーボードのEnterキーを押して画像を確定します。

①画像四隅の丸印をドラッグして、画像サイズを大きくします。

②デザイン作成画面の余白がなくなるまで画像を拡大します。

③拡大ができたら、画像の外側をクリックするか、キーボードのEnterキーを押すと、編集中の画像が確定して固定されます。

④確定した画像を再度修正したい場合は、画像をダブルクリックすると固定が解除され、画像の位置や拡大率を再度調整することができます。

⑤画像が出来上がりました。「名称未設定」となっている箇所をクリックします。

⑥デザインで整えた画像には名前をつけておきましょう。

手順7:画像をダウンロードします

出来上がった画像を、PCにダウンロードしましょう。

①ダウンロードアイコンをクリックします。②ファイルの種類の「PNG」横にある下向き矢印をクリックします。

③ファイルの種類から「JPG」をクリックします。

④「ダウンロード」をクリックすると、ダウンロードの準備が始まり、ブラウザで指定された場所に画像ファイルとしてダウンロードできます。

これで、Canvaで作成した画像をPCにダウンロードすることができました。

手順8:画像をブログにアップします

それではCanvaからダウンロードした画像を、はじめてWEBのブログにアップしましょう。

今回は、ブログの記事に使用できるように画像サイズを大きめに作成したので、そのままブログ記事のアイキャッチ画像(ブログ記事の最初に登場する画像)を差し替えます。

修正するブログ記事のアイキャッチ画像のコンテンツをクリックで開き、そこで新しい画像をアップロードすると画像が差し替わります。

差し替える前の画像サイズが小さい場合には、アップロードした画像が以前の画像の幅に合わせて小さく表示されてしまいます。この場合は「ページに合わせる」ボタンをクリックして、画像本来の最大幅まで拡大します。

ブログのアイキャッチ画像が新しくなりました。

ブログページを見てみると、一覧の画像が新しい画像に差し替わっていますね。
あとは他のブログ記事の画像サイズも、それぞれ同じ要領で整えておきましょう。

サムネイルの画像サイズが整って、見やすくなったブログページ。

もし、ブログ記事に使用している画像はそのままにしておき、ブログページの画像サイズだけを整えたいという場合は、ブログ記事の設定エリアにあるブログページの「プレビュー」の編集エリアで画像をアップロードします。

この方法でも、ブログページのサムネイル画像を設定することができます。

Point!

画像にはいくつかの形式があります。
Canvaのダウンロード画面では、PNGという画像形式が推奨となっていますが、今回のような多彩な色彩を持つ写真画像などの場合は、PNGだとファイルサイズがかなり大きくなってしまいます。ファイルサイズの大きな画像をブログ記事などに使用すると、ページが重くなり、開くスピードにも影響がでてきます。

単色などで構成されたデザインであればPNGでもファイルサイズがそれほど大きくなることはありませんが、複雑な色を持つ写真素材などの場合は、PNGよりもJPGという形式を選択するとファイルサイズを抑えることができます。

ダウンロードする際の画像形式は、使用する素材などに合わせて切り替えることがオススメです。

ブログの概要文を整える

それでは次に、ブログページの概要文を見てみましょう。

例にあげたブログページの概要文を見てみると、それぞれ5行だったり2行だったりと文字数がバラバラで、ここもまた不揃いに見えますね。

ブログページでは、概要文の文字数を整えると、より統一感がでてきます。

はじめてWEBのブログページでは、ブログ記事本文で使われている見出しや段落の構成から区切りを自動で判断し、概要文が作成されます。しかし、この時の文字数は固定されていません。

概要文の文字数を整えるためには、ブログ記事の「概要」設定エリアの設定によって、概要文を整える必要があります。

手順1:ブログ記事から本文の一部をコピーします

それでは実際に概要文を設定してみましょう。

ブログ記事をプレビュー(編集画面ではなく、実際に閲覧する画面)で開き、本文からある程度の文字数(ざっと200文字くらいに見える程度)までをコピーします。

手順2:「概要」の設定エリアにコピーした文章を貼り付けます

コピーした文章を、設定エリアのブログページ「概要」編集エリアのボックスに貼り付けます。
このとき、改行は必要ありません。改行や余分な余白はすべて削除して、文章全体をギュッと詰めてください。

手順3:文字数カウンターを見ながら文字数を整えます

「概要」の設定エリア右下にある文字数カウンターの数字を見ながら、行単位、あるいは文字単位で、文字を削除していきます。

概要文の文字数は、自分で決めた文字数のルールでかまいません。
ちなみに、筆者の推奨は100~150文字程度です。

決めた文字数まで文章がカットできたら、そこで設定エリアの「保存」ボタンをクリックし、概要文を確定させます。

ここでは97文字まで文章の文字を削除し、最後に続きを表す意味で「...」のように半角のピリオドを3つ追加しました。(97文字+3文字で合計100文字になります)

文字の編集が終わったら、忘れずに設定エリアの「保存」ボタンをクリックしましょう。
あとは他のブログ記事も、それぞれ同じ要領で概要文を整えておきましょう。

これでブログページの調整は完了です。
ブログページの画像の大きさと概要文の文章量がすべて整い、とても見やすくなりました。

今回は、ブログページの不揃いな見え方を解説するために、あえて後から修正する手順で解説しましたが、最初から画像サイズやブログの概要文を意識しつつ整った形で投稿を続けると、後々修正する手間がなくなります。

ぜひ、ブログページの見え方にも気を配りながら、ブログ記事を作成してみてください。

2)ブログの広めかた:ブログを書いたらSNSでシェアしよう!

どんなに一生懸命書いたブログ記事でも、ただ書いただけでは誰も気がついてくれません。

もしかすると、「自分だけが知っているブログ」のまま、時間だけがどんどん過ぎていくかも・・・。

仮に、毎日欠かさずホームページをくまなくチェックしに来るような熱烈なファンがいれば別ですが、認知度が低いところからコツコツとお店の情報を発信していくなら、そんなことも期待できそうにありません。

そこで、FacebookやTwitterなど、ブログ以外の場所でブログをPRする活用をオススメします。

ブログ記事にSNSのシェアボタンを表示させておくと、SNSでのシェアが簡単で手軽になります。

もちろんブログの読者がシェアしてくれることが一番ですが、このシェアボタンはブログを書いた本人でも使うことができます。まずは自分から積極的にSNSの場でブログ記事をお披露目しましょう。

FacebookやTwitterでブログ記事を自らシェアするには、それぞれのアカウントを事前に取得しておく必要がありますが、ここではそれぞれのSNSをすでに利用しているという前提で解説を進めていきます。

ブログ記事のシェアボタン

ここでは、ブログ記事をPCでシェアする手順について解説していきます。

一応、スマートフォンでもほぼ同様の流れですが、操作画面や表示画面に多少の違いがあります。スマートフォンで操作する場合は、本コラムの解説をもとに、画面の違いを置き換えながら進めてみてください。

投稿が完了したブログ記事をプレビュー(編集画面ではなく、実際に閲覧する画面)で開き、シェアボタンの箇所までスクロールで移動します。

シェアボタンは、ブログ記事の本文の最後にあるブログカテゴリやコメントなどのあたりに表示されています。もしシェアボタンが表示されていない場合は、ブログ管理画面の「各種設定」や、ブログ記事ごとの「詳細設定」で表示させることができます。

(詳しくは第1回のコラム、または第3回のコラムを参照してください。)

①プレビューでシェアしたいブログ記事を開き、シェアボタンのある場所までスクロールします。

②シェアボタンのある場所を表示します。

ここでブログ記事を表示しているブラウザが、FacebookやTwitterでもログイン状態であることを確認してください。ログインが済んでいると、スムーズにブログ記事のシェアができます。

(ログインできていないブラウザでシェアボタンをクリックすると、そこでまずSNSへのログインを促す画面が開くことになりますので、手間が必要になります。)

ブログ記事をFacebookでシェアする

Facebookのシェアボタンをクリックしてシェアする流れは、以下の通りです。

①Facebookのシェアボタンをクリックします。

②シェアするブログ記事にそえる文章を書き加えます。

③シェアするページを選択する場合は左上のボタンをクリックします。ここではとくに変更せず個人の「ニュースフィードまたはストーリーズでシェア」のままにします。

④ニュースフィード、ストーリーズのどちらでシェアするかを選び、「Facebookに投稿」ボタンをクリックします。

Facebookのニュースフィードに、ブログがシェアされました。

Facebookでシェアした投稿の画像をクリックすると、シェアしたブログ記事のページが開くように自動でリンクが設定されています。

これでFacebookのお友達にも、ブログ更新の情報を見てもらえるようになりました。

ブログ記事をTwitterでシェアする

TwitterのシェアもFacebookの流れと似ていますが、Twitterの場合はツイートとしての投稿しかないので、さらにシンプルな流れです。

Twitter のシェアボタンをクリックしてシェアする流れは、以下の通りです。

①Twitterのシェアボタンをクリックします。

②ツイートの内容は編集できます。(ここでは編集せずに、そのまま投稿します)

このとき、ツイートに記載されたURLを消さないように気をつけましょう。

赤いアンダーラインが、シェアしたブログのURLです。

ここの文字を削除したり変えてしまうと、ブログ記事の画像が表示されなかったり、ブログ記事へのリンクが外れたりしますので注意してください。

ツイートする文章を修正したら、「ツイート」ボタンをクリックします。
これでTwitterでも、ブログ記事がシェアされました。

Facebookと同じように、画像をクリックするとシェアしたブログ記事ページが開きます。
これでTwitterのフォロワーにも、ブログ更新の情報を見てもらえるようになりました。

まとめ

浅木

第4回のコラムはいかがでしたか?

今回は実際に質問をよくいただくブログ画像の作り方を中心に、ブログページを整えるポイントを解説しました。

とくに、今回ご紹介したCanvaは画像サイズを整えるだけではなく、画像に文字を追加したり、複数の画像でコラージュを作ったりすることもできます。

とても便利で使いやすい画像ツールですので、ぜひはじめてWEBのブログ更新にも活用してください。
Canvaでわからないことは、ぜひ公式のヘルプページなどでチェックしてみてくださいね。

あと、SNSを使うと、それぞれの場所で知ってもらえる機会が増えます。今の時代、SNSを切り捨てて考えるのはあまりにもったいないことです。今回のコラムを参考にぜひブログとSNS同時活用にもチャレンジしてみてください。

それでは次回のコラム「コメント機能を活用してブログのファンを作ろう!」で、またお会いしましょう。
最後までお読みいただきありがとうございました。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

浅木 輝美(あさき・てるみ)

浅木 輝美(あさき・てるみ)

WEBデザイン研究所BEE 代表/JimdoExpert
https://www.bee-custom.com/

2011年よりウェブ制作を開始。北海道札幌市を拠点に、Jimdoのデザインカスタマイズによって多くの制作実績を持つ。現在もホームページ制作や運営に関する相談・依頼を、全国の個人事業や一般企業から受けている。コストを抑えつつ手軽に更新できるJimdoに惚れ込み、Jimdoの熱烈なファンのひとりでもある。

著書に『いちばんやさしい Jimdo の教本 人気講師が教える本格ホームページの作り方』(共著、インプレス)。

いちばんやさしい Jimdo の教本 人気講師が教える本格ホームページの作り方

  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2019/4/7~2019/4/13]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ