「MobileApp Design #1 【Ionic Japan/JXUG共催】」に参加してきました

• 2018/3/3
• https://mobile-app-design.connpass.com/event/79024/

IonicとXamarinの概要紹介

Xamarin

• JXUG 田淵 義人(エクセルソフト)

Xamarinとは

• モバイルのクロスプラットフォームのフレームワーク
• C#
  • なのでwindowsアプリ作ってる人が流れてる感じが多い
  • C#で書けるというのが売り
• ネイティブのAPI100%移植されている
  • 全部薄くラップされている
• 共通化できるけど全部できるってわけではない

開発手法

• Xamarinネイティブ
  • UIをストーリボードとかOS固有のもので
  • ロジックはC#で共通化
• Xamarin.Forms
  • UIをプラットフォーム間で共有できる
  • 共通/ios/android/uwpって感じでディレクトリ分けして書く感じ
• 使い分け
  • さっと作る時はForms
  • ちゃんと作る時はネイティブ

Ionic

• Ionic Japan 榊原昌彦

フロントエンドの流れ

• bower死んだ
• grantもgulpも死んだ
• coffeeも出てきたけどもう消えた
• 今はESもしくはTS
• CSS使いづらいSCSS使おう
• Angular/React/Vueの時代
• ReactNative/Kotlinネイティブ
• PWA

今後の流れ

• PWAがあるからWEBもアプリにできる
• BackgroundSync
  • オフライン時の操作をとっておく
  • 復帰時に再送できる
• Push通知
• ホーム画面追加
• GPS/カメラ等へのアクセス

どうしてWebなのか

• アプリのインストール率低下のデータが
• Webサイトの利用時間増加
• ストアから遷移するまでのめんどくささ

ionicとは

• Cordovaを使うことでWebアプリをネイティブアプリとしてストアから落とせるようにするようなもの
• android/ios/browserそれぞれ対応
• andularが土台
• PWAデフォルト対応
• UIライブラリも同梱
  • ios/android自動でUIを変える
  • OSの文化に寄り添った見た目にした方がUXがよい
• https://github.com/ionic-team/ionic-conference-app

Material DesignとFlat Designの比較

• JXUG 福田
• Ionic Japan 桑原(株式会社ゆめみ)
• https://speakerdeck.com/clown0082/materiarudezain-huratutodezaingaidorainwodu-mu

Material Design

• 2014のGoogleIOで発表

Flat Design

• シンプル
• ダイナミックなレイアウトや色使い

歴史

• スキュアモーフィックデザイン/リッチデザイン
  • 立体感/奥行き
  • PCスマホで見え方が違った
• ModernUI
  • Windows8でフラットデザイン
• ios7
  • フラットデザインに
  • タッチスクリーンにユーザが慣れた

メリット/デメリット

• メリット
  • 柔軟性のあるFW
  • より大きくより合理的なタイポグラフィ
  • レスポンシブデザインとの親和性
• デメリット
  • ユーザビリティへの悪影響
  • 識別性の欠如
    • 似たようなものになりがち
  • 日本語に合わない
    • 漢字が複雑
    • カタカナとか画数少ないひらがなならなんとかいける

今後

• フラットデザイン2.0
  • 厳格に遵守ではなく柔軟に

マテリアルデザインとの比較

• マテリアルデザイン(android)
  • 影があったり
  • アニメーションあったり
• フラットデザイン(ios)
  • 平面
  • やじるし表示したり

実践から考える「UIデザインの前にやらないといけないIAとUX設計」

• Ionic Japan 榊原昌彦(イノベーションアライアンスCTO)

UI設計

• 情報のグルーピング
• 情報の取捨選択
• ページ間の意味の統一
  • 同じ見た目なら同じような情報を置かないと
• ユーザの観察
  • キーボードで隠れる部分の使いかたとか
  • 機能に気づかれないと使ってもらえない

UIの構成要素

• グラフィック
• 機能要件
• 情報設計

UX

• アプリを使いたいんじゃなくてアプリを通して何かを実現したいと思って使っている
  • 利用前/利用中/利用後
• ペルソナ
  • 誰をターゲットにするのか
  • 自分の都合のいい人にしてしまいがち
  • 知り合いを設定するとよい
    • 実際に話し聞いたりとかもできるし
• コンテキスト
  • どういうシーンで使うのか
    • 砂漠で温かいおしるこを売ってもUXは低い
  • ユーザの持つ問題への理解と共感を深める
  • ユーザが望む本質を探求する
  • http://ykazu.com/ux/context-for-ux-design/

Webとアプリの違い

• 繰り返し使ってほしいならアプリ
• 一回でいいならWebでいい

まずはプロダクトを作ろう

• プロダクトが存在しないと学べない始まらない
• 作って反応を見る

【Xamarin.Forms】デザインと「よしなに」する方法

• ohtagawa
• 太田川さん
• フェンリル株式会社
• アプリ部東京

これからXamarinやるひと

• 公式が一部日本語対応

Xamarinとは

• .NETと互換性あるMonoプロジェクトをモバイルで動かせるようにしたFW

Xamarinのメリット

• ネイティブに負けない
  • 実行速度
  • ライブラリ数
    • ネイティブ+.NETライブラリ
• コードの共通化
  • アプリの規模にもよるが4割弱
• ios/androidどちらも同じコードで書ける
  • 仕様をコードベースで揃えられる

Xamarin.Forms

• プラットフォーム間でViewを共通化するためのUI Tool Kit
• android/iosの差異をあまり意識せず作れる
• .NET(MONO)とFormsの知識あればなんとかなる
• VS上でプレビューできる
  • xamlというxmlでビューを書くと使える

デモ

• ビルドはサンプルだからはやい
  • 機能があるともうちょっとかかる
• xamlで書くのはかなりつらそう
  • 特にJSエンジニアからすると絶対に書きたくない
  • コンポーネント化できないってことなのかな？
  • RNエンジニアからするとすごく古い開発スタイルに見えてしまう

TabとNavigation

• iosは常時タブを出す
• androidは最初だけタブを出す
• TabとNavigationどっちが親で子なのか

リーンアジャイルで開発を加速しよう

• なかしょ
• 中島進也さん

Sketchで実装しやすいデザインデータをつくる

• 中江 亮(株式会社ディー・エヌ・エー)

105問のエムグラム性格診断の離脱率を激減させてバズらせるUIのお話

• m-gram Inc. 松村有祐