【簡単!】Canvaで作るブログアイキャッチの作り方!Webデザイン公開日:2023/07/27最終更新日:2023/08/01今回はCanvaで作るブログアイキャッチの作り方を解説します。Contents1デザインを作成ボタンを押し、サイズを決める2記事からアイキャッチに載せるテキストを考える3レイアウトと文字の大きさの調整4トンマナを揃える5目立たせたいところを意識する6素材を使って目立たせる7物足りない時は、イラストや写真を追加してみる何も思いつかないときはまとめ1デザインを作成ボタンを押し、サイズを決めるブログのアイキャッチで一般的なサイズは幅1200px×高さ630pxです。別の比率の場合もあるため、念のため自分のブログアイキャッチを確認するのが確実です。Canvaのホーム画面右上にある「デザインを作成」ボタンを押します。その中にあるカスタムサイズを押し「幅1200×高さ630」を入力しましょう。Canvaには無料プランと有料プランがあります。無料プランでは後からのサイズ変更ができないため、サイズの指定には気を付けましょう。2記事からアイキャッチに載せるテキストを考えるアイキャッチは、記事の内容やテーマを反映する必要があります。自分で記事を書く場合はまず、記事の目的や主題を明確にしましょう。これにより、アイキャッチに必要な要素やイメージが明確になります。載せるテキストとしては、記事のタイトルやキャッチフレーズなどが一般的です。色々なタイプのアイキャッチがありますが、今回は記事のタイトルをアイキャッチに載せていきます。今回作るアイキャッチの記事タイトルは「職業訓練は履歴書の職歴?学歴?正しい書き方は?」です。文字をそのままページに置いてみましょう。左メニューのテキストボタンから、テキストボックスを追加でテキストを入力できます。文字が小さすぎてはアイキャッチになにが書いてあるのか、ブログ訪問者には伝わりません。フォントサイズは、ある程度の大きさが必要です。テキストを選択していると、上部にメニューが出てくるので、そこから文字の大きさやフォントの種類などが変更できます。「トーン(tone:調子や色調)&マナー(manner:様式や作風)」を略した言い方です。各アイキャッチのデザインがあまりにも違うと、訪問者に違和感を感じさせます。フォントの種類を揃えたり、色を揃えることでデザインの雰囲気に統一感が生まれます。当社のブログ、転職ノウハウで使用しているアイキャッチは、基本的に青色で統一、(講座シリーズは他の色を使っていますが、、、)フォントはゴシック体で統一してます。1色で統一しなくても、「パステルカラーで統一する」「ビビットカラーで統一する」など、いろいろな統一方法があります。当社のアイキャッチは、青以外も使用していますが、なるべくはっきりとした色を使い、パステルカラーはあまり使わないようにしています。5目立たせたいところを意識する短いテキスト内でも、特に伝えたい部分があると思います。情報に順位付けをし、目立たせたい部分とそうでない部分を明確にしましょう。今回のテキストで特に伝えたい部分は、「職業訓練」が「職歴」か「学歴」かです。ここのテキストを目立たせていきたいと思います。6素材を使って目立たせるテキストを目立たせるときに有効な手段として、以下の3つが挙げられます。1文字を大きくする2文字の色を変える3装飾を付ける文字が大きければそれだけで小さいテキストに比べて、情報が視界に入りやすいです。他の2つも同様に、何もない部分と比べると目に入りやすくなります。今回は2と3を利用してテキストを目立たせていきます。検索窓に入れると、該当する素材がたくさん出てきます。気に入った素材を使ってテキストを目立たせます。今回は、このように装飾を付けました。7物足りない時は、イラストや写真を追加してみる上記のアイキャッチは、余白が多く、なんだか物足りないように感じます。いう時におすすめなのが、イラストや写真などの素材を追加する方法です。素材はテキストと関連のあるものを使うと統一感が出ます。今回は履歴書についての記事なので、書類を連想させる素材を右側に配置しました。何も思いつかないときはそんな時は、canvaのテンプレートを使用するのがおすすめです。ホームの「今日は何をデザインしましょう?」の下にある検索窓から「アイキャッチ」と入力すると、クオリティの高いテンプレートが沢山出てきます。気に入ったテンプレートにスターを付けておけば、作業中でもメニューの「スター付き」から、すぐにテンプレートを読み込めます。そのまま使用するのもよし、アレンジを加えて、オリジナリティを出してもいいと思います。まとめ今回canvaでアイキャッチを作る方法として、自分で1から考える方法と、テンプレートを使用する方法を紹介しました。ブロブのアイキャッチがあるのとないのとでは、サイトイメージは大きく変わります。アイキャッチを作成して、クリック数を上げていきましょう!【CSS】font-sizeの単位はpxやemよりremがい...前の記事へ【カラーユニバーサルデザインのために】色覚異常シミュレーショ...次の記事へカテゴリーKintone役立つIT知識AWSWebデザインツールバックエンドフロントエンド転職をお考えではありませんか?一生の職との出会いを、IT特化型の人材紹介でサポート。転職ノウハウ経験豊富なコンサルタントが、あなたの「叶えたい」をご支援します。アークスアークスキャリア(人材紹介事業)アークスエンジニアリング(ネットワーク構築・施工)アークスクリエイション(ホームページ制作・保守)WebRunner(ホームページ制作サービス)。