エンジニアtype - エンジニアのシゴト人生を考えるWebマガジン
  • TOP
  • キーパーソン
  • 旬ネタ
  • コラボ
  • ノウハウ
  • 女子部
  • キャリア

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

タグ : Objective-C, Web, Webサービス, えふしん, アプリ開発, スマホアプリ, 開発 公開

 
えふしんのWebサービスサバイバル術

藤川真一(えふしん)

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

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

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

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

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

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

それに対して日本のアプリは、どちらかというとアメリカのサービスのトレンドをマネたものが多い。最近ありがちなインターフェースとしては、FacebookやPathが採用している左右に動くサイドパネルのメニューだろう。この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で装飾が行われているのが現状の主流であり、ワークフローも整理されていて仕事はしやすい。
(次ページへ続く)




人気のタグ
業界有名人 スタートアップ 開発 SE 転職 エンジニア プログラマー Web スキルアップ ソーシャル アプリ シリコンバレー キャリア プログラミング Android 起業 えふしん スマートフォン アプリ開発 SIer 技術者 UI btrax Webサービス クラウド Apple スペシャリスト CTO Twitter Brandon K. Hill ギーク 英語 村上福之 Facebook Google デザイン IoT SNS ツイキャス 世良耕太 モイめし IT 30代 採用 赤松洋介 コーディング 20代 UX 勉強会 プロジェクトマネジメント Ruby ITイベント Webエンジニア 中島聡 ビッグデータ 法林浩之 ウエアラブル iOS 五十嵐悠紀 LINE ドワンゴ ひがやすを ロボット 受託開発 モノづくり IT業界 コミュニケーション イノベーション ハードウエア MAKERS tips ゲーム 女性 ソーシャルゲーム Webアプリ SI インフラ iPhone 女性技術者 高須正和 マイクロソフト 研究者 UI/UX トヨタ 自動車 ノウハウ チームラボ 息抜き システム ソニー プラットフォーム Java メイカームーブメント オープンソース 和田卓人 エンジン グローバル 開発者 教育 イベント サイバーエージェント ソフトウェア 女子会 コミュニティ メーカー 家入一真 スーパーギーク 増井雄一郎 GitHub 人工知能 IPA 40代 日産 テスト駆動開発 ソフトウエア 音楽 TDD ニュース モバイル PHP TechLION

タグ一覧を見る