この記事では、CanvaとMedibang Paintを併用した、はてなブログ（テーマ：Minimalism）のアイキャッチの作り方を
たくさんのスクリーンショットを用いて
デザインを知らない方にもわかりやすく解説しています。
（かくいう私もグラフィックデザインやウェブデザインは素人です。
また、はてなブログではない方には参考にならないかもしれません）
- 制作環境
- こんなアイキャッチを作ります
- アイキャッチの作り方
- （３）画面左のメニューから「背景」をクリック
- （４）ノートの紙面のような背景画像を選ぶ
- （５）正方形の線の色を変更する（任意）
- （６）正方形の線を移動させる
- （７）正方形の中の文字を消す
- （８）画像をダウンロードする
- 「後編」に続く
制作環境
OS：Windows10
はてなブログのテーマ：Minimalism
Canva（キャンバ）とMedibang Paint（メディバンペイント）を使用。
CanvaとMedibang Paintをすでにご存知の方は「こんなアイキャッチを作ります」に飛んで下さい。
Canva（キャンバ）とは？
Canvaとは、グラフィックデザインを作成できるウェブサイトです。
ソフトをダウンロードして使うのではなく、https://www.canva.com というURLにアクセスして使います。
パソコンからでも使えるし、iOS版、Android版のアプリもあります。
パソコンから使う場合、ソフトをダウンロードする必要がないので動作が遅くなる心配がありません。
Canvaを使えば、グラフィックデザインの知識がない人でも、Photoshopを使ったことがない人でも簡単にオシャレなブログのアイキャッチを作れます。
有料版もありますが、無料版でも十分に使えます。
私もブログのアイキャッチの作り方が全く分かりませんでした。
ブログのアイキャッチって
- 画像のサイズ設定を間違えると正しく表示されない
- 文字の配置や大きさを間違えると正しく表示されない
- そもそもどうすればオシャレなデザインにできるのか分からない
ので、ブログ初心者には難易度が高いです。
Canvaにはオシャレなテンプレートがたくさんあり、それを使えばいいだけなので助かりました。
この記事では取り上げませんが、InstagramやPinterestの投稿用画像もCanvaで簡単に作れます。
SNSに投稿する画像はサイズ設定を間違えると写ってほしい部分が切れてしまいますが
Canvaで「Instagram」や「Pinterest」と検索すればそのSNSに対応したサイズのオシャレなテンプレートがたくさん出てきます。
この記事で紹介するアイキャッチは無料版で作れますので、ぜひ会員登録してみて下さい（方法は割愛いたします）。
Medibang Paint（メディバンペイント）とは
Medibang Paintとは、無料のペイントソフトです。
主に漫画やイラストを描く人が使うソフトですが、ブログのアイキャッチも作れます。
（この記事では取り上げませんが、もちろんVRoidのテクスチャも作れます）
この記事では、Canvaでアイキャッチのデザインを作ってからメディバンペイントで文字を入れるという作り方を紹介しています。
メディバンペイントはパソコンかスマホにダウンロードして使うアプリです。
パソコンはWindows, Mac, スマホ・タブレットはiPad, iPhone, Androidに対応しています。
もちろん全バージョン無料で、有料プランはありません（本当にいいの！？って感じ）
インストールはこちらの公式サイトから（方法は割愛いたします）
PC（Windows/Mac）
メディバンペイント Pro | メディバンペイント(MediBang Paint)
iPad
メディバンペイント for iPad | メディバンペイント(MediBang Paint)
iPhone
メディバンペイント for iPhone | メディバンペイント(MediBang Paint)
Android
メディバンペイント for Android | メディバンペイント(MediBang Paint)
こんなアイキャッチを作ります
これと同じアイキャッチを作ります（実際にこの記事のアイキャッチにしています）
好き嫌いはあるかと思いますが、ご覧の通りどんな内容の記事でも使えるデザインです。
このブログでは（現時点では）Minimalismというテーマを使用しているのですが、アイキャッチの枠に文字がキレイに収まります。
デザインをきちんと作っていないと、以下のようにアイキャッチの枠から文字がはみ出してしまいます。
私はウェブデザインの専門知識もないですし、アイキャッチの枠内に文字を収める方法が分からず苦労しました。
ですが、Canva無料版で使えるあるテンプレートを使うことで簡単に枠内に文字を収めることができるようになりました。
（Minimalism以外のテーマ、はてなブログ以外では試していません）
同じものを真似して作ってもOK
ブログやSNSに使用してもOKなので、皆さんも作ってみて下さい。
アイキャッチの作り方
（１）Canvaにログインし、検索ボックスに"blog"と入力する
カタカタで「ブログ」だと目当てのテンプレートが出てきません（1回試しました）
（２）"HAPPY MOTHER'S DAY"というテンプレートをクリックする
カーネーションの写真に「HAPPY MOTHER'S DAY」と書かれているものです（左下にあります）。
クリックするとこういう画面に切り替わります。
（３）画面左のメニューから「背景」をクリック
下にスクロールすると「背景」というメニューがあるのでクリックします。
（４）ノートの紙面のような背景画像を選ぶ
Cream Horizontal Thin Stripes Backgroundという画像を
画面右側にドラッグ＆ドロップします。
「最近使用した項目」あるいは「すべての結果」からCream Horizontal Thin Stripes Backgroundという、ノートの紙面のようなクリーム色の画像を探して下さい。
見つからなかったら「背景を検索」に「notebook」と入れて検索して下さい。
見つかったら右側の「HAPPY MOTHER'S DAY」にドラッグ&ドロップして下さい。
ドラッグ＆ドロップ後、カーネーションの写真を画面下側にドラッグ&ドロップするとノート紙面の画像が現れます。
（※ ”P保存”という赤いボタンはPinterestのものです。
ブラウザにPinterest保存ボタンのアドオンを入れていない人には関係ありませんので無視して下さい）
このように、画像から消したい要素は下にドラッグ＆ドロップすれば消去できます。
（５）正方形の線の色を変更する（任意）
今回は、正方形の線の色を灰色に変更します（もちろん他の色に変えてもOK）。
白のままでもいいという方は飛ばして下さい。
（５－１）正方形の白い線をクリックする
（５－２）画面左上のカラーパレットをクリックする
（５－３）画面下にスクロールして「デフォルトカラー」を表示する
（５－４）デフォルトカラーの1行目、左から2番目の濃い灰色をクリックする
線の色が変わりました。
（６）正方形の線を移動させる
完成図はこんな感じです
（６－１）左上の点を斜め上にドラッグ＆ドロップする
（６－２）右下の点を斜め下にドラッグ＆ドロップする
これで完成です。
（７）正方形の中の文字を消す
「HAPPY MOTHER'S DAY」「お母さんありがとう」などの各フレーズを画面下にドラッグ＆ドロップして消去します。
Canvaで新しい文字を入れることもできますが、私はいつもメディバンペイントで文字を入れています。
（８）画像をダウンロードする
ダウンロードした画像をメディバンペイントで開いて文字を入れていきます。
（この画像を保存しておくと、次回以降はCanvaの全工程を飛ばして文字だけ入力すればよくなるので作業を効率化できます）
（８－１）画面右上の「ダウンロード」をクリックする
（８－２）「ファイルの種類」で「PNG（推奨）」をクリックしてダウンロード
「後編」に続く
「メディバンペイントで画像を開く」以降は次の記事（後編）をご覧下さい。
（4月21日20時公開予定）
https://satorepo.com/how-to-make-blog-eye-catch-01-second-part
【こちらもオススメ】