クリプト

【ALIS】OGPを考慮した「サムネイル画像」の作り方

ゆうき's icon'
  • ゆうき
  • 2018/07/09 10:21
Content image


リンク:

アリスブログ「いいね」を増やす方法まとめ > 当記事


◆ 【ALIS】OGPを考慮した「サムネイル画像」の作り方

ここでは、OGPに合わせた「画像の描画」に関することを説明していきます。


○ 留意事項

・「2018/08/01」に記事を更新しています


◆ ALISに適したサムネイル画像について

○ パターン1(OGPを考慮しなかった場合

Content image


既に理解している方も多いと思われる、ALISの基本型のサムネイル画像(アイキャッチ画像)ですね。


情報:ALISに適したサムネイル画像の説明


こちらに、画像や文字を付け加えると、見栄えの良いアイキャッチ画像が出来上がります。


Content image


ですが、この形式は「OGP」に対応していないのです……。


情報:OGP(オープン グラフ プロトコル)の説明


上記の画像を「ALISのOGP」で表示すると、以下のようになります。


Content image


OGP形式のサムネイル画像は、中央の画像を正方形の状態で切り取るため、それに合わせておかないと、OGPでは「見栄えが悪い状態」になってしまいます。


Content image


(※1 「800 x 400 px」の画像だと、中央の「400 x 400 px」の部分が縮小された状態で表示されます)

(※2 OGP形式での表示を「見捨てる」のであれば、パターン1の手法が大分優れていると判断しています)


○ パターン2

Content image


上記の問題を解決できるようにした制作方法です。

(上部の画像では、キャラクター画像を途中の線で区切っていますが、そのまま下まで表示するのでも良いと思います)


こちらは「1つの解」ですね。

OGP形式にも対応した上で、サムネイル画像の中に文字を入れたい場合は、おそらく、「この配置方法」もしくは「これを元にしてアレンジを加えた手法」が望ましいです。


・PCでの表示(縦幅:200 px)

Content image


・スマホでの表示(縦幅:270 px)

Content image


・OGPでの表示

Content image


ただ、上記の例だと、OGPの場合は「小さな画面の中に文字を詰め込みすぎている」感じがあるので、「中央の文字」と「下の線」を消して、一番下に書かれている文字を少し上に移動してみる……というのも良さそうです。


○ パターン3

Content image


サボり型

文字を全く入れない手法です。


ですが、このパターンも「パソコン、スマホ、OGP」の全てに対応してくれます

しかも、見栄えも悪くない上に、OGPの中でキャラだけが大きく表示されるため、OGP形式での記事紹介の際は、かなり見栄えが良くなります


けれど、サボっている感は否めないので、OGPの範囲外に「小さな文字」や「画像」を入れて魅力を強くするか、妥協してしまう、のどちらかが適切でしょう。


なお、

Content image


フリー素材の「綺麗な背景」を入れて、誤魔化す方法もあります。

(空彩:http://loo.sakura.ne.jp/sozai_m.html


・PCでの表示(縦幅:200 px)

Content image


・スマホでの表示(縦幅:270 px)

Content image


・OGPでの表示

Content image


綺麗な背景が設定されていれば、サムネイル画像の中に文字がなくても、閲覧してもらえる可能性が大分高まります。


○ パターン4

Content image


「パソコン、スマホ、OGP」の全てに対応するためには、「T字型」を維持していれば良いので、上部にある画像のような文字配置にすれば、どの形式でも見栄えがよく、かつ、サボっている感を減らすことができます。


しかし、パターン2や、パターン3と比べると、アンバランス的な感じが見られるため、画像全体の見栄えを良くしたいのであれば、


A,左下と右下に、何らかの画像を入れてみる

B,OGPの表示を少し諦めて、一番下の部分に、説明文(タイトル名など)を載せてみる

C,「B」にした上で、上部の左右にある文字を消して、背景などを追加してみる


等が求められます。


ちなみに、Bはこんな感じです。

Content image

(新聞とかでありそうな表示形式ですね)


・OGPでの表示

Content image


文字は切り取られてしまいますが、キャラクターは中央にしっかり表示されているので、パターン1より見た目が良いと考えます。


○ 追記:パターン5

Content image


後から見つかった、良質なパターン


パターン3とパターン4の組み合わせです。

上部には画像、下部には「中央に軽く文字を入れること」で、シンプルにしつつも、「パソコン、スマホ、OGP」の全てに対応することができます。


・OGPでの表示

Content image

(パソコンとスマホの描画は、パターン3と同じなので省略)


ただ、OGPを意識して「中央の画像を正方形で区切る」と、「狭っ苦しいような印象」を与えてしまうことがあるので……、


Content image


こちらのように、「中央の四角の範囲を、少し横に広げるのが望ましい」と思います。


A,パターン5のサンプル1

Content image


Content image

(棒線の場所を左右に広げていますが、文字は必ず正方形の中に入れます


・PCでの表示(縦幅:200 px)

Content image


・スマホでの表示(縦幅:270 px)

Content image


・OGPの表示

Content image


B,パターン5のサンプル2(こちらの画像サイズは「720 x 360 px」です)

Content image

(上部の画像は、「くりぷ豚」から引用しています)


・PCでの表示

Content image


・スマホでの表示

Content image


・OGPの表示

Content image


◆ まとめ


・OGPを気にしないなら、パターン1

・完璧に対応したいなら、パターン2

・お手軽に対応したいなら、パターン3かパターン5


でしょうか。


……だけど、上記の内容は「あくまで検証データに過ぎない」ので、実践で色々と試してみると、「より良いサムネイル画像の作り方」が見えてくるかもしれません。


「『いいね』を増やす方法まとめ」に戻る




◆ ツイッター


公開日:2018/07/09
獲得ALIS:13.72
ゆうき's icon'
  • ゆうき
  • @yuuki

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
クリプト

バイナンスの信用取引(マージン取引)を徹底解説~アカウントの開設方法から証拠金計算例まで~

Like token Tip token
3.50 ALIS
Eye catch
クリプト

2021年1月以降バイナンスに上場した銘柄を140文字以内でざっくりレビュー(Twitter向け情報まとめ)

Like token Tip token
38.10 ALIS
Eye catch
クリプト

約2年間ブロックチェ-ンゲームをして

Like token Tip token
61.20 ALIS
Eye catch
クリプト

【初心者向け】JPYCを購入して使ってみました!

Like token Tip token
30.03 ALIS
Eye catch
クリプト

Uniswap v3を完全に理解した

Like token Tip token
18.92 ALIS
Eye catch
クリプト

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

Like token Tip token
120.79 ALIS
Eye catch
クリプト

【DeFi】複利でトークンを運用してくれるサイト

Like token Tip token
54.01 ALIS
Eye catch
クリプト

Eth2.0のステークによるDeFiへの影響を考える。

Like token Tip token
43.10 ALIS
Eye catch
クリプト

CoinList(コインリスト)の登録方法

Like token Tip token
15.55 ALIS
Eye catch
クリプト

Bitcoin史 〜0.00076ドルから6万ドルへの歩み〜

Like token Tip token
947.13 ALIS
Eye catch
クリプト

17万円のPCでTwitterやってるのはもったいないのでETHマイニングを始めた話

Like token Tip token
46.60 ALIS
Eye catch
クリプト

コインチェックに上場が決まったEnjin Coin(エンジンコイン)コインを解説

Like token Tip token
21.49 ALIS