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

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

アスペクト比(縦横比)を簡単に変更してブログを見やすくしようKeynote活用 簡単トリミング術

ステルスマーケティング規制における広告表記について

当ブログは記事内に「アフィリエイトプログラムを利用した成果報酬型の広告」が含まれています。また、当ブログ運営者である「パン粉玉運営本部」は、該当するこれらの広告の監視を常に行っており以下の作業を定期的に実施しています。

1.当ブログに関連のない広告ブロック(GoogleAdSense)
2.真実性に基づく良質な広告監査と提供

表示される広告について、ご不明点がございましたら遠慮なくお問い合わせください。
当ブログは「アフィリエイトプログラムを利用した成果報酬型の広告」から得られる収益で運営を行っています。

2023年9月3日パン粉玉運営本部

画像の縦横比を整えるだけで記事はとても見やすく 美しいものに変わります 今回は簡単なトリミング術をご紹介します Macの Keynote を活用してトリミングに挑戦してみましょう これまで縦・横バラバラで撮影した画像もきれいに整えることができます より良いブログ作成に向けて取り組むことも大切です

アスペクト比について考えてみる

もしあなたがもっと自分のブログをキレイに見やすくしたいと思うなら 自分なりの基準を作って統一感をもたせるのが良いと思います それはブログを美しく見せるポイントであり 読者にも読みやすさを提供することになります ブログを美しく見せるポイントの一つとして アスペクト比を統一することが挙げられます ブログ内で表示される画像の縦横幅を統一するだけでも とても見やすくなることはご存知でしょうか?

アスペクト比とは

アスペクト比とは 画像の縦と横の長さの比を指します 一般的には「横:縦」を 4:3 というふうに表現しています お使いの撮影用のカメラやスマホにも同様に この「アスペクト比」を設定することが可能です 一般的なアスペクト比は以下のようになります

  • 1 ✕ 1(スクエア)
  • 4 ✕ 3
  • 16✕ 9

スマホで縦画像を撮影することがあると思います この場合はスクエア以外はアスペクト比が変わってしまうので注意が必要です 当ブログ記事では1280×720ピクセル つまり縦横比は16×9で統一をしています

Googleの推奨サイズ

実は過去にGoogleは「推奨サイズ」を述べていた時期があります 「Google Search Console」より この「アスペクト比」を統一するようにと幾度となくお達しがありました

当時の問題解決に向けて奮闘した記録記事がありますので 興味がある方は一度読んでみてください

現在はAMP対応の必要性はなくなりましたが このGoogleが述べていた「推奨サイズ」というものは 現在でも重要ではないかと考えています なぜなら 表示速度に影響するものと考えるからです アスペクト比を整えることにより 表示速度を早めることにもなります これは直帰率を下げることに貢献するはずです

アスペクト比を統一する手段

現在筆者はカメラを 16×9 で撮影できるように設定変更をしています スマホを横にして撮影すれば 自動的に16:9 のアスペクト比で撮影できます 過去の記事に iPhoneではありますが 設定方法をご紹介しています 機種が変わってもおおよその設定方法は変わらないと思います 是非iPhoneの方は カメラ設定を確認してみてください

一方 過去の画像はどうでしょうか?皆様の中にもアスペクト比を考えず記事に画像を投稿していた人も多いと思います 縦画像や やたらと小さい画像 スクエアや4:3 など 様々なアスペクト比の画像が混在している人もいるでしょう
今回はアスペクト比がバラバラの画像を 16:9 又は 4:3 に統一する方法をご紹介します

Apple社の「Keynote」を利用した加工方法です とても簡単に加工できますので 是非試みてください 今回は筆者のアスペクト比 16:9 を例にご紹介していきます

Keynote を使った加工方法

Keynoteを利用し 希望のアスペクト比に加工する方法をご紹介します 残念ながらMacをお持ちでないとできません Macのどこかに下のようなアイコンがあると思いますので そこから初めていきます 「新規作成」から設定が必要ですので注意してください

今回は 任意のスクショ画面の加工方法です 同じように進めて行かれる方は自由サイズでスクショを撮影してください

Shift4 

上記の操作で自由サイズのスクショが撮影可能です 撮影したものをデスクトップのどこかに格納しておいてください それでは初めて行きましょう

Keynote 作業手順 Step1

Keynoteを立ち上げると「テーマの選択」画面がでてきます 下の画像の番号順に作業を進めていきます

  1. 「ワイド( 16:9 )」になるように変更
  2. 「ベーシックホワイト」を選択
  3. 「作成」ボタンをクリック

作成後の画面がこちらになります ↓ 16:9 のベースが完成します 4:3 で統一したい方は「標準(4:3)」を選択し同様の作業となります

上記の画像にはいくつか四角で囲まれたものが見て取れます これらは不要なので削除をします

画像の枠内 矢印付近をクリックすると枠線の色が変わります その状態でキーボードの「 ✕(削除ボタン)」を押し 同様の操作ですべての枠を消してください

下の画像のように何もなくなった状態になれば準備完了です

次は 最初にスクショをした画像を持ってきます マウスでドラッグするだけで可能のです 赤い矢印のようにゆっくりと 画像を運んでみてください

画像をうまくドラッグできたら下の画像のようになります 少し小さいように見えますが心配はありません

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

上の画像のように 任意の画像を配置 更に赤い矢印を参考に対角線上にドラッグします すると下の画像のように拡大することができます 拡大は自由です はみ出していても問題ありません

そうすると上記のように 16 × 9 の画像が完成することになります
この応用で 下の画像のように いくつかのイラスト組み合わせて 一つの画像にすることも容易です

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

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

「スライドを追加」 ② プルダウンしたところの「タイトル」を選択
あとは最初に戻り作業を進めればOKです

完成画像の保存方法 Step2

最後に画像の保存方法です これを間違ってしまうと ブログに挿入できませんので気をつけてください また保存場所の指定を間違えるとどこに格納されているのかわからなくなります 注意して保存をしていきましょう

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

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

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

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

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

アスペクト比 加工のまとめ

作業手順は多いように見えますが慣れてしまえば簡単だと思います Keynote を活用するメリットは なんといっても操作が簡単だということです 直感的な操作だけで画像挿入や拡大ができたことは理解できたと思います

⌘+A で全選択 WordPress に一気に取り込むことが可能

アスペクト比 つまり 縦横の比率がバラバラな画像がたくさんあり それらの画像を無造作にブログに貼り付けていた人は多いと思います 見やすいブログ記事や表示スピードを向上させたいと思っている方は 今回ご紹介した作業を試みるのは良いと考えます その作業は Keynote が一番良いだと考えます

Recommendationおすすめ記事