雰囲気と感覚でつくるアイキャッチの作り方

雰囲気と感覚でつくるアイキャッチの作り方

参考にならない適当につくるアイキャッチの作り方!

#125 アイキャッチの作り方

WEB制作

私がどうやってアイキャッチを作っているかの解説記事です。 肩の力を抜いて、こういうやつもいるのかという感覚で読んでいただけると幸いです。 正しさを求めると間違いが怖くなるじゃないですか。だから適当でもいいんだぜと言いたくなったわけです

公開日:
最終更新日:

商品リンクにアフィリエイト広告を利用しています

サイトマップサイトマップ

ブログのアイキャッチ(OGP画像)の作り方の流れ

ブログを書いたらTwitterやSNSで投稿します。
その時に画像を表示させるためにOGP画像を作るわけですが、今回はそのOGP画像の作り方を紹介します。

OGPとはなんぞやというかたにはこちら

OGPタグの作り方とTwitterカードの設定方法の記事です。

ブログ用アイキャッチ(OGP画像)の作り方

最初にあやまっておくと、アイキャッチの作り方のコツとかクリック率が高いアイキャッチの作り方とかではなくて、「私はこうやってます」という、ただただそういう紹介です。

背景を写真で埋めよう

OGPの画像サイズって1200px × 675pxで作っているので、結構大きいんですよね。
で、イラストとか描けないので、写真で背景埋めて、文字をバーンとのせてそれっぽい雰囲気をだしています。

背景に使う写真も、フリー素材使うのが一般的だと思うんですけど、私趣味で写真撮ってまして、それをもとにいつも作ってます。

ライトルームから写真を選ぶ
ライトルームから写真選定

7万枚くらい写真がありまして、JPGとRAWで同じ写真が2枚くらいあるので3万枚くらいあります。多分。

写真撮って、SNSとかにUPしたり、ちょこちょこ印刷したりはするんですけど、使い道がなくてもったいないなぁということで、アイキャッチに使っていると。

記事の内容にマッチした画像を選定

撮りたいもの撮っているだけなので、アイキャッチ用の写真ってわけじゃないんですけど、
アイキャッチの背景画像なんてだれも気にしないでしょ?

という精神でなんとなく使っています。

とはいえ、誰にも伝わらない程度に関連性のある画像を選んでいるわけです。はい。

アイキャッチ(OGP画像)作例集

前回書いた、GTMの始め方というアイキャッチはこれ。

GTMの始め方
GTMの始め方

この写真は、埼玉県にある国営武蔵丘陵森林公園にある、ハーブガーデンの入り口の写真です。
GTMの導入 → 入口 → ゲート というわけでこの写真にしたと。

色味はGoogleのロゴを参考に、GTMという略称があるので、それを暗喩するために最初の文字を大きく縦書に。
そしたらほかの文字が入らなくなったので、右側の文字も縦書になったと。
必然ですね。

写真を撮影した国営武蔵丘陵森林公園

入園料も安くて、すんごい大きい公園なので家族で一日遊べる楽しい公園です。

カノニカルタグの説明のアイキャッチ

ちょっと前にUPしたURLの正規化「カノニカルタグ」の説明のアイキャッチはこれ。

カノニカルタグのアイキャッチ
カノニカルタグのアイキャッチ

文字がかぶっててよくわからないので文字を外すとこんな画像です。

羊飼いと牧羊犬
羊飼いと牧羊犬

なんでこんな画像を選んだかと言いますと、URLの正規化って、正しいURLに導くってことじゃないですか。
なんで、「羊を柵に追い込むが如く」という意味でこの画像にしました。

文字が多いからなんでも良かったんですけどね。

写真を撮った茨城県の「イバライド」

観光牧場のような観光施設で、有料だけどおもしろいアトラクションや、動物がいるので家族連れにオススメの観光スポットです。

オライリーの書籍をリスペクトWEBカテゴリのアイキャッチ

