CanvaでTOP画像を作る際のレイアウト手法をご紹介

お疲れ様です。

エバーを見ながらnoteに向かっている、
ちょっとだけデザインも学んでいた人、ねじおです。

先日からnoteのTOP画像がWebブラウザ上では、
Canvaで作れるようになりました。

https://www.canva.com/
▲本サービス上でもレイアウトはいっぱい掲載されています。

登録が必要ですが、基本的な機能は無料で利用できるすてきなサービスです。一度登録すればnoteさんが記憶しているので、選択するだけで自動でデザイン画面がＷｅｂ上で開きます。

たまにこれ使って作るんですが、
目的や相手に合わせて本当はレイアウトとかデザインを変えたほうが良いとは思いつつ、適当に作っているのが現状です。

なので、昔のデザインノートを見ながら、
デザインのルール的なものだけご紹介しておきます。

このルールを守ればあら不思議。

一気にプロっぽいデザインに♪
スキももっと付いちゃうかも♪（たぶん）

そんなnoteが大好きな方の参考になればという記事です。

※デザインっぽいこと書きますが、あくまで素人です。
　参考程度に、そしてプロの方はふふっと生暖かい目でご覧ください。

【デザインにはルールがある】

ゲームの世界ではUIデザインを担当しているデザイナーさんと話すと、
画面や広告などのデザインは科学である、みたいなことを説明してくれることがあります。

例えがわかりにくいかもですが、
ちゃんとデザインにはルールや効果があって、過去のデザイナーの皆様によってそれらは分析され、実証され、組み合されて今も進化し続けているというような意味合いです。

以下、それぞれ使いやすいレイアウトと効果をご紹介してみます。

●集中

言いたいことに真っ先に目を向けて貰う方法です。
サムネ向きなので困ったらこれです。

マンガの集中線が一番わかりやすいです。
とっても手軽に真ん中に目が行きます。

こんな感じで写真や素材を真ん中に集中して配置することで、
目線を集めることもできます。

●散らばり

逆にバラバラに配置することで、勢いや楽しさを表現できます。

あえてはみ出したり、
文字に強弱をつけたり、
フォントをかっこよくしたり。

あかん。
パワポでのレイアウトには限界がある。。。次行きます。

●整列

いろんな商品や写真を紹介したい場合はこちらがオススメ。
視覚的に情報が整理されてそれぞれが伝わりやすくなります。

写真を推すならこんな感じ。
年賀状でよくあるレイアウトですね。

メッセージを押すなら、
写真は同じサイズ、同じ形に。
こちらはチラシでよくあるレイアウト。
（すいません、これは画像サイズ適当です。）

●スペース

あえて大きな空間を開けることで、
ストーリー性が出たりやメッセージの力強さが増します。

かっこいい。。。（恍惚）

こんな適当に画像作ってるのが申し訳なくなってきた。

●ＶＳ構図

「〇と×」「成功と失敗」というように、明確に違う差があるテーマの記事の際にオススメです。
両者の差を際立たせる効果を生みます。

色相や明度を反転するだけで、
手軽に対比関係を作るという方法もあります。

●まとめ

やるならちゃんと画像作ればよかったんですが、
エバー見ながらなので…勘弁してください。

ほんとデザイナーさんってすごいなぁと改めて思います。

あと、久しぶりにGTO読んだだけですので、
画像に深い意味はありません。（反町隆史さんのファンの方すいません。本気でかっこいいと思ってます。はい。）

ＧＴＯ（１） (週刊少年マガジンコミックス)

これにフォントを組み合わせることになるので、
フォントのデザインや文字装飾（斜体や湾曲など）も影響がありますが、
Canvaにはあらかじめテキストのテンプレートもあるので安心です。

▲テキストタブから…

▲フォントが組み合わされたテンプレートが！

伝えたいことや、読み手の層（女性向けとか技術者向けとか）によって、かわいいフォントにするのか、読みやすいゴシックなフォントにするのかという感じでチョイスしてください。

日々noteでの情報発信をされている皆様のお役に立てば幸いです♪

==========================
【過去記事】
人事的な記事⇒https://note.com/negikojyo/m/mb13243fd1754
中途採用の記事⇒https://note.com/negikojyo/m/m065b4610a93e
新卒採用の記事⇒https://note.com/negikojyo/m/m2326398a03cd
note/Twitterの記事⇒https://note.com/negikojyo/m/mdbb149c98460
その他雑記⇒https://note.com/negikojyo/m/m438046a9fda7

【ココナラ】
お仕事相談始めました⇒https://coconala.com/services/1467603?ref=profile_top_service