note記事で使うヘッダーを作ってみた。っていう話。

イントロダクション

どうも。Masakiです。
ふとその気になったので、noteで掲載する記事のヘッダーを自分でデザインして作ってみました。
なんてことはありません。ただそれだけの話しです笑  なんせ立命館大学放送局員時代以来の画像制作だったものですごく楽しかったために、そのままの勢いで一気に記事にしちゃいました。(ほんと、深夜テンションって怖いですね笑)
今回の記事(と言ってもゼミの記事以外では初めての記事となるわけですが)では、どういう風なビジョンで記事のヘッダーを作成したかについて、徒然なるままに書き連ねていきたいと思います。よろしくお願いします。(私の拘りをただ海田までです。また、私はデザイナーではないので専門家よろしく理論立てて書くことはできませんが、その点お許しください)

※ちなみに、ゼミ関連だとこれ以外にゼミインスタのフィードに使う画像のデザインも行っていたりします

今回の制作物

今回制作したのは、以下の3つの画像です。
なお、画像のサイズはnote標準のヘッダーサイズとなる1280×670px、dpi(画像解像度)は300に設定しています。

「The Guardian書評」用の画像

「研究書評」用の画像

その他のnote記事で使用する用の画像(この記事でもヘッダーとして使用中)

使用ソフト

まず最初に、使ったソフトから。
私はこのようなDTP系のタスクをこなすとき、Adobe Photoshop と Adobe Illustrator の2つのソフトを使用します。基本的にこの2つのソフトは同じようなことができる(強いて言えばIllustratorのほうが遊べる範囲はすこし広いです)ので、両方ともに使うときもあれば、択一的にどちらかだけ使う、というときもあります。
どちらのソフトも古くからリリースされて知名度の高い、まさに「Adobe社の顔」とも言っても過言ではないような製品ですが、今回は個人的に使い慣れているPhotoshopを用いました。

実際のエディター画面はこんな感じです。

Photoshopのエディター画面。画面中央付近に作成中の画像のプレビューが、
右端に画像のレイヤーやカラーピッカーなどが表示されている。

全体のデザインの方向性

次に、今回のデザインの方向性について。
今回はヘッダーを作成するということから、一目でわかるようシンプルなデザインにする、ということを念頭に作成しました。
なので、日頃よく使う文字の切り抜きやパターン、シャドウ、ブラーといった処理は極力かけず、テキストを真ん中に寄せるようにしました。(実際、今回のデザインにおいてはこれらの処理は一切かけていません)
また、3枚の画像のデザインで使用するフォントやバランスは極力共通とすることで、統一感あるデザインを実現しました。

カラー

「The Guardian」書評用やnote記事用の画像では、実際のロゴやWebサイトで使われているカラーを極力そのまま用いることで、画像の雰囲気を実際のWebサイトに近づけるようにしました。

例えば、この「The Guardian書評」用の画像では、実際にThe Guardian誌のロゴやWebサイトで使われている背景色(#052962)と、文字色(#ffe500, #ffffff )を抽出して使用することで、雰囲気を本家のものに極力似せています。また、note記事用の画像では、デフォルトで設定されているnoteのサイトの色設定(青緑、#238F76)を参考にしました。

フォント(フォントファミリー)

フォントファミリーは「Acier BAT」「Myrad Pro」を使用しました。
フォントはなるべくThe Guardian誌のWebサイトやnoteのロゴで使われているものに雰囲気だけ似せたものを採用しました。なお、実際にThe Guardian誌のWebサイトで使われているフォントを特定することはできませんでしたが、端部の処理などからSerif体を使用していることは推察できます。ただ、フォントまで同じようなものを使うとただの丸パクリになるので、文字の太さといった全体的な雰囲気だけを似せていくことにした結果、先述したフォントファミリーに落ち着きました。
なお、大見出しとなる1行目は「Acier BAT Text Gris」、小見出しとなる2行目は「Acier BAT Text Solid」というフォントを3枚とも共通で使用しています。なぜそれぞれの行で違うフォントを使用しているかと言うと、一行目は記事の種別を表す大見出しとなるため、なるべく目立つように少しだけ装飾が入ったフォントを使用しました。
「Myrad Pro」は画像下部のコピーライト表記に使用しました。少しだけ存在感を出すために、Semiboldを使用しています。
また、フォントの性格上どうしても文字間隔が一部不自然となってしまうところがあったので、都度都度カーニングと呼ばれる処理を施して文字間隔が同じようになるように調整しています。

終わりに

さて、今回はnoteの記事で使用する3枚のヘッダー画像について、フォントやらカラーやらバランスやらと私の拘りをだらだら書いてみましたが、いかがでしたでしょうか。最初に書いた通り、私はただの文系学徒で本職のデザイナーではないので、専門家よろしく理論じみたことは何も言えません。なので、全体的にすごく感覚論に依った内容になってしまったかなぁと思っています。ただ、この記事を通してこいつはデザインすることが好きなんやなぁ～ってことはなんとなく伝わったかと思います。今後もこのような記事をゆっくりとではありますが書いてアップしていきたいと思いますので、もしお見かけした際はぜひ立ち止まってお読みいただけると幸いです。

それではまたどこかでお会いしましょ。さいなら。
(P.S. 書き終えて気づいたら2,300文字超えててびっくり。ほんに深夜テンションって怖いわ笑)