このBLOGにWEB制作というカテゴリがありまして、その子カテゴリにジャンルごとのカテゴリをもうけているんですけど、それは動物をあしらったアイキャッチにしています。

画像が7枚くらいあるので、絵本風に仕上げてみました。
パラパラめくってご覧いただけます。

image01
image02
image03
image04
image05
image06
image07

カテゴリページなんてほとんど見られないから適当でいいか、というクオリティになっていることは否定しない。

ネタ元のオライリーの本

洋書の技術書なんですけど、結構高くて、言い回しがちょっと難しかったりするので愛読書ってわけじゃないんですよ。
このPerlのラクダが記憶の奥底にこびりついていて、そこから着想を得たと。

初めてのPerl 第7版

初めてのPerl 第7版 #366

3,960円 (税込)(Amazon参考価格)

適当に作っているように見えて、理由はあったりすると。
何も考えないで使っている写真もいっぱいありますけどね。

アイキャッチを作るときに心がけていること

写真の選定理由はこんな感じで作っているんですけど、最近心がけていることは「文字を目立たせる」こと。

写真はほんと、ほとんど見られないし気にもされない前提なんですが、文字は別。
ここがメインで、これが読めないと意味がないと思って作っています。

加えて、OGP画像を縮小したものを、サイト内のサムネイルにもつかっているので、縮小しても読める、可読性を確保したもので作るようにしています。

アイキャッチ作成に使用しているソフト Photoshop

フォトショップでいつもアイキャッチを作っています。
作り方というより流れを簡単に説明しましょう!

文字を置く

タイトルを短くわかりやすいものにして、バランスをとりつつ可能な限り大きく配置。

読んでもらうことが目的
読んでもらうことが目的

レイヤースタイルでごまかす

フォトショップの力を生かして、手間をかけずにアイキャッチっぽい文字を作ります。

慣れと経験
慣れと経験

最近の私の中の流行りが、「ベベルとエンボス」「境界線×2」「グラデーション」の3つです。

ベベルとエンボスのかけ具合もその時の気分によって、ツヤテカにしたり、ちょっと丸っぽいのにしたりと。

可読性には気を使います
可読性には気を使います

色味は写真の色にかぶらないように、可読性が良いように、写真の反対色にすることが多いです。

文字位置とカーニングを調整して完成

レイヤースタイルが入ると、字詰め(カーニング)が変わるので、文字を見ながら調整します。

字詰めは気持ちいいを基準に
字詰めは自分が気持ちいいを基準に

センタリングしたり、縦位置を調整して完成です!
フォトショップ万歳!

難しいことはわかんないから自分の好みで

自分のブログのアイキャッチとか、誰に怒られるでもないから、好きなように作るのが一番楽しいわけですよね。
目的は集客だったり誘導だったりなので、そこはずらしちゃいけないけど、誰かに教わってその通りに作るとか違うと思うんですよ。

現代人はとかく答えを求めすぎる。
正解なんてないものに対して、誰かにこれが正しいものだ!と言われると右へならえですぐマネしたがるじゃないですか。

そういう風潮に一石を投じたいわけですよ。

これぐらい適用に作ってもいいんだぞ、と!

目的がなんなのかさえはっきりしてればアプローチの方法はいろいろあるんだと。
3Bの法則なんてしるか!と。

うまくいかないとか、どうやればいいのかとか悩んだときに、ちゃんとやろう、正しくやろう、という考え方ばっかりだと疲れちゃうじゃないですか。
そういうときは、自分がやりたいように、好きなように、わがままにふるまえる場所があるといいですよ。自分のWEBサイトとか。

参考にならないアイキャッチの作り方でした。よろしくお願いいたします。

記事内で紹介している商品リスト
(価格はAmazon参考価格)

初めてのPerl 第7版

3,960円(税込)

初めてのPerl 第7版

アイキャッチの作り方の関連ページ

