JB の ワイドアンドシャロー

JB の ワイドアンドシャロー

クワガタ飼育初心者が極めて小規模なクワガタ飼育を真面目に考えるブログです

MENU

当ブログのヘッダーとアイコンを『Canva』を使って自作し直したことについて

     この記事では、当ブログやSNSのヘッダーやアイコンを自作し直したことについて記述させていただきます。

はじめに

    先日はヘッダー等を変更したことに伴い、ブログについて長々と書いてしまい申し訳ございませんでした。

    前回長々と語るきっかけとなってしまったのが、ヘッダー・アイコンの変更です。

    今回『Canva』というアプリを使用してヘッダーとアイコンを自作しましたので、これについてご紹介しておこうと思い記事にさせていただきました。

    すでに使用されている方も多いかと思いますが、「とりあえずJBレベルでもこの程度の作業でこの程度のものはできるらしい」という程度でご了承頂ければ幸いです。

私は知識も技術もセンスもない

    まず先にお断りをさせていただくのですが、私はデザインやこういったものを作成することに関しまして、知識も技術も、増してセンスもございません

    ヘッダー等をご覧いただいてお察しいただけると思います。

    現在のヘッダー等も、ひとまず無事形になりましたので、しばらく晒させていただきまして、気に入ればそのまま、気に食わないところがあれば修正していきたいと思っています。

でもヘッダーを作るとそれっぽくなる

    ヘッダー等はブログを運営されていなくても、TwitterFacebook等で必要になるかと思います。

    ヘッダーは写真でも、又、写真を加工したりテキストを入れたりした形でも当然十分かと思いますし、ゼロから自作するのももちろん結構かと思います。

 

    私の場合ヘッダーやアイコンを自作することでメリットと思っておりますのは、これまた本当に自己満足になるのですが、「ブログやSNSアカウントがそれっぽくなる」ということと「ブログとSNSアカウントの統一性が出る」というところかと思っています。

 

    あとは、ヘッダー自体にある程度情報がありますと、「こういうブログなんだな」「こういう人がやってるんだな」というご紹介になるかと思います。

 

    又、私の場合は実現できていませんが、ヘッダーがしっかりしているとしっかりしたブログだなと感じますし、ヘッダーが魅力的だと魅力的なブログである予感がする気がします。

今回使用したアプリについて

    前記のとおり私はなんのスキルもございませんので、iPhoneアプリで完結できる程度でいいかなと思っておりました。

    それで今回使用しましたのが『Canva』というアプリになります。 

    おそらくこういったもの等を自作しようとお調べしますと皆様行き着く程メジャーかと思いますし、すでに使用されている方も多くいらっしゃるのではないかと思います。

素材について

    今回ブログタイトルについてはテキストを入力してフォントを変えてなんとかしようと思っていました(というかそれ以上のことはできません)。

    又、さすがにテキストだけでは寂しいので、フリー素材から画像を探しまして、自分が使う形に加工しました。

これまでのヘッダー等について

    これまでは、このようなものを使用しておりました。

・ ヘッダー

f:id:jbwideandshallow:20190208174848p:image

・ アイコン

f:id:jbwideandshallow:20190208174911p:image

    ヘッダーの方は、当ブログを立ち上げるに際して、あらかじめ製作しました。

    「タイトル画像も無いようではブログの体裁が整わないのでは」と勝手に心配になり、とりあえずというつもりで手早く製作しました。

    ささっと作ったので、もうどうやって作ったか覚えていないくらいです。

 

    アイコンの方も、当ブログを開設しましてから間もない時期に作りました。

    これも、また「とりあえず」というつもりで作ったものでした。

    ですがどちらもずるずると作り直さないままきてしまいました。

新ヘッダー・アイコンについて

    そして今回これらを作り直すことにしたわけですが、こんな適当に作ったものでも、1年以上使っていると、多少なりとも愛着のようなものが芽生えるものです。

    それで作り直したものの、新旧どちらがいいか判断がつかなくなってしまい、Twitterでアンケートにさせていただいたのでした。

    その作り直したものが現在使用しておりますこちらです。

