Neat Design Journal

私流アイキャッチ画像の作り方

私流アイキャッチ画像の作り方

こんにちは。ブログに欠かせない要素のひとつであるアイキャッチ画像ですが、私流の作成方法をご紹介したいと思います。私の場合は主に2種類のアイキャッチ画像を作成しています。ひとつがフリー素材を若干加工したもの(通常バージョン)、もうひとつはアプリの紹介記事に付帯するアイキャッチ画像(アプリ紹介バージョン)です。前者はショートカットアプリで、後者はPixelmatorというアプリを活用しています。

‎カスタムオートメーションを作成するか、カレンダー、カメラ、リマインダーなどのよく使用するアプリに含まれる何百もの内蔵アクションから選択して、ホーム画面からタップするだけで、Siriに頼んで、または自動的に、日常の作業を実行できるようにします。 例えば、以下のショートカットを作成できます: • 大切な人に電話するためのアイコンをホーム画面に追加する • アニメーションGIFを作る • SafariからPDFを作成する ほかにもまだまだあります “ショートカット”でiPhoneおよびiPadでよく行う作業を自動化して活用できます。
favicon
https://apps.apple.com/jp/app/%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88/id1462947752
‎ショートカット
‎Pixelmator is a powerful, full-featured, layer-based image editor that lets you add shapes, images, and text to create beautiful image compositions, touch up and enhance images, sketch, and paint on iPad and iPhone alike. Designed exclusively for iOS and iPadOS, Pixelmator takes full advantage of t…
favicon
https://apps.apple.com/jp/app/pixelmator/id924695435
‎Pixelmator

通常バージョン

フリー素材は主にUnsplashというサイトから取得しています。

あらゆるプロジェクトにダウンロードして利用可能な、美しい無料画像と写真の数々。どのロイヤリティフリーまたはストックフォトよりもお勧めです。
favicon
https://unsplash.com/ja
美しい無料画像と写真の数々 | Unsplash

画像点数が豊富でオシャレなものが多いためアイキャッチ画像にピッタリだと思います。画像のダウンロードには公式アプリを利用しています。

‎Unsplashアプリでは、世界で最も寛容なフォトグラファーコミュニティが無料でお届けする、700万点以上の高解像度写真にアクセスできます。参加をご希望されますか? 美しい無料画像 Unsplashでは、700万点以上の高解像度写真にアクセスして、ご自由にお使いいただけます。新しい画像が毎日厳選されているため、必ずや次のプロジェクトに最適な写真が見つかります。 Unsplashへの無制限アクセス 無料アカウントを作成すると、写真を収集して、iPhone、iPad、コンピュータなど、どこからでもアクセスできるようになります。 Unsplashコミュニティには誰でも参加できます プ…
favicon
https://apps.apple.com/jp/app/unsplash/id1290631746
‎Unsplash

好みの画像を表示して右下のボタンをタップするとダウンロードが始まり、iPhoneの画像フォルダに保存されます。

このままアイキャッチ画像として利用してもいいのですが、私の場合、サイズを統一するためにショートカットアプリを活用して少しだけ加工しています。

画像の横幅を1,280pxに変更して画像の中央から縦の幅が791pxになるように切り抜きます。また、ファイル名を作成した「年月日_時間」に変更してiCloudに保存します。これで完成です。

アプリ紹介バージョン

アプリを紹介する記事には、背景はアプリの画面をぼかし、その上にアプリのアイコンを重ねた画像を付帯しています。こちらはPixelmatorというアプリを活用します。作業の前にアプリのアイコンとアプリ画面のスクリーンショットを準備します。アイコン画像の取得にはショートカットアプリを使います。

次はPixelmatorで作業していきます。見本としてnoteのアプリを使います。まずは新規で1,280×791pxの画像を作成します。

画面上の+ボタンより背景画像(アプリ画面のスクリーンショット)を追加します。

画面上のアイコンよりツール画面を立ち上げ、並び替えを選択します。ここで画像の幅を1,520pxに拡大します。

拡大した画像(レイヤー)を2本指で30度左に傾けます。そしてまた上のハケのアイコンよりエフェクトを追加します。

ブラーを追加します。程度は30%ぐらいがちょうどいいかと思います。

続いてアプリアイコンの画像を追加します。画面上の+ボタンより写真を追加してください。

ここからアイコン画像にスタイルを追加します。ハケのアイコンからスタイルへ進みシャドウをオンにします。

オンにするとオフセット、ブラー、角度がスライダーで指定できますので、それぞれお好みで設定してください。私は画像のような感じにしています。

これで完成です。あとは共有アイコンから画像の書き出しや保存ができますのでお好みでどうぞ。

最後に

いかがでしたでしょうか。実は以前にも同じ内容で投稿していましたが、2024年の最新版ということで書き直しましたので参考にしてください。というより自分が忘れないために書いてますけどね笑