太陽がまぶしかったから

C'etait a cause du soleil.

はてなブロガーとして個人的に注目しているウェブデザイントレンドまとめ

photo by Alki1

2014年のウェブデザイントレンドまとめ

 ウェブデザインについては前々から興味があって、素人ながらにトレンドを追っているところがある。僕自身の好みや実装スキルの限界もあるのだけど、このブログ内で「素振り」をしておいて、別サイトに反映させる事を考えたりもしている。

 そんなわけで「ブログで2014年をふりかえる」ひとりアドベントカレンダー11日目は、個人的に注目しているウェブデザインのトレンドについて振り返っておきたい。「デザイン」というよりも要素技術に近いところも含む。

バイラルメディア風デザイン

f:id:bulldra:20141123112014j:plain

 良くも悪くも今年はバイラルメディアの年だった。著作権の問題があったり、スパム的手法で広がるバイラルメディアのメディアとしての価値はどうしようもなく失墜してしまったのだけど、シェアや回遊率を高めるための導線などの知見については取り入れたくもある。

 実質的にGoogle一択になってしまった現状において、SEOに依存するのも非常に不安定な状態であると痛感していて、「読んだ人が価値を感じるか?」「友人に伝えやすいか?」という当たり前の視点も重要である。

パララックススクロール

f:id:bulldra:20141124100758j:plain

 背景とコンテンツでレイヤーを分割して多重スクロールさせる手法による「奥行き感」の演出によって本文コンテンツを際立たせる事が出来る。iPadのホーム画面にも使われているし、ちょっとしたゲームを作った事がある人にとってはオールドファッションな香りも。

シングルページサイト

 大手メディアになるほど、ページを細かく分割してページごとにクリックさせたり、「続きを読む」を用意することで名目上のPVを稼ぐ手法が組み込まれているのだけど、これに対するヘイトが高まっており、スクロールだけですべての本文が読めるデザインが好まれている。シングルページ(1ページ)だけで全てを表現するサイトも増えたし、『AutoPagerize』のようなブラウザ拡張を導入する人もいる。

 そもそも商品購入などのコンバージョンを考えるのであれば、クリック可能な場所は分散しない方がよいわけで、楽天市場や情報商材などが長大なシングルページを用意するのにも理由がある*1。とはいえ一気に全部読み込ませるのも重すぎるし、ユーザービリティが低いので、ナビゲーションボタンを用意したり、末尾近くまでスクロールすると自動的に読み込まれていくようなデザインを導入するのが良いのだろう。  

Vine動画の埋め込み

 Vineとは6秒間のループ動画を共有するサービス。Youtubeに載せるような動画を撮ったり観たりするのは大変だけど、スマートフォンから写真感覚で撮る事が出来る。写真の代わりに食事動画を貼ったり、スクリプトの動作内容を示したり、ちょっとしたネタ動画を作ったりという用途にフィットする。GIFアニメの感覚に近い。

https://vine.co/v/OqTE5BwBqml

 ブログの本文内にVine動画を埋め込む機会が増えた。サムネイルだけあっても再生に至る確率はそれほど高くないけれど、「6秒・自動再生・無音・ループ」という要素が絡まって、ついつい眺めさせてしまう効果がある。最近はループ動画を背景の一部にするデザインが選ばれる事もあるそう。

OGPブログカード

 OGP(Open Graph Protocol)とは、SNSでシェアする時に利用されるアイキャッチやタイトルなどを指定する仕様なのだけど、はてなブログ内でOGPから生成したブログカードを簡単に埋め込めるようになった事で、はてな内では爆発的に広がっている。この機能は はてなブログ以外のブログカード生成にも はてなブログ以外のブログエンジンからの利用も可能である。

 これまでサムネイル付きのリンクを表示さえようとするとベタ書きのHTMLを生成させるのが一般的だったのだけど、OGPブログカードを利用する事でメンテナンスビリティが飛躍的に高まった。「あわせて読みたい」についても、ブログカード機能を利用している。

レスポンシブデザイン

 PCとスマートフォンで同じURLでも表示を切り替える技術。広告の大きさを最適化したり、サイドバーを下側に移動させたりなどの対応を行う。いまのところCSSにおけるメディアクエリとJavaScriptで実装しているのだけど、もうちょっと体系的にやりたくもある。

 はてなブログについても、今年になってからレスポンシブデザインに本格対応しているし、ブログパーツについてもスマートフォン対応は必須要件となってきている。例えばスマートフォンなのに横幅が大きい広告を表示させてガクガクさせたりするとユーザビリティが大きく下がってしまう。

data URI scheme

 HTMLやCSSに直接的に画像データを埋め込んでHTTPリクエスト数を減らす手法。Google の検索結果に表示されるスクリーンショットにも利用されている。例えばCSSでは以下のように背景画像を直接記述可能。XXX~の部分に生データが入っている。頻繁に表示されるユーティリティ的な画像はこのように記述するのもひとつの方法である。

div {
 background: white url('data:image/png;base64,XXXXXX') no-repeat scroll left top;
}

 変換ツールも提供されている。

絵文字Webフォント

f:id:bulldra:20141122195414j:plain

 Webフォント自体は一般的な技術で、このブログでも手書き風フォントを利用しているのだけど、絵文字をWebフォント化して利用する事も行われるようになっている。ベクター画像なので拡大しても崩れないし、色の変更も自由自在である。はてなブログにおいても一部のアイコンがWebフォントを利用しており、使用方法を以下にまとめている。

まとめのまとめ

 スティーブ・ジョブズは「デザインとは見た目のことだと思っている人がいる。だがデザインとは、何よりも機能そのものだ」と言っている。僕自身もデザインとは「ユーザー体験を実現するための機能」の定義だと考えていて、そこには本文への集中のしやすさ、コンバージョン率、メンテナンスビリティ、表示速度などの複合的な観点も含まれてくると思う。

 価値工学理論おける「パフォーマンス」の和訳は「機能」であり、『「個人メディア」と「個人の日記」の違いは「コストパフォーマンス」という言葉が出てくるかの違い - 太陽がまぶしかったから』において定義される「コストパフォーマンス」とは「価値=機能/コスト」の事である。つまり、「デザイン=機能」というパラダイムにおいて、デザインは価値に直結するパラメータを担っていると見なされる。

 僕個人としては「個人の日記」に使用者優先の原則を過剰適用した「機能」を求めるべきはないという立ち位置ではあるのだけど、だからこそ「素振り」をするなということでもない。むしろ「お店屋さんごっこ」として好き勝手に試してみられるのがブログの醍醐味であろう。来年も色々なトレンドが出てきて、それに感化されて唐突にデザインが変わったりもするのだろうけれど、そういう変化そのものを楽しんでいきたいと思う。

現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール

現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール

  • 作者: 井村圭介,久保知己,酒井優,前川昌幸
  • 出版社/メーカー: エムディエヌコーポレーション(MdN)
  • 発売日: 2014/03/27
  • メディア: Kindle版
  • この商品を含むブログを見る

*1:長いのはYesを積み上げるためでもある。