まったく自信がない！魅せるレイアウト・色彩
ヘッドライン
自慢じゃないですが、私はデザインセンスが0点の漢（おとこ）でございます。
そんな私が解説する、見せるECサイトの記事でございます。
色のこと
正直なところ、色なんて、その時の思い付きでつけていました。
ついこの前まで、ショッピングサイトの最も重要な【カートに入れるボタン】をロイヤルブルー、そして、【商品の詳細確認ページボタン】をレッドオレンジカラーで作って同じ大きさで並列配置していました。
ちょっとだけうれしかったのは、その色使い自体は間違っていないのですが、そのボタンに採用した色が逆だったということに気づきました。
こちらの記事によりますと、レッドオレンジ、ロイヤルブルーは、衝動買いを誘導するカラーだそうです。
私の作ったサイト自体、衝動買いしちゃうような雑貨も多いので、実際ちょうどいい色彩だったことが確認できました。
青は安心を誘導する色で、会社サイトや銀行などでよく使われる色です。
そしてオレンジというのは”購買行動”を誘導するカラーなのだそうです。
四の五の言わずに、みんなと同じことをすればそれでいいということなんですよね。。
そこで、今回は、カートに入れるボタンと、詳細確認ボタンの色遣いを逆にしました。
たしかに、しっくりきます。と、いうか、作ってからこれ、色逆だよなぁと、直感的に感じていたのですが、修正しようという気がなかっただけです。ハイすいません。
それじゃぁ、ということで、Hタグの色遣いも修正した。
衝動買いを誘発するような色遣いは、青・オレンジ・黒であるということですので、この3色をHタグに入れ込んでみました。
H1→黒、H2→オレンジ、H3→青と設定してみました。
以前の何も考えずにつけていた緑よりぐっと明るく見栄えが良いものにはなりました。
が、良くなっただけのことで、むしろ購買しないんじゃないかと感じました。
べた塗りは目立つ
確かに、くっきりとし明確でわかりよいきれいなものにはなりましたが、ただそれだけで心、脳裏に焼き付くかというと、いかにも胡散臭いというイメージになりかねないと感じました。
やさしさがないといいますか。。。
色自体がおかしいというより、べた塗りで何の修飾もないので、そのあたりからくる【ドギツサ】がある感じがしました。
Hタグを修正してみる
見出しであるHタグをもう少し素敵なものにするだけで大きく変わるだろうと。そう考えてデザインしてみようと考えました。
そもそも、デザインが苦手な僕にとって素材を作るのが最もつらいこと。
なんとかいい方法はないものかといろいろ模索してみました。
素材集などの素材はサイズが…
世の中には本当にやさしい素敵な方がたくさんいまして、無料で使える素材サイトがいっぱいあります。
そういうサイトに行けばたくさん素敵な素材があります。
もちろんヘッドライブロック用の素材もたくさんあります。
あれよこれよとまよっていると、素敵なものがいくつも出てきました。
しかし。。。
サイズが合わないものが多いのがヘッドラインブロック素材
大体、一般的に、500~800程度の横幅の素材パーツばっかりです。
これは、ほとんどの場合主流の2カラムでメインエリアが500~800ピクセル程度のサイズだからです。
そういった素材を自分で自分のサイトのサイズに合わせることが簡単にできるのなら、素材くらい作れるわけです。。。
その方たちが悪いわけではないです。私がLPタイプの1カラムのサイトデザインを採用したので、それはそれに合わせた素材を自分で作る必要があるのです。
私が画像素材をあまり使わないわけ
私は基本的に、ほとんど素材画像を使いません。
よく人に、【画像使えばそれだけ重くなるもんね。すごいね。】と言われるのですが、真実は実は違います。
単純に素材を作る能力がないだけなのです。
きれいで素敵なサイトに合った素材パーツを作るセンスと能力があればガンガン使っています。
いまは、光ブロードバンド時代。素材パーツの一つや二つ増えたところで体感できるほど重くなるわけがありません。私は元サーバー屋さんなのでそのあたりは重々理解しています。
単に作れないだけなのです。。。
CSSでできる限りのデザインを作ってみる。
素材パーツを作ることができないのなら、CSSなどのスタイルでできる限りのことをやってみようという考えにいたります。
前身のデザインじたい、画像素材を極力避けて作ったのでコンセプトはずれていません。
ただ、そのCSSデザインにしても正直なところ、陳腐ないわゆるしょぼいデザインだったわけです。
Hタグをべた塗りでも少しは修飾してみる
CSSにコードを書くだけでできるデザインは限られている。
この言葉にずっと騙されていたというか。
もちろん、画像で模様を入れたりしているようなものとは違い、やれたとしてもグラデーション程度であるのは間違いありません。
しかし、デザインというのはそういう模様だけではなく、周りの細かいこともデザインです。
たとえば四隅の角。
角が丸いものと角ばったものでは印象が全く違います。
角丸四角形といわれる四つの角にR（少し丸い）がついていると、そのものが柔らかく感じるものです。
私は角丸は、画像でやるしかないと思い込んでいました。
が、実はCSSでできます。
そして、もともと知っていながら使いこなせていない枠線、パディングやマージンをうまく使いながら、これまた存在は知っていながら好まなかった影をうまく使ってみたら、フェルト生地にミシン目が付いたようなデザインを作ることができました。
ちょっとしたことでイメージが変わるのが、色彩とデザイン
本当にちょっとしたことですが、べた塗りのマーカーのようなヘッドラインと、フェルト記事のようなヘッドラインでは同じ文字でも印象が全く変わります。
目立ち方も違いますし、脳裏に焼き付く焼き付き方が違います。
少なくとも、なんかうさん臭いなという印象は薄れたと思います。
しかし、なんだかしっくりこない。。。
ずいぶんよくなったとはいえ、【内容を見よう】という衝動に駆られるところまではまだまだ至っていないという印象。
制作者がそう感じるのだから、閲覧者はほぼ間違いなく中身を見ようと思わないでしょう。
何が違うのでしょう。。。
タイトルの位置づけのH1タグがなんだか微妙。。。
H1タグをフェルト記事縫い目デザインにするのはなんだか違うなと思い、背景黒のべた塗り、最上部に隙間なくびっちり詰めることで、落ち着いたものにはなっているが、落ち着きすぎてまったく目立たない。
なので、印象としては【タイトルのないページ】に見えるのです。
だからと言って大きくしてしまうと今度は主張しすぎてまたうさん臭く見えます。
目立ちながらも、印象に残る素敵なデザインはないのでしょうか。
簡単に見つかれば苦労しないのですが。
自分の性格は案外と実直なんだな
あまり考えたこともなかったのですが、角がないとか、曲がっているというものや、ぼやけているようなもの（影とかガウスとかモザイクとか）が考えてみれば、嫌いです。
なので、グラデーションもあまり好きじゃないですし、薄い色も好きじゃないのです。
同じように、水平・垂直は違和感がありませんが、いわゆる”ななめ”は、嫌いです。
私的にはまずNGです。
CSSの表現をいろいろ探していると、文字を斜めにすることができるコードがあるということを知りました。
もちろん見た瞬間、脳裏ではNGを出しています。
しかし、コードを書けば斜めになる程度なら、一度試してみてもすぐ戻せます。
なので、H1タグを思い切って斜めってみました。
思った以上に満足してしまった私
そんなの、ダメに決まっていると思いながら設定してみてF5で更新してみた。。
あれ。。。いいな。。。
目立って大きくなったH1。文字が水平なままではどうしようもなく、大きすぎて現状のサイズだったH1ようは、目立たないようにしただけのH1が、目立ちながらも主張しすぎず、それでいて、重要なタイトルの要素としての役割になってくれました。
ページの文中に使うのはさすがに抵抗はありますが、タイトル要素のH1なら何の問題もないですし、なにより、画像を使わずデザイナブルになりました。
ぜひ一度見てみてください。
今までとは印象は変わったでしょ？
こうやって毎日少しずつ修正していき、Googleさんに許してもらいます。
