yat-wbnara201602

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

WordBench 奈良 2016年第2回

自己紹介YAT

Web designerWeb developer

Rish-Designという屋号でデザインしたりWordPressの案件をやったり、コーディングをやっているフリーランスです。

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/

https://wordpress.org/plugins/wp-nologin-redirect/

https://wordpress.org/themes/nifl/

運営サイト

YATのBlog http://wp.yat-net.com/

Rish-Design http://rish-design.com/

バナーの種類

バナーの種類

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

バナーの種類

広告バナー　

アイキャッチ　

バナーの種類

広告バナー閲覧しているユーザーの関心を視覚的に引き寄せる。

アイキャッチ記事のタイトルや概要を視覚的に訴えかけて説明する。

バナーの種類

広告バナー閲覧しているユーザーの関心を視覚的に引き寄せる。　→ 閲覧しているサイトに関連がない

アイキャッチ記事のタイトルや概要を視覚的に訴えかけて説明する。　→ 閲覧しているサイトに関連がある

広告バナーの特徴

広告バナーの特徴

閲覧しているユーザーの関心を引くために目立たせる必要がある。

ユーザーは関心の持っているものと関連性の無い部分に意識をとられると、ストレスを感じる。

アイキャッチの特徴

アイキャッチの特徴

見ている人の関心に対し、視覚的に訴えかけられる。

文章だけでは伝えづらい物事に対し、ビジュアルを使ってイメージで伝えることが出来る。

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


記事の内容に関連性のあるものを入れる

記事の中で一番伝えたいものを入れる

ターゲットを選定する


記事の内容に関連性のあるものを入れる→ 関連性のないものは見る人の興味関心を残ってしまうので、なるべく避けましょう。


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


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

まず作ってみる

悪い例

レイアウトを考える


バナーは決まったサイズの中で表現することが難しいので、情報の整理が何より重要です。

伝えたいことの分類

優先順位

視線誘導


何が悪いところか？


優先順位

視線誘導



→ 奈良を訪れるなら東大寺への文章

を読ませる。

優先順位

→ 東大寺へを再優先に

視線誘導

→ 右上に視線をとったあと、左から

右へ流れる視線を作る。

配色を考える

配色を考える

色数を抑える

コントラスト

色の組み合わせ

配色を考える

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

配色を考える

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

配色を考える

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

配色を考える

配色を考える

色数を抑える→読ませる文字を白色にし、全体の色数を抑えた。

コントラスト & 色の組み合わせ→ 文字の色が白になり、背景に茶色を敷いたことで、メリハリが付いて読みやすくなった。

一手間加えて完成

写真のコントラストが弱かったので、補正して鮮やかに。

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を！

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

作ってみよう

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