本記事は、アーカイブに保存されている過去の記事です。最新の情報は、公益社団法人日本印刷技術協会(JAGAT)サイトをご確認ください。
クロスメディア研究会では、2013年のWebデザイントレンドを押さえると同時に、技術トレンドとしてJavascriptのライブラリであるjQuery、ユーザーインターフェースにおけるスマートフォン対応について、それぞれ話を伺った。
Webデザインに関するトレンドおよび関連トピックについて、コプロシステム 石川洋樹氏より話を伺った。最近目にすることが多くなったフラットデザイン、レスポンシブWebデザインについて解説いただいたほか、複数の要素に対してスクロールスピードに差をつけるなど視差効果による立体的な空間を演出するパララックスデザイン、写真や動画をフルスクリーンサイズで配置するフルスクリーンデザイン、元の素材が何の写真か判別できないくらい強めのぼかしをかけるブラー(ぼかし)エフェクトデザインについても取り上げた。
2013年のトレンドとしてまず挙げられるのがフラットデザインである。マイクロソフトのWindows8、Yahoo! Japan、Google、アップルのiOS7など、ここ1、2年で世界的に有名なサービスが次々と採用しているデザインだ。
フラットデザインの特徴は、フラット、つまり平坦なデザインである点である。スキューモーフィックデザイン(Skeuomorphic Design)と呼ばれる、実物の質感を模したデザインとは対極にあり、リアルさや立体感などのリッチな表現をなくしている。
タイポグラフィによる大胆なレイアウトや、ビビッドな色合いやスモーキーな色合いで少ない色数を用いることでモダンな雰囲気になる。装飾に限らず、コンテンツや文章もムダな要素をなるべく排除し簡潔にしているのが特徴だ。
このデザインのメリットは、コンテンツ構成のほか画像も少なくファイルサイズが小さくて済むためファイル容量が小さくなる点である。また要素や構成がシンプルなのでレスポンシブWebデザインに対応しやすい。
反対にシンプルさゆえに退屈なサイトになる可能性もある。情報量の多いサイトやECサイトには不向きであるし、デザインから行動が予測しにくいため操作が分かりにくくなる可能性もある。
フラットデザインを実現するためにはFlat UI Design やFlat UI Colors といった便利なツールも無料で提供されている。完成度を高めるためにはフォントの選択や配色など、デザイナーのチカラが大きいデザインでもある。
Googleでのキーワード検索回数の変化がわかるGoogleトレンドでフラットデザインを見てみると、2013年に入って大きく検索階数が伸びているポイントが2回出てくる。1回目はiOS7が発表された2013年6月、次はiOS7が一般に配布された9月である。
フラットデザインが増えた理由としては、デジタルデバイスへ慣れたため現実のデザインを模す必要がなくなった、レスポンシブWebデザインとの相性がよい等、いくつかの要因を挙げられるが、スマートフォンとの親和性が高いのが一番大きな理由だろう。
ブラウザの画面サイズを判別してCSSを切り替えるレスポンシブWebデザインも、2013年の大きなトレンドである。Googleトレンドで見ると2012年に入ったころから検索回数が急上昇していることがわかる。首相官邸のサイトもレスポンシブWebデザイン対応になっている。なぜトレンドになっているかというと、スマホやタブレットなど、webがさまざまなデバイスで閲覧されるようになったというのが最も大きい。
簡単なメンテナンスであれば非常に工数が少なくて済む反面、大きいメンテナンスだと非常に大変になる場合がある。またPCだとコンテンツを表示し、スマホだと非表示にする、という設計にしたときには、目には見えない部分もソース上は存在するため、スマートフォンでWebサイトを閲覧するときにブラウザがすべてのコードを読み込み表示が重くなる可能性もある。またあえてPCサイトを見るということができない。レスポンシブWebデザインは設計がかなり大事になる手法である。
jQueryとはJavascriptのフレームワークで最近人気がある。今回は基礎的な知識を理解するため、jQueryで何ができるのか、どのように利用するのかについて、関連書籍を多数執筆している、まぼろしの西畑一馬氏に解説いただいた。
これまでリッチな表現を実現するための手法としてFlashが多く使われていたが、iPhone、iPadでは使えず、Google Play での Adobe Flash Player の提供も終了したことなどがあり、代替としてJavaScriptの需要が高くなった。
Webサイトだけではなく、アプリ関係でもJavaScriptが利用される場面は多い。通常AndroidアプリはJava、iOSアプリはObjective-Cで開発するため、OSごとに作り替える必要が生じ、工数も増える。しかしWebアプリとして制作することで、どちらのOSにも対応できるほか、万が一アプリストアの審査で却下(リジェクト)されても通常のWebサイトとして閲覧することができる。そのようなWebアプリを制作するときに、アプリっぽい動きを実現する方法としてJavascriptが使われ、それを簡単に使う方法としてjQueryがある。
Googleトレンドで見ると、jQueryは2007年に登場し、2009年ごろから検索回数が増えている。反対にJavaScriptは徐々に検索件数が減っており、現在はほぼ重なっている。JavaScriptに代わり jQueryが検索されるようになったと考えることができる。
jQueryは、いまWebサイトの8割で使われているという調査結果もあり、避けては通れない技術だ。FacebookやTwitterのように投稿記事の最後で待つと以前のツイートを読み込んだり、フォームに入力すると候補(サジェスト)が表示されるのはjQueryが使われている。グーグルが提供しているブラウザ上のオフィスソフト、GoogleDocsも編集内容がリアルタイムで共有できたりする機能はJavaScriptで実現している。
jQueryの最大のメリットは、JavaScriptが簡単に書ける点である。またJavasqriptで記述するとブラウザごとに書く必要があるが、jQueryはすべてのブラウザで同じ動きをするクロスブラウザ対応のため、ひとつで済む。また豊富なプラグインを提供していることも利点である。公式のプラグイン提供サイトでは1000個のプラグインが用意されており、プラグインを使えばプログラムの専門知識がなくてもさまざまな機能を使うことができることができる。
jQueryプラグインを利用するに当たっては、まずはいろいろ試してみることが大事である。その中で、いちばんよさそうなのを使う。ポイントは、カスタマイズはほどほどにすることだ。要件をすべて満たす機能を無理に探し続けるのではなく、妥協点を探してプラグインの仕様を要件に落とし込むという考え方も必要となる。
これからのWeb制作ではjQueryの知識は必須になる。jQueryを利用すれば複雑なJavaScriptが簡単に記述できるようになるし、プラグインでて供されているさまざまな機能を使うことができるようになる。さらに自分でjQueryが書けるになると、より複雑な機能を実現することができる。
スマートフォン・タブレットなど、タッチバイス特有のユーザーインターフェースデザインについて理解するため、レシピサイトとして圧倒的なシェアも持つクックパッドにて全体のデザインやユーザーインターフェースデザインを統括している池田氏から、デザインの基礎について話を伺った。
PCからスマホに変わったことによってユーザーインターフェースも大きく変化した。スマホではジェスチャーによって操作ができるようになったことが最大の特徴だ。ここが、基本的にクリックさせるPCとの大きな違いである。
タッチデバイスのUIは画面が狭いことが特徴。そのため、一定サイズ以上のタップ領域にして使いやすくすることが重要になる。また文字の入力がPCより大変なため、極力文字入力を控え、タップだけで操作ができるようにする。
例えばクックパッドであれば、ユーザーに料理名を入力させるインターフェースだけではなく、ナビゲーションメニューとしてジャンルごとに料理名を表示して選択できるようにしている。また一画面でできることは簡潔にするなどの工夫をしている。
ユーザーがスマートフォン・タブレットで利用するシチュエーションはさまざまである。例えば移動する、料理するなど動きながら使う場合があるので大事な操作は確認をさせるようにする。片手・両手どちらでも使うか考えておくことも必要である。クックパッドの場合は、端末をキッチンのテーブルの上など、どこかにおいて操作する場合があると想定し、必ず片手で操作できるようにしている。
スマートフォンの場合はWebサービスの入り口として、アプリとスマートフォンサイトがある。アプリはホーム画面から起動し、Webはブラウザから起動する。このふたつは同じスマートフォンからとはいえ、ユーザーの導線が違う。アプリの場合は必ず最初の画面から入るが、Webの場合はどこから来るかわからない。必ず何のサービスであるか認識しているのがアプリである。スマートフォン上でWebサイトを閲覧しているユーザーがアプリへ流入することも多い。
アプリとWebではユーザーインターフェースも異なる。たとえば「食べログ」であれば、アプリとWebサイトを比較して、画面上にサービス名(食べログ)を明記しているのはWebサイトのみである。アプリの場合は必ず起動画面から入るので、常に全画面で食べログだと書く必要はないからである。Webはユーザーがどこからくるかわからないので、その画面を起点にアクションをさせるためナビゲーションが多い。またアプリのばあいはアドレスバーがないため画面サイズが広い。
アプリのユーザーインターフェースでは、OSごとにデザインに関するガイドラインが公開されている。それに合わせた設計にすることで共通の、自然なデザインになる。ただしiOSとAndroidでは少しずつデザインが異なることがあるので注意が必要である。たとえばiPhoneではタイトルは画面中央に配置するが、Androidでは画面左側に配置するなど違いがある。
ユーザーにとって目的とすることを自然に可能とするデザイン、届け手と受け手とのギャップの少ないデザイン、ユーザーにとって驚きや感動を与えることができるデザインが、良いユーザーインターフェースデザインだと考えている。
***
Web制作のみを手掛けるのではなく、印刷物の組版やレイアウトにも、Webサイトのデザインにも、両方対応できるのは印刷会社ならではの大きな強みである。クライアントにとっても発注がばらばらにならないというのはメリットとなるだろう。そのためにはWebデザインのトレンドやそれを実現する技術の動きを押さえておくことが役に立つ。
(JAGAT 研究調査部 中狭亜矢)