見出し画像

おしゃれじゃなくていい! noteで、読みやすいアイキャッチ画像を作るコツ

noteで、ブログを始めると、必然、アイキャッチ画像を作る必要に迫られますよね。あの、記事の冒頭に表示される画像ですね。

作っては見たけど、なんか読みにくいなあ、と思うこともあるかと思います。

そこで、なんちゃって元デザイナー(ただし紙媒体メイン)が、「こんな感じで作ると、おしゃれではないが少なくとも読みにくくはない」と思えるかもしれないコツをお伝えします。

というか、私もwebデザイン勉強中なんですけど……

note記事のアイキャッチ画像は、1280×670px


note記事のアイキャッチ推奨画像は、1280×670pxくらいらしいです。

ただし、タイムラインで記事のアイキャッチ画像が流れていくときは、かなり縮小されて表示されるんですね。だから、文字が小さかったり細かったりすると可読性が低い

具体的に言うと、イラレ上で1280×670pxで制作する際、50ptはないと、だいぶ読みにくい印象です。

90~100ptくらいあると、普通に読めるかな、という感じ。

CMYKで紙で刷るときは、10ptもあれば十分だし、多少読みにくくてもデザイン上のおもむきかなって思うんですけど、webは可読性が命です。見てもらえないと、クリックしてもらえない。

下が失敗例です。

失敗例


これ、noteに来て初めて上げた記事のアイキャッチなんですけど、明朝系は、小さくすると、本当に読みにくいですね。タイムラインに流れていくときに、読めなさ過ぎて、あー、しまった、と思いました。

↓でも中身はパッションがある記事だよ!


下は、その反省を踏まえて、10日後に作ってみたアイキャッチです。

わりとましになった。しかし可読性が高いからと言って記事が読まれるわけではないという例


おススメのフォント


明朝よりゴシック体(丸ゴチ系もよい)のほうがおすすめです。

特に、ゴシック体の中でも、太めのウェイトのがインパクトが大きくて引き付ける力が強いです。新聞に入ってくるチラシとか、ごんぶとのゴシックに満ちてますよね。

明朝はスマートでおしゃんな感じになるのですが、縮小に弱いです。

読めないアイキャッチにアイキャッチの効果は薄いです。

マンガのセリフでも、漢字はゴシックで、平仮名だけ明朝だったりしますけど、あれは、ゴシック体のほうが、可読性が高いといわれているからです。

どうしても明朝にしたいときは、フォント数をかなり上げて、大きく使ったほうがよいかと思います。

なお、ゴシックは多用すると、わりとダサくなります。適度に変化のあるフォントも取り入れて画面が単調にならないように組みましょう。

かといって、いろんなフォントを多用しすぎると、それはそれで読みにくいです。いろんなフォントが使えてうれしいイラレ初心者が、よく陥るワナです。

いろいろ書きましたけど、著者もまだまだ勉強途中なので、一緒にアイキャッチ制作がんばっていきましょう。

次回は実際に、イラレでアイキャッチを20分~30分くらいで作るレクを上げます。

その記事はこれ↓


この記事が気に入ったらサポートをしてみませんか?