万年素人からHackerへの道

万年素人がHackerになれるまで殴り書きするぜ。

  • ・資産運用おすすめ
    10万円は1000円くらい利益
    • ・寄付お願いします
      YENTEN:YYzNPzdsZWqr5THWAdMrKDj7GT8ietDc2W
      BitZenny:ZfpUbVya8MWQkjjGJMjA7P9pPkqaLnwPWH
      c0ban:8KG95GXdEquNpPW8xJAJf7nn5kbimQ5wj1

    MobileApp Design #1 【Ionic Japan/JXUG共催】

    Connpass

    mobile-app-design.connpass.com

    ionic_jp #jxug

    Gitter

    https://gitter.im/jxug/MobileAppDesign1

    Wifiの入り方。

    テキトーなページにアクセス「httpsはだめ」 https://msftguestap.partners.extranet.microsoft.com/guest/msftguest_employeefaq.php?_browser=1

    f:id:shinriyo:20180303131611p:plain 真ん中の青を選ぶ。

    IonicとXamarinの概要紹介

    Xamarin

    CLLocationManagerですね-> iOS

    ネイティブのUIを持つフル"ネイティブ"アプリ

    C# / .NET /Visual Studio

    Monaca onsen UI -> Webビューで描画してるだけ。

    標準に近いのが用意されている。

    iOSのアプリを作るにはMacが必須。 WindowsのソースをMacにコピーしてビルドしてた。

    MacではUWPx

    • Xamarinネイティブ

    ストーリーボードなどでUI Shared C# All Logic(PCL)

    • Xamarin.Forms

    XAML -> Xamarin.Forms (UIを共通化するライブラリ) Shared C# All Logic(PCL)

    さっと作るならForms、ちゃんと作るならネイティブ

    Ionic

    Bower GrantもGulpもそろそろ時代遅れ。 npm + webpack

    静的型付け。TypeScript

    Angular / React / Vue 3強フレームワーク

    プログレッシブWebアプリ(PWA)

    アプリストアに遷移して~~インストール。 Cordova

    WebViewが走っている。

    wwwフォルダはコンパイルされたのが出てくる。

    HTMLでモバイル

    テックフィード ゲーマガ pixiv

    [usecaseから学ぶConponents] https://github.com/ionic-team/ionic-conference-app

    Material DesignとFlat Designの比較

    ガイドライン

    Googleによって提唱されたユーザエクスペリエンス https://material.io

    • 3原則

    • 比喩されていること

    • 意図的なものであること
    • モーション

    1pixelでやっていく

    Google+, AirBnB, Evernoteで採用

    MSはFluent Design System

    フラットデザイン

    RiotJSのコミッタ

    http://dist.tokyo

    フラットデザインとは

    「シンプル」「ダイナミックなレイアウトデザイン」

    AppleもMictosoftもフラットデザインとは提唱咲いていない。 ガイドラインもない。 モダンUI

    当時はスキュアモーフィックデザイン、リッチデザインが主流。

    MSがWindows8のUIをフラット化 Modern UI(旧: Metro UI)

    AppleiOSのデザインに採用

    https://www.cultofmac.com/246312/jony-ive-explains-why-he-decided-to-gut-skeuomorphism-out-of-ios/

    we understood that people had already become comfortable with touching glass

    • フラットデザインのメリット 

    • 柔軟性のあるフレームワーク

    • より大きく、より合理的なタイポグラフィ
    • レスポンシブデザインとの互換性い

    • フラットデザインのデメリット 

    • ユーザビリティへの悪影響

    • 識別性の欠如
    • 日本語には合わない  -> フォントが合わない。ひらがなカタカナはいいけど漢字が・・

    • フラットデザイン 2.0

    厳格にフラットデザインのルールを決めるのではない。

    • マテリアルデザイン フラットデザイン比較

    マテリアルデザイン

    設計時はしっかりとしたマニュアル通りの設計が必要 アイコン1共通のアイコンでないといけなくなる 主ににAndroidとWebでの取り組みが

    フラットデザイン

    なるべくかげや、アニメーションなどのエフェクトをなくす グリッドをしっかり活用する デザインにこだわりすぎるとユーザビリティがさがるので注意が必要です

    https://riotjs-jp.connpass.com/event/80806/

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

    ネイティブじゃない人はフラットデザインはわかりにくい。 モバイルアプリは学習済みの人に。

    モバイルアプリだとOSに合わせるのが基本。

    Android昔は上だけだったが、下にタブ。 今は自由になった。

    WordPressはもう終わった。 WordPress.comのすすめ。

    ServerlessWordPress

    女友だちをつくる女性専用ソーシャルサービス https://tipsys.me/

    Page間の意味の統一

    Appleの圧力。 地域別のアプリは別々にせず1つにしろ。 ロゴがわかりにくい。 

    ジオロケーションのピン。 関西、関東の切り替え。

    デザイナーはユーザーではない。

    ツイート ↓ つぶやく

    下からキーボードの右上に移動した。

    Twitterは誤クリック防止のために右上になってた。

    会いました(出会った)を。 ユーザのプロフィールに見えるように変えた。

    機能に気づかなかったから。

    ユーザ行動のデザイン

    アムウェイのオフ会同士w

    • ユーザ体験

    ゲーム買ってからのワクワク感。 女優にあったことにないのに期待する気持ち。

    本当は、UIの前にUXを定義しないといけない。だから皆UXと豪語する。

    PDCAの方向性はユーザの体験が基となっている。

    UX白書とは http://site.hcdvalue.org/docs

    重要なのはどこに向かってPDCAを回していくかです。

    デミングモデル

    ペルソナ 誰が? ペルソナとは、そのサービスにとって最も重要で象徴的なユーザー像(メインターゲット)のことです。新規サービスの企画の場合は、アーリーアダプターを想定すると良いでしょう。

    https://monstar-lab.com/uxdesign_persona01/

    「自分に都合の良いペルソナを作り上げる」ダメ、ゼッタイ。 ベルソナはサービス提供側に都合の良い人になりがち。 自分の知人にしておくと検証しやすい。 ペルソナは実際の知人、友人にすると「自分に都合の良いペルソナをつくってしまいがち」な落とし穴に陥らず、かつ、話を聞きに行けるので便利 。

    UI/UXというのは信頼できない。 UIはすごい小さい。 UXはプロマネ寄り。

    UXはPhotoshopやIllusratorはできなくても良い。 同列で語るものではない。直線状にはあるが。

    アプリ起動を定期的にするから。 そうでなければWebでいい

    プロダクトが存在しないと、学べない、はじまらない。

    IA(Information Architecture)とUXの違い

    ユーザにフォーカスしたのが 既存リソースの整理

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

    アプリ部東京 大田川洋

    Ionic・・イオニックと呼ぶのもあるらしい。

    MHW

    Xamarin.Forms -> Forms

    Intent?

    インテント」とは、Androidにおいて、アプリケーションの中の1つ1つの機能、たとえばアプリケーション同士や、アプリケーションとウィジェット、アプリケーションとシステムを橋渡しする仕組みのことです。

    Xamarin.iOS であれば、CocoaPodsのライブラリをXamarinのプロジェクトでも動かせるようにできます。当然NuGetも使えます

    仕様をコードベースで揃える=共通化できるのか。→Xamarin

    StackLayoutは Fill and Expandがデフォルト。 

    便利なコントロール

    縦幅と横幅が違うとできなくなるからGridを使う。

    OS差異

    TabとNavigation

    iOSではTabは常時 AndroidはTabが最初だけ

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

    なかしょの技術日誌

    リサーチの実子と学習ー>前提の整理、仮説の設定、成果をえるー>デザインの設定ー> Minimum Visible Product

    良いUIを考えるなら、仮説・検証は必須

    • プロトタイピング

    Sketch Framer Invision Origami Ionic

    BDD(振る舞い型駆動開発) Cucumber記法

    Zeplin (ゼッペリン) https://zeplin.io

    デザイナーとデベロッパーの意思疎通。

    配信の自動化

    ペアで作業しよう 思い切りを

    プロトタイプ無しでの開発はありえない。

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

    Line-Height Fixerプラグインを使って解決 Adobe Bnank

    I Want Apple System Fontプラグイン

    https://github.com/usagimaru/Sketch-AppleSystemFont-Plugin

    pixel perfect

    m-gram

    性格診断

    ページごとの応援メッセージ