さて、そろそろ本題に入っていこうと思うんですが、
今日の内容はWordPressを構築していく過程で、
ヘッダーやウィジェットのアイコン作りで
躓いてしまう方が多いようなので、
今回はWebシステムやアプリケーション（Photoshopとか）の使い方ではなく、
そもそもの「デザインやレイアウトの基礎について」をお話していきたいと思っています。
今後「デザインに関しては全て外注」ってスタンスで進んでいく方と、
「自身のスキルアップのためにも自分でやりたい！」って方の２つに分かれてくるかと思うんですが、
後者の方がデザインを行っていく上で、
最低限意識して、頭の片隅に入れておくだけで、
プロレベル…と、までは言いませんが、
何も知らないでやるよりはクオリティーアップにつながる様な事をお話させて頂きたいと思っています。
で、今回はWordPerssの構築に必要な「素材作り」を行う前提で話を進めていきますが、
内容的には基本的な事がほとんどなので、WordPressに限らず、
一般的なビジネスの場面においても応用する事ができます。
例えば、上司に提出するWordで作る企画書や資料
クライアントに提案するPowerPointで作るプレゼン資料などにも
応用できますので、ぜひ活用してみてください。
それでは、始めていきたいと思いますので、
よろしくお願いします。
まず、デザインを行う上で欠かせない、
基本的な4つの要素を抑える必要があります。
その4つとは、
■コンセプトの明確化
■優先順位（伝えたい順番）の整理
■アイフローの重要性
■レイアウトの基本
です。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
一つ目の【コンセプトの明確化】ですが、
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
あなたのWordPressはどんな情報を配信していきたいか？
という事です。
例えば、自由に世界中を旅する情報を配信するWordPressなのに、
ヘッダーの画像が引きこもりの画像だったらどうですか？
例えば、こんな感じ。
【引きこもり部屋の画像】
それとか、20代〜30代に向けた
アクティブな旅の情報を配信したいのに、
旅は旅でも湯治の温泉宿の写真を
使ったらどうでしょう？
例えば、こんな感じ。
【湯治の画像】
どれもこれも、
伝えたいメッセージや世界観が伝わらないと思いませんか？
デザインを行う上で、
コンセプトはとても重要になってきます。
そのデザインで何を伝えたいか？
という事をデザイナー自身が理解していないと
何も伝える事ができません。
ヘッダーを作るのであれば、
そのヘッダーで何を伝えたいのか？
誰に伝えたいのか？
という事を明確にするためにも、
そもそものブログのコンセプトを明確にする事で、
そのヘッダーを誰に向けて作るのか？
そして、何を伝えなければいけないのか？
という事が明確になってきます。
「コンセプト」という大きな幹に、
その情報を伝えたい「ターゲット」という枝が伸びて、
そのターゲットに響く「キーワード」と葉っぱが生えていく…。
その木をバランスよく丁寧に育てることで、
メッセージがダイレクトに伝わり、
成果を収穫する実りの秋を迎えるイメージです。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
次に、２つ目の【優先順位（伝えたい順番）の整理】ですが、
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
あれも目立たせたい！
これも目立たせたい！！
と、何でもかんでも強調してしまう方が多いですが、
それでは、本当に伝えたい事がぼやけてしまいます。
コンセプトを明確にして伝えたい事のリストアップができたら、
次はそれぞに対して優先順位をつける必要があります。
例えば「自由に世界中を旅する情報を配信する」というコンセプトであれば、
「自由・世界中・旅・情報・配信」というキーワードが出てきますよね？
当然、その裏側には、
「食べ歩き・世界遺産・常夏・リゾート」とか色々なキーワードがあるかとは
思いますが、それら全てを伝えようとすると、
本当に一番伝えたいメッセージがぼやけてしまいます。
もちろん、配信していく情報の中では、
たとえば
・今回は各国の郷土料理について
・今回は各国の世界遺産について
・今回は各国のオススメビーチについて
など、核となるキーワードと関連する
様々なキーワードにフォーカスして
伝えていくのも良いですが、
ヘッダーやアイコンといった限られたスペースで
メッセージを的確に伝えるには、
キーワードを絞り込む必要があります。
そうですねぇ…
まぁ、例えば、
ヘッダーであれば3〜5個とか、
アイコンであれば1〜2個
くらいが妥当だと思います。
キーワードの絞り込みが終わったら、
今度はそのキーワードに伝えたい優先順番をつけて、
優先順位が高い順番にそのキーワードやその類義語などで
Googleの画像検索をしてお気に入りの画像を
1キーワードにつき5枚くらいピックアップしてみて下さい。
なので、キーワードが5個なら×5枚で25枚の画像をリストアップするわけです。
そうする事で、ぼんやりとしか見えていなかった自分の好みや
思い描いていた絵が
それを、俯瞰して眺めてみる事で、文字だけでは見えてこなかった
イメージが具体化されてきます。
この段階で、ピックアップした画像の多くが、
自分自身の思っていたイメージと違う場合は、
そもそものコンセプトやキーワード選定の時点で間違っている可能性があります。
その場合は、もう一度自分自身と対話し、
コンセプトやキーワードに間違いが無かったか確認してみてください。
無意識のうちに自分が目標としている人や参考にしているWordPressのイメージに
執着するあまり自分自身の個性（オリジナリティ）を犠牲にしてしまっている可能性もあるので。
あっ、あと、ご存知だとは思いますが、
写真には本来「著作権」というものが存在します。
インターネットに掲載されている画像を無断で流用する事は
違法行為になってしまうので、
くれぐれも無断で流用するような事はしないで下さい。
…と、ここでは言っておきます（笑）
じゃぁ、どんな画像を使えば良いのか？
って事に関しては、別途WordPress内の記事で紹介させてもらいます。
【レンポジの紹介】
すみません。
話がそれてしまったので、
優先順位の話に戻しつつ、
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
次のアイフローの重要性についての話を始めていきたいと思います。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
写真を検索する前に、キーワードを書き出して優先順位をつけたと思うんですが、
実際にヘッダーでその画像を使うときは、
優先順位が高いものほど大きく、そして目立つところで使っていきます。
これは写真に限らず、
文字や文章にも同じことが言えて、
より伝えたい文章は大きく目立たせ、
優先順位が低い文章は小さく、地味に扱います。
そうすることで、伝えたいメッセージが
より明確に、そしてダイレクトに伝わります。
ここでチョットサンプル画像を見てもらいたいと思います。
【LEON紹介】
知っている方も多いかとは思いますが、
ちょいワル親父にをターゲットにした
ファッション誌…というかライフスタイル誌と言った方がしっくりくるかもしれません。
このLEONについて少し説明させて頂きたいんですが、
とあるWebメディアに「MY BEST LIFE 挑戦する生き方」という企画で
LEONの編集長 岸田さんのインタビュー記事が掲載されていました。
その中で、岸田編集長は
『LEON』をつくる時に考えたのは、
「狙ったターゲットに対して、あくまで実用的なライフスタイル誌にする」ということ。
と答えています。
つまり、コレがLEONの核となるコンセプトです。
次に、岸田編集長は
ターゲットを、可処分所得の高い40代から50代のミドルエイジ、
それも年収2000万円という高額所得者に設定しました。
と答えています。
それをふまえて、
実際のLEONの表紙を見てみましょう。
今ご覧頂いてる画像は2013年…去年の12月号の表紙なんですが、
真ん中に大きくジローラモさんが居ますね。
ちょいワル親父の代名詞でもあり、
葉巻を持ったオシャレなオジさんが
LEONの世界観をストレートに表現しています。
しかし、これが
コンビニや本屋さんのラックで
他の多くの雑誌と一緒に並んでいたらどうですか？
こんな感じに。
【本屋に並ぶLEONの写真】
左上の真っ赤なアイコンに目を奪われませんか？
赤いアイコンの中には「特別付録」の文字。
そしてその下には、
黒地に映える真っ白で太めの文字で
「必要なのは”お金じゃなくてセンス”です！」の文字。
年収2,000万を超えるミドルエイジの男性が見たら、
グッとくると思いませんか？
お金は持ってる人たちです。
その人たちに、対して
センスが必要だ！
と訴えかけているんですから。
そこで、興味が引きつけられた読者が
次に目が行くのはインパクトの大きい
白い塊です。
その中には小さくカタカナで「レオン」の文字。
少し離れてみると、
表紙の中で一番大きく太く、そして目立つ「LEON」の文字
そこで、この特別付録が付いていて、
センスが学べる雑誌は「あっ！あのLEONか！！」
ちょっと見てみようかな？
と思って手に取ってもらえる仕組みです。
で、手に取ると、
理想の親父「ジローラモ」登場です（笑）
そのジローラモが目を細めて見つめる先に視線が誘導され、
そこには、悪そうな雰囲気の葉巻 www
そこで、一番のメッセージ…と言う名の
メインになる企画の紹介が有ります
そのキャッチコピーを読んで行き、
ニットとダウン…まで読むとその先に
サブコンテンツが並んでいます。
この視線の流れはアルファベットのZ
の形で流れていますが、
この流れがデザイン（アイフロー）の王道レイアウトです。
アイフローと言うのは、
人間の深層心理を活用して
ターゲットの視線の流れを意図的にコントロールするので、
情報の強弱や配置（レイアウト）を間違わなければ、
とても効果的にメッセージを伝える事ができます。
ちなみに、写真の目線というのは、
見ている人の視線の流れに大きな影響を与えます。
この表紙は、目を細めていて分かりにくいですが、
それでも効果が有ります。
それと、この表紙には少し仕掛けが有って、
実はこの表紙2枚になってるんですよ。
こんな感じで。
【LEONの2枚表紙】
で、それをめくると
このようになっています。
【LEONの2枚表紙】
この写真を見ると、
ついついジローラモさんの目線の先に視線が行きませんか？
あとは、目線の他にも、
体の向きとか
【秀一郎さんのヘッダー】
指先、
【なんかの指先】
足の向きなんかも
【サッカー？】
視線の誘導に効果が有ります。
そうして誘導した先に
伝えたいメッセージや大切な情報を
配置する事で、より効果的にメッセージを
伝える事が出来ます。
だいぶ話が長くなってしまいましたが、
ここで僕が伝えたかったのは、
色による注目の集め方や
大きさや太さによる強弱の付け方の重要性、
そして、視線の流れを意識するという事です。
例えばこの表紙が、ドコもかしこも真っ赤だったらどうですか？
ドコもかしこも極太巨大文字だったらどうですか？？
何を伝えたいのか良く分からなくなりますよねぇ？
では、どこの色を目立たせて、
どこの文字を太く、そして大きくするか？
そこで、キーワードの優先順位が大切になってきます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
さて、レイアウトの話を始めたいと思います。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
アイフローの王道は【 Z 】だ！
と言って、単純にZで配置しただけでは、
素人臭丸出しの垢抜けないデザインになってしまいます。
ではどうレイアウトするかというと、
レイアウトはグリッドシステム（設計図）が基本になります。
設計図の出来栄え次第で、メッセージをダイレクトに伝える事ができますが、
その設計図を間違えてしまうと全く違ったメッセージが伝わってしまう事もあります。
要はこのような方眼紙を
【方眼紙の画像】
想像してもらえれば良いんですが、
全ての要素をそのグリッドに沿って配置していくことになります。
ただし、グリッドと言っても、
本物の方眼紙のように等間隔の線が並んでいるだけのものではありません。
そのデザイン専用のグリッド（設計図）を引く事になります。
いまいちピンと来ないですよね（汗）
ちょっとサンプルを見てもらいたいと思います。
例えば、小説などの文庫はこのような
グリッドを引く事が多いです。
【文庫のグリッド】
雑誌の誌面であれば、このような感じ。
【雑誌のグリッド】
その辺りが基本的なグリッドになりますが、
では、雑誌の表紙やポスターのグリッドはどう引くのか？
この雑誌の表紙やポスターのグリッドを応用する事で、
ブログのヘッダーなんかのデザインが出来ますので、
ここの部分を少し詳しくお話したいと思います。
では、先ほどのLEONの表紙のグリッドを分析してみたいと思います。
この表紙のグリッドはこのようになっています。
【LEONのグリッド】
まず、一番大切なのが、緑のグリッドです。
外枠よりも内側に引かれているグリッドなんですが、
全ての要素はこの緑のグリッド内に収まるようにレイアウトされています。
レイアウトをする際にこのラインを出てしまうと、
外枠ギリギリになってしまって、
とても窮屈な雰囲気になってしまいます。
厳密に外枠マイナス何mmと決まっているわけではないし、
そもそもの外枠の大きさや縦横の比率によっても
変わってくるので、そこは感覚で引くしか無いんですが、
必ず、外枠目一杯ではなく少し内側にレイアウトするようにしましょう。
次にポイントとなるのは黄色のグリッドです。
大小で二分割されたボックスが等間隔で3個並んでいると思います。
ココはとても細かいところを見て行きたいと思いますので、
歪んだ写真ではダメなので、
同じようなデータを作りました。
こちらです。
【コラム画像1】
細かなところは違いますが、
ほぼ同じにできていると思います。
で、チョット拡大して見てみたいと思うんですが、
それぞれのブロックはこのように分割出来ると思います。
A/C/Eは文字
B/Dは行間です。
メッセージの重要度としては、
CとEは改行されているだけで
同じ内容なので、当然重要度は同じになります。
つまり、こういうことです。
A