昨日のブログで誓ったこと。その一つにサイトのロゴやヘッダーをしっかりつくってブログの内容を明確に伝えるようにできることがありました。実は雑に友人にちゃんとお金払うからバナーと似顔絵イラスト作ってよ！といったのですが、どんなイメージなのがいいの？といわれて答えられず、ひいらぎやがそんな状態でお願いされたら困るよなと思ったので、自分で試してみたのでした。最近は canva というWebサービスがあって、簡単に使えるよということだったので試してみたところ、本当に簡単に作れました。BlogMap用とwordpress用の両方を作ってみました。
すでにトップに載っていますが実際にできたのはこんなのです。ちょっと時間が経った今見るとバランスを直したいなとも思いますがまずは簡単にこんなのができるよというところですね。
やってみて思ったこと。それはまずは自分のサイトのイメージを自分でちゃんと作っておくことが大事ということです。
ひいらぎやは何も考えずにバナーやロゴをその雰囲気だけで作ってしまったので、ブログに貼ってみたら全然イメージ合わないじゃん！となって、そしてブログのイメージカラーなどを変えるという方向に倒したので今日からずいぶんとイメージが変わってしまいました。もうちょっといろいろと試してみることになると思います。
まずは昨日の誓いのおさらいです。
- デザイナーさんに以下を発注する
- サイトのロゴ（「ひいらぎ」というアイコンは「思索のあしあと」のアイコンではないし…）
- twitter、ブログで使えるヘッダー画像
- ひいらぎやの似顔絵イラスト（感情によって数種類）
- 過去に成功しているブロガーさんのブログをある程度読み込んで目指すところのイメージを作る
- ブログの作り方についての書籍などを何冊か読む（ひとりの考え方に偏らないように）
- wordpressのお勉強をする
これが昨日誓ったこと。そして、1はお菓子と引き換えにデザイナーさんにお願いしたのですが（笑）、とはいえ、この年末の忙しい時期にすぐには出来ないよといわれ、またイメージを教えてと言われたのですがそれにも答えられず、ちょうど2週間前の休日出勤の代休だった今日、がんばってみるかーとおもって動いてみたのでした。
とはいえ、デザインセンスなど皆無なひいらぎや。ちょっとググってみたら canva というサービスを見つけました。月1500円のProプランもあるようですが無料でも使えそうなので、試してみることにしました。14日間無料でPro版の試用ができますので、ヘッダーだけの作成の間だけ使うのもありかもしれません。こちらから飛べます。
なお、昨日の誓いはこちらに…。
最近有名ブロガーのヒトデさんなどがはじめたブロガーの交流の場であるblogmap。twitterを見ていたらいろいろな方がつぶやいていたので、流行にのってひいらぎやも登録してみました。 登録自体は非常に簡単で名前とブログとヘッダーの画像な[…]
canva でヘッダー画像を作る
Webで動くのでデバイスを選ばず作業が出来ると思います。ひいらぎやはPCの方がなれているのでPCでのやりかたでの紹介になります。
進め方は簡単で以下の通りです。
- 新規キャンバスを作る
- デザインする
- ダウンロードする
って、そのままですね。ちょっと詳しく紹介します。
前置き – ヘッダーサイズを調べる。
さて、実際の作業に進む前に前置きです。ひいらぎやはBlogMapに適当に登録した画像データの見え方に絶望したわけですが、BlogMap用、wordpress用ともにサイズ感を把握しておく必要があります。
実はBlogMapには2カ所「ヘッダー」を登録するところがあります。プロフィール設定の「基本設定」と「ブログ設定」にあるヘッダーです。前者はブロガー個人のヘッダーで後者はブログのヘッダーなのでちょっと意味合いが違ってきます。それぞれ推奨サイズが違うので注意が必要です。
まず、基本設定のところのヘッダー登録画面を見てみます。
現在のヘッダーが表示されていてそれを更新するような画面になっています。右下にサイズが書いてあるのがわかるでしょうか。1140x240pxとあります。ですのでこのサイズで作ることになります。
ただ、このサイズですが、スマホで見たときとPCで見たときで異なるようです。上の画像はPCの画面ですが、実は見えているのはスマホで見えるイメージです…。難しい…。
実際の見え方はこうなっています。
これはPCでの表示。
そしてこちらがスマホでの表示
そうです、アップロードされているバナーは同じなのですが左右が切れているのがわかるでしょうか。アップロード画面での1140×240という数字を信じて目一杯使ってアップするとPCでは綺麗に見えますが、スマホでは両側がきれるという状況になります。
簡単にテストをしたところ、横幅の1140の内、スマホで表示されるのは800pxです。ですので、メインの内容は中央800pxに納めてその両側はあまり重要でないデザインだけにするのが無難と思います。
お次はブログ設定のサイズです。
こちらは1140x640pxです。ブログ設定のほうはPCとスマホで見え方は同じようなので特に気にせずに作れば良いと思います。
さて、それを踏まえて始めましょう。
新規キャンバスを作る
とりあえず、canvaでアカウントを作ってチュートリアルなどいろいろあるのですがすべてすっ飛ばします。そのうち以下のページが出てきますので、ここで、カスタムサイズを選びます。
そして「デザインを始める」ボタンを押します。一度使ったことがある方はホーム画面右上にこんなボタンがあると思うのでこれを押します。
するとちょっと違う画面ですが、デザインの種類を選べますのでウインドウ下の「カスタムサイズ」を選びましょう。
すると実際にサイズを入力する画面が出てきます。まずは基本設定のヘッダーを作ってみます。先ほど確認した数字1140×240を入力します。
こう入れたら「新しいデザインを作成」ボタンを押します。
するとシャコーンとまっさらなキャンバスが出てきます。
ここにデザインしていくわけですが、最初に真ん中800pxをわかりやすくしましょう。
左側のメニューの「素材」ボタンを押して「線と図形」から四角があると思いますのでクリックします。
するとキャンバス中央に四角が現れます。
このサイズを800x240pxに変更してその枠の上に重要な内容を書き、その両側には重要なデザイン以外を置くことにします。この四角自体は後で消すものとして扱います。
さて、サイズの変更をしましょう。上記の正方形の角と辺のところに白い丸（○）と四角（□）があります。これをマウスでぐりぐりするとサイズがかわります。このあたりは普通のお絵かきツールと一緒です。ぐりぐりするとこの図形のサイズが見えますので、800×240に合わせて下さい。上下はキャンバス目一杯でちょうどそのあたりにいくと一度止まってくれるので簡単に合わせられると思いますが左右は綺麗に800に合わせるのは以外とめんどくさいです。ですが、基本目安なのでそれ以下であれば問題ないですね。
小さくて見にくいですが右側に幅と高さが見えています。これを合わせて下さい。そして、この四角を真ん中に移動させます。先ほどの白い○と□以外をドラッグして動かせば動きます。中央に行くと下のようなラインが見えるので簡単です。
この四角が動くと面倒なのでロックしておきます。右上に南京錠のマークがあるので、四角をクリックして選択した状態でこのマークをクリックして施錠しておきます。
これで「キャンバス」が出来ました。デザインしましょう。
デザインする
これは正直がんばりましょうとしか言えないです。いや、ひいらぎやが教えられることは何もありません（笑
メニューから用意されている画像の挿入（有料の物は王冠がついてます）や、テキストの挿入。そして素材があれば手許のPCからもアップロードが出来ますし、SNSからももってこれそうです。
ここではメニューから素材を選んで「人」と検索しています。イメージに合う言葉を検索してみるといろいろと出てきますのでこのあたりは気に入った素材を見つけられるかが勝負ですね。
テキストを挿入したところです。左のメニューから「テキスト」を選んでサイズとフォントの例がでるのでクリックするとそのままの文字が真ん中に置かれるので必要なところに移動します。これも画面中央上あたりにフォントやサイズの変更メニューがでているのでこのあたりでごにょごにょします。
アップロード画面です。手許の画像や写真を取り込めます。実はひいらぎやは課金して使っている画像サイトでそれっぽい絵を拾ってきて組み合わせました。
そして背景色の変更はこちら。キャンバスの空いているところをクリックしてキャンバスを選択状態にしてから、カラーパネルをクリックして色を変えます。無料では細かい色が選べないようです。背景を写真なんかにしてしまえばあまり影響はないですね。
さて、デザインがおわったら、最初の場所確認の四角のロックを外して削除します。そして出来たバナーをダウンロードしましょう。
ダウンロードする
最初に「デザインを作成」ボタンだったところが制作中はダウンロードボタンになっています。デフォルトで形式がPNGになっていると思いますが、そのままでOKと思います。保存するフォルダを決めて保存して下さい。
さて、これで一通り作成の方法です。今回は基本設定のヘッダーを作りましたが、キャンバスのサイズを変更するだけで他のものもつくれるので試してみて下さい。画面を閉じなければブラウザの別のタブやウインドウで別のキャンバスを作ってコピーアンドペーストも出来ます。
canvaの左上のファイルメニューからフォルダーに保存を選択すると作った画像が保存できます。ただし無料プランでは2つだけですのでご注意を。ひいらぎやは何も考えずに消してしまいました…。
最後にサイズのおさらいをしましょう。
- BlogMap 基本設定: 1140×240（スマホ版は横幅の中央800×240）
- BlogMap ブログ設定: 1140×640
- wordpress （少なくともHuemanテーマ）: 1380×280
canva のリンクを再掲しておきます。使ってみたい方はこちらから。
最後にひいらぎやがつくったものたち
先ほどwordpress用のヘッダーだけお見せしましたが、他にもロゴなんかを適当に作って見たのでさらしてみます。
BlogMap 基本設定用ヘッダー（中心が左に寄っている…）
BlogMap ブログ設定用ヘッダー
思索のあしあとロゴ1
思索のあしあとロゴ2
ということでなかなか楽しい一日だったのでした。