ホテルで暮らし百貨店で買い物がしたい人

外商カード ラグジュアリーホテル スキンケア

アスペクト比(縦横比)を簡単変更 バラバラ画像を加工してブログ画像を美しく!Keynoteトリミング

見やすいブログってなかなか難しいですよね
アタシは決めました!ブログのアスペクト比 16 × 9 に統一!!! 縦横比がバラバラで撮影した画像 PDF とかスクショはサイズがバラバラ
そんな画像をサクッと好みのアスペクト比に変更 今回は Mac の Keynote を使ってかんたんに画像を加工する方法をお伝えします ブログ初心者の備忘録です

アスペクト比を整えるとブログが美しくなる あなたのブログ画像はどんな感じ?

「気にしないわ〜アスペクト比なんて」って言ってしまえばそれで終わりですけどね
もしあなたがもっと自分のブログをキレイに見やすくしたいって思うなら
自分なりの基準を作って統一感をもたせるのもいいと思います
それはブログを美しく見せるポイントかもしれません
その一つにアスペクト比はいかがでしょうか❓

アスペクト比とは縦横比

アスペクト比というのは画像の縦と横の長さ比率です
(横×縦)

  • 1✕1
  • 4✕3
  • 16✕9

と表記されていることが多いと思います

アタシのブログの画像はすべて16×9で統一しています
1280×720ピクセル つまり縦横比は16×9です

アスペクト比を知るキッカケが「Googleの推奨サイズ」このサイズの統一は悪くない

初心者ブログ作成者であるアタシ
いくつかのブログを発信し始めてしばらくしてから「アスペクト比」を知りました

知るキッカケとなったのが「Google Search Console」
これを活用している人は既に洗礼を受けてるかもしれませんねw

「推奨サイズより大きい画像を指定してください」

この問題を解決するためにアタシが翻弄したブログが以下です

しかしですね
ここに出てきているAMPというのはなんかどーでもよくなったとかナントカw
詳しいことはわからないのですが無視していいんじゃないの!?って思い始めているんです
ただGoogleの推奨サイズについてはあながち間違ったサイズではなく

このGoogleの推奨サイズを「自分なりに統一する」ことは結果的にブログの見栄えが良くなり
自分自身のプラスになったと今では考えています

アスペクト比を統一することは意外と難しい

現在はカメラを16×9で撮影できるように設定変更をしているので問題ありませんが

過去の画像はアスペクト比がバラバラ(汗)
かたやPDFやスクショしたもの フリー画像を添付しようものならそのサイズはもっと複雑
アタシは統一宣言した以上w
これらのバラバラ画像を加工しなければいけません
これはなかなか難しい問題です

実は「WordPress」内でも加工は可能なので試みたことがあるのですが限界がありました
モトとなる画像サイズがあまりにも小さすぎたり
アスペクト比が極端なもの(パノラマ縦画像など)は加工できませんでした
そこで考えたのがYouTubeのサムネイル画像作成でヒントを得た

パン粉玉
パン粉玉

Macの純正アプリ「Keynote」の活用です

これが意外と活用しやすかったんです
上記の画像も2つのフリー画像合成です
拡大したり縮小したり複数の画像を合成したり
簡単に加工ができました
詳しくご紹介したいと思います

Keynote を使ったアスペクト比 変更方法 16×9 加工例

Keynoteのアイコンはこちら
「新規作成」から設定が必要ですので注意してください

Mac画面のスクショ画像を16×9のアスペクトにしたもの

今回は上記の画像をスクショ(⌘+Shift+4)して 16 × 9 に加工する工程を説明します
まずは必要な画像をスクショしてデスクトップに格納しておいてください

Keynote 作業手順

Keynoteを立ち上げると
「テーマの選択」画面がでてきます

下の画像の番号順に作業を進めていきます
① が「ワイド( 16:9 )」になるように変更をしてください
次に ②「ベーシックホワイト」を選択し ③「作成」ボタンをクリック

番号順に作業をしてください

次の画面がこちら ↓

16×9の下地画面が完成します

上記の画像にはいくつか四角で囲まれたものが見て取れます

余分なものを取り除きます(削除項目は3箇所です)

上記の画像の枠内 矢印付近をクリックすると枠線の色が変わります
その状態でキーボードの「 ✗(削除ボタン)」を押し下の画像のようになるまですべての枠を消してください

何もなくなりました 下準備完了

このように何もなくなったら下準準備は完成です

右矢印から左矢印へドラッグしてください

次に一番最初にスクショした画像をドラッグして
下準備した何もない Keynote 新規作成画面にその画像をもってきます

画像の移動はとっても簡単です

上記の画像のようになれば
そのままドラッグをして下の画像位置まで移動させてください

対角線上にドラッグするだけで画像を拡大 16×9 にできます

この位置にもってきて対角線上にドラッグしてめいいっぱい拡大させてください

完成した画像です

そうすると上記のように 16 × 9 の画像が完成します
また2つの画像を同時に 16 × 9 で表現したい時は好きなように2つの画像を並べ 拡大や縮小をしたらいい訳です ↓

2枚のフリー画像を合成することも容易です

さらに加工画像を追加したい場合は下の画像のように「スライドを追加」してください

番号順に作業をしてください

①「スライドを追加」
② プルダウンしたところの「タイトル」を選択

あとは最初に戻り作業を進めればOKです

完成画像の保存方法

最後に画像の保存方法です

「ファイル」→「書き出し」→「イメージ」

まず上部「ファイル」をクリックしプルダウン項目の「書き出し」をクリック
右側の「イメージ」を選択してください
画面が変わり下の画像のようになります

プレゼンテーションを書き出す

「プレゼンテーションを書き出す」画面では
「イメージ」が選択されていること
フォーマットが「高画質」になっていることを確認
必要に応じてスライドは変更してください

すべての選択ができたら「次へ」をクリック

ファイル名を入力する画面

上段の「名前」ファイル名を入力
保存場所を選択(デスクトップがオススメ:わかりやすい)して「書き出す」ボタンをクリックしてください
今回のファイル名は「20211015」としています

加工した画像が格納されたファイルがデスクトップ上に完成します

Mac のデスクトップ上に「20211015」ファイルが完成しています
この中に加工した画像が格納されているので WordPress などにアップロードしてください

作業は慣れたら簡単 そして確実な加工 アスペクト比加工のまとめ

いかがでしたか❓
作業手順は多いように見えますが慣れてしまえば簡単だと思います
Keynote の嬉しいところはブログに必要な画像を一度にまとめて加工できることです
そして加工した画像はファイルに格納してくれます

⌘+A で全選択してドラッグすれば WordPress に一気に取り込むことができます

アタシのホテルレビューブログは画像が多いのでとっても助かっています

最後になりましたが WordPress の設定も変更しておいた方がいいかもしれませんので
加工画像を WordPress にアップロードする前に以下の記事も読んでみてください

ブログ作成ってホント奥が深いですね
まだまだブログ作成初心者の脱却はできそうにありません
あーお腹空いた

マリオット大阪の朝食:ポーチドエッグ★これ食いて〜な〜

関連記事