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

失敗経験を活かし開発プロセスを刷新。『iQON』が行った2つの改革とは?【連載:UI・UXキホンのキ】

タグ : iQON, iQONmagazine, UI/UX, VASILY, デザイン 公開

 

「デザインが分からない」

時折、エンジニアからこうしたセリフを聞くことがある。

このセリフは、たいていの場合「自分には絵心や美的センスが乏しい」ことを自嘲的に言い表したものにすぎない。しかし本当に絵心やセンスがなければデザインを理解することはできないのだろうか?

本連載はこうした素朴な疑問を解き明かすべく、著名サービスに関わるデザイナーへのインタビューを通して、デザインの本質やデザイナーの仕事について掘り下げる。

連載第四回目となる今回は、VASILYが提供するファッションコーディネートアプリ『iQON(アイコン)』のデザイナー、権美愛さんの登場だ。

デザイン志向な技術者になるための「UI・UXキホンのキ」

株式会社VASILY デザイナー
権 美愛(こん みえ)さん

1984年生まれ。広島県出身。大学で美術を専攻し、グラフィックデザイナーに。広告やポスター、プロダクトデザインなどを経験した後、2012年2月VASILY入社。UIデザイナーとして、『iQON』のビジュアルクリエイティブ全般に携わる。実務以外の取り組みとしては、2014年3月に開催されたスタートアップの女性デザイナーイベント『Designer’s Meetup』のコーディネートを経験。情報発信にも積極的に取り組む

ファッションコーディネートアプリ『iQON』とは?

今年4月に創刊した『iQONmagazine』の表紙。当面は月1度の更新だが、近く週刊化される予定も

今、『iQON』は、提携する60社以上のECサイトのファッションブランドの中から、好きな商品画像を用いたコーディネートを自由に作成して公開、他のユーザーと共有できるサービスだ。

2010年の4月のサービスローンチ以来、300万アイテムもの登録アイテムから生み出されたコーディネート投稿は実に累計100万件を数え、その数は1日あたり2000から3000ずつ増加し続けていることからも、その人気の大きさがうかがえる。

コーディネートに引用されたファッションアイテムは、提携ECサイトからすべて購入可能という分かり易さも受け、ファッションアイテムの購買意欲が高い女性たちからの支持を集めている。

また2014年4月から、アプリ内にて月額300円で閲覧できるファッションメディア『iQONmagazine(アイコンマガジン)』の創刊でマネタイズの幅も拡大。

同サービス開発に際しては、女性ファッション誌『ELLEgirl』(エル・ガール)の編集長を務めた澄川恭子さんをエディトリアルプロデューサーに起用するなど、『iQON』はスタートアップ界隈のみならずファッションシーンからも注目を集める存在となっている。

今回登場してくれた権美愛さんは、『iQON』iOS版のリニューアルや『iQONmagazine』など、各デバイスに対応するUIをはじめ、『iQON』にまつわるデザインまわりのすべてに携わっている。

成果は上々だったが、禍根を残したリニューアルプロジェクト

「2013年11月のリニューアルは、主にiOS版『iQON』をiOS7に最適化するために行ったものです。iOS7から導入されたBlur(すりガラス風表現)の採用や、ダイナミックなアニメーションを取り入れながら、UIは控え目かつ明瞭、レイヤー構造は容易に理解できる奥行き表現になるよう務めました」(権さん)

リニューアルに際しては、UXの見直しも同時に行った。最大の変更点はファーストビューの見せ方だ。

左がリニューアル前、右が現在のUI。iOS7への最適化に合わせ、ナビゲーションやタブバーを90%透過表示に変更。スクロール時はフルスクリーン表示になるためライトユーザーにも使いやすいUIになった

前バージョンまでは、アプリを立ち上げると新着コーディネートや人気のコーディネートの一覧を表示していたが、このリニューアルを機に多様な情報を一つのタイムライン上で見せるように変えたのだと言う。

「起動時にどれだけ多くのユーザーを惹きつけられるかが、利用頻度を高めるカギになります。ユーザーに新しい発見をしてもらいやすくするため、人気のアイテムやトレンド、開催中のコンテストなど20種類におよぶ情報を一つのタイムラインに集約することにしました。このほかにも、アイテムの詳細を見る際も画面を遷移させず、同一ページ上で拡大表示させることで、ユーザーが今開いているページを閉じた時、どこに戻るかを暗示的に伝えるようなデザインに変更したりもしています」(権さん)

