宇宙時代より

宇宙時代より

素敵なコンテンツ作成を目指して頑張る大学生のブログ

ド素人でも無料でブログのヘッダーを簡単に作成出来るCanvaを使ってみた。

 有名ブログがオリジナリティあふれるステキなヘッダーを使っているのを指をくわえて見ることしか出来なかった底辺ブロガーが、金はかけたくねえ。でも時間かかるのは嫌だ。かといって知識もねえ。でもおしゃれなオリジナリティあふれるヘッダーが作りたい!!という傲慢さ全開な願いを叶えてくれるアプリ:Canvaについて書こうと思います。

ほんま便利やで(フランク)

www.canva.com

 最初にヘッダーをデザインする前提を3つほど上げているので、できればそちらから読んで欲しいです。が、もし、んなこと分かってるよって方がいたら飛ばして4番のヘッダー作成云々から見てもらっても構いません。

 

まずはじめに:テーマを選ぼう

f:id:skyfish25:20170710175408p:plain

どうしてテーマから選ぶのか

テーマ、ブログごとに目指すべきヘッダーのデザインは異なります。

シンプルで洗練されたおしゃれな感じにしたいのか、ゴチャゴチャした感じにしたいのか、かわいいデザインにしたいのか…各々目指すべき方向性は違うと思います。

 

また、テーマによってアクセントになる色があると思います。モノトーンなデザインならモノトーンで統一しても、カラフルにして色味を加えてもいいですが、ごちゃっとした色を沢山使っているブログなら、ヘッダーだけモノトーンだとちぐはぐな印象を与えてしまいます。

 

おすすめテーマ

はてなブログは本当にたくさんテーマがあるので気に入ったやつを一つ選びましょう。ちなみにもうこのテーマでいくと決めた人でもヘッダ変更を機にテーマを変えるっていうのは全然アリだと思います。

一概には言えませんが、本格的にカスタマイズしたい方はInnocentやBlankなどのシンプルなテーマがおすすめです。ちなみに僕は前者のInnocentを使ってます。

Innocent - テーマ ストア

Blank - テーマ ストア

 

そんなCSSとかカスタマイズとか言われてもオイラ初心者やから…と気が引けてしまう方は元からデザインが完成されているDUDEやNakedなどがおすすめです。

オリジナリティにはかけますが、初めて導入した時の感動はすげえ!はてなブログすげえ!ってなること間違いなし。

minimalismなんかもおしゃれです。DUDEやNakedほど目を引くデザインではないですが(良い意味で)シンプルな美しさがあります。

Naked - テーマ ストア

DUDE - テーマ ストア

Minimalism - テーマ ストア

 

方向性を決めてデザインを考えてみよう

まずはにらめっこから

自分のブログとにらめっこして、目的に応じてヘッダーのデザインを漠然とでいいので考えてみましょう。ここ大事。もし、「なんか微妙だな?」ってなったら、ブログのテーマを変えるもよし、CSSをいじるも良し。

 

ヘッダーはいわばブログの顔です。何時間でも何日でも凝りましょう。ちょっといじるだけでも「ちぐはぐさ」は回避できます。

ちなみに僕は、洗練された感じを目指してブログをデザインしてきたので、当初のヘッダーはおしゃれを意識してデザインしてました。

f:id:skyfish25:20170710180042p:plain 

今回変更したいなと思ったのは理由は主に4つ

なんかパッとしない(薄い?)

よくよく考えれば僕のブログ名じゃない

>いろんなブログ見てたら微妙な気がしてきた

>なんとなくイメチェンしたい

 

取り敢えずの方向性

シンプルかつポップ、だけど目を引いてブログのデザインを損なわない感じという目標を掲げて作成してみることにしました。

デザインを模索しよう:参考にしたブログ

f:id:skyfish25:20170710180257j:plain

作成に至ったら目標となるヘッダー(ロゴ)を何個か絞り込みましょう。イメージを具現化するプロセスです。好きなブログでもいいですし、アニメのロゴなんかでもいいでしょう。

 

ちなみに僕は好きなブログをいくつか参考にさせていただいたので、参考までに貼っておきますね。

akiueo.hatenablog.com

存在感のあるロゴ。シュールなにわとりが目を惹くデザインです。

hitsuzi.hatenablog.com

ブログのアクセントカラーであるピンクと調和した水色のロゴが素敵です。やっぱテーマとヘッダーは親和性がないとなと思うきっかけになりました。

