読者です 読者をやめる 読者になる 読者になる

さかがみのブログ

HTMLコーダーが文句ばっかりぐちぐちぐちぐち言う日記です。

WordBench奈良 〜アイキャッチを使ってWordPressに表示しよう〜 にいってきました。

f:id:skgm26:20160213195355j:plain

コーダーの仕事がメインとなりデザインからは遠ざかり、特にWebデザインに関しては不勉強きわまりなく、で参加いたしました。上の画像はワークショップで作った「アイキャッチ」です!

このアイキャッチのイラストはいらすとや様のイラストを使用、写真はゆんフリー写真素材集様のものを使用しています。Photo by (c)Tomo.Yun

広告バナーとアイキャッチの違い

  • 広告バナー…見ている人の関心を、視覚的に引き寄せる。目立たせる。
  • アイキャッチ…見ている人の関心に対して、文章のみでは伝えづらいことを視覚的に訴えかける

広告は「こんなのあるよ!詳しくはこちら!」と訴えかけているのに対し、アイキャッチは「この文章の内容はこういうことです」と説明するものです。

Facebookなどでシェアした時、何もしなければ記事内で使用されている画像が表示されますが、簡単な概要を示すアイキャッチがある方が読む前に「こんな記事だよ」とわかり読んでもらえる確率が上がりそう。

前回書いたMediumのパブリケーションも、アイキャッチ画像が効果的に使われるレイアウトになっています。例:日本語公式パブリケーション

コンテンツの一部、とは少し違う役割を持つアイキャッチ、そういうことを考えるのも、Webメディアならではの制作物かもしれません。

アイキャッチづくりに挑戦!

先生のYATさんから「東大寺」のお題をいただき作成しました。

  • 「コレをして見づらくならないか?」を考えながら作る
  • 色数を抑えてレイアウトを考えるだけでも、かなり見やすくなる!

という教えを意識して、作成しました。色を先に3色ぐらい決めてしまうのはスピードアップのテクニックですね。補正の質問をしたときに「色を合わせるといいよ」と教えていただきました。欲張って若草山の緑を入れなくてよかったです。

最初にキャッチコピーから考え、大仏さんと奈良はセットで言われるけど、東大寺に大仏さんがいはることを知らない人がいるんじゃ…とイメージをふくらませていきました。ターゲットは「初めて奈良に訪れる、ことりっぷで予習する若い女の子」です!

ところで、コレは「東大寺」について書かれた記事のアイキャッチとしてはどうなのでしょうか。「初めて奈良に訪れる人向けに書かれた記事の説明」であることを考えると、インパクト勝負というか、広告よりだったかも……でも広告はコピーを下には置かないな…ムムム…。
作ることに熱中して「アイキャッチである」という想像をするのをすっかり忘れていました。ナイショですが、コピー→ビジュアル→ターゲットと何か作る順番を間違えてました。

参加者のみなさんの作品を見ていると、上手い下手よりも、ターゲット、写真、素材など「これ行きたくなるなぁ」「わかりやすい!」「そう来たか」と思わせる選定が色々で印象的でした。例えば海外のお客さん向けなら私はどうやって作るだろうかと。でもやっぱりデザイナーさんは上手!

最後、みんなの前で発表をしたのですが「言いたいことがよく分かる」と評してもらえてよかったです。

今度からこのブログにもアイキャッチを取り入れてみようと思います。技術ネタの時どうするねん…。

参考文献

配色を考えやすくするための様々なルール – YATのBLOG