Canvaで簡単!ココナラ出品用サイズ別画像作成ガイド
「ココナラでスキルを出品しよう!」と思い立ったものの、いざ始めてみると初期設定に意外と時間がかかり、なかなかサービスを開始できない…とお困りではありませんか?
特に、アイコンその他複数枚の画像を用意する必要があるため、そこに時間がかかります。
- プロフィールアイコン
- プロフィールカバー(ヘッダー)
- 出品画像(ひとつの出品につき1~10枚)
- ブログカバー
- ポートフォリオ
ココナラを始めるには、「プロフィールアイコン」「カバー」「出品画像」と少なくとも3つの画像が必須です。さらに、ココナラ内でブログやポートフォリオを持つ場合は、さらにこれらについても画像が必要となります。
本記事では、Canvaを使ってココナラを始めるにあたっての必須となる3つの画像を簡単に作成する方法を解説します!
まだココナラに登録してないという方は↓から登録しておきましょう!
Canvaで作るココナラのプロフィールアイコン
では、まずココナラのプロフィールアイコンを作成してみます。さっそくCanvaにログインしましょう!
サイズの設定
まず、出力したい画像のサイズを設定します。
※ココナラのプロフィール画像は、182×182 px以上の正方形画像サイズでアップロードすることとなっています。
- 「カスタムサイズ」をクリック
- 「幅」と「高さ」に数値を入力(182px以上で正方形であればOK)
- 「新しいデザインを作成」をクリック
デザイン画面に182×182pxのキャンバスが現れましたね(白い正方形部分)。ここにプロフィール写真を配置していきます。
注意! ココナラでプロフィールとして表示されるのは、(182×182pxの正方形でアップロードした場合)直径182pxの円ですので、注意しましょう。つまり、下図の点線の外側はアップロード時に表示されないことになります。
写真の配置
プロフィール写真 (or イラスト)を配置します。
- 「アップロード」をクリック(横にバーが広がる)
- 自分のPCからアップロードしたい写真が入っているフォルダを開く
- 写真をドラッグ&ドロップでCanvaに写真をコピー
- 「アップロード」内の写真をクリック (クリックするとその写真がキャンバス中央に配置される)
※今回は、photoACから取得したモデルを使用しています。実際に行う場合は、ご自身の写真かイラストを用いてください。
写真のサイズ調整
プロフィール写真 (or イラスト)を配置します。
- アップロードした写真をクリック 選択された状態になると写真の枠が紫色に表示されます
- 写真の四角or辺をドラッグして写真をキャンバス全体に引き延ばす (キャンバスからはみ出してOK)
- 写真をドラッグして位置を調整し、人物を真ん中に配置する
写真を装飾する
あなたの個性を出すよう写真を装飾してみましょう(シンプルな画像が好みの場合はスキップしてください)。
- 図形(円、四角、星など)を追加する 「素材」→「図形」より、表示された図形から載せたいものを選択 ※検索窓に「円」などを入力して探してもOK
- イラストを追加追加する 「素材」→「グラフィック」→検索窓にキーワードを入力 素材画像をクリックするとキャンバスに追加される ※王冠マークがついている素材は有料
今回は、ココナラ用プロフィール写真を時間をかけずに入手することを目的に、Canvaでの装飾のほんの一部をご紹介しました。
他にも、テキストの挿入や写真の加工(色味の変更、白黒への変換、ぼかしなどのエフェクトetc.)等々、Canvaにはものすごく多様な機能があります。楽しみながら、徐々に使いこなしていきましょう。
また、「CanvaPro(有料)」に加入すると、「背景リムーバ」という背景削除機能が使えます。「人物+Canvaテンプレート(背景)」の組み合わせで、さらにこだわったプロフィール画像を作成することも可能です。
ファイルのダウンロード
作成したファイルをダウンロードします。
- ファイル(画面右上)をクリック
- ダウンロードをクリック
- ファイルの種類(jpeg or PNG)を選択肢、ダウンロードボタンをクリックします
これで、ココナラのプロフィールサイズ用にアップロードできる画像が入手できました!
では、実際ココナラ上でどのように表示されるか見てみましょう。
プロフィールページを開き、「ファイルを選択」から先ほどCanvaでダウンロードした画像を選択し、「更新する」をクリックします。
アップロード完了です!
アップロードは正方形の画像として行いますが、実際の表示は円形になることに注意しましょう。
注意!)今回は、練習のためphotoACから取得した人物モデルを用いましたが、実際はご自身の写真かイラストを載せましょう!
Canvaで作るココナラのマイページカバー画像
Canvaでココナラのカバー画像を作る際は、まずサービスのイメージに合うテンプレートを選びそれを編集していくことで、早く整ったものが作れます。
テンプレートはパーツごとに選択して削除したり編集できるので、テンプレートデザインを部分的に使うことも可能です。
サイズの設定
出力したい画像のサイズを設定します。
ココナラのプロフィール画像の推奨サイズは1280 x 420pxです。
- 「カスタムサイズ」をクリック
- 「幅」1280px、「高さ」420pxと数値を入力
- 「新しいデザインを作成」をクリック
テンプレートを選択する
サイズを選択すると、Canvaが自動で様々なテンプレートを提案してくれます。自分のサービスイメージに合うものが見つかったら、それをクリックすればキャンパスに反映されます。
検索窓にキーワードを入れると、そのイメージに合うテンプレートを再提案してくれます。キーワードは「花」「学校」などの具体的なイメージの他、「赤」「緑」「パステルカラー」などでも検索することができます。
もちろん、テンプレートを使わずに、自分でアップロードした画像や素材、図形、テキスト等を使ってカバー画像を作ることもできます。
テンプレートを編集する
キャンバス上のテンプレート素材は、各パーツを選択すると削除や編集(文字の書き換え)などができるようになります。このとき、選択中のパーツには紫色の枠がつきます。
下図は、テンプレートの文字を削除し、「テキスト」をクリックして新たな文字を挿入したものです。
文字をクリックして選択状態にすると、画面上部に編集のためのバーが現れます。ここからフォントや文字サイズ、太さなど基本的な設定ができます。「エフェクト」をクリックすると、画面左に新たなバーが展開し、さらなる加工を施すことができます。
上の例では、文字加工の他に、「素材」からPCやハートの画像を探して追加してあります。このように、Canvaではテンプレートを編集し、素材を追加・削除できます。
One Point 新たに文字を加える場合は、既にある素材から色を抜粋するとよく馴染みます。なんとCanvaでは、背景画像から既にいくつかのカラーをピックアップしてくれてあるのです(キャンバス上の文字を選択して「文字色」を選択すると、「写真の色」という項目がある)!ぜひ、活用しましょう!!
最後に「ファイル」→「ダウンロード」からjpeg/PNG形式でファイルをダウンロードしましょう(前章「Canvaで作るココナラのプロフィールアイコン」の「ファイルのダウンロード」参照)。
ココナラ上では、以下のように表示されます。
Canvaで作るココナラ出品画像
ココナラの出品画像サイズは、少々複雑になっています。
引用(ココナラ公式サイトより)
PC表示では「イラスト・漫画」「デザイン」「動画・アニメーション・撮影」「Webサイト制作・Webデザイン」「音楽・ナレーション」カテゴリのみサービス画像を最大1220×1240ピクセルで表示しています。 (中略)
その他の出品カテゴリのサービス画像は、6 対 5( 横 対 縦 )の比率の画像サイズでアップロードをお試しください。
ただし、表示方法により厳密な表示比率が異なるため、もし文字などが見切れる場合は、画像の縁付近は文字表示などを避けて設定してください。
公式サイトへのリンクはこちら: ココナラ公式サイト「プロフィール画像・サービス画像について」
つまり、こういうことですね。
- 「イラスト・漫画」「webデザイン」など特定のカテゴリのサービスは、出品画像を最大1220×1240ピクセルとすること
- その他のカテゴリでの出品画像は「6 対 5( 横 対 縦 )」の比率とすること
表示に不安がある場合は、背景を1220×1240pxで作成して、字や画像は中央から1016px以内に収めるのが良いでしょう。
サイズの設定
Canvaで出力したい画像のサイズを設定します。
キャンバスサイズを指定して「新しいデザイン」をクリックすると、デザインページに移動します。
テンプレートを選択・編集する
ここで、Canvaが自動でサイズに合う背景を提案してくれます。
さらに検索窓にキーワードを打ち込むと(例:WEBサービスを提供する場合は「ホームページ」など)、それに合う画像群に切り替わります。気に入ったテンプレートが見つかったら、それをクリックすると、自身のキャンバスに反映されます。
ここで、確実に表示される「縦6 : 横5」の領域に収めるために、表示領域を調整します。
「素材」→「図形」から長方形を選択し、横1220px・縦を112pxとしてキャンバスの上下に配置します。(すると、間の空間が1016pxとなり、1220:1016 の比が6:5となります)
素材を移動して、上下の長方形の間の空間に入るよう位置調整しましょう。
素材は、以下の方法でまとめて選択することができます(移動はドラッグor矢印キー)。なお、選択された素材には紫色の枠がつきます。
- Shiftキーを押しながら素材を選択
- 選択したい素材群を含む領域をドラッグ
- 「配置」→「レイヤー」から各素材のレイヤーを選択 (Shiftキーを押しながら複数レイヤーを選択可)
目印用の図形が一緒に選択されてしまって困る場合は、画面上部の鍵マークからロックするか、レイヤーパネルから移動したいレイヤーのみを選択するのが良いでしょう。
テンプレート中の各要素は、編集が可能です(※PCやスマホに映るイメージ写真のみ入れ替えることもできます)。
文字や画像の編集、グラフィックの追加については、前章「Canvaで作るココナラのマイページカバー画像」の「テンプレートを編集」をご参照ください。
デザインが完成したら、表示領域の目印として置いた長方形を忘れずに削除しましょう。削除できない場合は、素材をロックしていないかご確認ください(再度、鍵マークをクリックすると解除できます)。
最後に「ファイル」→「ダウンロード」からjpeg/PNG形式でファイルをダウンロードしましょう(第一章「Canvaで作るココナラのプロフィールアイコン」の「ファイルのダウンロード」参照)。
ココナラでは、以下のように表示されます。
まとめ
本記事では、ココナラで出品を始めるにあたって必須の「プロフィールアイコン」「カバー」「出品画像」の3点について、Canvaで作成する方法を解説しました。
ココナラ内ブログやポートフォリオ画像も、基本的に同じ作業で作成できます。
- 縦px ×横pxのサイズを入力して「新しいデザインを作成」
- テンプレートを選ぶ
- テンプレート(文字・画像)を編集
- 「ファイル」→「ダウンロード」
ココナラで使用する各画像の推奨サイズはこちらをご参照ください。
画像が荒い場合は、縦×横の比率を守って、px数を大きくしてみてください。Canva Pro(有料プラン)には、「リサイズ」という機能もありますCanva Proは、無料で30日間お試しもできるので、こちらもぜひ試してみてください!