見出し画像

noteのアイキャッチ画像テンプレ作りました

突然ですが、noteのアイキャッチ画像の大きさをご存知でしょうか?

note公式のアイキャッチサイズを調べてみたところ、1280x670でした。

私はいつもnoteを更新した後に、スマホでもう一度記事を読み返してチェックしているのですが、その時に毎回、アイキャッチの最適化を忘れてしまって後悔していました。

スマホでは、アイキャッチは正方形にトリミングされてしまいます。

アイキャッチだけで記事の内容が分かるように、PCで見たときも、スマホで見たときも、綺麗にアイキャッチが見えるテンプレートを作りました。

ダウンロード

Googleドライブにアップロードしました。ご自由にダウンロードしてください。ダウンロードはこちら ※PSDデータ

使い方

使い方は簡単。

1. 背景を変更する
2. テキストを変更する

たったこれだけ。

PSDを開くと、こんな感じになっています。

正方形の濃いグリーンの中が、スマホのアイキャッチの可視範囲です。
タイトルをこの中に収めてしまうことで、スマホでもアイキャッチだけで記事の内容が分かります。ガイドラインを引いている通り、少し周囲に余白を持たせると見やすいでしょう。

☝️こんな表示になります。(タイトル違うけど)

レイヤーはたった3つ。

・テキスト
・SP(スマホの可視範囲)
・背景塗りつぶし

SP(スマホの可視範囲)は、画像を書き出すときはレイヤーを非表示にしてください。

あとは、背景を変えたり、テキストをうち変えたり、フォントを変えたりご自由にお使いください。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

なんしよーと?
33
デザインもコーディングもディレクションもやります。Webマーケとアクセス解析は勉強中。コーディングが一番好きでメインはフロントエンドですがバックエンドも身につけてフルスタックになってやろうと計画中。好きなフォントはCentury Gothic/好きな色は#bf0000

この記事が入っているマガジン

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。