ども。あずき (@azucky824 )です。
僕はブログを始めてから早いもので4年以上たっていますが、ブログのデザインはもとよりHTMLやCSSもわからないド素人です。
今回のブロガーズフェスティバルでそのあたりの話が聞けるかな−と考えていたら、まさにドンピシャなセッションがあったので聞きに行ってきました。
登壇者「ホシナカズキ」さんとは?
登壇者のホシナカズキさんは、mbdbというブログを運営されてらっしゃる方。
デザインでいえば、ネタフルというブログのデザインをした人。また複数の著書もあります。
△実は僕もこちらの書籍を購入して勉強させて頂きました。僕の中のイメージではとにかくWordpressに明るい人!って感じでしたが、お話を伺うとガラケー向けのサイトデザインなどもやっていたということで、かなり幅広く精通されているようです。
”見栄えだけじゃないブログデザイン”
さて、今回のセッションで発表される内容は、今回タイトルにも書いたとおり「見栄えだけじゃないブログデザイン」でした。内容について、前日にご本人がブログにて書かれています(上記画像もそちらからお借りしています)
2016ブロガーズフェスティバルで話すことは「ブログデザイン」についてです #ブロフェス2016
しかも軽くネタバレしておくと、「ブログデザイン術」とか掲げておきながら、デザインテクニックについては一切触れません•̀.̫•́✧
いいんです。そういうことは昨年までのブロフェスで、ちゃんと取り上げられているじゃないですか。だから僕はそういうことは敢えて触れません。
内容を一部抜粋して引用すると…
今回僕がお話したいのは、デザインのもっと根幹的なところ。
デザインってどういうことなのか。
デザインを作るのに知っていてほしいこと。
デザインで何ができるのか。
そんなことをざっくばらんにゆるーくゆるーく、できるだけわかりやすくお話したいなと思っています。
今回話す内容は、ブログのデザインに限った話ではなく、僕自身が長いこと積み重ねてきた現場の経験をベースに、現在僕自身が普段仕事をする際にも実践していることなので、ブログ以外にも転用できる内容になっていると思います。
このようにお話されています。それでは僕の聞いてきた内容をまとめながら書いてみたいと思います。
デザインってなんだろう?
ホシナカズキさんが考える「デザイン」とは、「マーケティングツール」とのことです。
また、ブログは1つのブランドであり、その内容を視覚から印象づけるための手段であるともおっしゃっていました。潜在意識にに刷り込む!ってなことも言ってました。
印象に残らないブログの特徴
さて、ブランドを考える上で、印象に残らなければなんの意味もないわけです。
そこで、印象に残らないブログの特徴を見ていきます。
シンボルがない
まず最初に挙げられてたのが「シンボルがない」ということ。
ここでいうシンボルというのは、ブログのアイコンやヘッダー画像などのこと。たしかに僕が好きなブログはヘッダー画像が印象的で、アイコンを見れば「あぁ、あのブログか!」と思い出せるくらい頭に残っています。
デザインがかぶる
二つ目に指摘されていたのは「デザインがかぶる」こと。
無料テーマで人気のあるテーマが偏っていて、しかもそのデザインをなにもいじらないままのものが多い、とお話をされていました。
たしかに、ド素人の僕から見ても「あれ、ここのデザインあそこと一緒だなー」って思うことがあります。例をあげれば「Stinger」や「Simply」などはSEO的にもデザイン的にも非常に使いやすく、素人には嬉しいつくりになっていますが、やはりデフォルトのままでは他との違いが見いだせない、というのも納得のお話でした。
こだわりすぎてうるさい
もう1つあった指摘が「こだわりすぎてうるさい」デザイン。
今見るべきは公立小学校のホームページ | オモコロ あたまゆるゆるインターネット
△以前このような記事も見たことありますが、たしかにごちゃごちゃしてるサイトっていうのは洗練されていない印象がありますよね。
ブランディングを育てるには?
ブランディングを育てるのに大事な要素を解説してくれました。
①ゴールを決める
ブランディングにおいて重要なのは、まず伝えたいことはなんなのか、やりたいことは何なのかっていう「ゴールを決めること」なのだそう。目的がないとデザインの全体を評価・判断出来ないから。
②ポジショニングを決める
次に「ポジショニングを決める」こと。目指すもののキーワードをしっかり見極めて、更に絶対に間違えられてはいけないキーワードと混在されないようにする、というふうにおっしゃっていました。
方法としては、目指すキーワード・間違えられてはいけないキーワード(目指すものの対義語みたいな)をそれぞれ2つずつ書き出し、4分割にして間違えられたくはないゾーンをしっかりと把握するのだそう。このへんは今買いててもちょっと僕にはイメージ湧きにくいですね。誰か図とかにしてまとめてくれないかな・・・。
③デザインの方向性を決める
3つめはデザインの方向性を決めること。
この方向性っていうのもちょっと僕にはよくわかっていない…。
④制作して検証する
ここは実際に作ってみたあと、それがゴールから外れていないか、勘違いされたくないキーワードに該当していないか、考えて検証するというフェーズになります。このへんはなんとなくは分かる。
印象的なデザイン4つの戦術
全体のプロセスを学んだあと、より具体的なデザインの仕方・考え方に入っていきます。
①トーン&マナー
業界(?)では略して「トンマナ」というそうなのですが、これはデザイン全体・ブログそのものの「世界観」だとおっしゃっていました。雰囲気って考え方でも良さそう。
これはずれてしまうと致命的で、よくよく気をつけて全体を揃えていく必要があります。
②キービジュアル
次にお話があったのは「キービジュアル」という話。
世界観や雰囲気である「トンマナ」を表す画像のことをいうようです。写真だったりイラストを用意しましょう。印象に残らないブログの特徴でも上げていた「シンボル」で代替えしても良いそうです。
③キーカラー
3番目はキーカラー。これはデザイン全体で使う色味です。
よく、デザイン系のハウツー記事を読むとメインカラー・サブカラーを決めましょうみたいな話はよく目にしたのですが、ホシナさんは複数色で考えるべきだとおっしゃっていました。
単色で考えるのではなく、複数色のパレットを決める。これは単色の印象(心理的なものが与える影響)よりも、複数色での印象のほうが大事だ、とのことです。
[ HUE / 360 ] The Color Scheme Application
△こういう近似色パレットを作ってくれるサイトもあるので参考になりそうです。
④キータイプフェイス
最後の4つめは「キータイプフェイス」。ブログではフォントのことです。
フォントを統一し、いたずらに数を増やさないように、とおっしゃっていました。フォントの力は絶大で、これだけでトンマナを崩してしまう可能性もあります。デザイン全体を支配する力を持っているのでよくよく考えるようにしましょう。
デザインを制作するには?
今度はデザインを制作するにはどうするかという話になります。
ラフデザインを作る
まず最初はラフデザインを作る。これはイラストレータなどのソフトを使っても良いですが、手描きでも充分なのだそうです。
ここで大事なことは「最低でも3案つくる」ということ。なぜかというと、デザインに正解はないため。1案だけだと頭が固定してしまって、よりよいものが作れない。
3案ひねり出すのって無茶苦茶大変じゃね?と思ったら、そこもフォローがはいっていました。まず1つ目の案を作りこれをA案とします。その案のキービジュアル・タイプフェイス・キーカラーを一部・もしくはまるごと変える案でB案、それらの要素を切り分け相対するものに変えてC案。あとはトンマナごと変えてしまうという手もある、とのこと。
そこで考えたものの中から、目指すゴールに最も近いものを作り上げていくんだそう。
コードを書く?
ひねり出した案をどうやって具現化するかって話なんですけど、これはHTML・CSSを覚えるかプロに頼むかの二択。
HTML・CSSに関しては、現在は非常に学びやすいプログラミング言語なのだそうで、学習サイトもあるし、そもそも慣れてしまえばただの英単語でしかない。
また、プロに頼む場合はホシナさん自体も「ブロサポ」ってサービスを運営しているそうで、個人向けに格安でフォローしてくださるようです。
あとがき
ここまでまとめてみましたが、自分でやりたいデザインを考えるというのはブログの方向性をしっかり考えるということと同じ意味なんだなと。
書いている内容を吟味して、一生懸命書くのと同じくらいデザインについては考えるべきだなーと感じました。
僕も少しずつHTML・CSSを学んでみようと思いましたよ!
そんな感じで今日はこの辺にしておきます!あずき (@azucky824 )でしたー。