スマートフォン経由でインターネットを閲覧している人が日に日に多くなっているのはもはや周知の事実です。Google Analyticsをチェックしている方なら、それが３年前に比べてどう推移しているかなんて、いまさら見なくても分かると思います。
現に私のサイトでは、アクセスの約50～70%がスマートフォン経由なっており、スマートフォンでしっかりコンテンツが見えることは大前提、画像サイズや文字の折り返しも必ずチェックしています。
しかし一番もどかしいのはスマートフォンにおけるサイトデザインのチープさです。デスクトップのモニターに比べたらはるかに小さな場所に必要な情報を載せるとそれだけでもう目いっぱい。遊びを入れる余裕すらなくて、ひたすらにシンプルイズベストを突き詰めていくのが今の主流な気がします。
語弊を恐れずにいえば、コンテンツの要はデザインではなくて、書かれている内容です。プライオリティを付けていけば、デザインが犠牲になることは当然であり、そうでなければなりません。３Dホログラムやスマートフォンのプロジェクター表示機能が普及してくるまでは、限られたスペースでなんとかやりくりするしかないのです。
スポンサー広告
[ad#co-1]
では、主流がデスクトップ表示からスマートフォン表示へシフトしている現在、Webサイトデザインは進化をとめて良いのでしょうか？
私はそうは思いません。
例えばショッピングサイトなどでは未だにデスクトップ経由の成約率が高く、スマートフォン経由はアクセスこそあれども、情報収集の粋を出ていないということが多いそうです。
最終的な購買行動は家に帰ってからや職場に戻ってからということでしょう。確かにスマートフォンで表示される商品は写真も小さいし、一度にチェックできる写真の数も少ないことが間々あります。
加えて、シンプルイズベストを突き詰めた結果、ページはとても素朴なものとなり、決して購買を促進するようなデザインにはなっていないことも、デスクトップでの購入を促す一つの要因かもしれません。
そうすると、現段階、少なくとも2014年はまだデスクトップのデザインも十分に労力を注ぐに値すると思います。
前置きが長くなりましたが、今年２０１３年を通してサイトデザインの変遷から感じた今後のデザイントレンド予測をはじめます。
画面全体を使うデザイン
例えばスライドに960pxとか1040pxとか特定の幅を決めるのではなく、左端から右端までwidth 100%でデザインするというものです。バランスを考えると、カンパニーロゴやメインナビゲーションを含むヘッダーセクションとフッターセクションを全幅でつくり、真ん中のコンテンツは少し左右に幅を持たせるとスタイリッシュに見えます。
下記のサイトたちが参考になります
Brooklyn Soap Company
Burton
Nike
繰り返しになりますが、彼らに共通しているのは、下記の４つです。
- 1.全幅のヘッダー
- 2.全幅のスライド
- 3.全幅のフッター
- 4.高さのあるフッター
これをやることによってサイトがコンテンツが見やすく、また、一番上と一番下には濃い色をもってくることによって、全体が引き締まって見える効果があります。この辺は洋服やインテリアのコーディネートと共通するところかもしれません。
少しトリッキーですが、背景全体に大きな画像を使っても洗練されたイメージを与えることができます。
単一ページに情報をつめこむ
SEOも生業とするものにとって、これはちょっと抵抗があるのですが、あくまでもデザイン的に良いという点で挙げさせていただきます。このデザインの話をするときにまず紹介させていただくのがユニクロのWebサイトです。
これでも途中で切っていますが、ごらんのとおり縦に長いサイトです。
縦に長くすることのメリットはまず、余計なクリックが必要なくなります。インターネット回線が遅かった時代は１ページの容量を減らすために複数ページに分割して、ページ読み込みを早くしたりしていましたが、現在の回線ならば多少画像が多くても長くて数秒で表示することができると思います。
実はこれはタブレットを使ったときに力を発揮します。モバイルデバイスよりは大きいとはいえ、タブレットもボタンやリンクの小ささからクリックに手間取ることがあります。１ページに必要な情報が入っていればフリップするだけで、全てを閲覧することができ、便利です。
感覚的な良さもあります。この単一ページのよさを紹介するとき、私はよく”紙媒体のような”という言葉を使うのですが、この縦長のサイトをみていると、雑誌やチラシをみている感覚になるのは私だけでしょうか？
ちなみに、冒頭でも触れましたが、SEOの観点からいうと、ちょっと”もったいないかも”と思う点があります。それはずばり、主題の分散です。
検索エンジンはHTMLのTitleタグやH1タグを見てそのページが何について書かれているかを判断します。これらのタグは一つのページ一つづつというのがルールで、これ以上いれると、主題がうすまってしまい、極端な話をいえば、検索エンジンが何について書いているページかわからなくなってしまいます。
ただしこれは現時点で私がわかっているSEO知識での話です。新しいアルゴリズムを継続的に導入しているGoogleなどであればあるいは、この当たりは既にクリアしているかもしれません。
ページをスクロールすると物語が進む
これは日本語だとなんと呼べばいいのでしょうか。英語だと"Parallax Scrolling"というようです。百聞は一軒にしかず、このサイトをみてください。スクロールバーをグリッとやってしまうと、超速早送りになってしまうので、マウスホイールを使って少しづつ下にいくといい感じで物語がすすみます。
journey.lifeofprimotive
こちらも。
Lexus
どのような場面で有用か？
ウェブサイトのアイトラッキング結果をみるとよく分かるのですが、人はあまりサイト全体はみていません。いくら情報を詰め込んだところで、見ないし、読まないのです。そんなとき、この紙芝居形式のサイトは訪問者の目を釘付けにすることができます。
見て欲しいところに、ちょちょっとエフェクトを入れてあげれば、無意識にそこを見てしまいます。これは一つの可能性ですが、まだまだ使い道はありそうです。私も早速どこかのサイトで取り入れてみたいと思います。
[ad#co-1]
まとめ
以前投稿した「2014年に流行るウェブデザイン5+1個」で紹介したものはどちらかというとデザイナー寄りですが、これらはデザイナーでなくてもcssやjqueryを駆使して十分実現できるものだと思います。インハウスデザイナーがいない場合、いちいちコンテンツを依頼していたら、時間も予算もなくなってしまいます。
私のポリシーは「まずはCSSで代用できないか、できなければデザイナーにお願い」することなので、今回の紹介したトレンドはまさに私のような人にぴったりです。デザイナーにお願いしてしまうと、ちょっとした変更も自分でできなくなってしまうので。。その辺のツールを覚えればいいのですが、なかなか難しくもあり。。
今回紹介したもの、特に最初の二つはすぐにでも実践できるものだと思いますので、ご興味のあるかたはサンプルでご紹介したサイトを参考に、サイトリニューアルをご検討してみてはいかがでしょうか！？