・ 新ヘッダー

f:id:jbwideandshallow:20190208175220p:image

・ 新アイコン

f:id:jbwideandshallow:20190208175233p:image

    私のブログはタイトルやロゴからでは、何のことを主に記事にさせていただいているブログなのかわかりませんでしたので、ヘッダーの方はクワガタの要素を入れたいなと思っていました。

    しかし私はデザインの技術もセンスもありませんので、少々試してみた挙句、結局オオクワガタ全身のシルエットを入れるということになってしまいました。

    アイコンの方は、ヘッダーを作ってから、ヘッダーのカラーやフォントに合わせて作りました。

ヘッダー自作方法

    私のヘッダー等の良し悪しは抜きにしまして、ヘッダー、アイコンを自作したことについて触れさせていただきます。

    自作と言いましても、前記iPhoneアプリを使って親指と人差し指を使って作っただけになります。

    『Canva』はアカウントを作成して使用しなければならないのですが、そのお陰でiPhoneからでもPCからでも作成することができます。

    私はほとんどiPhoneだけで作ったのですが、最後に画像のサイズを調整するなど、細かい作業はさすがにPCからの方が作業しやすかったです。

製作方法について

    Canvaにはおしゃれなテンプレが数多く入っています。

f:id:jbwideandshallow:20190208175535j:image

    おしゃれ過ぎて、あまりテンプレを生かし過ぎたものを私のような分不相応な者が使っていましたら、「アプリのテンプレ使ったな」と見破られてしまいそうです。

    いずれにしましても、私はシンプルなものにしたいと思っていましたので、「カスタムサイズのデザイン」から作成しました。

f:id:jbwideandshallow:20190208175736j:image

    すると画像サイズを指定できます。

f:id:jbwideandshallow:20190208175804j:image

    はてなブログのヘッダーの推奨サイズは、「1000×200ピクセル」ということですので、このサイズで作ります(デザインCSSでヘッダーを弄る方は目的にあったサイズで作成するということになろうかと思います)。

    なお、各ヘッダーの画像サイズにつきましては、

はてなブログ

     1000×200

Twitter

     1500×500

Facebook

     PC表示を重視する場合(スマホ表示で画像が欠けて良い場合)

     820×360

     スマホ表示を重視する場合(スマホ表示で画像すべてを見せたい場合)

     820×461

ということだそうです。

    私が自作した程度のヘッダーなんかでしたらすぐにできます。

f:id:jbwideandshallow:20190208175948j:image

    お察しいただけるかと思いますが、私がやった作業は、

・ 背景色変更

・ テキストの追加

・ 画像の追加

・ それぞれ任意のフォント、サイズ、カラーに

という作業だけです。

    しかしながらもっと手の込んだ素敵なデザインにしたいと思う一方で、シンプルなデザインの方がボロも出にくいという気はします。

製作時間について

    デザインを考える時間と素材を用意する時間は、どれだけのものを求めるかで変わってくるかと思いますが、Canva上での作業はすぐ終わりました。

    多分テキストや画像のサイズ調整をして一応完成するまでにも30分程度だったのではないかと思います。

最後に

    文中自己満足と申し上げましたが、誰に求められているわけでもありませんので、それ以外の何ものでもないと思います。

    しかし完成して使い始めてみますと意外と満足感があります。

    皆様が使用しておられるヘッダー等を改めて楽しませていただく感覚も生まれました。

    皆様どのようなものを、どのような想いで作られているか、是非お聞きしてみたいです。

ちなみに没アイコン

    アイコンにもクワガタの要素を入れられないかと思い一応作ったのですが、なんとなくしっくりこず、お蔵入りとなっています…捨てるのもなんなので、ここに貼らせていただきます。

    申し訳ございません。

f:id:jbwideandshallow:20190208181835p:image

※内容はあくまでJBの主観になりますのでご了承いただければ幸いです。

フォローする