“こだわり”と“フラット”の結晶「ITmedia スマートフォンビュー」の中の人に聞いた：理由は「手のひらにiPhoneがあったから」

制作に携わるプロジェクトメンバーに、スマートフォンビューがどのようにして生まれ、そしてこの先どう変わっていくのかを聞いた。

[宮田健，＠IT]

個人の興味が商品に――「ITmedia スマートフォンビュー」

　2010年12月15日、アイティメディアは（ひっそりと）スマートフォン向けに最適化した「ITmedia スマートフォンビュー」（以下、スマートフォンビュー）を会員向けにリリースした。アイティメディアは主要記事が読めるスマートフォンアプリのリリースとともに、ブラウザーでも快適に記事を読めるよう、スマートフォンビューの改良を続けてきた。2012年4月には会員だけではなく一般にも公開され、いま＠ITやアイティメディアの記事はスマートフォンから見ているという方も多いだろう。

スマートフォンビュー（左）とPCビュー（右）

　今回はアイティメディア社内でスマートフォンビューの制作に携わるプロジェクトメンバー2名に、スマートフォンビューがどのようにして生まれたか、そしてこの先どう変わっていくのかを聞いた。

「そこにiPhoneがあったから、作ってみたくなった」――後発からのスタート

　アイティメディア 技術開発本部 ITソリューション統括部 メディア・ソリューション部 岩田誠氏は、2009年に発売されたiPhone 3GSを手にしたとき、これに最適化された状態でアイティメディアの記事を読みたいと思ったという。そう思った直後、すぐにiPhone画面とブラウザーの仕様を調査、すぐに社内限定公開できる初期のスマートフォンビューを制作した。

　「iPhone 3GSに最適な見せ方に興味があり、個人で勝手に作ってみたのがきっかけ。社内で関係者に見せたところ、なかなかいいじゃないかという声をもらったので、会員限定でリリースした」（岩田氏）。当初のスマートフォンビューは、大変シンプルなものだったという。

最初のスマートフォンビュー（リリースより）

　2010年にリリースした当時は、ページビューもほとんどなく、アイティメディア社内でも興味を持つ営業／編集者はいなかったという。「その分、好きなことができた」と岩田氏は振り返る。岩田氏はデザインを含めたフロントエンド全般を担当しているが、その中でもJavaScriptを駆使したUI設計を得意としており、徐々にスマートフォンビューは機能が充実し、見え方も変わってくる。

　2012年にはスマートフォンビューは会員以外にも一般公開されたが、これはIT系メディアの中では遅い方だった。しかし、2013年8月には大幅なデザイン変更が行われリリースされたスマートフォンビューは岩田氏の「こだわり」を凝縮したものになっており「ネイティブアプリに負けない滑らかさへのこだわり」「デザインへのこだわり」そして「アイティメディアにとっても負担がないことへのこだわり」を持ったものになっている。

「Facebookを参考に」――ネイティブアプリのような滑らかさを実現

　リリース後、幾つかのブログやソーシャルメディアで「アイティメディアのスマートフォンビューは見やすく反応も良い」という反響があった。これについて岩田氏は素直にうれしいと感じたという。

　上部に固定ヘッダーを配置してネイティブアプリのようなUIを実現。ランキングボタン（王冠アイコン）や記事検索ボタン（虫眼鏡アイコン）、メニューボタンをタップすると、アイコンがくるりと回転し、それぞれのUIがその場に表示される。また、ランキングスワイプで下にスクロールすると、コンテンツとヘッダーの間に微妙な影を出している。

　特に、読者の皆さんにもぜひ体験してほしいのは、メニューやボタンのタッチ反応や滑らかさだ。滑らかさを確保するために、これまでかなりのチューニングを行ってきたという。

アイティメディア 技術開発本部 ITソリューション統括部 メディア・ソリューション部 岩田誠氏「Webアプリにはデザインとして参考になるものがなかったので、ネイティブアプリ、特にFacebookのネイティブアプリを参考にした」

　「スマートフォンに搭載されているブラウザーはタッチイベントAPIが導入されている。PCでよく使うクリック時のイベントリスナーはonClickだが、スマートフォンではonTouchが使用できる。スマートフォン上では両方ともタッチでイベントが呼び出されるが、onTouchはタッチした瞬間に実行されるのに比べ、onClickは0.5秒くらいタイムラグが発生する。実装はonClickの方が楽だが、スマートフォンビューではonTouchを使っている」（岩田氏）

　その他にも、スマートフォンのブラウザーではさまざまなイベントが使えるようになっている。しかし、ブラウザー自体がスワイプ動作に「前のページに戻る」といったアクションを定義している場合もあり、これらの干渉を把握しておかないと、使いやすいUIにはならない。

　多数存在するモバイル系ライブラリについて、岩田氏は「部分的にjQueryを利用しているが、モバイルプラグインやUI系プラグインは使っていない」と述べる。JavaScriptでは、環境によってコード実行の結果が異なり、各プラットフォームごとに分岐処理を書かなければいけないことが多いため、コードをシンプルにするために、一部でjQueryを利用しているのみとのこと。

　ただし、jQueryで実装できるアニメーション機能などは利用しない。「JavaScriptベースのアニメーションだと、どうしてもカクカクとした動きになってしまうため、スマートフォンビューではCSS3を使っている。端末のGPUを使う処理になるため、この方がパフォーマンスが上がる」（岩田氏）。

フラットデザインを取り入れ「デザインの力を実感している」

