【AWS】知識ゼロから理解するRDS超入門
AWSのデータベースサービス「Amazon RDS」を初心者にもわかるように解説します。未経験には難しいMultiAZ構成やレプリケーションは、マスター/スレ...
そもそもCanvaとは何か？
Canvaとは、誰でも簡単にオンライン上でデザイン画像を作成できるWebサービスです。
基本的な作業は全て無料で利用できる上に、面倒な背景画像探しやフレーム作成などの細かい作業に至るまで、直感的な操作で簡単におしゃれな画像を作れるのが特徴です。
アイキャッチ画像はWordPressやはてなブログなどの記事投稿サイトでは必須の要素であり、その名の通りユーザーの注意を引く重要な画像なので、できる限り素敵なものを使用したいですよね。
Canvaを使えば僕のようにデザインセンスが無い人でも、豊富なデザインテンプレートを利用するだけでそれっぽい作品が作れてしまうので驚きです。
今回ご紹介するブログ用のアイキャッチ画像だけでなく、
- FacebookやTwitterなどのカバー画像
- Instagram用の正方形画像
- プレゼンテーション
- デスクトップ画像
- 本の表紙
- CDのカバー
- ポスターやブライヤー等の広告
- 名刺デザイン
などなど、あらゆる用途に利用することができます。
また、チームを作成することでアカウント同士を紐づけることができ、作成した画像のレイアウトを共有することもできます。
ちなみに課金システムもシンプルで、「もう少しカッコいい背景画像を使いたい！」という場合には、写真や素材を1ドルから簡単に購入することもできます。月額制ではないのがいいですね。
他のデザインツールとは何が違うの？
画像のデザインツールと聞いて真っ先に思いつくのが、Photoshop（フォトショップ）とIllustrator（イラストレーター）ですよね。
どちらも使った事がない人からすると、その機能の違いすらよくわかりません（笑）
Photoshopは主に画像の加工や整形などに利用され、Macでいう所のプレビュー.appを超高機能にしたようなイメージです。
一方で、Illustratorはロゴや広告画像の作成などに利用されるケースが多く、ペイントやお絵かきツールの超上位互換版です。
ただし、デザイン初心者がこれらの高機能ツールを利用したからといって、良い作品ができるとは限りません。
僕らに必要なのは使えるお手本なのです。そんなお手本も編集ツールも同時に提供してくれるのが、このCanvaなのです。
アイキャッチ画像を作ってみよう！
少々前置きが長くなってしまいましたが、実際に使ってみた方が理解するのは早いので、早速利用してみましょう！
1. まずは新規登録から
それではCanvaホームページにアクセスしましょう。PCからだと早速背景の挙動がかっこいいですね！
現在はGoogleアカウントかメールアドレスで登録することができます。
特に難しいことはないのでサクッと済ませてしまいましょう。
2. アイキャッチ画像を作るのにおすすめなサイズは？
無事にログインできたらすぐにデザインを作ることができます。
今回は16:9のアイキャッチ画像を製作するのですが、サイズ選びに注意が必要です！
僕が初めて作成した時にハマったことなのですが、「ブログと電子書籍」の項目から「Webサイトバナー（560 x 315）」を選択して作成したとこ、サイズが小さすぎて画質がとても悪くなってしまいました。
特に挿入した文字の画質がひどいもんで、読むに耐えません。
ですので僕のおすすめは、「ブログと電子書籍」の項目の「デスクトップ壁紙（1920 x 1080）」です！今回はこちらで解説していきます。
実際に完成してダウンロードした画像の容量は、拡張子にもよりますが1.0〜3.0MBほどあります。
ただ、アップロードする際にリサイズして横幅1080pxなどに縮小したり、ImageOptimを利用して圧縮するなどすればかなり小さくなりますので、綺麗に作って後から縮小しましょう！
（※選択したサイズによって利用できるデザインや背景写真が異なるので、そこも考慮に入れた上で色々と試してみてください。）
3. 背景画像を選ぶ
アイキャッチ画像を作成するために「デスクトップ壁紙」の項目を選べましたでしょうか？
それでは左からお好きな背景画像を選んで行きましょう。
MIYABI Labの技術ブログ用アイキャッチということで、今回は先進的で都会っぽいイメージの画像を選んでみます。
もうこの時点で90%完成しています（笑）
4. 文字情報と装飾を追加する
アイキャッチ画像なので、大きい文字でテキストなんかが入っているといいですね。
日本語フォントも様々な種類が用意されているので、サイトの雰囲気に合わせて選んでみてください。
また、ぼやっとしないようにフレームを利用してみるのも効果的です。フレームは左のタブの「素材」から「square」などで検索すると出てきます。
あとは背景色と文字色の兼ね合いなどにも注意しながら、見やすさを第一に考えて作り込んでいきましょう。
とりあえずできた。まぁまぁシュッとしてていいじゃない。
ちなみにここまで要した時間、新規登録からたったの20分くらい。盛ってません、本当に早いです。
5. OGP（og:image）も意識して作ってみよう！
せっかくアイキャッチ画像を作ったのですから、FacebookやTwitterなどのSNSでシェアされた時に表示されるOGP画像（og:image）としても利用したいですよね。
しかし厄介なのが、サービスによってシェアする際に利用される画像サイズが異なるという点です。
Facebookではぴったりなのに、Twitterでは文字が切れてしまった、、などとならないようにしっかりと計算してデザインしましょう。
と言いつつ、回りくどいのは嫌なので結論から言います。
今作ってるアイキャッチ画像をSNSでシェアすると、上下2-3%が切られるから気をつけてね！
SNSシェア用画像の推奨サイズを確認しておく
今回Twitterでのシェアに想定しているのは、Twitter cardのsummary_large_imageに準じて投稿した場合です。
これを利用する場合のOGPは以下のように記載します（このページのサンプルです）。
name="twitter:xxx"の3行を追加するところがポイントです。
<!-- OGP -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="MIYABI Lab">
<meta property="og:description" content="PhotoshopやIllustratorを使えなくてもCanvaなら誰でも簡単におしゃれなアイキャッチ画像が作れます。豊富なデザインテンプレートを組み合わせるだけなので専門的な知識は一切必要ありません。ここではそんなCanvaに新規登録してから画像を完成させるまでの使い方やその魅力についてご紹介します。">
<meta property="og:title" content="Canvaで簡単におしゃれなアイキャッチ画像を作ろう！使い方を徹底解説！ | 技術ブログ | MIYABI Lab">
<meta property="og:url" content="http://miyabi-lab.space/blog/13">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@miyabi_lab">
<meta name="twitter:player" content="@miyabi_lab">
<meta property="og:image" content="https://miyabi-lab.space/assets/imgs/blog/upload/eyecatches/eyecatch/13_eye.jpg">
肝心の推奨サイズについてですが、シェアを想定した場合は、
- Facebook：600 x 315px 以上
- Twitter：280 x 150px 以上
となっており、ヨコ： タテの比が2:1よりも若干縦に長いくらいで、実際に計算してみた比率は1.90:1 〜 1.87:1くらいが最適とわかりました。
現在作成しているアイキャッチ画像は1920 x 1080 なので、比率としては16:9、右辺を合わせると1.78:1、左辺を合わせると1.90:1.07 〜 1.87〜1.05くらいです。
上下ぴったりに文字やデザインを入れないように気をつけましょう。
実際に比べてみる
作成したアイキャッチ画像はこちら。いい感じ！
Twitter cardは公式サイトのCard Validatorでプレビューを確認できます。
よーく見比べてください、ほら、、
少しだけ上下切れてる（笑）
6. 完成！ダウンロードしよう！
最後にややこしい話をしてしまいましたが、これで完成です！
画像は右上のボタンからJPG、PNG、PNGでダウンロードできますが、JPGの方がPNGよりも容量が半分くらいだったで、デフォルトのままJPG推奨です。
見事にサクッと完成しました！なんて簡単なのでしょう！
アイキャッチ画像作成に使える便利な機能
イケてるアイキャッチ画像ができたけど、これを記事ごとに作り直すのはやっぱり面倒、、。
そんな方に朗報です！Canvaの便利な機能の1つに、作成したレイアウトのコピーを作ることができるのです！
しかも同じファイル（ワークシート）内に作れるので、パワーポイントのように複製していくことができます。
こんな感じで背景などは使い回しつつ、色とテキストで量産することが可能です。これは便利ですね！
ついでにTwitterカバー画像も作ってみた！
MIYABI Lab（@miyabi_lab）のTwitterにカバー画像をつけ忘れていたので作ってみたいと思います。
（※ごめんなさいまだ作ってません！優先順位低めなので作ったらここでご報告します！）
選択肢が増えるっていいね
今回はプログラミングやらネットワークやらの難しいお話ではなく、ちょっとしたお役立ち情報として書いてみました。
Webエンジニアは「コーディングやプログラミングはできるけど、デザインは苦手なんだよなぁ」という方は多いかと思います。そもそも左右の脳みそで全然違う場所を使ってそうですもんね。
また、ライティングを本業としている方にとっても、無料のアイキャッチ画像はとりあえずO-DAN（オーダン）で済ますって人も多いでしょう。
でももう流石に飽きられてます。見ている方も「あーまたこの画像かぁ」ってなります。かと言って有料画像は高すぎます。
そんな時にCanvaは強い味方になります。きちんとアイをキャッチするような画像を作っていきましょう！
