サイトの最終的なチェックと仕上げをしています。

いつも、これが時間と手間が必要です。
私のように個人的にやってると、
実際にアップしたものを見てもらう以外に、
多くの機種で検証する手立てがありません。

っで、不具合があると教えてもらってちまちま修正。


その合間に、デザインについてもうちょっと。
コーディングのお話ではないよ！


プロのデザインスタジオが作ったサイトは、
それはそれはすてき！

そしてそれは、今年のトレンドとして紹介されていきます。

そうするとみんな近づこうとしてトレンドを取り入れていく。

っで、結局・・・どこかで見たデザインになってしまうのですね。


これは、私の以前いたファッション業界で繰り返してきたことです。


トレンドっていうのは、消えては復活するもので、
それをどう今にマッチさせるかが課題。


まったく【新しいデザイン】って、そうそうできるものではない。

それができていたら、いまごろ、うはうはですよ！！


リニューアルにあたって、トレンドを調べて、
どれを取り入れるかかなり考えました。

なんたって、さぼってたもので。

う〜・・・。

グリッドを崩すのは、もうやってしまった。
テキストをずらして重ねるのも・・・。

セミフラットやグラデーションなんてずっとだ。

ってか、セミフラットっていうのか！

じゃあ、引き続きセミフラットで！！


セミフラットは、box-shadow の設定がキモ。



さらにレイヤーを重ねると見え方も変化。
右のほうが、透明を感じるのでは？


ヘッダーは、奥行きを演出するため透過。
ロゴとハンバーガーが立体的に見えるように。



スマホを見るとき、こんな真正面ってことってないですよね。
手に持って、より現実味を感じるような shadow をつけるといいです！


box-shadow だけじゃなく、
以前からあるテクニックも積極的に使いましょう。




ただ border だけですが、少しだけ浮き上がって見えますね。
こちらのキモは、ページの background と border のカラーと幅のバランスです。


双方を対比させると。



box-shadow の方は、パネル。
border は、エンボスした紙。

と、厚みはもちろん、質感も錯覚させられるかも！


いかがでしょう？

数値は載せないので、自分にあったものをいろいろ試してみましょう！


トレンドで気になるキーワードは、まだありました。

カスタムイラスト とか オリジナルイラストというもの。

えっ！ オリジナルじゃないイラストってなに？
どうやら、ストックフォトなんかのイラストのことらしい。

そんな言葉があるくらい、
自分で描いてないデザイナーが多いのでしょうか？


たしかに、私がスクールにいたときのこと。

レッスンでも、

「webデザイナーで、イラストが描けなくても問題ありません。」

と言われていましたよ。 まあ、一理ありますが。

デザイナーを目指す人が、
必ずしも絵が描けるわけではないと知ってびっくりでした。

だとしたら、
このトレンドが一番難関と感じるデザイナーさんは意外といらっしゃるかも？

反対に、
今まではグラフィックメインで、描きたかったのにものたりなかった！
っていう方にはうれしいトレンドですね！！


ところで・・・。

昔は、みなさん試行錯誤していました。
今となっては、無駄な装飾とか動きとかがあるサイトも多かったですよね。

ネタ的につっこみをいれつつ、それでも楽しく訪問していました。

もちろん、新しいエフェクトもアニメーションも、
スタイリッシュでかっこいい。

おっ！ って思うサイトはたくさんあります。

でも、この【かっこいい】サイトがあふれている中、
あえて、無駄で余計な動きをさそってみたい！


ということで、
ほんとに【無駄で余計】なデザイン（？）をしてみました。


本体が、フッターの下にも伸びています。



メニューが見えてしまわないようにとの措置だったけど、
結局、コンテンツを入れたら下から見えることはなかったです。

削っても大丈夫だけど・・・。

せっかくなので、メニューで遊んでみよう！

メニューは、機能とわかりやすさが一番。
本来、それこそ余計なんだろうけど。 あえて！！


さて、ここまでひっぱると、コンテンツは見えなくなっちゃうでしょ？



大きな余白とハンマーで、海の底を意識してみました。

ダイバーだからね！

このこは、トップボタンに対するアイキャッチ。
そのままページトップまでいってくれていいんです。

でも、ボトムの状態でヘッダーのメニューボタンを押すと・・・。


ここからは、iPhone で。




アイキャッチがお人形に入れ替わります！

メニュートップへ上がる途中では、シルエットの魚。

アケボノ・クマノミ・チョウチョウ・ナポレオン と、
トランスフォームさせました！

長い余白が飽きないようにです。


このハンマーとお人形、それぞれのボトムにしか出てきません。
なので、気づく方が少ないかも。


そしてこのこ、すべてのページでちょっとづつちがうことしてます！



ね？ 無駄でしょう！？

今回、このこ描いてるときが一番楽しかったです。


おヒマな方は、全部みていただけると、
なにをしているのかわかるようになってます。


そうです。 無駄だの余計だのといいながら・・・。


「どのページにも、一度はきてほしいなぁ」

っていうための役割ももたせてます！


お人形さんのがんばりにも期待して。

サイトはこちら。【 seacanary.com 】


今以上に、たくさんの方が訪問してくださいますように！！

関連記事

• リニューアルしなければ！vol.09 【 svg だ！】
• リニューアルしなければ！vol.08 【無駄を描いちゃう！】
• リニューアルしなければ！vol.07 【フラットでミニマルだよ！】