
『らくらくデザイン講座』にようこそ!
3年目ブロガーの よぴ です(‘◇’)ゞ
講師として、当記事で解説致します。
本日のテーマは「構図=文字組みの〈基本形〉」について。
前回の講座記事では「背景写真の選定方法」をフル指南しました。
前回の内容を踏まえたうえで、今回はもう一段階、深掘りします!
「構図」「文字組み」「レイアウト」について、見ていきましょう!
当記事の流れとしましては、、、
・文字の配置は「整然と揃える」
・すぐに使える「構図の基本形」
・基本形をもとにした「派生形」
といった具合で、易しくフル伝授していきます!
・最近ブログを始めた初心者の方
・全体のバランスが悪くなってしまう方
・アイキャッチ画像を攻略してみたい方

当記事および当講座はデザイン系の情報商品にて、
80件以上の販売実績がある筆者が書いています!
☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
当記事は、『らくらくデザイン講座』の一部になります。
全体の記事(ブクマ推奨)はコチラ!
↓ ↓ ↓
【無料講座】初心者OK!すぐ出来るアイキャッチ画像の作り方【Canva】
前回の講座記事はコチラ!
↓ ↓ ↓
【②背景編】もう迷わない!アイキャッチ画像に使用する「背景画像」の選定基準!【らくらくデザイン講座】
☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
目次
1パターンだけ!アイキャッチ画像の「文字組み」はコレだけ覚えればOK!

それでは、、、
1.文字の配置は「整然と揃える」
2.すぐに使える「構図の基本形」
3.基本形をもとにした「派生形」
を順繰りに見ていきます!
アイキャッチ画像を、、、
「イイカンジに」製作したい方は、、、
まずは当記事の内容をマネして覚えてしまいましょう!
以下、一つ一つサラッと解説していきます。
当記事、および当講座では、作成ツールCanva(キャンバ)を推奨しています。
無料版・有料版とありますが、まだ登録していない方は「無料版」にINしてください。
※ちなみに、講師の僕は「有料版」を愛用中&激推奨しています。その理由は記事の最後で!
1.文字の配置は「整然と揃える」
まず最初に、次のアイキャッチ画像をご覧ください。

!?
これは、僕が画像デザイン初期に作ったクソださアイキャッチ画像です笑
ヤバすぎますよねwww
これは、文字組みをミスって大きく外している典型的なパターン。
上の例だと、素直に「図形の丸」の中に文字を収めて整えたほうがマシです。
この失敗例からも分かるように、文字の配置も超重要なので、きちんと整った「文字組み」にしてあげしましょう。
テキトーすぎると超ダサくなりますので。
上の残念すぎるアイキャッチ画像を例題にして説明すると、、、
「クックパッドで無料で無限にレシピ保存する裏技を紹介」
↑↑↑上記の文言をアイキャッチ画像内で使用したいわけです。
キャッチコピー的な観点から、
やや長い文言となりますが、
そのまま使うとします。
作例としては、以下のような形に。

文言が長いときは2行に分けます。上下のバランスを、なるべく「同列」に揃えましょう。
あえて、全てのテクニックを封印しつつ作りましたが、
(※完全初心者でもすぐにマネできるレベルにしています。)
冒頭のダサすぎるアイキャッチ画像よりは はるかにマシでしょう。
前回の【背景編】での「大鉄則」を思い出してください。
★文字やアイコンが主役
→背景写真は脇役程度にとどめる。
→ごちゃごちゃしたものは選ばない。
この考え方に照らし合わせると、、、
「アイキャッチ画像での最優先事項は〈記事内容を簡潔に伝えること〉」。
つまり、記事の内容が凝縮された1枚絵=アイキャッチ画像と捉えてください。
読者さんに「スッと認識してもらう」のが、本来の役目です!
もちろん、「デザイン的」な観点から、
「おっ、この画像センスあるな~!」的に、
感心されて目にとどめてもらえるのなら理想的。
ということで、、、
「読みにくい」
「見えづらい」
「分かり辛い」
などは、ご法度になります。
初心者が変に凝ると100%滑るので、、、
最初のうちはシンプルな表現を心がけましょう。
作例のように、
素直に2行に分けて、
上下を「同列」にそろえる。
これだけでも、 キレイな見栄えのデザインになります。
2.すぐに使える「構図の基本形」
とはいえ、入れたい文言によっては、、、、、
もっと複雑になったり余白がなくなったりするときも……。
そういったときに、文字組みの知識が何もないと、僕みたいになる、と笑
なので、今日は【構図=文字配置】の〈基本形〉を覚えて行ってください。
ごちゃごちゃ何パターンも解説しません。
たったの1パターンだけ覚えればOKです。
〈基本形〉としてインストしときましょう。

