Vol.18

Webとは一味違うスマホアプリの動的UI設計は、「脱・ワイヤーフレーム思考」で【連載:えふしん⑫】

  • このエントリーをはてなブックマークに追加ブックマーク0

えふしんのWebサービスサバイバル術 藤川真一(えふしん)氏FA装置メーカー、Web制作のベンチャーを経て、2006年にpaperboy&co.へ。ショッピングモールサービスにプロデューサーとして携わるかたわら、2007年からモバイル端末向けのTwitterウェブサービス型クライアント『モバツイ』の開発・運営を個人で開始。2010年、想創社(現・マインドスコープ)を設立し、2012年4月30日まで代表取締役社長を務める。その後しばらくフリーランスエンジニアとして活躍し、2012年11月6日に想創社(version2)設立

アメリカのiPhoneアプリはなぜクールか!?

「アメリカのアプリは、デザイン、動き共に非常によくできているし、オリジナリティの高いものが多い」

あるmtgが終わった後に、『Kickstarter』や『Fab』、『Etsy』などのアプリを見ながら、僕はこんなことを話していた。

(画像左から)『Kickstarter』、『Fab』、『Etsy』のスマートフォンアプリ

(画像左から)『Kickstarter』、『Fab』、『Etsy』のスマートフォンアプリ

これらのアプリは、過剰な表現は少なく、実現したい機能をシンプルに無駄なく実現しながらも、細かい動きが丁寧に作られている。なぜ、そこにその情報があって、なぜ、そういう動きをすべきなのか、というのをしっかりデザインされているように、少なくとも僕は感じている。

それに対して日本のアプリは、どちらかというとアメリカのサービスのトレンドをマネたものが多い。最近ありがちなインターフェースとしては、FacebookやPathが採用している左右に動くサイドパネルのメニューだろう。このUIは、情報の拡張性が高いので、後からメニューを増やしたい時に便利だという思惑もあるのだろう。

マネされがちなFacebookのUIだが、「流行ってるから」というだけの採用は良いUIとは言えない
マネされがちなFacebookのUIだが、「流行ってるから」というだけの採用は良いUIとは言えない

「取り扱う情報量が多いものをどう整理するか?」ということを考えると、確かにFacebookをマネするのは合理的だ。しかし、なぜか“流行っているから使ってみました”感は否めない。

もし、そのUIデザインをマネする場合は、コンテンツの粒度や理由が、元の情報構造に合ってないと、サイズの合わないスーツを着ているようにどこか気持ちが悪いものに感じる。

「えっ、そのUIを採用する理由ってあるの?」と違和感を感じるアプリは、その“サイズが合ってない感”を感じるのだと思う。

もちろん、作り手は作り手の思惑があって、ユーザーが増えたら今後はこうしたいという拡張の余地をある程度見込んでいるので、ゴールがそもそもズレている可能性もあるのだが。

じゃあ、アメリカの優れたアプリに負けないように、実際にアプリを設計しようとすると、いろんな壁にぶつかる。

最初は、自分自身の守備範囲の狭さを思い知らされる。次にチームで立ち向かう時には、お互いの何かが足りないところの間で、バレーボールの「お見合い」のようにボールが落ちてしまうギクシャク感につながっていく。

Webの成功パターンを捨てよ

ずいぶん昔に、「Webの設計は誰がやるの?」という記事を書いたことがある。まだIA(インフォメーションアーキテクチャ)という言葉がメディアで流行る前、UX / UIという言葉を、まだ一部の意識の高いWeb制作者だけが使っていたころだ。

当時いた組織では、Web設計は無意識にディレクターの仕事だった。最悪の場合、営業の段階ですでになぜか大きな制約があることも多かった。「お客さんに言っちゃったから、今さら、もう止められない」とディレクターから言われ、実現可能性の検証も担保もないまま、制作プロセスが進行すると、案の定、現場は混乱する。

責任の所在があいまいなので、デザイナーと営業の現場マターでサイト構造の大黒柱を切ってしまうような変更をしてしまい、サイト構造が混乱し、納期が圧縮され、開発工程がその余波を受け徹夜で作業するような状況を見て、これはおかしいと思い、「Web設計は誰がやるの?」という記事を書いた。

その後、IAという言葉も普及し、よりブラッシュアップされた考え方として、プロジェクトの中で情報設計という役割を明確に持ち、小規模な組織であればディレクターを中心として行ったり、大規模案件であれば専任のIA担当者を置いたりするという流れになった。

とにかく大事なことは、一枚絵のビジュアルデザインと情報設計は違うものだと意識することであり、サイト設計を構造設計が不得意な人に丸投げしてはいけないということ。

そして、動的に制御するWebであれば、開発責任を担保する人も先んじて仕様にかかわっておくということが明確化されたことだ。

Webが良かったのは、基本的にサーバサイドのプログラミングとHTMLとの間で、明確に責任分担ができることである。Ajax使いまくりのダイナミックなWebサイトは、TwitterやFacebookクラスのWebサービス以外では流行っていない。SEOのことも考えると、あくまでも静的なドキュメントベースのコンテンツにCSSで装飾が行われているのが現状の主流であり、ワークフローも整理されていて仕事はしやすい。

  1. 1
  2. 2
この記事が気に入ったらいいね!しよう

エンジニアtypeの最新情報をお届けします
  • このエントリーをはてなブックマークに追加ブックマーク0

RELATED POSTS関連記事

JOB BOARD編集部おすすめ求人

この記事に関連する求人・キャリア特集

  
エンジニア転職フェア開催 IT&モノづくりエンジニアを求める優良企業が大集結!
記事検索

日本マイクロソフト株式会社 【マイクロソフトサポートエンジニア】トップ…

Japan REIT(ジャパンリート)株式会社 社内SE★残業はほぼなし★新設す…

CLINKS株式会社 テレワークエンジニア(SE・PG)/在宅勤務で社員採用/育児…

日産自動車株式会社【ポジションマッチ登録】 オープンポジション

株式会社ブルーストーンリンクアンドサークル 移動体通信エンジニア20~…

株式会社日本HP 【フィールドサービスエンジニア】世界的業界トップシ…

日清食品グループ(日清食品株式会社) 製造オペレーター(スタッフ~係長…

リンテック株式会社 【東証一部上場】 機械設計/東証一部上場企業/経験浅…

株式会社スタッフサービス エンジニアリング事業本部(リクルートグループ…

UTエイム株式会社 生産管理スタッフ◆未経験歓迎◆大手企業の案件豊富◆面…

英文メールでよく見る「略語」の意味は? 海外エンジニアに聞い...

データアナリストになる方法~コンサル型かエンジニア型か?ビッ...

Xcodeの使い方を基礎から学ぼう~Swiftからはじめるi...

「みんなは起業にビビリすぎ」堀江貴文氏×村口和孝氏が語る学生...

「自らを実験台として新たなキャリアを切り拓け」 及川卓也氏が...

>>過去のエンジニアtypeのページはこちら