アイキャッチを作ってWordPressに表示しよう

1. アイキャッチを作って
WordPressに表示しよう
WordBench 奈良 2016年 第2回

2. 自己紹介
YAT
Web designer
Web developer
Rish-Designという屋号で
デザインしたり
WordPressの案件をやっ
たり、コーディングをやっ
ているフリーランスです。

3. WordPressとの関わり
WordBench Osaka モデレーター
WordCamp Osaka 2012スピーカー
WordCamp Osaka 2012, WordCamp Kansai 2014,
WordCamp Kansai 2015 実行委員
プラグインno-login-redirect 共同開発しました。
https://wordpress.org/plugins/wp-nologin-redirect/
テーマ nifl 開発しました
https://wordpress.org/themes/nifl/

4. 運営サイト
YATのBlog
http://wp.yat-net.com/
Rish-Design
http://rish-design.com/

5. バナーの種類

6. バナーの種類
アイキャッチはバナー画像と呼ばれるものの
ひとつ。

7. バナーの種類
広告バナー
アイキャッチ

8. バナーの種類
広告バナー
閲覧しているユーザーの関心を視覚的に引き寄せる。
アイキャッチ
記事のタイトルや概要を視覚的に訴えかけて説明する。

9. バナーの種類
広告バナー
閲覧しているユーザーの関心を視覚的に引き寄せる。
→ 閲覧しているサイトに関連がない
アイキャッチ
記事のタイトルや概要を視覚的に訴えかけて説明する。
→ 閲覧しているサイトに関連がある

10. 広告バナーの特徴

11. 広告バナーの特徴
閲覧しているユーザーの関心を引くために目
立たせる必要がある。
ユーザーは関心の持っているものと関連性の
無い部分に意識をとられると、ストレスを感
じる。

12. アイキャッチの特徴

13. アイキャッチの特徴
見ている人の関心に対し、視覚的に訴えかけ
られる。
文章だけでは伝えづらい物事に対し、ビジュ
アルを使ってイメージで伝えることが出来
る。

14. アイキャッチを
作る時に考えること

15. アイキャッチを作る時に考えること
記事の内容に関連性のあるものを入れる
記事の中で一番伝えたいものを入れる
ターゲットを選定する

16. アイキャッチを作る時に考えること
記事の内容に関連性のあるものを入れる
→ 関連性のないものは見る人の興味関心を
残ってしまうので、なるべく避けましょう。

17. アイキャッチを作る時に考えること
記事の中で一番伝えたいものを入れる
→ 記事本文で筆者が一番伝えたいことはメイ
ンビジュアルでも使って訴えていきましょ
う。

18. アイキャッチを作る時に考えること
ターゲットを選定する
→ 見る人がどういう人かに合わせてデザイン
することも大事です。自分に合わないという
先入観でスルーされないよう、ターゲットは
しっかり選定しましょう。
例）年齢、性別、高級感など

19. まず作ってみる

20. 悪い例

21. レイアウトを考える

22. レイアウトを考える
バナーは決まったサイズの中で表現するこ
とが難しいので、情報の整理が何より重要
です。
伝えたいことの分類
優先順位
視線誘導

23. レイアウトを考える
何が悪いところか？
伝えたいことの分類
優先順位
視線誘導

24. レイアウトを考える

25. レイアウトを考える
伝えたいことの分類
→ 奈良を訪れるなら東大寺への文章
を読ませる。
優先順位
→ 東大寺へを再優先に
視線誘導
→ 右上に視線をとったあと、左から
右へ流れる視線を作る。

26. 配色を考える

27. 配色を考える
色数を抑える
コントラスト
色の組み合わせ

28. 配色を考える
色数を抑える
→ 色数が多いと視線が定まらなくなるので、
あまり増やさないようにしましょう。3色ぐ
らいまでに抑えるのが良いです。

29. 配色を考える
コントラスト
→ 明度の近い色を組み合わせると見づらくな
るので、背景と文字の組み合わせなどではコ
ントラストの差をつけるようにしましょう。

30. 配色を考える
色の組み合わせ
→ 色の組み合わせの種類は非常に多く、選定
が難しいです。
その為、選定がしやすいようにルールを用い
て、選択肢を減らしていきます。

31. 配色を考える

32. 配色を考える
色数を抑える
→読ませる文字を白色にし、全体
の色数を抑えた。
コントラスト &
色の組み合わせ
→ 文字の色が白になり、背景に
茶色を敷いたことで、メリハリが
付いて読みやすくなった。

33. 一手間加えて完成
写真のコントラストが弱かったので、補正して鮮やかに。

34. WordPressのテーマで
アイキャッチを呼び出す

35. WordPressのテーマで
アイキャッチを呼び出す
テーマのfunctions.phpにアイキャッチを有効にするソースを追加。
add_action( 'after_setup_theme', 'init_setup_func' );
if ( ! function_exists( 'init_setup_func' ) ) {
function init_setup_func() {
add_theme_support( 'post-thumbnails' );
}
} 詳しくはCodexを！

36. WordPressのテーマで
アイキャッチを呼び出す

37. WordPressのテーマで
アイキャッチを呼び出す

38. WordPressのテーマで
アイキャッチを呼び出す

39. まとめ
色数を抑えてレイアウトを考えるだけでも、
かなり見やすくなります。
デザインは見る人が見やすいか？ を考えるとこ
ろにあるので、自分の、こうしたい、ああした
いよりも、まず、
これをして見づらくならないか？
を考えながらすると良いと思います。

40. 作ってみよう
では、実際に作ってみましょう！