　デザイン面についても、デザイナーとしてのスキルを最大限に活用するだけではなく、社内外の反応を確認しつつ、大胆に調整している。このUIの調整、計測に携わるのがもう1人のメンバー、アイティメディア スマートメディア推進室 綿貫竜太氏だ。

アイティメディア スマートメディア推進室 綿貫竜太氏「岩田が“職人”なので、かっこいいものを突き詰めて作ってくれる。ここまでやるのか、と思うほど」

　綿貫氏は2013年ごろからスマートフォンビューの営業面を含む、UI設計に携わっている。広告商品としてどう売るかということも重要だが、「ユーザーの皆さんに使ってもらうためにはどうしたらいいか？ という点を主眼に動いている」（綿貫氏）。

　スマートフォンビュー改善のきっかけはさまざまだ。例えば、社内での要望を聞き、その案を反映する。社外のアンケート結果を反映するなど。現時点ではスマートフォンビューに対する不満は10％以下をキープしており、その不満も機種依存に絡む問題で、おおむね受け入れられている状態だという。

　改善のスピードは速い。改善案を受け取ると、その意見をベースにし、フロントエンドだけで調整が可能な項目であれば、すぐに岩田氏が実行に移す。「いわゆるデザインカンプは作らない。実装含めて開発環境で作ってみてから、実装で確認する。こうすれば、1日で案が通る」（岩田氏）。実機デバッグはiPhoneメインで行い、Android対応は主にエミュレーターを使い最後に実機で確認するにとどめているという。

　結果は解析ツールでタップ率の変化をチェックし、反応がないならすぐに取り下げる。ここまでを1〜2週間の間に実行するのだ。

　最近変更を加えた大きなテーマは「フラットデザイン」だ。岩田氏と綿貫氏は、このUI／UXを丁寧に実現し、2013年8月にリリースした。「自分の頭に浮かんだものをトライアンドエラーで作成、いいと思ったらリリース。そうしたらフラットに行き着いた」（岩田氏）。

　“フラット”はひと言でイメージが伝わるが、実際に実現しようとすると多くの手間が掛かることはデザイナーであれば、ご存じのことだろう。岩田氏は「小さなアイコンから部品まで、手抜きできる個所はいっぱいある。1つだけなら気が付かないだろうが、小さな手抜きが積み重なると影響が大きい。この世界で一番でいたい、プライドを持って作った」と述べる。

　モバイルと親和性の高いソーシャルネットワークのシェア機能も、ボタンをフラットに改修した。両サイドが青いボタンになるよう配置した。

　「綿貫から『ボタンは大きくしてほしい』と言われたときには正直疑問だったが、実際に作ってみたら思った以上に格好良いと思った。この結果、ソーシャルボタンのタップ数は2〜4倍に跳ね上がった。デザインの力を実感している」（岩田氏）

“フラット”にしたソーシャルボタン

　また、PCビューとスマートフォンビューはURLが別になるが、ソーシャルボタンのカウントは合計値が一緒になるようにしている点にも実装のこだわりが現れている。

主役はコンテンツ――「いかにそぎ落とすか、価値のあるものを抽出するかが、スマホのデザイン」

岩田氏「多くの改善案が上がってくるが、それをそのまま、言われたまま実装するのは好きではない。何か1つでもそれを上回るアイデアを入れたい」

　モバイル向けWebサイトを作る上で、ここ最近キーワードとなっているのは「レスポンシブWebデザイン」だろう。モバイル向けにもPC向けにも対応できるデザインだが、アイティメディアではこの方式を採用していない。それは、なぜだろうか。

　岩田氏はレスポンシブWebデザインについて「新規にメディアを立ち上げるためには有効な手段」と述べる。しかしアイティメディアでは既に多数のメディアが存在しており、対応させるべきコンテンツ資産が膨大に存在する。このような場合「スマートフォンに最適なページを別途作る方が合っている」（岩田氏）。

　もう1つの理由は「広告商品」だ。アイティメディアの場合、広告商品はPCビューとスマートフォンビューで別であるため、この理由からもレスポンシブWebデザインの採用は難しくなる。

　岩田氏、綿貫氏がUI／UXにこだわることと同じくらい重要視しているのは、スマートフォンビューの主役が「記事」であることだ。アイティメディアには＠ITだけではなく、「ITmediaニュース」「ITmediaエンタープライズ」さらには「ねとらぼ」などのメディアが存在しており、これらを個別に対応していてはメンテナンス面で不利だ。

　「記事中の囲みや見出しデザインは全てのメディアで共通のテンプレートで見せられるように工夫している。いくらきれいに見せられるといっても、コンテンツを作る記者、編集者に負担を掛けてしまうと使われなくなる。あくまで主役は『コンテンツ』で、読むときにはナビゲーションが最小限になるよう、コンテンツに重きを置いて作っている」（岩田氏）。

スマートフォンビューのこれから

　スマートフォンビューは日々変化する。直近の改善項目として、各メディアのアイコンを設定したばかりだ。この記事を読んだ皆さんもぜひ、ブラウザーのホーム画面に追加する機能を使ってホーム画面に「＠IT」のアイコンが出るかどうかを確認してほしい。

　その他にも、連載バックナンバーへのアクセスを簡単にしたり、関連記事を上部の固定ヘッダーボタンから見やすくしたり、jQueryのライブラリをそのまま読み込むと重いので削って軽くし、さらに読みやすくしたりするなど、さまざまな改善案が出てきている。

　もしこの記事をスマートフォンで読んでおり、アイデアがあるならば、ぜひその声を届けてほしい。もしかしたら、2人の職人がそのアイデアの“一歩上”を実装し、驚きを持って返答するかもしれない。