『らくらくデザイン講座』にようこそ！
３年目ブロガーの よぴ です(‘◇’)ゞ
講師として、当記事で解説致します。
本日のテーマは「構図＝文字組みの〈基本形〉」について。
前回の講座記事では「背景写真の選定方法」をフル指南しました。
前回の内容を踏まえたうえで、今回はもう一段階、深掘りします！
「構図」「文字組み」「レイアウト」について、見ていきましょう！
当記事の流れとしましては、、、
・文字の配置は「整然と揃える」
・すぐに使える「構図の基本形」
・基本形をもとにした「派生形」
といった具合で、易しくフル伝授していきます！
・最近ブログを始めた初心者の方
・全体のバランスが悪くなってしまう方
・アイキャッチ画像を攻略してみたい方
当記事および当講座はデザイン系の情報商品にて、
８０件以上の販売実績がある筆者が書いています！
☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
当記事は、『らくらくデザイン講座』の一部になります。
全体の記事（ブクマ推奨）はコチラ！
↓ ↓ ↓
【無料講座】初心者OK！すぐ出来るアイキャッチ画像の作り方【Canva】
前回の講座記事はコチラ！
↓ ↓ ↓
【②背景編】もう迷わない！アイキャッチ画像に使用する「背景画像」の選定基準！【らくらくデザイン講座】
☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
目次
１パターンだけ！アイキャッチ画像の「文字組み」はコレだけ覚えればOK！
それでは、、、
１．文字の配置は「整然と揃える」
２．すぐに使える「構図の基本形」
３．基本形をもとにした「派生形」
を順繰りに見ていきます！
アイキャッチ画像を、、、
「イイカンジに」製作したい方は、、、
まずは当記事の内容をマネして覚えてしまいましょう！
以下、一つ一つサラッと解説していきます。
当記事、および当講座では、作成ツールCanva（キャンバ）を推奨しています。
無料版・有料版とありますが、まだ登録していない方は「無料版」にINしてください。
※ちなみに、講師の僕は「有料版」を愛用中＆激推奨しています。その理由は記事の最後で！
１．文字の配置は「整然と揃える」
まず最初に、次のアイキャッチ画像をご覧ください。
！？
これは、僕が画像デザイン初期に作ったクソださアイキャッチ画像です笑
ヤバすぎますよねｗｗｗ
これは、文字組みをミスって大きく外している典型的なパターン。
上の例だと、素直に「図形の丸」の中に文字を収めて整えたほうがマシです。
この失敗例からも分かるように、文字の配置も超重要なので、きちんと整った「文字組み」にしてあげしましょう。
テキトーすぎると超ダサくなりますので。
上の残念すぎるアイキャッチ画像を例題にして説明すると、、、
「クックパッドで無料で無限にレシピ保存する裏技を紹介」
↑↑↑上記の文言をアイキャッチ画像内で使用したいわけです。
キャッチコピー的な観点から、
やや長い文言となりますが、
そのまま使うとします。
作例としては、以下のような形に。
文言が長いときは２行に分けます。上下のバランスを、なるべく「同列」に揃えましょう。
あえて、全てのテクニックを封印しつつ作りましたが、
（※完全初心者でもすぐにマネできるレベルにしています。）
冒頭のダサすぎるアイキャッチ画像よりは はるかにマシでしょう。
前回の【背景編】での「大鉄則」を思い出してください。
★文字やアイコンが主役
→背景写真は脇役程度にとどめる。
→ごちゃごちゃしたものは選ばない。
この考え方に照らし合わせると、、、
「アイキャッチ画像での最優先事項は〈記事内容を簡潔に伝えること〉」。
つまり、記事の内容が凝縮された１枚絵＝アイキャッチ画像と捉えてください。
読者さんに「スッと認識してもらう」のが、本来の役目です！
もちろん、「デザイン的」な観点から、
「おっ、この画像センスあるな～！」的に、
感心されて目にとどめてもらえるのなら理想的。
ということで、、、
「読みにくい」
「見えづらい」
「分かり辛い」
などは、ご法度になります。
初心者が変に凝ると100％滑るので、、、
最初のうちはシンプルな表現を心がけましょう。
作例のように、
素直に２行に分けて、
上下を「同列」にそろえる。
これだけでも、 キレイな見栄えのデザインになります。
２．すぐに使える「構図の基本形」
とはいえ、入れたい文言によっては、、、、、
もっと複雑になったり余白がなくなったりするときも……。
そういったときに、文字組みの知識が何もないと、僕みたいになる、と笑
なので、今日は【構図＝文字配置】の〈基本形〉を覚えて行ってください。
ごちゃごちゃ何パターンも解説しません。
たったの１パターンだけ覚えればOKです。
〈基本形〉としてインストしときましょう。
僕が提唱する文字組みの〈基本形〉は、
ズバリ、【サンドイッチ型】になります！
【サンドイッチ型】の文字配置。大→中央、中→上部、小→下部と組んであげるとスッキリ見やすい構図になる。
■上部にサブの「中タイトル」
■中央にメインの「大タイトル」
■下部に飾り文字の「小タイトル」
※「中タイトル」は中央配置で、「小タイトル」は「大」にそろえる。
「飾り文字」とは、最悪読まれなくてもOKな小文字群のこと。
あえて英語やローマ字を入れたりしてオシャレに〈飾る〉役目。
伝える役目は「大文字」「中文字」に任せてあるので大丈夫です。
さきほどの「クックパッド」で作成すると、、、
このようなイメージです。
上部の中タイトルには「 ＼ スラッシュ ／ 」を使用。
下部の小タイトルは英字などで飾らずに「補足情報」的に。
もちろん、文字量が少ない場合は、、、
本来の「飾り文字」で機能させてもいいですし、
今回のように多い時には、このように〈補足〉させます。
では、この【サンドイッチ型】を使ったアイキャッチ画像の完成例もお見せします。
当講座のアイキャッチ画像ですね。これも、文字組みは【サンドイッチ型】で構成しています。飾り文字もフル機能。
YouTubeのサムネイルに使用したもの。こっちの方がシンプルで分かりやすいかな。ノー飾り文字→補足情報ちょい足しのパターン。
変形型にはなりますが、文字組みそのものは【サンドイッチ型】。文字の下に〈図形〉を敷くテクニックも当講座の後半で教えますよ！
ということで、まずは〈基本形〉を覚えてください！
３．基本形をもとにした「派生形」
基本形は、しっかりと覚えられましたか？
そうしましたら、続いて、〈派生形〉に移ります。
基本形さえ覚えておけば、「応用的」に利用可能です。
A：２行タイトル＋α → 大タイトルを２行で表示し、＋補足情報や飾り文字を。
B：特大タイトル＋α → パワーワードの大タイトルを大きく表示、＋中文字を。
C：小中ヲ左右ズラシ → 中タイトルを左寄せでズラし、小タイトルを右寄せに。
A：２行タイトル＋α → 大タイトルを２行で表示し、＋補足情報や飾り文字を。
B：特大タイトル＋α → パワーワードの大タイトルを大きく表示、＋中文字を。
C：小中ヲ左右ズラシ → 中タイトルを左寄せでズラし、小タイトルを右寄せに。
じっさいの過去作でも、お見せしましょう。
A：２行タイトル＋α → 大タイトルを２行で表示し、＋補足情報や飾り文字を。
B：特大タイトル＋α → パワーワードの大タイトルを大きく表示、＋中文字を。
C：小中ヲ左右ズラシ → 中タイトルを左寄せでズラし、小タイトルを右寄せに。
過去作なのでいろいろ技を入れて表現してますが、
文字組み＝文字配置＝構図だけに着目してください。
これらもすべて、 【サンドイッチ型】の派生ですので。
要は、、、
大＋小（※中文字を撤去）
大＋中（※小文字を撤去）
ズラシ（※上下部を左右）
の考え方になります。
〈基本形〉から引き算するだけ。
※「ズラシ」については、ややムズイです。
ということで、いろいろ参考にしつつ、取り入れてみてください(‘◇’)ゞ
【まとめ】本日の講座内容のおさらい
ということで、本日の講座は以上です。
【構図編】ということで、ぜひ、今日の内容をインストしていってくださいね。
忘れないように、記事中に出てきた【ノウハウ】や【テクニック】をもう一度おさらいしましょう。
★文字やアイコンが主役
→背景写真は脇役程度にとどめる。
→ごちゃごちゃしたものは選ばない。
アイキャッチ画像での最優先事項は〈記事内容を簡潔に伝えること〉。
by よぴ
僕が提唱する文字組みの〈基本形〉は、
ズバリ、【サンドイッチ型】になります！
■上部にサブの「中タイトル」
■中央にメインの「大タイトル」
■下部に飾り文字の「小タイトル」
※「中タイトル」は中央配置で、「小タイトル」は「大」にそろえる。
「飾り文字」とは、最悪読まれなくてもOKな小文字群のこと。
あえて英語やローマ字を入れたりしてオシャレに〈飾る〉役目。
伝える役目は「大文字」「中文字」に任せてあるので大丈夫です。
A：２行タイトル＋α → 大タイトルを２行で表示し、＋補足情報や飾り文字を。
B：特大タイトル＋α → パワーワードの大タイトルを大きく表示、＋中文字を。
C：小中ヲ左右ズラシ → 中タイトルを左寄せでズラし、小タイトルを右寄せに。
大＋小（※中文字を撤去）
大＋中（※小文字を撤去）
ズラシ（※上下部を左右）
上記の内容を活かして、、、
まずはカンタンでシンプルなものから、
アイキャッチ画像を自作してみましょう♪
【無料キャンペーン中！】Canva Proに課金すればオールインワンで使えます！
ここまで「文字組み」の〈考え方〉を見てきましたが、、、
Canvaを使ってるとたびたび、王冠マークで「👑プロ」って表示されます……。
せっかくイイカンジなのに、使いたい場合は「有料」になっちゃうんすね……。
と、歯がゆい思いをした方もいると思います。
そういったときは、、、初回の講座記事【①準備編】で紹介した、、、
『O-DAN(オーダン)』や『ICOON MONO（アイコンモノ）』を使いましょう。
『Canva』『O-DAN』『ぱくたそ』『アイコンモノ』『いらすとや』『フキダシデザイン』
「完全無料」で行く場合なら、この６サイトをフル活用すれば、なんとかなりますので。
僕も、初期は「完全無料」にこだわっていたので、Canvaを飛び出してO-DAN等で探してましたよ笑
まあ、ぶっちゃけ。無料に拘泥すると……。
かなりメンドクサイし、時間もかかりますねorz
画像デザインをちゃんとやろうとすればするほど、に。
なので、どうしても「効率化」したい場合は、、、
奥の手として、『Canva Pro』にアップグレードさせましょう。
月額1500円を課金すると、無料版では使えなかった「有料部分」がフル開放されます。
◎使用できる「全」素材が１億点以上
◎６１万点以上のおしゃれテンプレート
◎写真背景をワンクリックで透過できる機能
◎作成画像をワンクリックでサイズ変更できる機能
◎５人まで共有して使用できるのでチーム利用も可
◎フォルダ機能が無限解放されるので「超」効率化
その他、細かい機能は山ほどあります！
２年近く課金している僕ですら使いきれないほどに……。
断言してもいいですが、もう無料版Canvaには「絶対に」戻しません。
素材面でも機能面でも、ものすっごく楽なんです。
実際に、現在のデザインは『Canva』だけで作ってますからね。
最初こそ、「月1500円はちょい高いゾ」と敬遠してましたが、マジ情弱でした笑
３０日間の無料トライアル期間がありますので、
ぜひ一度、『Canva Pro』を試してみてください。
※もし使ってみて微妙なら、期間中に解約しましょう。
【無料講座】初心者OK！すぐ出来るアイキャッチ画像の作り方【Canva】
はい、お疲れ様でした。
当記事はこれで以上となりますが、、、
【らくらくデザイン講座】はまだまだ続きます(‘◇’)ゞ
「ブロガー仕様のアイキャッチ画像を作れるようになりたい」
って方は、次回の講座記事へとお進みください♪
全６回の講座記事で、最後の方には スペシャルな〈卒業記念品〉も！
順番に読んでいくと、、、 最終的にはアイキャッチ画像を作れるようになりますよ。
全記事の読了で３０分くらい、
１画像の作成で３０分くらい、
計１時間が目安のミニ講座です。
☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
当記事は、『らくらくデザイン講座』の一部になります。
全体の記事（ブクマ推奨）はコチラ！
↓ ↓ ↓
【無料講座】初心者OK！すぐ出来るアイキャッチ画像の作り方【Canva】
次回の講座記事はコチラ！
↓ ↓ ↓
【④色味編】鬼門です！アイキャッチ画像の「色選び」はムズカシイので白黒デフォで！【らくらくデザイン講座】
☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
ブログのアイキャッチ画像を作りましたが……。
どうにもバランスが悪くしっくりきません……。
覚えやすい構図やレイアウトってありませんか？