キャリアVol.99

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

えふしんの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の最新情報をお届けします

RELATED POSTS関連記事

JOB BOARD編集部おすすめ求人

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


記事検索

サイトマップ



株式会社富士通エフサス【ポジションマッチ登録】 オープンポジション

キャル株式会社 開発エンジニア/未OK/全員面接/残業月10h以内/採用者例…

キャル株式会社 インフラエンジニア/未OK/全員面接/残業月10h以内/採用…

住友林業情報システム株式会社 インフラエンジニア【住友林業グループのイ…

キヤノンビズアテンダ株式会社 RPA作成職(最先端Roboticsツール)/月給4…

キャル株式会社 機械・電気設計/未経験OK/残業月10h以内/年間休日125…

株式会社東亜産業 【商品企画・生産管理】理系・電子工学系出身大歓迎!入…

株式会社ウイルテック エンジニアリング事業本部 【総合職】機械系総合…

サーモス株式会社 筐体設計(水筒)/世界120カ国以上に展開/新しい市場…

ソニーエンジニアリング株式会社 [機械設計] ~ソニー製品の機械設計/機構…

「幾多の修羅場を乗り越えた」ユーザー数4900万人突破の『モ...

「タダでやってよ問題」にエンジニアはどう対応すべきか?澤円か...

SIerって本当にヤバいの? ひろゆきが語る、業界ごと沈まな...

「インフラエンジニアは今こそ作り手に回れ」国産クラウド『ニフ...

若手エンジニアが急成長する組織は何が違うのか? AWS導入の...

「type転職エージェント」無料転職サポートのご案内