リニューアルしなければ!vol.06 【どんなビジュアルにする?】

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

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

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

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

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


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


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


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


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


SC2018_10

このキャラクターたち。

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

調べてみたら、この記事

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

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

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

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

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

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


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


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

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

と、3度目の挑戦。

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

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

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


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

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

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


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

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

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

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

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


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


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

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


SC2018_11

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


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

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

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


SC2018_12

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

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

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

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


けっこういい感じになったかも!(これも身びいき)


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


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


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




関連記事

コメント

非公開コメント

mayahuel

ブログ内検索

カレンダー

03 | 2024/04 | 05
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -

月別アーカイブ