楽しむTweetよいやさー!ええやん姫路フロントエンドエンジニアの長尾です。僕のええやん姫路でのお仕事って、ライターさんが「こんな表現をしたい!」っていう要望に応えて、記事やページ全体の見た目を組み立てることなんです。ええやん姫路の中に組み込んでしまうもの以外にも便利なツールがあればライターさんにオススメする場合もあります。中でも画像編集系のツールは常々アンテナを張っていた部分なんですが、ようやっと手軽で良いものを見つけることができました!奴の名はCanvaそれはまぎれもなく奴です。ちなみにサイコなガンの左腕はありませんし、クリスタルなボーイが宿敵でもありません。https://www.canva.com/複雑な画像編集(レタッチとかコラージュとか)はできませんが、画像の上に文字入れするだけでOKなら十分すぎるほど活躍します。無料で使える素材も豊富に用意されているので、「なんとなーくそれっぽい画像入れときたいなー」っていう場合にも便利です。今回はこの記事の中で使う画像を実際にCanvaで作ってみましたので、その工程を例に紹介します!あ、ちなみにここで紹介している画面に入るためには利用登録(無料)が必要なんですが、まぁそこんところは済んでるという前提で。基本型を選びます上にざっと並んでいるサンプルの中から基本の型を選ぶもよし。右端のMore...をクリックすればもっと沢山のサンプルが出てきますので、その中から合うものを探してもよし。dimensionsっていうのがあるので、そこをクリックすれば自由に画像サイズを選べます。dimensionsをクリックして、600×400pxの画像を作ってみようと思います。レイアウトを選ぼう今回は基本型を選ばなかったので、写真のレイアウトも自分で選びます。画面左側のLAYOUTSをクリックすると、レイアウトのパターンの中から選ぶことができます。その数なんと104種類!!今回つくったやつを、そのままこの記事のアイキャッチ画像にしようと思ってるので、今回は写真1つだけが入るシンプルな型を選びました。画像をアップロードしようサンプルで用意されている無料素材も使ってオッケーなんですが、今回は自分で用意したキャプチャ画像を使用したいので、画像をアップロードします。imagesをクリックすると画像をアップロードできます。アップロードしたあと、画面に出てくるまでしばらく時間がかかりますので、コーヒーでも淹れて待ちましょう。あ、大丈夫ですよ奥さん。大きい画像でない限り、マグカップを食器棚から出してインスタントコーヒーにお湯入れるくらいの時間だけです。画像を配置しようアップロードできたら画像を右側のキャンバスに配置します。ここはドラッグ&ドロップだけです。配置したあと、四隅のハンドルをドラッグすることでサイズを調整できます。ちなみに、Photoshopと同様にキーボードのShiftキーを押しながらドラッグすることで縦横の比率を固定したままサイズ調整が可能です。文字を入れてみよう文字は左側のTEXTから。textをドラッグ&ドロップして使えば飾りっ気のないノーマルなテキストを入れることができます。Canvaで選べるフォントの中に日本語のものがないので、日本語はブラウザの標準のフォントで出力されちゃうんですよね。ここんとこがちょっとむずがゆいポイントです。