アートボード_4

みんなのフォトギャラリーへ初投稿!

「ブログ始めてみます!」と、意気揚々と『ブログ始めてみます宣言』をしてみたはいいものの、いざ記事を書こうと思うとなかなか筆が進まないもので、「これ書いてだれか読んでくれるかな?」とか「読み返してみると全然大したことないな、文章向いてないわ」とか思ってしまいますね。

しかし、自分が読んだ数々の『ブログやったほうがいいよ!』系記事によると、最初はそんなことは気にせず好きに書くのがいいとのことなので、それにならって好きに書いてみようと思います。

とはいえ、文才がない自分が雑記を書いても本当に需要がないと思うので、ここはひとつ《みんなのフォトギャラリー》というものに画像を寄稿してみようと思います。

みんなのフォトギャラリーとは

《みんなのフォトギャラリー》とは、noteの機能の一つで、

他のクリエイターがnoteに投稿した画像を、自分のnoteの記事ページのヘッダ画像として使える機能です。-note公式『みんなのフォトギャラリー(β)をリリースしました。』より

だそうです。詳しくはこちら

めちゃくちゃ便利な機能ですね。webサービスが抱えがちな著作権問題を解決する一つの糸口になりそうなこちらの機能。他のブログ作成サービスを使ったことがないので比較は出来ませんが、クリエイターのことをよく考えてる機能でとてもUX(ユーザー体験)がいいように思います。勝手にリンクもつくっぽいので画像を使う方も作った方も気持ちがいいですね。

いざ、ヘッダー画像制作

そんなこんなで、そんな素晴らしいサービスの一助となればと思いヘッダー画像の作成に取り掛かりたいと思います。

1.作成する画像の方向性を決める

せっかく作るのであれば、できれば使ってもらえるものがいいと考え、今回の記事のヘッダーにするならどんな画像を使いたいかを基準に《みんなのフォトギャラリー》に投稿されている画像を眺めていたところ(写真からイラストまで本当に様々な画像が投稿されています)、こちらの画像を見つけました。

※記事の途中では《みんなのフォトギャラリー》の画像は挿入できないようだったのでリンクを貼っています。

めちゃくちゃかっこいい。noteのロゴですね。汎用性も高そうだし、この方向性(noteのロゴ作成)で今回は画像を作ってみることに決めました。

2.ロゴの作成

実際のロゴ作成業務であれば長い期間を設けて色々と調査をしたり、試行錯誤を繰り返すのでしょうが、今回はヘッダー画像作成&半分はブログ投稿のチュートリアルを兼ねているので気楽に1~2時間くらいでちゃかちゃか作っていきたいと思います。

調べてみたところnoteのヘッダー画像のサイズは1280px×670px(1.91×1)が最適なようです。
自分はロゴ制作の際Adobeのillustratorを使っているので、とりあえずそのサイズのアートボードを作ります。

現状右側のパネルの配置がすこぶる使いづらいので、タイミングで使いやすいよう整理したいと思っています。おすすめの配置などありましたらこっそり教えていただけるとありがたいです。

それでは作成に取り掛かりましょう。独自の適当な調査によると、どうやらnoteのベースカラーは #41C9B4のようです 。(違っていたらすみません)
今回はこの色を基本にヘッダー画像を作っていこうと思います。

まず手始めに、アートボードの中心に文字を配置していい感じのフォントを選び、先ほどの色を適用します。

これで一枚ですね。今回はめちゃくちゃお気に入りのフォントの「Boucherie Cursive Bold」を使用しました。スクリプト体のおしゃれさと、等幅の線を用いたポップさを兼ね備えるおすすめのフォントです。大体これ使っとけばいい感じになります。
そして色を背景と反転させて二枚目。

こっちのほうが『noteっぽい』ですね。なんとなく。
これは最近知って感動したillustrator豆知識なのですが、「ctrl+C→ctrl+B」でアートボードの同じ場所に貼り付けができます。出来ないわけがないのに自分はこの機能に気づくまでにctrl+Vとともに2年の月日を共にしました。

続けて紙のノートをイメージして作ったやつを2枚

上のはグラデーションとドロップシャドウを巧みに使ったよく見るすごいお洒落なやつを再現しようとして失敗したやつで、したのは結構いい感じにできたやつ。最近作り方思いついて結構気に入ってるので今度noteで作り方書こうかな。

以上

「みんなのフォトギャラリーへ初投稿!」でした。お付き合いいただきありがとうございます。今回制作したヘッダー画像は《みんなのフォトギャラリー》にて公開していますのでお気軽にお使いください!

それでは次回!

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