www.nimonoism.com

ミニマルなデザインって素敵だなと思うきっかけになったブログです。

 

ちなみに、アニメのロゴを参考にしたいって方はGoogleで「アニメ ロゴ」で検索すればいっぱいでてくるのでそちらを参考に。

本題:Canvaを使ったヘッダー作成

f:id:skyfish25:20170710180538j:plain

やっと本題です。いざ鎌倉(激寒)

僕はフォトショップもイラレも持っていないのでヘッダーとかこういうデザインはド素人です。イラストは描いてますが、今回のヘッダー作成には正直特に役立ってないです。

そんな素人にもそれなりのロゴ作成が出来るのがCanvaです。

www.canva.com

UIが直感的で、かつシンプルなので、僕みたいなデザイン素人でもなんとか作成できるレベルだと思います。というかやってみると結構楽しい。

f:id:skyfish25:20170710170800p:plain

というわけでこんな感じのロゴが出来ました。正直まだ納得はいってないのですが、後々改善していこうと思います。

Canvaで作成する過程

僕はiPad Proで作成しました。もちろんPCからも出来ますよ。

ヘッダーサイズはブログによるのでご自分で調べてブログにあったサイズのヘッダーを作ってください。わかんねえという方は下を参照。

ヘッダー作成4:ヘッダーサイズを確認する方法|webデザイナー「りょう」が教えるアメブロ最強テクニック!

ちなみに僕は1000×200で作成しました。(のちに微調整しました)

f:id:skyfish25:20170710171251p:plain

GoogleかFacebookのIDがあればログインできます。余談ですが、最近こういうサービス増えてきて便利になりましたね。

f:id:skyfish25:20170710171317p:plain

使い方を63秒で教えてくれます。いやいやいいよ!とか思わず見ましょう。かなり役に立ちます。

f:id:skyfish25:20170710171442p:plain

UIは非常にシンプルです。テンプレートも用意されているのですが、僕は普通にテキストボックスを作成して文字を打つというシンプルな方法を選びました。

 

ちなみに日本語フォントは少なめですが、ポップなものからミニマルなものまで揃っているので、特に不満は感じませんでした。

ちなみに僕が使用したフォントはニコモジ+というフォント。かわいい。

f:id:skyfish25:20170710171839p:plain

背景を入れることもできます。テンプレも用意されてますが、自分の持ってる画像も使えるのでそちらを背景にするとオリジナリティが出るかもしれません。

感想:作ってみて

ぼくぐらいシンプルなロゴでいいって人はイラレもフォトショもいらないですね。Canvaは神。本当に直感的に作成出来ました。

ただ、ちょっとオリジナリティにはかけるかなぁというのも正直な感想です。

あとあれだけ言っていたブログのテーマとヘッダーがちぐはぐになるとダサいというのを体現する結果になってしまいました。戒めとして残しておきますので参考にしてください。

f:id:skyfish25:20170710172358p:plain

一応アクセントカラーとタイトルの色を合わせてみたりしたのですがどうも微妙ですよね。文字色が黒とややグレーがかった黒っていうのも気になりますし、シンプルなグローバルメニューとヘッダーがイマイチあってないです。うーん。なんとかせねば。

 

Canvaの先駆者たちのヘッダー

正直僕レベルのヘッダーだとなんだよ微妙じゃねえかという声があがりそうなので先駆者さんの記事を貼って逃げようと思います。いやぁまさかこんなすごいアプリだとは(

https://cdn-ak.f.st-hatena.com/images/fotolife/g/gqp/20170525/20170525161052.png

lf2.hatenablog.com

f:id:skyfish25:20170710173125p:plain

ameblo.jp

 

まとめ: Canvaの可能性は無限大:ひたすら弄るべし

https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT1beRH1KOJFr3LdGSBbXOySW3C1c17cEIRK6pUuOVx4RFlEhJgaofM1_zxGg

皆さんお気づきかもしれませんが、この記事は言わば戒めの記事です。僕はなんの計画性も立てず、ただCanvaすごいなあとか呆けてヘッダー作成に挑んでしまいました。いいですかみなさん。まずブログとにらめっこしましょう。

 

ちなみに記事を書きながらまたCanvaを弄っているのですが、こればこるほど面白いです。さすがにAdobe系のソフトには負けるのかもしれませんが。限りなく近いところまでいける可能性を秘めていると思います。もし、もっといいデザインのヘッダーが完成したら、また記事を更新してみようと思います。