スマホだけで作る、個人サイトのバナー【同人サイト向け】

 

個人サイトによくある、サイトバナーの作り方を解説していきます。

自分がサイトバナーを作ろうと思った際、それなりにネットで調べてみたのですがPC向けツールを使っている解説記事が多く、スマホ一本でサイトを運営している方には不便かもしれないと思い、解説記事を書くことにしました。

はじめから終わりまで、スマホだけで完結する作り方です。

 

ツイッター(現X)の不調などもあり、個人サイトに興味を持ち始めた方たちの助けになればいいなと思ってる。

 

注意点としては、これよりもっと洗練されて分かりやすい作業手順が絶対あると思うので、これが最適解だとは思わず、参考程度くらいに見ておいてください。

とにかく難しいことを考えずに直感的に作れるような流れにしました。

もっと分かりやすい作り方があるぜ!!!と思った後続の方が解説記事を作るきっかけになってくれると嬉しい。

 

1.使用ツール

アイビスペイント」と「画像サイズ」の2つです。

どちらも基本無料で使えるアプリです。

 

2.画像サイズ縮小

最初に、サイトバナーに使う画像を、バナーに合わせたサイズにまで小さくしていきます。

私は今回、自分で描いたこのイラストを例として使っていきます。

 

最初はアイビスペイントで作業します。

元からアイビス内に画像データがある方は、アイビス内の機能でイラストを「複製」してそのデータを使います。

アイビス以外の場所から画像を持ってきた方は、「新規作成」から「写真読み込み」機能でアイビス内に画像を読み込ませましょう。

 

サイトバナーの大きさは、基本的には200×40となっています

それ以外のサイズではダメということは無いですが、一部のサーチサイト様では200×40の画像でなければ登録できないこともあります。

また、ほとんどのサイト様は200×40でバナーを作っているため、並んだ時の統一感も考えてこのサイズで作るのが無難だと思います。

 

後で200×40のサイズで切り取った時、ちょうどよくなるように画像を小さくします。

アイビスメニューから、「移動変形」を選択します

対象を「作業レイヤー」から「キャンバス」に変更

「拡大率」をお好みのサイズにまで下げていきます

ここら辺は元の画像がどれくらいの大きさかで数値が変わってくると思います。

私は今回、1900×1900の画像をとりあえず20%にまで小さくし、500×500程度の大きさにしました。

 

次に、キャンバス(画像)自体のサイズを小さくします。

メニューの「キャンバス」を選び、「キャンバスサイズ」を選択します。

 


縮小した画像サイズに合うように、キャンバス全体のサイズを小さくしましょう。

私は500×500にしました。


終わったら、一旦この画像をスマホに保存します

 

3. 200×40サイズに切り取る

さっき保存した画像を、「画像サイズ」のアプリを使って200×40に切り取ります

「画像サイズ」に画像を読み込ませた後、ここの幅と高さをそれぞれ200と40に設定します。

200×40サイズの枠ができたので、見栄え良く収まるように、枠内の画像を二本指で回転したり拡大させたりして調整していきます。

とりあえず私はこんな感じにしました。

そしたらこの画像を保存

200×40サイズのバナーの下地ができました。

 

これで一応は、サイトバナーができたことになります。

このままサイト内に置いたり、サーチサイトの登録に使ってもいいと思います。

ここからは、よりサイトバナーらしく体裁を整えたり、細かな装飾をしていきます。

これはするべき!みたいな決まりは特にないので、やりたいものがあれば取り入れてみてください。

 

4.細かな装飾

これからバナーを囲う枠を作っていこうと思います。

「画像サイズ」で用意した200×40の画像を、またアイビスペイント」に新規作成で読み込ませます。

画像の上に新規レイヤーを作ります。

そして新規レイヤーでメニューから「コマ割り」を選択します

画像の上でタップして「枠を追加」を選び、枠の太さや余白を調整していきます

私はこの↑数値で毎回作っています。

適用したのが以下になります。一気にパキッとした感じになるので、気に入って多用しています。

 

次に、サイト名をバナーの上に付けていきます。

サイトロゴがある方はそれを使ってもいいかもしれません。

手書きでサイト名をいれる方もいるかもしれませんが、今回は文字入れ機能を使っていきます。

新規レイヤーをもう一枚作り、メニューから「文字入れ」を選択します。

フォントが多数あるのでお好みのを選んでいきましょう。自分は手書きっぽいフォントがお気に入りです。

サイト名(ここでは例としてブログ名)を入力します

文字を縁取りしたり、色を変えたりします。

 

とりあえずは、これで完成です!

手順の少なさのわりに、それっぽいバナーができたんじゃないでしょうか。

私が今回紹介したものは本当に必要最低限な手順だけなので、ぜひ色んなサイト様のバナーを参考に工夫を凝らしてみてください。

 

おわり