この記事で解決出来る課題は、
- ウェブページ掲載するために画像を最適化したい
- 暗い画像を明るく綺麗に修正したい
- 縦画像と横画像を綺麗に配置したい
この記事のアウトライン
ウェブページに掲載する画像イメージのサイズや解像度、縦と横の比率などを専門的なアプリを使わずに簡単に画像を編集加工をする方法をお伝えしています。
具体的には、〝Canva（キャンバ）〟というオーストラリア発祥のクラウド上で完結するデザインツールを使います。
ウェブページに掲載する画像を〝Canva（キャンバ）〟にアップロードして、編集加工を施して、ダウンロードするところまでを解説しています。
Canva（キャンバ）でウェブページに最適化された画像に加工する手順
スマートフォンや一眼レフカメラなどで撮影された画像は解像度が高く、そのままウェブページに掲載してしまうと、ページが重くなり、サイトの訪問者がページを見た時に画像が表示されなかったり、表示されるまでに時間がかかる場合があります。
撮影した画像が暗い場合は明るくしたほうが見た相手の印象も良くなりますし、縦横比も揃えたほうがページ全体のバランスも良くなります。
更に、解像度の高い画像（ファイルサイズの大きな画像）を何枚もウェブページ上にアップし続けることで、サイトへの負荷も大きくなりトラブルの原因になります。
これらのことから、撮影した画像は一度、画像編集加工アプリでウェブページでの表示に最適化を行った上で使用するようにします。
1〝Canva（キャンバ）〟を開く
GoogleChromeなどでCanva（キャンバ）を開きます。〝Canva（キャンバ）〟で検索すれば、出てきます。
Canva（キャンバ）を初めて使う場合は、最初にアカウントを開設してください。
ここからは既にCanva（キャンバ）のアカウントを開設している前提でお話を進めていきます。
2サイドバー > プロジェクト
〝サイドバー〟から〝プロジェクト〟を開きます。
3プロジェクト > フォルダー
〝プロジェクト〟の中から、〝フォルダー〟を選択します。
4新しく〝フォルダ〟を追加
画面向かって右上あたりにある〝+新しく追加〟をクリックして、表示されたメニューから〝フォルダ〟を選択します。
5フォルダーに名前を付ける
最初にフォルダーに名前を付けます。このフォルダー名はフォルダーを作成した日付+判別できる名称を付けておくと後々、整理が楽です。
6Canva（キャンバ）の中に空のフォルダーをつくる
Canva（キャンバ）の中に空のフォルダーが出来たのを確認してください。
7フォルダーの中に更にフォルダーを追加
パソコンに保存しているこれから加工する画像は、複数のフォルダーに分類して保存しているので、Canva（キャンバ）にもフォルダーを複数作っておきます。
フォルダーを一つだけにする場合はこの手順（８，９，１０）はスキップしてください。
8フォルダーの中に作成したフォルダーに名前を付ける
〝フォルダー名〟の項目に名前を入力します。
9フォルダーの中に2つのフォルダーを作成
同じ手順でもう一つフォルダーを作ります。
これで、一つのフォルダーの中に二つのフォルダーが出来ました。
10フォルダーを開いて編集加工する画像を入れる
作成したフォルダーをダブルクリックで開きます。
11フォルダーの中に画像をアップロード
ここから、作成したフォルダーの中に編集加工をする画像をアップロードします。
〝+新しく追加〟をクリックして表示されたメニューから〝アップロード〟を選択します。
12パソコンのフォルダから画像を選択
〝アップロード〟をクリックすると、パソコンのフォルダが開くので、〝Canva（キャンバ）〟で編集加工する画像が入っているフォルダを開き、画像を選択して〝開く〟をクリックします。
13同様に他のフォルダーにも画像をアップロードしていきます。
同様に他のフォルダーにも画像をアップロードしていきます。
14編集加工する画像を選択して開く
〝Canva（キャンバ）〟で編集加工する画像が入っているパソコン側のフォルダーを開き、画像を選択してアップロードします。
15画像がアップロードされるのをしばし待つ
ネットの回線状態にもよりますが、スマートフォンや一眼レフカメラで撮った写真画像はサイズが大きいので、アップロードが終わるまでお時間がかかります。
16画像が全てアップロードされているかを確認
〝Canva（キャンバ）〟で編集加工しようとしている画像が全てアップロードされているかどうかを確認します。
17〝デザインを作成〟→〝カスタムサイズ〟を選択
画面向かって右上にある〝デザインを作成〟をクリックして表示されたメニューから〝カスタムサイズ〟を選択します。
18幅と高さを入力
幅と高さの入力欄が表示されるので、幅と高さを入力します。
この幅と高さは、アスペクト比といいます。綺麗なアスペクト比でお勧めのサイズは、幅が1500pxで高さが1061pxの白銀比と言われる比率・サイズです。
19ページ表示
設定した幅と高さの新規ページが表示されました。
これから、この空白のページ上に写真画像を置き、編集加工を加えていきます。
20プロジェクト→フォルダー
写真画像の編集加工の準備が出来ましたので、これから一枚ずつ画像に編集加工を施していきます。
最初に、〝サイドバー〟から〝プロジェクト〟を選択。次にタブから〝フォルダー〟を選択します。
21編集加工する画像のフォルダ
〝Canva（キャンバ）〟で編集加工する画像が入っているフォルダをダブルクリックで開きます。
22編集加工する画像を選択
１番目に編集加工する画像を選択します。
23ドラッグ＆ドロップ
そのまま、ドラッグ＆ドロップで写真画像をキャンバスに合わせるように持っていき、マウスボタンから手を話すとキャンバスに画像が配置されます。
〝＋ページを追加〟をクリックして、新しいページを追加して２枚目以降の写真画像も同様に配置していきます。
24デザインファイル名を付ける
全ての画像の配置が終わったら、デザインファイル名を付けておきます。
〝デザインファイル名〟というのは、Canva（キャンバ）上の画像を編集加工しているファイルのことでです。
25〝デザインを作成〟→〝カスタムサイズ〟
次は、〝縦の写真画像〟の編集加工用のページを作ります。〝デザインを作成〟→〝カスタムサイズ〟を選択します。
26幅と高さを入力
今回は縦長の画像の編集加工ですので、幅のサイズは先に設定した横長のページの半分に設定して、高さは同じにします。
横長のページのサイズを、〝幅1500px・高さ1061px〟に設定した場合は、〝幅750px・高さ1061px〟に設定します。
27ドラッグ＆ドロップ
縦長編集加工用のページが表示されたら、縦長の写真画像をドラッグ＆ドロップで配置します。
28他の画像も同様に配置
間取り図なども縦長の写真画像のため、縦長編集加工用のページを追加して配置します。
29横長編集加工用のページ
横長編集加工用のページに戻ります。
縦長編集加工用のページと横長編集加工用のページはブラウザのタブで切り替えると便利です。
30画像のトリミング
配置した画像を選択して、4箇所に表示されているポイントをドラッグ＆ドロップすることで、トリミングが出来ます。
31縦長の画像を２枚並べる
ウェブページに横長の画像と縦長の画像を並べるとどうしてもバランスが崩れてしまうことから、縦長の画像を横に２枚並べることで横長の画像と同じサイズに統一することが出来ます。
サイドバーから〝素材〟を選択します。続いて〝素材〟の中から、〝グリッド〟を選択します。
32縦に２分割されているグリッドを選択
〝グリッド〟の項目から〝すべて表示〟を選択して、グリッドの一覧を表示させます。
〝グリッド〟には様々な種類が用意されていますので、用途に応じて使い分けることが出来ます。
33ドラッグ＆ドロップ
縦に２分割されているグリッドをドラッグ＆ドロップで横長編集加工用のページ上に持ってきます。
34ページにグリッドが適用
ページにグリッドが適用されました。
35配置する縦長画像をドラッグ＆ドロップ
配置する縦長画像をドラッグ＆ドロップで、グリッドの片側に置きます。
36グリッドの片側に画像配置
グリッドの片側に画像が配置されました。
37もう一枚もグリッドの片側に画像配置
もう一枚の縦長画像もグリッドの空いている片側に配置していきます。
38ページコピーをクリック
他にも縦長の画像を横に２枚並べて横長の画像にする必要がある場合は、〝ページコピー〟をクリックして、グリッドが適用されているページを複製します。
39グリッドが適用されているページが複製された
グリッドが適用されているページが複製されました。
40縦長の写真画像をドラッグ＆ドロップ
同様に、縦長の写真画像をグリッドの両方にドラッグ＆ドロップで配置していきます。
41写真画像を選択→画像を編集
ここからは、写真画像の彩度や明度、コントラストなどの調整を行っていきます。
手順としては、写真画像を選択して、〝画像を編集〟をクリック後に表示されるメニューから各項目を調整します。
42写真画像の編集
〝エフェクト〟、〝調整〟、〝切り抜き〟のタブから、今回は〝調整〟タブを選択します。
〝自動調整〟をクリックして、Aiによる写真画像の調整を行います。
43写真画像の微調整
〝自動調整〟による結果が気に入らなかったら、〝ホワイトバランス〟や〝ライト〟の項目で微調整をかけていきます。
44全ての写真画像を編集
ページに配置した全ての写真画像に〝自動調整〟→〝微調整〟を施していきます。
45縦長の写真画像も忘れず編集
縦長のページに配置した縦長の写真画像も忘れずに〝自動調整〟→〝微調整〟を施していきます。
他にも、〝エフェクト〟や〝切り抜き（トリミング）〟といった項目がありますので、必要に応じて使い分けることが出来ます。
46〝ファイル〟→〝ダウンロード〟
全ての写真画像の編集加工が終わったら、〝ファイル〟→〝ダウンロード〟を選択します。
47〝JPG〟でダウンロード
〝ダウンロードウィンドウ〟が開いたら、〝ファイルの種類〟を〝PNG〟から〝JPG〟に変更します。
〝JPG〟はウェブページ上に掲載する大きめの画像などに適しており、〝PNG〟はロゴなどの小さめの画像やアイコンなどに適した種類です。
48ダウンロード完了
無事にダウンロードが完了すると、画面向かって右下に案内が表示されます。
49ページ選択してダウンロード
ページを選択してダウンロードすることも可能で、必要な画像のみを選択してダウンロードすることで、作業効率をアップ出来ます。
