
「ノートの切れはし」バナーについて #デザインのプロセス
最近、自分のポートフォリオを作成するために過去のデザインをまとめています。
制作背景、コンセプト…なかなか言葉にしようとすると難しく、作業が難航しているのですが、改めて自分の作品に向き合うことで自分に足りない部分がよく見えてくるようになりました。
なので今回からぼちぼちと、自分が作ったデザインのプロセスを言語化してみることにします。最終形に至った経緯からボツ作品まで、少々恥ずかしいですが全部載せます。
第一回目はこの #ノートの切れはし マガジンのバナーについて。
-----------------------------------
授業中何気ないことを書いては回す、手紙交換がモチーフになっていて、
ノートの隅っこに書くような気持ちを綴る共同noteです。
ノートの切れはし、コンセプトは以下のnoteに詳しくまとまっています。
このバナーを作るときにまず思い立ったのが、「フォントを作ってみたい!」という気持ちでした。コンセプトからではなく、自分の「やってみたい」からスタートしているところからまずアウトなのですが…
最初に作ったのはこちらです。
サインペンで書いた、書きかけのようなフォントをイメージしました。
インク溜まりがポイントです(笑)。
そして、”切れはし”感を出したくて次に作ったのがこちら。
切れはしに書いた手紙がコンセプトなのに、はしが切れたノートをメインにしてしまっていますね。しばらくこの、はしが切れた様子をillustratorの技術でどう表現するかに苦戦します。(今のままだと切れてるんじゃなくて燃えてる)
苦戦して次に作ったのがこれ。
いや、破れすぎだろ(笑)
この辺りではもう、「ノートをいかにして破るか」しか考えていません。コンセプトが定まっていないのにディティールにこだわりだす、私の悪い癖が存分に出ています。
うーん、そもそも授業中に回すノートの雰囲気、エモさが足りない。
ここで、この #ノートの切れはし 創設者であるスガイさんからラフが。
うんたしかに、こっちの方がエモい。ってか「切れはし」ってこうだよね。
いただいたラフをベースに制作をやりなおします。この時点で、最初につくったフォントはお蔵入りです…。
教室の机の上に小さく置かれたノートの切れはし。手書き風フォントを探してきて作ったのがこれ。
背景の机にグラデーションをうすーく入れてみた。けどこれじゃ、放課後っぽい。
そしてアートディレクタースガイさんから一言。
「落書きとかあったら面白いなあ」
最終的にメンバーに落書き書いてもらってもいいかも、なんていいながらアップデートしたのがこちら。
ちょっと汚しを入れて、グラデーションも昼下がりに差し込む太陽をイメージして明るく。
だんだん完成形に近づいてきました。
リングノート風だったノートをフラットなデザインに。もっと手書き感がほしくてフォントも変更。ただこのフリーフォントだと漢字が打てない…。
もういい!自分で書いちゃえ!と思い立って作った最終形がこちら。
ほどよくエモく、コンセプトに合ったバナーが誕生しました。この共同マガジンの顔となるバナーで、わたしもお気に入りです。
以上、#ノートの切れはし バナーができるまでのプロセスでした。