OGP設定

OGP設定をしてSNSからの流入とCTRを改善する

シェアするとき、シェアしてもらうときに最適な形で紹介したいとなるとOGP設定をしっかり設定することが重要です

CLS対策上級編

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

marginとpadding

CSSのmarginとpaddingの違いについて

CSSのmarginとpaddingの違いについて解説しました。 余白をつくるプロパティの使いわけおを考える。

CLS対策初級編

CLS改善をしてPageSpeed Insightsを大幅改善

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

CSSで作る横スライド

1行のCSSで作る横スライドの作り方

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

WEBフォント設定

WEBフォント使用時の最適な設定を考える

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

SVG背景

CSSとSVGを使った三角形背景の作り方

SVG背景を覚えたらborderで背景画像を作るのが馬鹿らしくなります。 それくらい簡単で汎用性の高い方法です。

tableデザイン

tableで作る表をシンプルでキレイに作るHTMLとCSS

tableで表を作るときに気を付けたいのが、どこまでシンプルでわかりやすく作れるかという点ではないかと個人的には思ってます

交差監視

Intersection Observer APIを図解で解説

Intersection Observerを仕事で使ったときに理解度が足りないと感じわかりやすい解説記事を書きました。

つまづきやすい5つのポイント

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

スクロール監視

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

jquery-match-height.js

高さを簡単に揃えるjquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

indexOf

JavaScriptのIndexOfの使い方の復習

indexOfを使ってindex番号を取得する方法の解説記事を書いていたら、indexOfを使わなくても取得できました。

アンカーリンクナビ

交差監視を利用したアンカーリンクナビゲーション

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

日付比較

キャンペーン期間中だけ表示させるPHPプログラム

期間限定の表示は訴求が強いけど、取り忘れるとユーザーに損した気分を与えてしまうので、忘れずにしっかり対応したいですね。

PHPで作るカレンダーの作り方2

PHP+jQueryで作る土日祝日が選べないカレンダーの作り方

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

PHPの覚え方

PHPの良いところは難しいと思われていること

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

配列の解説

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの配列ってイメージは付くけどちゃんと理解するのが難しい。 例題がわかりづらいせいだと思うんですよね。これはわかりやすい。

PHPを使って作るCMS

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

PHPで作るカレンダー

PHP+HTMLで作る 祝日対応のカレンダーの作り方

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

PHPで作るカレンダー
1位

PHPで作るカレンダー

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

ノートPCスタンド
2位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

α7Ⅲで夜景
3位

α7Ⅲで夜景

去年はPENTAX Q7で撮影してきた東京タワーと浅草に今年も夜桜撮影に行ってきました。買ったばかりのソニー α7Ⅲを片手に。

車用スマホホルダー
4位

車用スマホホルダー

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

MusicBeeのレイアウト変更方法
5位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

自転車に取り付けるドリンクホルダー
6位

自転車に取り付けるドリンクホルダー

自転車でコンビニのホットコーヒーをこぼさずに持ち帰るためにドリンクホルダーを購入したので、写真を交えてレビューします!

jquery-match-height.js
7位

jquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

SEL50F18F
8位

SEL50F18F

ソニーの単焦点レンズSEL50F18Fを愛用しています。コスパに優れた単焦点レンズで、F値の開放が1.8と明るく撮れるレンズです。

α7Ⅲ 夜桜撮影
9位

α7Ⅲ 夜桜撮影

α7Ⅲを片手に東京の夜桜スポットに行ってきました。中目黒と千鳥ヶ淵の夜桜を紹介しながらα7Ⅲのレビューです。

Kazakiri 1枚刃のカミソリ
10位

Kazakiri 1枚刃のカミソリ

カミソリの替刃の価格が高すぎるので1枚当たり11円で使える片刃のカミソリを購入しました! 切れ味抜群でヒゲソリが楽しい!

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

初めてのPerl 第7版

3,960
(税込)