よいやさー！ええやん姫路フロントエンドエンジニアの長尾です。
僕のええやん姫路でのお仕事って、ライターさんが「こんな表現をしたい！」っていう要望に応えて、記事やページ全体の見た目を組み立てることなんです。
なので、ええやん姫路の中に組み込んでしまうもの以外にも便利なツールがあればライターさんにオススメする場合もあります。
 |
中でも画像編集系のツールは常々アンテナを張っていた部分なんですが、ようやっと手軽で良いものを見つけることができました！ |
|---|
奴の名はCanva
それはまぎれもなく奴です。Canva。
ちなみにサイコなガンの左腕はありませんし、クリスタルなボーイが宿敵でもありません。
複雑な画像編集（レタッチとかコラージュとか）はできませんが、画像の上に文字入れするだけでOKなら十分すぎるほど活躍します。
無料で使える素材も豊富に用意されているので、「なんとなーくそれっぽい画像入れときたいなー」っていう場合にも便利です。
今回はこの記事の中で使う画像を実際にCanvaで作ってみましたので、その工程を例に紹介します！
|
|
あ、ちなみにここで紹介している画面に入るためには利用登録（無料）が必要なんですが、まぁそこんところは済んでるという前提で。 |
|---|
まずは基本型を選びます
上にざっと並んでいるサンプルの中から基本の型を選ぶもよし。
右端のMore…をクリックすればもっと沢山のサンプルが出てきますので、その中から合うものを探してもよし。
More…の上にUse custom dimensionsっていうのがあるので、そこをクリックすれば自由に画像サイズを選べます。
|
|
今回は、このUse custom dimensionsをクリックして、600×400pxの画像を作ってみようと思います。 |
|---|
レイアウトを選ぼう
今回は基本型を選ばなかったので、写真のレイアウトも自分で選びます。
画面左側のLAYOUTSをクリックすると、レイアウトのパターンの中から選ぶことができます。
|
|
その数なんと104種類！！ |
|---|
今回つくったやつを、そのままこの記事のアイキャッチ画像にしようと思ってるので、今回は写真１つだけが入るシンプルな型を選びました。
画像をアップロードしよう
サンプルで用意されている無料素材も使ってオッケーなんですが、今回は自分で用意したキャプチャ画像を使用したいので、画像をアップロードします。
左側メニューの一番下、UPLOADSからUpload your own imagesをクリックすると画像をアップロードできます。
|
|
アップロードしたあと、画面に出てくるまでしばらく時間がかかりますので、コーヒーでも淹れて待ちましょう。 あ、大丈夫ですよ奥さん。よほど大きい画像でない限り、マグカップを食器棚から出してインスタントコーヒーにお湯入れるくらいの時間だけです。 |
|---|
画像を配置しよう
アップロードできたら画像を右側のキャンバスに配置します。
ここはドラッグ＆ドロップだけです。
配置したあと、四隅のハンドルをドラッグすることでサイズを調整できます。
|
|
ちなみに、Photoshopと同様にキーボードのShiftキーを押しながらドラッグすることで縦横の比率を固定したままサイズ調整が可能です。 |
|---|
文字を入れてみよう
文字は左側のTEXTから。
様々に装飾された無料サンプルもありますし、上側のAdd heading・Add subheading・Add a little bit of body textをドラッグ＆ドロップして使えば飾りっ気のないノーマルなテキストを入れることができます。
ただ、Canvaで選べるフォントの中に日本語のものがないので、日本語はブラウザの標準のフォントで出力されちゃうんですよね。
ここんとこがちょっとむずがゆいポイントです。
|
|
つまり、ちょっとなんというか。美しくないというか。 英語だけで表現できるなら本当に様々な種類の画像を作成できるんですが、ある程度クオリティのあるものを日本語で作ろうと思うと……です。 |
|---|
作った画像を保存しよう
FileからSaveを選ぶと保存されます。
保存された画像はトップページに表示されているので、ここから編集を再開することができます。
作った画像をダウンロードしよう
ブログやホームページに掲載するために作成した画像をCanvaからダウンロードしてPC内に保存しましょう。
画像編集画面の右上にDownloadボタンがあるので、ここをクリックします。
ダウンロード形式は次の通り。
Image: for Web (JPG)
Web用画像。ブログやホームページの用途なら一般的にはこちら
Image: high quality (PNG)
PNG形式で画像を出力したいならこちら。
high qualityって書いてますが、たぶんpng-8形式っぽいので、写真が入ってると逆に画質が落ちた感じがしました。
イラストなどで塗りの部分にJPEGノイズが出さずキレイに表現したい場合にはこちらがいいと思います。
PDF: standard
PCなどの画面で見る用途のPDFを出力するならこちら。
ちなみに、画像編集画面の下側にAdd a new pageっていうボタンがあるんですが、ここをクリックすると複数ページに分けて画像作成することができるようになります。
つまり、このCanvaを使えばプレゼンテーション用のスライドを作ってPDFで出力することもできるってワケですね！
|
|
日本語のフォントがまぁ、アレなわけですけどね……うん。 |
|---|
PDF: for print
印刷用の高解像度PDFを出力するならこちらです。
ダウンロード完了！
キラッキラのプログレスバーが右端まで伸びきったらダウンロード完了！
あ、ちなみにダウンロード中に英語で$1とか書いてあるので気になる人もいるかと思いますが、大体こういうことが書いてあります。
Canva内で用意している無料素材、またはあなたがアップロードした自前の画像だけを使っていればダウンロードは無料です。
もしCanvaの有料素材を使用しているならば、1つにつき1ドルの費用が発生し、24時間以内で編集可能です。
ということは、編集画面の左側のメニューから素材を選ぶ際に「$1」って書いているもの以外を使用していれば無料で利用できちゃうみたいです。
完了後の画面を見ると、この画面からTwitterやFacebookにアップロードしたり、メールで送信したりできるみたいですね。
何よりFlashを使ってないのがいい！
実はブラウザで操作できるタイプの画像編集ツールは色々とあるんですが、ほとんどがFlashで作られているので、使うためにFlash playerが必要なんです。
でも、WebryOneでは2015年7月に発覚したFlash Playerの脆弱性の対策でFlash playerを事務所内の全機でアンインストールしてしまって、僕らFlashベースのものはもう使えないんですよ。
デザイナーのアスカや、メディア部のなおぴー＆なべちゃんはAdobeのPhotoshopを使ってるんですけどね。
我々Web制作部には支給されていないので、今までもGIMPを使ったり色々と工夫してやっていたんです。
そこで何とか画像加工とまではいかなくても、記事に使う画像をパパッと作れる程度の画像編集ツールないかなーと探していたんですが、外部サーバーにアップロードしても問題ないような画像を作成する場合には、今後しばらくこのCanvaに活躍してもらおうと思います。
|
|
なんと言っても手っ取り早いですからね。スピーディーにそれなりのものを出せるのは大事な部分だと思うんですよ。 |
|---|
まとめ
- Canvaの使い方は超カンタン！画像を配置して文字入れするだけ！
- 有料素材を使わなければ無料で使える！
- でも日本語に弱い
🎤 あなたの「好き」を配信にしてみませんか？
ゲーム・雑談・メイク・歌…
普段の趣味や日常を「ライブ配信」という形で発信してみませんか？
私たちはTikTok公認のライバー事務所として、
配信初心者さんのスタートから運営・収益化まで無料でサポートしています✨
地元・姫路をはじめ、全国から登録OK！
あなたのペースで楽しく活動できます😊