僕が提唱する文字組みの〈基本形〉は、
ズバリ、【サンドイッチ型】になります!

【サンドイッチ型】の文字配置。大→中央、中→上部、小→下部と組んであげるとスッキリ見やすい構図になる。
■上部にサブの「中タイトル」
■中央にメインの「大タイトル」
■下部に飾り文字の「小タイトル」
※「中タイトル」は中央配置で、「小タイトル」は「大」にそろえる。
「飾り文字」とは、最悪読まれなくてもOKな小文字群のこと。
あえて英語やローマ字を入れたりしてオシャレに〈飾る〉役目。
伝える役目は「大文字」「中文字」に任せてあるので大丈夫です。
さきほどの「クックパッド」で作成すると、、、

このようなイメージです。
上部の中タイトルには「 \ スラッシュ / 」を使用。
下部の小タイトルは英字などで飾らずに「補足情報」的に。
もちろん、文字量が少ない場合は、、、
本来の「飾り文字」で機能させてもいいですし、
今回のように多い時には、このように〈補足〉させます。
では、この【サンドイッチ型】を使ったアイキャッチ画像の完成例もお見せします。

当講座のアイキャッチ画像ですね。これも、文字組みは【サンドイッチ型】で構成しています。飾り文字もフル機能。

YouTubeのサムネイルに使用したもの。こっちの方がシンプルで分かりやすいかな。ノー飾り文字→補足情報ちょい足しのパターン。

変形型にはなりますが、文字組みそのものは【サンドイッチ型】。文字の下に〈図形〉を敷くテクニックも当講座の後半で教えますよ!
ということで、まずは〈基本形〉を覚えてください!
3.基本形をもとにした「派生形」
基本形は、しっかりと覚えられましたか?
そうしましたら、続いて、〈派生形〉に移ります。
基本形さえ覚えておけば、「応用的」に利用可能です。
A:2行タイトル+α → 大タイトルを2行で表示し、+補足情報や飾り文字を。
B:特大タイトル+α → パワーワードの大タイトルを大きく表示、+中文字を。
C:小中ヲ左右ズラシ → 中タイトルを左寄せでズラし、小タイトルを右寄せに。

A:2行タイトル+α → 大タイトルを2行で表示し、+補足情報や飾り文字を。

B:特大タイトル+α → パワーワードの大タイトルを大きく表示、+中文字を。

C:小中ヲ左右ズラシ → 中タイトルを左寄せでズラし、小タイトルを右寄せに。
じっさいの過去作でも、お見せしましょう。

A:2行タイトル+α → 大タイトルを2行で表示し、+補足情報や飾り文字を。

B:特大タイトル+α → パワーワードの大タイトルを大きく表示、+中文字を。

C:小中ヲ左右ズラシ → 中タイトルを左寄せでズラし、小タイトルを右寄せに。
過去作なのでいろいろ技を入れて表現してますが、
文字組み=文字配置=構図だけに着目してください。
これらもすべて、 【サンドイッチ型】の派生ですので。
要は、、、
大+小(※中文字を撤去)
大+中(※小文字を撤去)
ズラシ(※上下部を左右)
の考え方になります。
〈基本形〉から引き算するだけ。
※「ズラシ」については、ややムズイです。
ということで、いろいろ参考にしつつ、取り入れてみてください(‘◇’)ゞ
【まとめ】本日の講座内容のおさらい
ということで、本日の講座は以上です。
【構図編】ということで、ぜひ、今日の内容をインストしていってくださいね。
忘れないように、記事中に出てきた【ノウハウ】や【テクニック】をもう一度おさらいしましょう。
★文字やアイコンが主役
→背景写真は脇役程度にとどめる。
→ごちゃごちゃしたものは選ばない。
アイキャッチ画像での最優先事項は〈記事内容を簡潔に伝えること〉。
by よぴ

