Web
Analytics
VRoid Sitemap/VRoid記事のサイトマップ
【2021年】NHK語学講座の音声ダウンロードを購入できるサイト4つ紹介します
【2021年度】「おうちで英語学習2021」で約60日間再生可能!小中高生向けのNHKラジオ英語講座を紹介します
【VRoid】口の中の色をVRoidStudioだけで変更するには

【前編】真似OK!CanvaとMedibang Paint使用。はてなブログ(テーマ:Minimalism)のアイキャッチの具体的な作り方

この記事では、CanvaMedibang Paintを併用した、はてなブログ(テーマ:Minimalism)アイキャッチの作り方

たくさんのスクリーンショットを用いて

デザインを知らない方にもわかりやすく解説しています。

(かくいう私もグラフィックデザインやウェブデザインは素人です。

また、はてなブログではない方には参考にならないかもしれません)

 

制作環境

OS:Windows10

はてなブログのテーマ:Minimalism

Canva(キャンバ)とMedibang Paint(メディバンペイント)を使用。

CanvaとMedibang Paintをすでにご存知の方は「こんなアイキャッチを作ります」に飛んで下さい。 

Canva(キャンバ)とは?

f:id:satorepo:20210114225007j:plain

※イメージ(写真AC)

Canvaとは、グラフィックデザインを作成できるウェブサイトです。

ソフトをダウンロードして使うのではなく、https://www.canva.com というURLにアクセスして使います。

パソコンからでも使えるし、iOS版、Android版のアプリもあります。

パソコンから使う場合、ソフトをダウンロードする必要がないので動作が遅くなる心配がありません。

 

Canvaを使えば、グラフィックデザインの知識がない人でも、Photoshopを使ったことがない人でも簡単にオシャレなブログのアイキャッチを作れます。

有料版もありますが、無料版でも十分に使えます。

私もブログのアイキャッチの作り方が全く分かりませんでした。

ブログのアイキャッチって

  • 画像のサイズ設定を間違えると正しく表示されない
  • 文字の配置や大きさを間違えると正しく表示されない
  • そもそもどうすればオシャレなデザインにできるのか分からない

ので、ブログ初心者には難易度が高いです。

f:id:satorepo:20210104124054j:plain

※イメージ(写真AC)


 

Canvaにはオシャレなテンプレートがたくさんあり、それを使えばいいだけなので助かりました。

この記事では取り上げませんが、InstagramPinterestの投稿用画像もCanvaで簡単に作れます。

SNSに投稿する画像はサイズ設定を間違えると写ってほしい部分が切れてしまいます

Canvaで「Instagram」や「Pinterest」と検索すればそのSNSに対応したサイズオシャレなテンプレートがたくさん出てきます。

 

この記事で紹介するアイキャッチは無料版で作れますので、ぜひ会員登録してみて下さい(方法は割愛いたします)。

Medibang Paint(メディバンペイント)とは

f:id:satorepo:20210117181729j:plain

※イメージ(写真AC)

Medibang Paintとは、無料のペイントソフトです。

medibangpaint.com

主に漫画やイラストを描く人が使うソフトですが、ブログのアイキャッチも作れます。

(この記事では取り上げませんが、もちろん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)

 

こんなアイキャッチを作ります

これと同じアイキャッチを作ります(実際にこの記事のアイキャッチにしています)

f:id:satorepo:20210416232954p:plain


好き嫌いはあるかと思いますが、ご覧の通りどんな内容の記事でも使えるデザインです。

 

このブログでは(現時点では)Minimalismというテーマを使用しているのですが、アイキャッチの枠に文字がキレイに収まります。

f:id:satorepo:20210413225149p:plain

アイキャッチの枠内に文字がキレイに収まった状態

デザインをきちんと作っていないと、以下のようにアイキャッチの枠から文字がはみ出してしまいます。

f:id:satorepo:20210413225622p:plain

私はウェブデザインの専門知識もないですし、アイキャッチの枠内に文字を収める方法が分からず苦労しました。

ですが、Canva無料版で使えるあるテンプレートを使うことで簡単に枠内に文字を収めることができるようになりました。

Minimalism以外のテーマ、はてなブログ以外では試していません

 

同じものを真似して作ってもOK

ブログやSNSに使用してもOKなので、皆さんも作ってみて下さい。 

 