同社の最高技術責任者である今村雅幸氏によると、このリニューアルの結果、「ユーザー登録者数は約40万人から90万人へと倍増し、月間利用者ベースではリニューアル前の200万人から100万人増えて300万人に到達した」と言うのだが、なぜか今村氏の表情には笑みがない。

「この数字から見ても分かる通り、リニューアルプロジェクトは一定の成果を収めました。しかし、それはあくまで結果に限っての話。実はあのリニューアルの過程は、私たちにとって反省すべき点の多いものだったんです」(今村氏)

ウォーターフォール型の開発プロセスが意思疎通の妨げに

リニューアルによって変更されたメニュー画面(左が前ver.のもので、右がリニューアル後)。多くの項目を一画面で表示するUIから、プルダウンメニューを採用したシンプルかつ明瞭なUIに改められた

「前バージョンは、機能が加わるごとに新しく画像を作成していたので、ちょっとした修正にも時間と労力を費やしているという状況でした。そこでリニューアルを機に、開発工程の効率化を計るためデザイン要素の集約と共通化を進めていきました」(権さん)

『iQON』にとっても、権さんにとっても初めて経験する大規模なリニューアルである。慎重に準備を進めたつもりだったが、思わぬところに落とし穴が隠れていた。

「リニューアルに関する大まかなデザインや画面構成は、プロデューサー、ディレクターとデザイナー間で揉んで、ある程度固まった段階でエンジニアに渡して実装する予定だったのですが、結果的にこのプロセスは上手く機能しませんでした。そもそも決定した仕様が技術的に実現困難だったり、ユーザーテストの結果が想定とは異なったため、仕様変更を余儀なくされたりするケースが頻発したためです」(権さん)

効率化のために行っていたはずの役割分担が、完全に裏目に出た形だ。その原因の一つに、ウォーターフォール型の開発プロセスがあった。ただ、プロジェクトも佳境に差し掛かろうと言うタイミングで、開発プロセスを見直している時間はない。デザイナーもエンジニアもそれぞれにストレスを抱えながら、力技で乗り切るしか道はなかった。

「開発開始後の仕様変更や、聞いていない事実が後から判明することをエンジニアは一番嫌います。だからといって、ユーザーテストの結果を無視したり、ユーザーに提供したいUXを犠牲にしたりしていいことにはなりません。リニューアルの山場をなんとか乗り越えた私たちは、今後のため主に2つの観点で開発プロセスを改善することにしました」(今村氏)

一つは「開発中の仕様変更は当たり前」という意識を持つようエンジニアの意識改革を促すこと、そしてもう一つは企画段階からエンジニアを巻き込み、企画やデザインの意図や目的を共有するプロセスを作るというものだった。

「エンジニアに対しては、仕様変更が発生することをあらかじめ織り込み、一部変更があっても全体に影響しない設計を意識するよう伝えました。一方、プロデューサーやディレクター、デザイナーには、企画段階からエンジニアを巻き込み、仕様変更の際にはその意図と背景までを正確に伝えることの重要性を伝えたんです」(今村氏)

デザイナー、エンジニアが歩み寄り、開発プロセスの刷新に成功

実践の中で陥った失敗体験から、チーム体制の見直しにつなげたVASILY

開発プロセスの見直しは、『iQON』リニューアルの直後に取り組んだ『iQONmagazine』の開発でさっそく実践されることになる。結果から言えば、その効果はてきめんだった。

「前回のリニューアルには3カ月を要しましたが、『iQONmagazine』の開発は1カ月足らずで形にすることができました。無駄な手戻りや調整に割く時間が激減したからです。この経験を経て、私の考え方もずいぶん変わりました。それまでは上から降りてくる企画をいかにデザインに落とし込むことばかりに気を取られて、デザイナーとしての考えを他の人にきちんと伝える努力を怠っていたんです」(権さん)

リニューアルと言う節目に、期せずして直面した課題ではあったが、結果的にデザイナー、エンジニア双方が納得する解決策を見つけられたのは幸運だった。

「ともするとエンジニアは“手癖”、つまりやり手慣れたやり方で仕事を片付けようとしてしまいがちです。もしエンジニアが易きに流れ、企画やデザイナーがそれに追随してしまえば、イノベーティブな表現は生まれません。立場が逆でも然りです。どちらかにとって都合のいい方法に合わせるのではなく、互いの違いと専門性を尊重しつつ、意思を統一して一つの仕事に取り組むことが重要なんだと思います」(今村氏)

例えば、企画担当者やデザイナーがエンジニアに「上からの指示なので変更してください」と言うのではなく、こんな提案の仕方をしてきたらどう感じるだろう。