僕が提唱する文字組みの〈基本形〉は、
ズバリ、【サンドイッチ型】になります!
■上部にサブの「中タイトル」
■中央にメインの「大タイトル」
■下部に飾り文字の「小タイトル」
※「中タイトル」は中央配置で、「小タイトル」は「大」にそろえる。
「飾り文字」とは、最悪読まれなくてもOKな小文字群のこと。
あえて英語やローマ字を入れたりしてオシャレに〈飾る〉役目。
伝える役目は「大文字」「中文字」に任せてあるので大丈夫です。
A:2行タイトル+α → 大タイトルを2行で表示し、+補足情報や飾り文字を。
B:特大タイトル+α → パワーワードの大タイトルを大きく表示、+中文字を。
C:小中ヲ左右ズラシ → 中タイトルを左寄せでズラし、小タイトルを右寄せに。
大+小(※中文字を撤去)
大+中(※小文字を撤去)
ズラシ(※上下部を左右)
上記の内容を活かして、、、
まずはカンタンでシンプルなものから、
アイキャッチ画像を自作してみましょう♪
【無料キャンペーン中!】Canva Proに課金すればオールインワンで使えます!

ここまで「文字組み」の〈考え方〉を見てきましたが、、、

Canvaを使ってるとたびたび、王冠マークで「👑プロ」って表示されます……。
せっかくイイカンジなのに、使いたい場合は「有料」になっちゃうんすね……。
と、歯がゆい思いをした方もいると思います。
そういったときは、、、初回の講座記事【①準備編】で紹介した、、、
『O-DAN(オーダン)』や『ICOON MONO(アイコンモノ)』を使いましょう。
『Canva』『O-DAN』『ぱくたそ』『アイコンモノ』『いらすとや』『フキダシデザイン』
「完全無料」で行く場合なら、この6サイトをフル活用すれば、なんとかなりますので。
僕も、初期は「完全無料」にこだわっていたので、Canvaを飛び出してO-DAN等で探してましたよ笑
まあ、ぶっちゃけ。無料に拘泥すると……。
かなりメンドクサイし、時間もかかりますねorz
画像デザインをちゃんとやろうとすればするほど、に。
なので、どうしても「効率化」したい場合は、、、
奥の手として、『Canva Pro』にアップグレードさせましょう。
月額1500円を課金すると、無料版では使えなかった「有料部分」がフル開放されます。
◎使用できる「全」素材が1億点以上
◎61万点以上のおしゃれテンプレート
◎写真背景をワンクリックで透過できる機能
◎作成画像をワンクリックでサイズ変更できる機能
◎5人まで共有して使用できるのでチーム利用も可
◎フォルダ機能が無限解放されるので「超」効率化
その他、細かい機能は山ほどあります!
2年近く課金している僕ですら使いきれないほどに……。
断言してもいいですが、もう無料版Canvaには「絶対に」戻しません。

素材面でも機能面でも、ものすっごく楽なんです。
実際に、現在のデザインは『Canva』だけで作ってますからね。
最初こそ、「月1500円はちょい高いゾ」と敬遠してましたが、マジ情弱でした笑
30日間の無料トライアル期間がありますので、
ぜひ一度、『Canva Pro』を試してみてください。
※もし使ってみて微妙なら、期間中に解約しましょう。

【無料講座】初心者OK!すぐ出来るアイキャッチ画像の作り方【Canva】

はい、お疲れ様でした。
当記事はこれで以上となりますが、、、
【らくらくデザイン講座】はまだまだ続きます(‘◇’)ゞ
「ブロガー仕様のアイキャッチ画像を作れるようになりたい」
って方は、次回の講座記事へとお進みください♪
全6回の講座記事で、最後の方には スペシャルな〈卒業記念品〉も!
順番に読んでいくと、、、 最終的にはアイキャッチ画像を作れるようになりますよ。
全記事の読了で30分くらい、
1画像の作成で30分くらい、
計1時間が目安のミニ講座です。
☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
当記事は、『らくらくデザイン講座』の一部になります。
全体の記事(ブクマ推奨)はコチラ!
↓ ↓ ↓
【無料講座】初心者OK!すぐ出来るアイキャッチ画像の作り方【Canva】
次回の講座記事はコチラ!
↓ ↓ ↓
【④色味編】鬼門です!アイキャッチ画像の「色選び」はムズカシイので白黒デフォで!【らくらくデザイン講座】
☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
ブログのアイキャッチ画像を作りましたが……。
どうにもバランスが悪くしっくりきません……。
覚えやすい構図やレイアウトってありませんか?