アイキャッチの作り方

(1)Canvaにログインし、検索ボックスに"blog"と入力する

 カタカタで「ブログ」だと目当てのテンプレートが出てきません(1回試しました)

f:id:satorepo:20210417131321p:plain


 

(2)"HAPPY MOTHER'S DAY"というテンプレートをクリックする

 カーネーションの写真に「HAPPY MOTHER'S DAY」と書かれているものです(左下にあります)。

f:id:satorepo:20210417132409p:plain

 

クリックするとこういう画面に切り替わります。 

キャンバの編集画面

Canvaの編集画面

(3)画面左のメニューから「背景」をクリック

 下にスクロールすると「背景」というメニューがあるのでクリックします。

 

f:id:satorepo:20210417230358p:plain

(4)ノートの紙面のような背景画像を選ぶ

 Cream Horizontal Thin Stripes Backgroundという画像を

画面右側にドラッグ&ドロップします。

f:id:satorepo:20210417224718p:plain

 

「最近使用した項目」あるいは「すべての結果」からCream Horizontal Thin Stripes Backgroundという、ノートの紙面のようなクリーム色の画像を探して下さい。

 

見つからなかったら「背景を検索」「notebook」と入れて検索して下さい。

f:id:satorepo:20210417225849p:plain



見つかったら右側の「HAPPY MOTHER'S DAY」にドラッグ&ドロップして下さい。

 

f:id:satorepo:20210417231350p:plain

ドラッグ&ドロップ後、カーネーションの写真を画面下側にドラッグ&ドロップするとノート紙面の画像が現れます。

(※ ”P保存”という赤いボタンはPinterestのものです。

ブラウザにPinterest保存ボタンのアドオンを入れていない人には関係ありませんので無視して下さい)

f:id:satorepo:20210417231731p:plain

このように、画像から消したい要素は下にドラッグ&ドロップすれば消去できます。

 

(5)正方形の線の色を変更する(任意)

今回は、正方形の線の色を灰色に変更します(もちろん他の色に変えてもOK)。

白のままでもいいという方は飛ばして下さい。

 

(5-1)正方形の白い線をクリックする

 

(5-2)画面左上のカラーパレットをクリックする

 

f:id:satorepo:20210417232945p:plain

(5-3)画面下にスクロールして「デフォルトカラー」を表示する

 

f:id:satorepo:20210417233808p:plain

(5-4)デフォルトカラーの1行目、左から2番目の濃い灰色をクリックする

線の色が変わりました。

f:id:satorepo:20210417234320p:plain


 

(6)正方形の線を移動させる

完成図はこんな感じです

f:id:satorepo:20210417234448p:plain

 

(6-1)左上の点を斜め上にドラッグ&ドロップする

 

f:id:satorepo:20210417234652p:plain

(6-2)右下の点を斜め下にドラッグ&ドロップする

これで完成です。

f:id:satorepo:20210417235140p:plain

 

(7)正方形の中の文字を消す

 「HAPPY MOTHER'S DAY」「お母さんありがとう」などの各フレーズを画面下にドラッグ&ドロップして消去します。

Canvaで新しい文字を入れることもできますが、私はいつもメディバンペイントで文字を入れています。

f:id:satorepo:20210417235419p:plain

 

f:id:satorepo:20210417235453p:plain

 

f:id:satorepo:20210417235518p:plain

f:id:satorepo:20210417235732p:plain

(8)画像をダウンロードする

ダウンロードした画像をメディバンペイントで開いて文字を入れていきます。

(この画像を保存しておくと、次回以降はCanvaの全工程を飛ばして文字だけ入力すればよくなるので作業を効率化できます

 

(8-1)画面右上の「ダウンロード」をクリックする

 

f:id:satorepo:20210418000036p:plain

(8-2)「ファイルの種類」で「PNG(推奨)」をクリックしてダウンロード

 

f:id:satorepo:20210418001134p:plain

 

 

f:id:satorepo:20210418000147p:plain

「後編」に続く

「メディバンペイントで画像を開く」以降は次の記事(後編)をご覧下さい。

(4月21日20時公開予定)

https://satorepo.com/how-to-make-blog-eye-catch-01-second-part

 

【こちらもオススメ】

satorepo.com