記事作成日: 

記事更新日: 

GIMPを使って個人サイト制作に必要なfaviconやキャプチャ画像を作成した

静的サイトジェネレーターJekyllを使って個人サイトを作成し公開した後のことを考えなければならない。「個人サイトは見てもらえない。」または「個人サイトは読んでもらえない。」と考える人が多い。まぁ事実の部分が強い。しかし、個人サイトを運営することで得られるメリットに注力したいと考えている人がこのウェブサイトを見ているはずと筆者は考えている。個人サイトでも見てもらえる、読んでもらえるように施策を打つ。個人サイト運営においても、PV数の獲得につなげるためにSNSの利用は切っても切れない関係となっている。

SNSを利用して際に重要になるポイントを以下に記す。

  1. インプレッション
  2. エンゲージメント
  3. リンクのクリック

個人サイト運営者、ブロガーが最も欲しているのは3番目のリンクのクリックだ。しかしリンクのクリックをしてもらう為にはインプレッションをまずは稼ぐ必要がある。インプレッションを稼ぐ為に必要なことはハッシュタグの利用が好ましい。SNS上ではハッシュタグで検索をしている人が多い。ただハッシュタグで検索をしている人が多いと言ってもある程度認知されている単語以外をハッシュタグ化したところで読まれることは稀なのだ。SNS上で認知されている単語をハッシュタグ化したところでフォロワー数の少ない人の投稿を見るのか?と言われると読まれないと断言できる。ではどうするのか?SNS上の投稿で目立つしかないのだ。SNS上の投稿で目立つ施策が公開する個人サイトに記載しておいた方がよい、OGP : Open Graph Protocol (オープングラフプロトコル)Twitter Cards(ツイッターカード)の設定だ。

Facebook, Facebook Pageを利用するなら公開する個人サイトにOGPの設定をしておく方が良い。The Open Graph Protocolを読んで概要だけでも理解することだ。シェアデバッガー を使用することでOGPの設定の可否がわかるのでオススメだ。

Twitterを利用するなら、公開する個人サイトにTwitter Cardsの設定をしておく方が良い。Twitter Cardsの概要を理解する上で一度は読んでおく必要がある。Twitter Cards Validatorを使用することで個々のページに設定したTwitter Cardsのエラーチェックができるのでオススメだ。

OGP, Twitter Cards の設定はウェブサイトのhead部に記載すると良い。

OGP, Twitter Cardsの設定を終えたらSNS上で投稿の目立つ化を行う為のもう一つの施策である個人サイトのイメージ画像(キャプチャ画像)を準備する。フリーの画像を使っても良い。ただライセンスや面倒なことにもなりかねない可能性を考慮して、筆者は自作のイメージ画像(キャプチャ画像)をGIMPで作成した。はフリーで使える画像編集ソフトだ。筆者はOGP, Twitter Cards ともに同じ画像を使用している。

当ウェブサイトのSNS用のイメージ画像(キャプチャ画像)だ。GIMPで1200×630で作成した。フォントに関してはフリーで使用できるこころ明朝体を使用した。作成したSNS用のイメージ画像(キャプチャ画像)は、assetsフォルダーにimgと命名したフォルダーを作成し、ここに保存した。

faviconの設定はhead部に記載すると良い。faviconの拡張子は.icoなのだが.pngでも.jpegでも指定することができる。faviconの設定に関してはスマホでも表示できるようにいくつかのサイズを作成した方が良いということだ。なので大きなfavicon画像を作成することに着手した。筆者が個人サイトで使用しているfavicon画像のサイズをお伝えしておく。

  • 256x256
  • 192x192
  • 180x180
  • 128x128
  • 96×96
  • 32×32
  • 16×16

筆者が個人サイトに表示するfavionをGIMPを使ってどのように作成したのかを書き残しておく。

  1. 256×256のfavicon画像を作成する。GIMPのエクスポート機能を使って.pngで保存した。
  2. 256×256の.png画像を各々のfavicon画像サイズにリサイズする。エクスポート機能を使ってそれぞれを保存した。

フォントに関してはSNS用のイメージ画像(キャプチャ画像)と同じフォントを使用した。作成したfavicon画像はassetsフォルダーにfavと命名したフォルダーを作成し、そこに保存した。これでスマホからのアクセスでもパソコンからのアクセスと同じようにfaviconが表示された。

著者:

【広告】

独自ドメインを取得するならオススメは

【広告】

レンタルサーバーを契約するならオススメは

Webサイト運営の向上を目的にcookieを使用しております。このバナーを閉じるか、当Webサイトの閲覧を継続することでCookieの使用を承認していただいたものとさせていただきます。

このWebサイトのCookieの詳細を確認する