理夢ちゃんが語る、アイキャッチデザインの話。

 

こちらは、ネムログで投稿したものをちょっと加筆修正したものです。:https://nemlog.nem.social/blog/2406

 


なんでもいうことを聞いてくれる茜チャン感をめざしてアイキャッチを作りましたが、惜しい感じ。
こんにちは、リムです。

前回は、ねむちゃんについて何千字を費やし脳を混乱させる記事を書いてしまいましたので、今回は役立つ話を目指して書いてゆこうと思います。

愛がすごい。

Sponsored Link


 

アイキャッチを作ろう

私はもっぱら、Illustratorのアートボードを使ってデザインしている。

手順を説明しながらデザインの仕方を書く感じを目指すわけではなく、作成する上で気をつけることとか、綺麗に作る方法とかを紹介する感じを目指したい。

ソフト

グラフィックデザインを作るのに一番適している業界スタンダードなソフトといえば、イラレでおなじみIllustrator
私はこれを使ってアイキャッチは使っています。

ただ有料。でも以前に比べれば、使い始めるハードルはとても低くなりました。
Illustrator単体だったら月1000円くらいで使える。デザインする人にとってはありがたい。

でも本気の人ぐらいしかお金は出せないかなと思うので、そういう人には「Canva」あたりがいいのかなと思います。
使ったことはないのですが、見聞きするところによるといいらしいです。

右にある感じのグラフィックが、作れる。

 

デザイン原則を学ぼう

 

その1:トリミング耐性のあるアイキャッチを作ろう

 

nemlogだったりWordPressだったり、アイキャッチはわりとスタイル側で左右を削られたりカテゴリラベルが被ってきたり、侵食されやすい。
なのでグラフィックに入れるテキストやメインビジュアル等の大事な情報は、そういうスタイル適用がされたあとも生き残るような場所に配置しておくと良いです。

そこでnemlogをみますと、アイキャッチは正方形でトリミングされる感じのようです。
「ほなら、アイキャッチも正方形でデザインするか」、という方向になりますが、私はそれはちょっと好まない。私は、それを好まないわ。
ジョン、私はそれを好まない。

イズミ リム
私はそれを好まない。

 

なぜかというと、ある場所ではアイキャッチが正方形でトリミングされるかもしれませんが、またある場所では現在の標準アスペクト比である16:9でスタイルが指定されている場合もあるからです。

 

変則的なトリミング。
横に長いデザインスタイル。
デザイン性は高いが、これに合わせて作ると後々の互換性に欠ける。

それに、これは私のWordPressを参考にスクショしてきましたが、こんな変則的トリミングをされることもあるわけです。
こうなるとプラットフォームに合わせてアイキャッチを作るより、もとのアスペクト比は固定してデザインの配置でどのような変則的トリミングが来ても情報が失われないアイキャッチを目指すべきなのです( ๑・ᴗ〃 )و✧ムフー

なので私は、16:9の比率で作ることをオススメする。

具体的には、1280✕720、もしくは1920✕1080がオススメです。

Sponsored Link


 

その2:なんの記事か分かるようにしよう

 

 

なんの記事か分かるようになっている記事は、読みたくなる!はず。

ので、情報をトリミングされない範囲内に入れていく。

方法としては、簡潔にテキストで示すのがもっとも簡単かな?と思います。
非言語的に説明するのは美術的センスが要求されるのでタイヘン。

 

とはいえインパクトだけでの脳筋プレイも憧れるので、必ずというわけでもないかも。
ただ1ミリくらいは、記事内の要素があったらいいかもしれないな( ๑・ᴗ〃 )و✧

 

おしゃれで素敵なフォントを使おう

ちなみにこれは、「VDL ロゴJrブラック BK」というフォント。
色んなフォントの中でもウェイト(幅)の太さがトップレベル。
アニメ『キルラキル』も似たような極太フォントを効果的に使ってた。
あれは「ラグランパンチ」

フォントは、いいものだ。

いいフォントは、デザインの質を高めてくれる。
例に出したのは、見出しゴMB31とFutura

私のオススメは、AdobeのTypekitというサービス。
モリサワやフォントワークスなどのびっくり価格で販売されているフォントを月1000円くらいから使うことができます。
これは、AdobeのCreativeCloud内のなんらかのソフトをサブスクリプションしていると、おまけで付いてくるやつなので、追加でお金はかからない。

Illustratorを契約するとTypekitは付いてくるし、PremiereProとかAfterEffectとかを契約しても付いてきます(たぶん

 

お金を払うまででもないというときは、フリーフォント探しの旅に出るのも一考かと思います。

 

上記のデザイン原則を考慮してデザインする

 

デザイン修正前のサンプル

以上のことをふまえて、アイキャッチを作ろう( ๑・ᴗ〃 )و✧

上に貼った70点ぐらいのアイキャッチを、トリミング考慮などの原則に従ってリデザインすることで90点ぐらいに修正したいと思います。

 


( ๑・∀〃 )間(ま)


そして出来たのがこちらになります。
(お料理番組かな?

 

 

  1. トリミングを考慮して
  2. 何の記事か分かるようにし
  3. 素敵なフォントを使う

 

いい感じではないでしょうか?

おわり

これで素敵なアイキャッチを作ってくれれば嬉しいです。

Canvaとかも後で実験してみようと思う( ๑・ᴗ〃 )و✧

おわり。

 

Sponsored Link

このブログはNEM猫プロジェクトを応援しています。