iQON デザインリニューアルのポイント
Transcript of iQON デザインリニューアルのポイント
![Page 1: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/1.jpg)
iQON デザイン リニューアルの ポイント 2013.11.20 wed
Kwon Mie(株式会社VASILY)
![Page 2: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/2.jpg)
権美愛 -こん みえ-
グラフィックデザイナー歴 4年、 VASILYに入社してWebデザイナー歴 2年。 ファッションアプリiQONのUI、コンテンツ等を デザインしています。
Kwon Mie(株式会社VASILY)
![Page 3: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/3.jpg)
What’s iQON?
![Page 4: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/4.jpg)
2012年には Apple社選定の ベストアプリ
利用者 月間 200万人
コーディネート数 1日 2000 3000投稿 平均点ユーザーレビュー 4.5
~
Google I/O 2013 出展
ファッションコーディネート i Phone/Andro id/PC
※2013年10月現在
![Page 5: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/5.jpg)
2013/11/6 iOSフルリニューアル
![Page 6: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/6.jpg)
→
![Page 7: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/7.jpg)
→
![Page 8: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/8.jpg)
よりシンプルに。 iOS7ライクな デザイン
![Page 9: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/9.jpg)
Deference(控えめ)
Clarity(明瞭)
Depth(奥行き)
UIはユーザによるコンテンツの理解やコンテンツとの対話を 助けるが、コンテンツと競合しない。
ヴィジュアルレイヤ(層化UI)と そのリアルな動きがユーザの満足と理解を高める。
テキストはどのサイズでも読みやすく、 アイコンは精密で明快、装飾は目立たず適切、 そして機能性を重視したデザイン。
![Page 10: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/10.jpg)
全画面で見せる。 コンテンツ ファーストUI よりコンテンツに集中できるように、
ナビゲーションバーとタブバーを、通常時
は90%の透かし、スクロール時は隠して
フルスクリーンでみれるように変更。
コーデやアイテムをだら見するユーザーに
とってはひたすらスクロールしても
ストレスにならないUIを目指しました。
![Page 11: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/11.jpg)
![Page 12: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/12.jpg)
最新トレンドを取り入れたUX iOS7での表現であるBlurや、アイテム画像
が拡大するダイナミックなアニメーション
も取り入れ“自分はどこから来たのか迷
わせない、ユーザーの感情を途切れさ
せない“を常に意識しています。
デザイントレンドを取り入れつつも、実際
のユーザーをイメージして、違和感のない
デザインを実現しました。
![Page 13: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/13.jpg)
Heavyな機能はあえて隠す メニューを簡素化し、ナビゲーションを一新、
タブバーで簡単に移動できる。
ライトユーザーの方でも使えるように、
メニューを開かなくても、コーデを作らなくても
ホーム(タイムライン)だけ
みてたら楽しめるiQON をめざしました。
![Page 14: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/14.jpg)
パーツ共通化し、画像やリソースは 最小限に。
キーカラーやフォントサイズ、
アイコンやボタン、テキスト…
iQON内で使われるデザイン要素は
一つのファイルにまとめて、
素早い開発のためにも
エンジニアと共有しています。
![Page 15: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/15.jpg)
![Page 16: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/16.jpg)
VASILYでは、 絶賛デザイナー募集中です。
一緒にファッションのスタンダードとなる
サービスを作っていきましょう。
![Page 17: iQON デザインリニューアルのポイント](https://reader031.fdocument.pub/reader031/viewer/2022012318/55a396f11a28abae7a8b4791/html5/thumbnails/17.jpg)
ご清聴ありがとうございました!
2013.11.20 @Designer’s meetup Vol.2