ねこ的アルゴリズム

技術的な話メインの雑記ブログ

デザイン始めて 5 時間のド初心者が LINE@ のバナーを自作してみた

こんにちは、珍獣(@mc_chinju)です。

友だち追加

LINE@ で無料メルマガをスタートしました。で、せっかくなのでバナーを自作してみた結果が上のものになります。

LINE@ では、ブログや Twitter では書かない、 ビジネスマインドや、プログラミング、デザイン、仮想通貨など について発信していきます。

「ちょっと気になるなコイツ」と思ったら、是非ご登録ください!

1 分程度で登録できますし、気に入らなければ簡単にブロックもできてしまうので。

少し話はズレましたが、今回はバナーを自作してみた感想を話していきたいと思います。それではどうぞ。

バナーの自作はめちゃめちゃ簡単

まず雑感ですが、バナーの自作、というよりもデザインスキル自体あまり難しいものではないな、と感じています。

というか、 まともに学び始めて 5 時間程度しか割いてないのに、バナー作れるってどれだけコスパいいんだよ と思っています。少なくとも初心者に対するハードルはめちゃ低い。

比較対象として、Ruby on Rails で なんちゃって書籍管理アプリを作るレベルでも、補佐があって 4 時間 程度かかります。公開してまともに動くレベルにするには、プラス何十時間 か必要になるでしょう。

それと比べると、 デザインは最終的なアウトプットができさえすれば、売り物になります

苦労して作っても、サクッと作っても、同じものができればそれでいいのがデザインです。

初心者のスキルでは、多少の遠回りはしているかもしれませんが、今回作ったレベルのものであれば、5 時間も触れば作れるようになるのが現実です。

作成時間は方針さえ決まってしまえば 15 分くらい。

であれば、自分でできたほうがいいと思いませんか?

バナーを作るまでに必要な工程

テンション上がってきたところで、実際の作業工程に移ります。

必要な工程はおおよそ 3 段階に分けられます。

  1. 伝えたいメッセージを決める
  2. 素材を作る
  3. 素材を組み合わせる

伝えたいメッセージを決める

抜け漏れがちですが、最も重要な工程がこちらです。

例えば今回僕が作成したバナーは、 「LINE@ はじめました」 という非常にシンプルなメッセージになります。

それに加え、

  • ねこ的アルゴリズム(ブログ名)
  • ねこのロゴ
  • アルゴリズム感(幾何学模様的な)

は入れたいという想いがあったので、それらを組み合わせて作るという方向性になりました。

本当は、この LINE@ で何を発信するかわかったほうが、読者は入る入らないの判断がしやすいというところがあるのですが、

今後 LINE@ で発信し続けた結果、ロゴも変えていけばいいかと気楽に考えこのようにしました。

自作できるとバナーもすぐに変えられるので超便利です

素材を作る

Illustrator か、それに似たソフトでベクター画像を作成します。

入門記事を書いていますので参考にどうぞ。

今回のバナーであれば

  1. アルゴリズム感を出す背景画像
  2. LINE@ のロゴ
  3. ねこのロゴ
  4. テキスト(ねこ的アルゴリズム, はじめました, 詳しくはクリック!!)

これらが必要になります。

1, 2, 3 は、既にある素材を持ってきたり、公式サイトから持ってきたりしているので、ほとんど自作する必要はありませんでした。

4 のテキストは独自のものは使わない方向でいくことにしたので、ここでの作業はありませんでした。

ほぼ作業なし!笑

素材を組み合わせる

ここからは Photoshop を使って、それぞれの素材を置いていきます。

具体的な操作方法はここでは触れませんが、本当に、 作った素材を置いてサイズ調整するくらい である程度までできます。プロになると、ここまでを如何に早く持ってくるかが大切になるらしいです。

次の工程が一番時間かかります。

調整する

最後に、テキストやロゴの大きさ、置き場所、全体のバランスなどを調整していきます。

  • 伝えたいメッセージが伝わるデザインになっているか
  • 色や配置のバランスは適切か
  • 余白は適切か

などですね。基本のデザイン理論はこちら

今回であれば、始めは LINE@ の文字が一回り小さかったのを、強調するために大きくしました。

f:id:neko_aquaalta:20170821173747p:plain

なんとなーく、いい気がする! よりも、チェック項目があって、最低限それはクリアしているしいいかな!

のほうが、よりよいデザインに近づけるかなと思います。やっぱり何でも基本は大事。

神里さんに作っていただいたバナー

友だち追加

こちらが師匠の神里さんがレッスン中に作ってくださったバナーです。

めっちゃかっけえ!!

  • 繰り返し
  • グループ化
  • 強弱
  • 余白

どれを取っても僕が作ったものより基本に忠実ですし、洗練されているように感じます笑

作っていただいたものを使おうか悩みましたが、せっかく自分で作れるようになったので、自作したものを使っていこうと思います。

今後の課題

今回のバナーは、まだ発展途中のものになります。

特に、ブログ名のテキストが普通のフォントなので

f:id:neko_aquaalta:20170821165657p:plain

「ねこ的アルゴリズム」のテキストを独自のものにしたい

という想いが強いです。

残り 2 回のレッスンでは、

  • SNS アイコン
  • ブログのトップ画像

の 2 つを作っていく予定なので、その時間で少しずつ作っていこうと思います。

お楽しみに!

最後に

LINE@ 登録忘れてないですか!?笑

友だち追加

珍獣でした!