「女性がスマホをいじるのは移動や休憩といった細切れの時間がほとんど。1回あたりの利用時間の短ければ、一度離れた意識を取り戻すのはその分難しくなります。集中力を削がれればアプリを閉じてしまう可能性もあるでしょう。ユーザーの気持ちを途切れさせないために、ぜひ同一画面上でアイテムを拡大するモーションを実装してほしい。お願いできますか?」

ここまで丁寧に意図を説明されれば、無下にシャットアウトするエンジニアは少数派のはずだ。仮に技術的に許容できない内容であっても、代案の提示を行うなど、実現に向けた前向きな方法を検討するのではないだろうか。

「これは実際にやってみて分かったことですが、デザイナーとして成立させたいUXをきちんと説明した上で、エンジニアに技術的裏付けのある方法を提案してもらうやり方は、非常に効率的でした。互いにアイデアを出し合うことで、建設的な話し合いにもなりますしね。今は今村がCTOの立場からエンジニアと私たちの間に立って技術的課題を調整してくれることが多いのですが、ゆくゆくは自分でもその役割を担えるようになりたいと思います」(権さん)

今ではプロジェクトが始まる前に必ず関係者全員を集めたキックオフを実施し、開発のテーマを共有するところから始めるようにもなった。

デザイナー、エンジニアともに苦い経験を乗り越え、辛さを双方にとって挑戦しがいのある開発プロセスへと昇華できたことは、『iQON』の将来にきっと明るい未来をもたらしてくれることだろう。

権さんに聞く、「デザイン事始め」Q&A


Q. デザインで大事なのは?

「最後まで諦めないこと」です。チームで仕事する際に、大きなプロジェクトを進めていくとスケジュールの調整や実装方法の問題などで、「妥協点」を探す作業が発生します。しかし、細かい調整が必要になるデザインの段階で自分が一瞬でも諦めてしまえば、クオリティの低いものになってしまう。

他人が気付かないような違和感や微妙なズレに気づき、調整していくことも、デザイナーの大事な仕事だと思います。

Q. どんなデザイナーでありたいですか?

常に、表現の可能性を広げるデザイナーでありたいと考えています。

私はコーディングもプログラミングも得意ではありません。それゆえデザインを実装する際には、デザインの理想や目的をエンジニアに対してぶつけるよう心掛けています。デザイナーが先回りして、コーディングしやすいデザインだけをしていると、新しい表現を生むことはできないからです。

デザイナーとエンジニアは、常に何が可能で何が不可能か、またどうしたら実現できるかを納得いくまで話し合い、表現の最大化を探るべきだと思います。幸いVASILYには優秀なエンジニアがいるので、私はビジュアルデザインに集中することができます。

Q. UI・UX設計のプロセスは?

ロゴやイラストはIllustrator、写真の補正などはPhotoshopと、用途によって使い分けています。主にアプリデザインにはFireworksを用いています。

また、実機確認でお世話になっているものとしては、リアルタイムでiPhone上にデザインを表示できる『Live View』。プロトタイピングツールの『Flinto』も活用しています。

Q. UI・UXをもっと知りたい方へ

デザイナーからの難しい依頼に対し、エンジニアからもアイデアを提示できれば、お互いにとって建設的な関係が築けるようになると思います。現在のデザイントレンドや最新の実装方法を知るには、以下に紹介するデザインリンク集などを眺めるのがお勧めです。

straightline bookmark  Webデザインリンク集・ソーシャルブックマーク

Awwwards  Website Awards – Best Web Design Trends

Inspired UI Mobile Apps Design Patterns [iPhone]

Q. UI・UXを学ぶためのお勧めの書籍

Webデザインだけでなく、グラフィックやアート、プロダクトのデザインの概念や歴史を知ることもデザインを理解する上で重要だと思います。以下はずいぶん前の書籍ですが、今でも十分参考になります。グラフィックデザインの勉強の時にお世話になったお勧めの書籍です。

■『グッドデザインカンパニーの仕事―1998‐2008』(誠文堂新光社)

■『フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか?』(美術出版社)

■『デザインのデザイン』(岩波書店)

UI・UX関連では、細部や瞬間にフォーカスする大事さを実例とともに紹介している以下の書籍がお勧めです。

■『マイクロインタラクション ―UI/UXデザインの神が宿る細部』(オライリージャパン)

取材・文/武田敏則(グレタケ) 撮影/玄樹

>> 連載「UI・UXキホンのキ」記事一覧




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

タグ一覧を見る