ブログを始めてしばらく経つのですが、アイキャッチ（サムネイル）をあまり作らずにやってきました。
でも、「もっと多くの人が読んでくれたら嬉しい！」という気持ちが強くなってきたので、アイキャッチ（サムネイル）画像を作ってみました！
▶こちらの記事を参考にさせていただき、自分用に変更を加えて作成しました。
【5分で画像付解説】ブログ初心者が80記事書いてわかったおしゃれサムネイルの作り方 - Life Info Nerd
改善の余地はあるかもしれませんが、写真付きで手順をまとめてみます。
同じようなアイキャッチ初心者の方の参考になったら嬉しいです◎
アイキャッチとは？
アイキャッチはブログやSNSで記事を目立たせるための「サムネイル画像」のことです。はてなブログではトップページや購読リスト、シェア時などに目にします。
なぜ1200×630pxにしたの？
アイキャッチのサイズはいろいろあると思いますが、
1. SNS(X, Facebook, Threadsなど）でちょうどよく表示されるサイズ
Xでブログ書きました！と投稿することがあります。
2. Google Discover(Google砲)対策になる
Google砲はGoogleのアプリやGoogle Chromeなどで紹介されアクセス数が増えることを言います。
Googleが高品質な画像を推奨していて、それが1200px以上の画像のようです。
（表示速度などサイトの作りこみとかも大切みたいなので紹介される気がしないですが笑）
以上からこのサイズを採用してみました！
作り方（今回はPCで作成）
1. アイキャッチの背景に使用する画像を用意する。
今回使用するCanvaの中でも探すことができますが、今回はO-DANというサイトからもってきました。商用利用可の写真もあります。
自分で写真を撮った時にはその写真を使う予定です◎
2. Canvaを開く。
Canvaを開きます。
※今回は使用していませんが、はてなブログ記事編集画面の「編集オプション（歯車マーク）」からも開けるみたいです（下図）。作成が完了すると自動ではてなブログの編集画面にアップロードされるそうです。
3. Canvaにログイン（初めての方はアカウント登録）
4. 「カスタムサイズ」を押す。
今回はトップページから選びましたが、左上の「作成」の中にもカスタムサイズと言う項目があります。
5. 幅1200高さ630を入力して新しいデザイン作成を押す。
6. 用意した画像をアップロードする。
編集画面の左の方の「アップロード」から、「ファイルをアップロード」を押して、背景用に用意した画像をアップロードする。
アップロードした画像が一覧に表示されたら選択すると作業エリアに表示されます。
7. 画像をキャンバスに合わせ、透過度を調整する。
画像のフチの丸を引っ張ってキャンバスに合うよう調節します。画像自体を動かすときは画像を選択した状態でドラッグです。
透明度は上の方のチェック柄のようなマークを押して設定します。
薄めが好みなので、38くらいに設定しました。
8. テキストや枠を配置する。
テキストを入れます。左の「テキスト」から「テキストボックスを追加」。
フォントや文字のサイズの変更は上の所からできます。
フォントは「けいふぉんと」
上の小さい文字はサイズ35、下の文字はサイズ56で作成しました。
文字を選んで動かすと、画像の中央に差し掛かったタイミングで補助線（ガイド線）が表示されます。それを目印にすれば画像の真ん中に配置できます。
枠を配置します。左の「素材」から四角い図形を選びます。
図形の中の色は「カラーなし」
ストロークスタイル（枠）を実線にして黒色にします。
※真ん中の丸印は線の色で、最初は表示されていませんが、実線を選択すると表示されます。
ストロークの太さ（線の太さ）は4にしました。
特にはてなブログでは正方形に画像が切り取られることがあるので、文字は中央に配置するようにしました。
枠も端が見切れていますが、付けたかったので付けました（笑）
9. 画像を保存する
画面右上の「共有」から「ダウンロード」を選択し、ファイルの種類を選択してダウンロードできます。JPEGでダウンロードしてみました。
SEO的に意識したこと
SEOは「Search Engine Optimization（検索エンジン最適化）」の略で、Googleなどの検索エンジンで自分のブログやサイトが見つけやすくなるように工夫することを指します。
ブログの内容が検索結果の上位に表示されると、多くの人に読んでもらいやすくなります。
正直、SEOについてよくわかってませんがアイキャッチ画像を貼る時に気を付けてみたことを書いていきます！
1. 画像のファイル名を変えた
プロジェクト名を付けていない場合Canvaからダウンロードした画像は「名称未設定のデザイン.jpg」などになっていると思うのですが、
画像のファイル名はローマ字 or 英語表記 & ハイフンでつけるとSEO的に有利とのこと。（例: hatena-blog-eyecatch.jpg)
Googleなどの検索エンジンは画像ファイル名もチェックしているので画像検索やDiscoverで表示されやすくなるようです。
2. alt属性を入力した
ブログに画像を貼る時にalt(代替テキスト)を入力しました。Googleはaltを参考にして画像の内容を把握するそうです。画像が表示されなかったときなどにも表示されるみたいです。
アイキャッチ画像には記事のタイトルとちょっと変えて「はてなブログのアイキャッチ画像を1200×630で作成したサムネイル例」と入力してみました。
3. 軽い画像
Google Discoverでは長辺1200pxの画像が推奨されていますが、ファイルサイズが大きくなると読み込み速度が遅くなるかなと思ったので、PNGではなくJPEGで作成しました。
今回のアイキャッチ画像はPNGでは600KB程度で、JPEGが80KB程度でした。
4. アップロードのしかた
はてなフォトライフにアップロードしてからブログに載せてみたのですが、はてなフォトライフ側で長辺1200pxでアップロードしていても、ブログに載せる際に800pxに変換されてしまっていました。
なので、アイキャッチ画像は記事編集画面の「写真を投稿」を押して直接アップロードすると1200pxになるので良いと思います。
今はこんな感じです！今後改善していったらまた書きたいと思います～！
