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

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

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

#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版

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

CSSで作る横スライド

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

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

marginとpadding

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

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

CLS対策初級編

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

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

WEBフォント設定

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

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

tableデザイン

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

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

CLS対策上級編

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

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

スクロール監視

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

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

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

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

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

アンカーリンクナビ

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

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

bookblock

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

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

jquery-match-height.js

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

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

indexOf

JavaScriptのIndexOfの使い方の復習

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

交差監視

Intersection Observer APIを図解で解説

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

カレンダー

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

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

POST送信

PHPを使った漢字クイズの作り方解説 その1 POST送信

【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。

PHP覚え方

PHPを手っ取り早く覚えるには作りたいものを作ること

PHP単体でもHTMLよりもできることの幅はひろがるけれど、それにプラスしてデータベースを扱えるようになると無敵感を味わえます。

WEB言語紹介

WEB制作をささえるHTML・CSS・Javascript・PHP

いつもWEB制作をささえてくれるいろいろな言語を紹介しています。 他にもMySQLがあるんですが長くなるので割愛しました

ランダム表示バナー

PHPで作るランダムバナー表示プログラム

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

PHPを使って作るCMS

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

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

日付比較

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

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

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

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

アイキャッチの作り方
1位

アイキャッチの作り方

ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。

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

MusicBeeのレイアウト変更方法

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

bookblock
3位

bookblock

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

ノートPCスタンド
4位

ノートPCスタンド

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

ウルトラブースト
5位

ウルトラブースト

一度はいたら手放せない! アディダスの「ウルトラブースト」搭載のハイテクシューズのレビューとオトクに購入する方法です

ツタヤディスカス
6位

ツタヤディスカス

定額レンタル宅配CD・DVDサービスのツタヤディスカスを利用してみました。 1ヵ月で20枚レンタルしました!1枚93円!

Bluetoothイヤホンの使い方
7位

Bluetoothイヤホンの使い方

Bluetoothイヤホンのペアリング方法やリモコンの操作方法、リダイヤルの防止策を画像入りで解説します。

tableデザイン
8位

tableデザイン

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

USBマグネットホルダー
9位

USBマグネットホルダー

USBケーブルが机の周りでぴろぴろとしているとそれだけでなんだか散らかっているような気になりませんか?

ロジクール マウス
10位

ロジクール マウス

PCを操作するのに必要なマウス。高級品でも安いマウスでも操作をするという点においては大差はありません。違いがあるのは操作に対する満足感。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

WEB制作

WEB制作

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

カメラ

カメラ

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

美味しいもの

美味しいもの

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

Amazonプライム動画

Amazonプライム動画

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

旅LOG

旅LOG

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

プロフィール

プロフィール

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

日記

日記

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

thanks

thanks

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

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

初めてのPerl 第7版

3,960
(税込)