スマホでサイトを見られる割合が多くなって、
全体のビジュアルのデザインって難しくなってきました。

すべてが縦に並ぶのがお約束だからです。

いや、別に並ばなくてもいいのかもですが。
使いやすさが失われてしまう。

そうなれば、途中離脱の方が多くなってしまう！

スマホではぶっちゃけ、
どのサイトもレイアウトでいえば差がありません。


となれば、写真とイラストの勝負になってきます！！


写真は、基本提供されたものを使うしかないし。
自分の腕では、プロに到底かなうものではないことは承知してます。


イラストなら、多少は勝負できます！ たぶん！！


今回は、たくさんのキャラクターをちりばめています。




このキャラクターたち。

html5 ＋ css3 が発表された当初に実験として、
数年だけ公開したサイトに登場させたこたちです。

調べてみたら、この記事。

ちょうど 7年前のゴールデンウィークだったんだ。

すっごく気合が入っちゃってますね。

グリッド無視で、思い切った配置と余白をとったデザインでした。
身びいきだけど、今でも古くないよね？

ただ、この効果を見てもらえることがほぼなかったのです。

実験サイトで訪問数が少なかったこともあるけど・・・。

当時、IE が主流な上、バージョンが入り乱れていたからです。


このこたちの原型はもっと古く、ブランドが出来た時に描きました。
その時も、人目にはあまり・・・。


中でも、メインキャラのクジラは、一番思い入れのあるこ。

どうしてもなんとかしたい！

と、3度目の挑戦。

マカウホエールとして描き直したところ。

たくさんの方にストラップカバーを買っていただきました！
ステッカーのラインナップにも入ってます！！

みなさん、本当にありがとうございました！！


そして、満を持して、再登場させちゃう。

本音は、私でもこんなガーリーなのも描けるんです。

って、見せたいだけだったりして。


私がWebデザインで、スクール時代からこだわっているのは、
透明感と余白です。

・・・IE が png を読み取れなかったから大変でした。

なんとしてでもスケスケにしたかったんです。

透明なパネルの表現も今は主流になりましたもんね！

自分のやってきたことがズレてなかったんだと思うと、
うれしくて感激です。


もちろん今回も、全体的にスケスケです。


こだわりは、ヘッダーのスケスケ具合。
あえて固定ヘッダーにしての透明です。

スマホサイトは、どうしても平坦になりがち。
ヘッダーに重なることで立体感を演出できればと思いました。




PC だと表題の画像が固定されているので、より立体感！


余白は、主にメニューで。

このタイプのメニューは、普通、
本体に半透明のレイヤーがかかるものですが。

べた塗りにしちゃいました！




っで、キャラが登場します！！

スマホで見ると、ふわっと現れるでしょ？

PC だと、登場時間の関係から大急ぎで出てきますよ。

こちらはただレイヤーに画像を配置しただけ。
むずかしいアニメーションをつけなくても、
動くサイトになってくれます。


けっこういい感じになったかも！（これも身びいき）


そうそう！ 意外なところにもキャラがいますので。
隅々まで見ていただけるとうれしいです。


コンテンツページが出来上がりました。


本当に、ホームページ・・・どうしよう？

関連記事

• リニューアルしなければ！vol.07 【フラットでミニマルだよ！】
• リニューアルしなければ！vol.06 【どんなビジュアルにする？】
• リニューアルしなければ！vol.05 【ボタンエフェクト】