見出し画像

noteのマガジンヘッダー画像の作り方

noteを始めるにあたり、まずはマガジンのヘッダー画像を作って気持ちを盛り上げるか!と思ったら、色々ハードルがあったので、メモがてらまとめる。

マガジンのヘッダー画像は、noteでは3箇所に使い回される。まずは当然マガジンのヘッダー、次に記事ページの下部のマガジンへのリンク、そしてアプリのマガジンのサムネイルだ。

これらは全て同じ画像を流用しており、全ての表示箇所で綺麗に表示するには、一定の区画に要素を配置する必要がある。

上の画像の内側の濃いグリーンが、アプリのサムネイルで表示される領域。外側の薄いグリーンが記事ページ下部のサムネイルで表示される領域。そして画像全体がマガジンのヘッダーで表示される領域だ。

つまりタイトルや主要な要素は、内側の濃いグリーンの領域内に納めなければ、何処かしらの表示で不都合が出るので避けた方が良い。

ここまでお読みいただきありがとうございました。もしよければ、スキしてもらえると嬉しいです。

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

モチベーションアップに使わせていただきます。

読んでいただきありがとうございます!
28
ウェブデザイナーです。 UIのデザインが専門領域で、フロントエンドのプログラミングとマーケティングも業務領域としています。🐢 リクガメが好きです。🏢 株式会社Impressive 取締役