あけましておめでとうございます 。
2020年最初のTech Blogはデザイン室の上野が送らせていただきます。
aptpod Advent Calendar 2019はご覧になっていただけましたでしょうか？
まだの方はぜひご一読ください。
今回ですがこのAdvent Calendarで作成したOGP画像について書かせていただきます。
OGP画像とは
OGP(Open Graph Protocol)とは、Webページの内容を伝えるための情報のことで、OGP画像とはその中でも投稿した記事をSNSなどで展開する際に表示されるサムネイルのような画像を指します。
これですね。
記事の具体的なイメージを伝えることで読み手に何が書いてあるかを想像させ、クリックしてもらう動線になるためとても大切なものとなります。
今回作るに至ったきっかけ
弊社ではここ数年で社内のエンジニアも増えてきまして、2018年からAdvent Calendarに取り組むようになりました。
2018年のAdvent CalendarはQiitaに載せるくらいの規模感だったのですが、2019年からTech BlogやTwitterアカウントを立ち上げ、より積極的に活動を知ってもらえるよう動き始めました。
blogやTwitterでの展開は初の試みといった部分もあり投稿初期の記事ではOGP画像を設定しておらず、SNS上で表示を確認してみると記事内で最初に使われている画像やテキストが画像化され自動的にOGP画像に設定されてしまいました。
「ナンカモッタイナイナー」
エンジニアがとてもいい記事を書いているのに、ぱっと見たときに記事の内容をイメージできるようなものにすればもっとアクセス数伸びるのでは？と思いSlackで改善を提案してみました。
結果たくさんの反応をいただきまして、そこからデザイン室でOGP画像を展開していこうということになりました。
ワークフロー
ワークフローと言いましても成果物は一枚の画像なので早い人は数分で終わってしまうような作業です。また作り方に正解もありません。
今回は自分が作る上で考えたことを織り交ぜながら紹介できればと思います。
まず下準備としてデザイナーは担当する記事を読み内容を把握した上でコンテキストに沿ったOGP画像の作成に入ります。
そもそも内容と全く違うイメージを作ってしまっては元も子もありません。
内容をしっかりと把握したら、以下のようなイメージで展開していきます。
画像サイズはこちらの記事を参考に横1200px×縦630pxで展開していきます。
素材作成
テキスト
OGP画像といえば目を引くテキスト+背景画像の組み合わせをよく見ると思います。
今回のAdvent Calendarではテキストは基本的に記事のタイトルと同じ文言で作っていきました。
冗長なものは読み手を想定してどんなワードに惹かれるのかピックアップし組み直したりします。
仮にレイアウトしてから
- フォントの種類
- サイズ
- 色
- ウェイト(文字の太さ)
- 段組
などを読みやすく目を引くようにアレンジしていきます。
サイズやウェイトで抑揚をつけてみたり、色を加えたり下線を引くことでピックアップしたワードを強調したりしました。
背景画像
背景画像はAdobeStock他フリーの素材や記事内の画像を使用・加工したりと内容に沿ったイメージで展開します。
(素材を使う際は商用可・個人利用のみなど使用できる範囲がライセンスごとに細かく分かれているので気をつけましょう)
コントラストが強かったりテキストを載せるスペースがないといった複雑な画像には
- ぼかす
- シェイプで座布団を敷く
- 塗りのオーバーレイを加える
ような工夫をすることでテキストの可読性を上げることができます。
調整 / レビュー
テキストと背景画像を合わせて調整していきます。
比重を考えてレイアウトや色味を調整し、全体的にバランスがよくなるような画像作りを心がけています。
aptpodデザインテイストと記事とのバランス品質を担保できるよう、デザイン室内でレビューを行います。
フィードバックを元に調整し、完成まで持っていきます。
書き出し / 設定
完成した画像を書き出し、ImageOptimなどを使いファイルサイズを軽量化します。
最後にTech Blogの管理画面からでOGP画像を設定するまでがデザイナーのワークフローになります。
掲載
OGP画像を設定し投稿された記事は掲載されるとこのように反映されます。
#はてなブログ
— aptpod_tech (@aptpod_tech) 2019年12月25日
激動の2019年を振り返る - aptpod Tech Bloghttps://t.co/daS7HOFKSS
Advent Calendarを終えて
今回Advent Calendarで連日投稿される記事のOGP画像をつくるのはなかなか大変でした。
ですが作っていく内にグラフィック作成の知見もたまり、(途中からですが)最終日までやり遂げてとても達成感がありました！
今後も継続してOGP画像作っていきたいと思います！
[後日談] やらかしてました
この記事を書いているときに恥ずかしながら投稿済みのOGP画像にTypoを見つけてしまいました。
(いやもう本当にすみません)
そんな僕のようにやらかしてしまって修正をしたけど、肝心のSNS側はキャッシュが残っててチェックできない！
といった方のためにキャッシュのクリア方法をまとめてくださった方がいたのでリンクおいておきます!
OGP情報を更新した時のTwitter・facebookのキャッシュクリア方法 | 野良人（のらんど）｜大阪府堺市のWEB制作屋さん
デザイン室がどんなことをやっているのか興味がある方はこちらの記事を是非！
高速データ可視化におけるフォントの重要性 - aptpod Tech Blog
ありがとうございました！
