ブログを書いていればおそらく画像の編集やロゴ作成がしたくなると思います。
私が利用している『AdobeExpress』は無料で画像の加工やロゴ作成が簡単にできます。
10万以上テンプレート、デザインアセット、Adobe Stockのロイヤリティフリー写真などが含まれているので無料で始めてみたい方は是非本記事を参考にしてみてください！
早速ですが『AdobeExpress』でロゴ作成と画像編集の使い方まとめ解説していきます！
AdobeExpress『新規登録』
AdobeExpress利用するにはまず新規登録をする必要があります。
Step1:AdobeExpressにログイン
AdobeExpressにログインしていきます
ログインの方法は以下の5通りです
- Googleでログイン
- Facebookでログイン
- Appleでログイン
- 電子メールでログイン
- Adobeidでログイン
都合のいいログイン方法で新規登録をしていきましょう
Step2:Adobe
アカウント作成
次にアカウントを作成していきます
ここでは以下を入力していきます
- 姓/名
- 生年月日
- 国/地域
全て入力出来たら続行をクリックします
これでAdobeExpressの『新規登録』が完了しました
AdobeExpressでロゴ作成方法:7Step
AdobeExpressでは王冠（以下の画像で確認ください）マークでしるされているものに関しては有料プランの方が利用できる機能ですのでそれ以外のものを使いましょう
上記の画像のように『無料』『プレミアム』のいずれかにを入れられるようになっていますので、今回は『無料』にを入れるようにしましょう
ロゴ作成手順 Step①
AdobeExpressにログインし『ロゴ』をクリックします
もしWordPressのファビコンを作成する場合はサイトアイコンは512 × 512ピクセル以上の正方形にするようにしましょう
先ほどの画面が出てきますので『無料』にを入れます。
2135個も無料のロゴテンプレートがあります！
ロゴ作成手順 Step②
今回は下記のロゴテンプレートをベースに『デリバリー型コーヒーショップ』のロゴを作ってみたいと思います
ロゴの完成形はこちら
ロゴテンプレートをクリックします
ロゴをテンプレートをクリックすると下記のようにロゴが表示されると思います
ロゴの左側にある『ツールパネル欄』からロゴ（画像）作成に必要なものを選んでいきます
ツールパネルでできることを以下で簡単にまとめていますので参考にしてみてください
| ツール名 | できること | サンプル画像 |
|---|---|---|
| 検索 | Adobe Express内のすべてを検索できます |  |
| テンプレート | 無料/プレミアムの絞り込みが可能 |  |
| テキスト | 文字の入力が可能になります |  |
| 写真 | 自身の使用したい画像のアップロード Adobe Stock内にあるロイヤリティフリーの素材も使用可能 |  |
| シェイプ | 四角・丸・矢印・吹き出しなどが画像の装飾に役立つ素材が多数あります |  |
| デザインアセット | 「ライブラリ」に画像部品のような形で取り置かれるデータ |  |
| 背景 | 画像のようなものからイラストのようなものまで背景の設定が可能になります |  |
| ロゴ | ロゴはプレミアム版でしか利用ができません | なし |
ロゴ作成手順 Step③
まずパンの部分をコーヒーカップに変えていきます
ロゴ部分の画像をクリックします
四つ角が白丸で白の枠線が出てきました。
キーボードのBack spaceボタンを押し画像を消します
画像なくなるまで繰り返し消していきます
ロゴ作成手順 Step④
パンの画像が消せたら、新たにロゴをデザインをしていきます
今回は『デリバリー型コーヒーショップ』をイメージして作りますので『トラック』『コーヒーカップ』のシェイプを使用したいと思います
シェイプ⇒検索欄でトラックと入力⇒好きなトラックのデザイン画像を選択します
以下のように表示されますのでトラックの色と位置はお好みで調整して下さい
次はコーヒーカップを選択していきます
先ほど同様シェイプ⇒検索欄でコーヒーカップと入力⇒好きなコーヒーカップデザインの画像を選択します
デザインにメリハリをつける為にトラック荷台部分を白くしていきます
シェイプ⇒検索欄で長方形を選択⇒タスクパネルの境界線をOFF⇒塗りをクリックして好みの色をクリックします（今回は白にしました）
デザインの微調整してシェイプの挿入はこれで完成です
ロゴ作成手順⑤
次はロゴ上部のキャッチコピーをいじっていきます
これは文字の書き換えをするだけなので簡単にできます
ロゴ上部のキャッチコピーをクリック
タスクパネル部分にテキストの入力箇所がありますのでお好きな文字を入力します
今回は『Delivery Coffee』と入力しました（文字の大きさ色は自由にいじってみてください）
ロゴ作成手順 Step⑥
最後にトラックとコーヒーカップの色を変えていきます
タスクパネル塗り部分のカラーを変えます（黒にしていきます）
ロゴ作成手順 Step⑦
さいごにShopName(店名)欄に関してですが、こちらに関しては店名でもご自身のサイトタイトルでもいいと思いますので好きなように入力してみてください
デザインが出来上がったら、ダウンロード⇒好きなファイル形式⇒ダウンロードを開始の順にクリックしてください
ファビコンの用の画像に設定することも可能です！
ただしかなり小さいサイズなので文字は最小限にするとよいと思います！
ファビコン設定に関しての記事はこちらもあわせてご覧ください
AdobeExpressで画像を編集してみよう
作り方は先ほどのロゴ作成に比べればとても簡単な工程でできますよ！
Step1:画像の編集方法
【準備と確認】
画像サイズを確認⇒設定していきます
Cocoon管理画面⇒設定⇒メディアの順にクリックします
メディア設定のデフォルト画面が表示されます。
デフォルトで『大』サイズは800pxに設定されているので、この部分を好みのサイズに広げていきます
私は1200pxで設定をしましたので、画像の作成サイズは幅1200px×630pxで作成をしていきましょう
Step2:画像の編集方法
【実践①】
次作成する画像のサイズを選択していきます
Cocoonを利用中の方であれば画像のサイズは800px～1200pxほどが良いかなと思います。
Cocoonのデフォルトの横幅は800pxです。
私も幅は1200pxを大サイズとして設定しています！
次に画像サイズ（高さ×幅）を入力していきます
カスタム⇒サイズ入力（1200px×630px）⇒次への順に入力・クリックします
Step3:画像の編集方法
【実践②】
上記で指定したサイズが白く表示されます
ここにデザイン・背景・文字などを加えていきます
Step4:画像の編集方法【実践③】
せっかくなのでCocoonで記事を投稿する際の『アイキャッチ画像』を作ってみましょう！
先ほどのロゴで作成した『デリバリー型コーヒーショップ』をもう一度サイズを変えて作成してみます
Step4:画像の編集方法
【背景色変更】
【完成形はこちら】
白の背景色をからし色の背景色に変えていきます
手順は白の背景をクリック⇒塗りをクリック⇒カラーを選択します
先ほどの背景色は『#F7D147』というカラーコードですので、コード入力欄に入力します
Step5:画像の編集方法【シェイプ挿入】
トラックとコーヒーカップのシェイプ挿入後メリハリの為に白四角のシェイプを挿入します
手順は先ほどのロゴ作成と同じなので工程は省かせていただきます。（画像のみ確認ください）
Step6:画像の編集方法【記事タイトルの記入】
投稿する記事と同じ内容のキャッチフレーズ（タイトル）をいれているブログは見かけるので一般的かなと思います
今回は『Delivery Coffee～Scheduled for October～』と記載をしていきます
ネーミングセンスはないので自由に設定してくださいね！
テキスト⇒文字挿入もしくテキストテンプレートを利用してデザインをしていきます
せっかくなのでテキストテンプレートを使ってみましょう
テンプレートを決める⇒文字を記載する⇒サイズを変える⇒字体を変える⇒文字をセンターあわせにする
いい感じに出来上がりました！
アイキャッチ画像の設定とロゴ（ファビコン）設定に関しては改めて記事を書いていきたいと思います
さいごに
無料で優秀なデザインが作成できる【Adobe Epress】について簡単に解説をしてまいりました。
私のロゴ作成方法・画像の編集方法がみなさまのサイト作成のお役に立てばうれしいです
コメント