アイキャッチが全然作れないので、一回きちんと情報を整理した上で出来にこだわらずに量産してみよう
ただし、フリー画像などは極力使わない方向。人と同じものなんて作りたくないからｗ
「Canvaを使う」とかいう些末な手法論ではなく、情報の構造を図象の構造にどう反映させるか、「アイキャッチ画像」の本質を考える。
目次(クリックでジャンプ)
サイズ
WordPress 1200px*630px(1.91:1)大切な情報は中央の正方形エリアに こちらの御サイト
16:9(1.78:1)
twitter→PC版・スマホ版共通して最適な画像サイズは横506px × 縦253px(2:1) 情報元:ferret
最終的にTwitterのサイズに縮小する(XnViewMPで)のが良いか
要素
重要性に応じて配置場所が変わるので、重要性で分類してみる
必要不可欠な情報
何の記事なのか伝える情報は必須
タイトル
大きな文字で注目を集める
サブタイトル
控えめな文字で、内容を親しみやすく分かりやすく伝える
付加的な情報
これらで視線操作や印象を強化する
内容の要約
入れると良いらしいが、シンプルな構成が崩れそうで怖い…
テーマシンボル
記事の題材を暗示するシンボル。アプリの記事ならアプリのアイコン、プラグイン記事ならプラグインのアイコン
カテゴリシンボル
「数論」「規則性」などテーマが属するカテゴリのシンボル
サイトシンボル
「図」マーク、「そうちゃ式」などサイトのシンボル
イメージイラスト
使いまわしできるものだけにしたい…
その他背景
色調とパターン(模様)
配置・配色
つい芸術的な配置をしようと意気込んでしまうので、もっと単純な規則を適用(左右中・上下中寄せ)
トリミングされても良いように情報は中央に寄せるべき。つまり要素は中央寄せにするのが基本になる。
これで配置はかなり限定されるのが分かる。タイトルは横に長くならないように短めに改行する必要があるし、ワンポイントを左右の両端に置くのは難しい(中央にするしかなさげだ)
また全体を明るくしたいので、配色も限定される。背景・文字の背景・文字は「明・暗・明」のパターンになり、色相で変化を付ける以外ないが、文字の背景(暗)は紫~青緑くらいしか選択肢がないし、文字も白(袋文字にはできる)になるので、結局背景イメージで変化をつけるしかない
文字の背景の縁を直線から変化させて文様にしたり遊んでみるか
ひな形を作ってみる
背景パターンとワンポイントのアイコンだけ自作するつもりで雛形を作ってみる。
明暗明パターン
文字と背景グラデ
インラインで506px*253pxでグラデーションをつけたボックスと文字を作成。サブタイトルの字が汚い…
【2020年版】htmlと
CSSで作る
アイキャッチ画像
コピペして背景を変えてみる
【2020年版】htmlと
CSSで作る
アイキャッチ画像
このあとイラストレータを起動して(これが出先では面倒くさい)、比率2：1の画像を作成してみた。
これにつかった背景イメージ
これを先程のテンプレのdivの中に入れて「mix-blend-mode:screen;」にすると
htmlとCSSで作る
アイキャッチ画像
divの中にpが発生してマージンができてしまうようだ。クラスを設定しないと無理…
失敗
ワンポイントの配置
「図解」ロゴを配置してみたが、難しい。
文字背景にワンポイントを中央寄せで入れると、暗い余白が出来てしまう。小さくして挿入して背景にもでかく入れてみると、こうなる
配色を明暗パターンに変えてみる
コントラストを中央に寄せる
文字背景」というのを無くして、明るい背景に暗い文字を配置してみる。
htmlとCSSで作る
アイキャッチ画像
中心部分に情報を集めるので、コントラストも中心に集めるのが自然と気づいた。
このグラデーションとコントラストが配色の本質のようだな…
両脇が凄く寂しいｗ
Illustratorのアピアランスで「ゆがみ」「ぼかし」を設定したらファイルサイズが4倍くらいになる！
両脇の作画
中央はコントラストが強くて色数も絞るので、両脇は「重要でない情報」を使い低コントラストだが色相を豊かにしないと画面が持たない。これ結構面倒くさいな(フォトショップじゃないと…)
何かランダムなパターンをフォトショやイラストレータで作ろうとしたら以外に難しいことに気づいた。
重要でない情報(カテゴリシンボルなど)を色相を変えてたくさん重ねてパターンを作るほうが良いかな？
というのでゴチャゴチャ重ねてみたが、視線がフラフラして不安になるなｗ
視線を横に動かす王道の横線を入れて、中心部に白の領域を作り、アイキャッチらしい目のイラストをサクッと書いて重ねて見る
何だコレｗｗｗ見ているだけで頭がグチャグチャになる。
ただ…やはり中央にはハッキリとした白面を置くのと、横に視線を誘導する細い色面があるのが安心できる。
左上に、情報としては重要ではないが図像的には強いアイコンを置いて視線を誘導するつもりだが、自作のアイコンが浮いてるｗ
アイコンをフラットデザインのものに変えてみる
中心の色面が目立たないので背景を単色にして、遠景の変形格子を消して見る
一気にスッキリ見やすくなったな。
中心の色面の形を変えてみる
ワンポイントに電球マークを作ってタイトル下に配置し、サイトのロゴは非重要情報として右下に配置
いいね。中心色面を雲形にして、右下にキャラクターを配置すれば吹き出しのようにもできそうだ。
左上と右下のアイコンをもっと中央に寄せ、上下横線の右上と左下のコントラストをもっと弱くして色だけにすれば、対角線方向に視線を誘導できるかな？
目のアイコンを作って配置して…中心の正方に輪郭は余計だ。この形を強調するのは不要。
右上が寂しいので、右上の文字列「Eye Catcher Designing」というのを少し強くして適当な文字(カテゴリー名)を追加
コントラストのメタファー元
中央が背景白・文字黒に近づくのは、何のメタファーになっているのか考えると、
A画面中央で何かが輝く・燃える
B平らな面の正面からライトを当てている
C凸面・凸面の正面からライトを当てている
これくらい？
Bは分かりやすい
例えば「コルクボードや掲示板に紙が貼ってあると考えれば中心に大きな付せんが貼ってある場」がある。この場合は、中央の重要情報を紙のメタファーの白い色面に入れて、背景に弱い白面に重要でない情報を入れて散らせば良いと分かる。
あとは平らなガラス面の中央に手書きがしてあり、背景はガラスの向こうの景色とか(ガラス＝近代的な室内なので直線で構成された遠近法の効いた色面)
ここまでのまとめ
手順をまとめてみる
1.乗せる情報の選択選別
画面上のエリアに分ける
中央(最重要エリア)に乗せる(タイトル・サブタイトル・ワンポイント)
四隅や辺の近く(視線誘導機能エリア)にのせる情報(サイトアイコン・カテゴリーアイコン・テーマアイコン)
それ以外(図、文字列、イラスト)は付加情報になる
全体配色の決定
写真を使わない場合、背景色が印象の大半を決定する。
算数記事の場合、青と紫を基調に大カテゴリ「数論」→青「特殊算」→赤紫「図形」→青紫「速さ」→紫 にしてみる。
A.中央エリアの配置
内容
重要な情報(タイトル・サブタイトル・ワンポイント)は中央エリアに寄せて配置。
幅広にはできないので、頻繁に改行をする必要がある
記事のテーマを端的に示すアイコンがあるならワンポイントに変える。ないならサイトアイコンをワンポイントにする
色面
その背後に画面で一番明るい色面を置く。
明るい色面の形状(正方形、ひし形、円、だ円、雲形など)と輪郭線(固い線、ボケ線、二重線、など)で表現が広がる。
写真を使わない場合、この形が印象の大半を決定する
記事に合わせて形状と輪郭線で「遊ぶ」のがよいだろう
B.四隅と四辺付近の配置
目立つ要素
カテゴリーアイコンや自分のサイトアイコンのようなアイコンは画面の端で目立たせて、視線を誘引する。
典型的には、左上と右下にアイコンを置き、上下に細長い色面を作って視線を斜めにZ型に誘導する
C.それ以外の場所の配置
その他の情報(記事に出てくる図、数式、公式、カテゴリーを示す文字列など)は画面全体で背景のパターンの要素にする。
まずカテゴリ共通の背景パターンを作成(これが結構面倒くさいのに気づいたが、オリジナリティ出すにはしょうがない)
(3.14の計算、樹形図)を入れている
Bエリアを補助して視線を誘導する＆適度に散らす。
色とコントラストにランダムと豊かさを加える
文字パターンについて
文字列は視線を誘導するように改行なしの長文の文字列にする。
背景といえども、文字の威力は強力で文字の方向で視線がかなり誘導される。ぼかすのはセーフだが、歪めると気持ち悪くなる。
日本語の方が英数字よりも更に強力になる。
文字式や数列の場合、太さが異なるフォントを混ぜると文字列の「平面性」がなくなるというか距離感が複雑になってしまうので太さは均一にする
メタファーのもと
整理中
ガラス面の表に横線インターフェイスが、裏にタイトル白面がはってある
背景色の紙とガラス面の間に、文字の切り抜き(ステッカー？)が挟んである。
切り抜きの素材は？紙なら透明感がでるとおかしい。
この「場」の構造を崩すと潜在意識が違和感を感じる。
定型的な「場」
これはアイキャッチというよりも、H2見出しの下に置く画像につかえそうな中の文字を変えるだけで使いまわしがきく画像
よくあるのが、紙などにマジックインキでまたはガラスの裏からマーカーで「SEO」などと書いてあるような画像
これはオリジナル画像を作って使いまわししやすいので良い。
疲れた…
ほぼ丸二日間、没頭したので疲れたが、これくらい集中しないと一生つかめなかっただろう。
PHPで「アイキャッチジェネレータ」作れれば良いな
追記(数論のアイキャッチ)
10月初頭版
アルファベット文字列をできるだけ数字に置き換え
難しいなｗ図解要素を入れると図形分野の連想が働くので、ほぼ数字しか使えないのに気づいた。
主に左から横に流れる数字の列で視線を横に誘導。縦に誘導する要素は？割り算・すだれ算・足し算引き算、どれも横にも平面的に広がってしまう
平面的に広がる数字は背景に溶け込ませる。
「数論」マークや白面の輪郭を角ばらせた方が数論ぽい気がする。
同じ数字「2」が目立つな
右下の「図」マークが後で図解マークと被る予感。「爽」ベースのロゴに替えるか