フォームが複数ページに渡る場合、ステップインジケーターは必要不可欠です。ステップインジケーターはユーザーに対して自分たちが今どのステップにいて、あとどのくらいのステップが残っているかを示す役割があります。 画面上のスペースが限られているためモバイルフォームで、ステップインジケーターを提示することは困難です。デスクトップと同じインジケーターをモバイルフォームで使用すると、可読性と可視性の問題が生じてしまいます。 直線型 vs 放射型 無理やり狭いスペースに各ステップのタイトルを収めると、テキストサイズが小さくなりユーザーが読みにくくなります。さらに一度にあまりに多くのステップ名と番号が表示されるため、可視性も下がります。結果、視覚的なノイズが発生し、ユーザーが現在いるステップを把握することが難しくなってしまいます。 モバイルフォームには放射型のインジケーターを使用してください。こちらの方がユ

freeeの価値基準の一つである、ユーザーにとって「本質的（マジ）で価値ある」ものを届けるということ。本連載ではそれに向かって、日々挑戦を続ける開発現場の事例をお伝えします。今回はfreeeのモバイルアプリ開発における、ブランチ運用方法の見直しや自動化の取り組みについて紹介します。 対象読者 モバイルアプリ開発において、Gitやリリース周りをもっとラクに運用したい方向け。 freeeのモバイルアプリ開発変遷 freeeでは現在、モバイルアプリの開発を専業で行っているエンジニアは6名いて、その6名で「会計freee」「人事労務freee」という2種類のアプリを、iOS／Androidの両OS向けに提供しています。 ただこの規模になったのもここ最近の話で、2年前は2～3人のエンジニアでOS別も含めて4つのアプリの開発を行っていました。 エンジニアの人数が増えたおかげで、飛び交うPullRequ

売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 目的 React Nativeのナビゲーション（画面遷移）ライブラリは、まだデファクトと言えるものがない状態です。（公式ではreact-navigation推し） そこで、そもそもiOS/Androidアプリに求められるナビゲーションの要件は何かを再調査し、その上でライブラリ選定を行おうと考えました。 （筆者はWebは得意ですがアプリエンジニアではないので、もし間違っている事があればご指摘ください。） iOS ナビゲーションについてはココにまとまっています。 People tend to be unaware of an app’s n

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 ロード時間でユーザーを待たせないことは、モバイルUXデザインの基本です。モバイルのデザイナーはこの原則をよく知っているはずです。しかしロード時間の点ではユーザーの求める水準に応じることが難しいときや不可能なときがあります。どのような原因でローディング時間が遅くなるにせよ、待ち時間の障害を取り除き良いモバイルUXを目指すべきです。 スプラッシュスクリーンとは？ スプラッシュスクリーンとは、ユーザーがアプリを立ち上げたときに最初に見る起動画面のことです。ここにはアプリの名前、ロゴ、背景画像が含まれます。 スプラッシュスクリーンを活用して第一印象を向上させる 第一印象の94％はデザインと関係していることが広く知られています。悪いデザインは悪い印象を生み出します。初回の

前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで

Research indicates that carbon dioxide removal plans will not be enough to meet Paris treaty goals

この記事は、eureka Native Engineer Advent Calendar 2017 25日目の記事です。 24日目はJohnの「Convolutional Neural Networkを理解しよう」でした。 はじめにこんにちは、CTOのkaneshinです。業界では、『エウレカのCTO』か『Go言語の人』という認識を持たれていますが、エウレカでは4年ほど前にネイティブアプリのマネージャーを2年半ほど担当していました。 開催が40回を超えているpotatotipsにも登壇させていただいたことがあります。 ネイティブアプリのマネージャー時代では、マネジメントに限らず、第一線で手を動かして開発をゴリゴリと担当していました。そのため、大量の技術課題をネイティブアプリに負債として残しているため、ネイティブアプリエンジニアと話していると、時々、私が書いたコードが話題にあがるので本当に申

こんにちは、サービス開発部の森川 (@morishin127) です。主にクックパッドの iOS アプリの開発に携わっています。 日々アプリを開発する中で、近頃は最適なアーキテクチャとは何かを考えながら色々な形を試行錯誤しています。世の中で採用されているモバイルアプリのアーキテクチャには様々なものがあります。MVC, MVP, MVVM, VIPER, Clean Architecture などなど。開発している、あるいは開発しようとしているアプリケーションでどういったアーキテクチャを選択するかというのは難しい問題です。選択するためにはアーキテクチャに求める要件を定義する必要があります。この記事では私がアーキテクチャに求める要件と、それらをある程度満たすと考えた MVVM と Flux という2つのアーキテクチャで実装したサンプルを見つつその長所・短所について考えてみようと思います。 アー

こんにちは、デザイナーの小林です。 最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。 Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。 「小さすぎるんじゃないか？」 「見出しと本文の違いがパッと見で分かるだろうか？」などなど… そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。 検証方法 iPhone4S（古くてスイマセン）でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。） ホーム画面 通話履歴 メール リマインダー メモ帳 ミュージック Google Chrome Facebook Twitter Youtube はてなブックマーク evernot

アプリのナビゲーションは、直感的で予測ができなければいけません。新規のユーザーや再訪問したユーザーが、アプリをどのように使ったら良いか迷わないよう、理解しやすくする必要があります。 しかし小さい画面という制限の中で、コンテンツの優先順位を考慮しながら、ナビゲーションを使いやすくすることは非常に難しいです。 この問題に、様々なナビゲーションを使って異なる方法で立ち向かっていますが、多様なユーザビリティの問題に、皆悩まされています。 そこでこの記事では、モバイルアプリの基本的なナビゲーションであるハンバーガーメニュー、タブバーとジェスチャーベースのナビゲーション（タップやフリックを使用したナビゲーション）の３つについて検証し、それぞれの長所と短所を説明します。 ハンバーガーメニュー 画面のスペースは、モバイル上の貴重な商品であり、画面の節約に役立つモバイルナビゲーションのパターンのうち、ハンバ

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 アプリはコンテンツやサービスを提供するための、今日（こんにち）の主流かつ確かな方法です。しかし、飽和状態の市場でユーザーを満足させ、その興味をつなぎとめるために、どうすればモバイルアプリは意義や価値のあるものとなるのでしょうか。 この記事では、素晴らしいモバイルUXを作る鍵となる、UXデザインのための７つのヒントをご紹介します。 １. 一つの画面につき、一つの操作 ユーザーが情報を取得する際の努力を軽減する 皆さんがデザインするアプリの画面では、ユーザーにとって最も価値のある一つの動作を助長するものでなければなりません。各画面を一つの目的だけのためにデザインし、Call to Action（行動喚起）は一つに留めましょう。こうすることで、ユーザーはアプリを理解・

Fuse works with ambitious companies to create world class, full-stack digital products. Get in touch > Succeeding with custom software takes expert know-how, passionate teams and proven methods. Get your app managed by our experienced Oslo-based team working as an extension of your own product team.

はてなブックマークのiOSアプリを真面目に使ってみたらひどい出来だったので書きます。 基本構造 まずはアプリの基本構造をおさらいします。このアプリは大きな画面構成として メイン（様々なエントリー一覧） フィード マイページ の3つからなっています。 それぞれの画面と親子関係、各画面を呼び出すための操作をまとめると以下のようになります。[ ]で囲まれた青文字がUI表現で、赤文字部分が最終操作画面とその説明です。★が初期画面です。 まとめたつもりなんですが読みにくいし主題とあまり関係がないので、面倒な人は下の画像まで読み飛ばしてください [フローティング操作ボタン] メイン（様々なエントリー一覧） [ツールバー横のナビゲーションドロワーボタンから左部ナビゲーション：タイトルは「話題を探す」] [仕切り線：カテゴリー] ホーム [タブ] 人気エントリー（いわゆるホッテントリ）★ 新着エントリー（

アプリが成功するかどうかは、さまざまな要素に依存しています。ですが、ユーザー体験に勝るものはありません。目立つアプリは、どれも優れたUXを提供しています。 モバイルUXを考える上では、ベスト・プラクティスをなぞるのが堅実な方法です。また、全体像をつくる時は、あったら良いものの必要ではないデザイン要素をとりあえず消してしまうのも簡単で良い方法でしょう。 ただし、「良い体験」と「素晴らしい体験」の違いは、多くの場合これらの細部についてどれだけ考え尽くしたかにかかってきます。 この記事では、なぜディテールがデザインにおける目につきやすい要素と同様に重要なのか、そしてアプリの成功をどのように決定づけるかについて紹介します。 スプラッシュスクリーン ユーザーがアプリを起動したとき、一番最後に回したいことはユーザーに待つよう伝えることです。ですが、アプリに時間のかかる初期設定のフェーズがあり、この手順

Scottは元Tinderのプロダクトマネージャー兼リードデザイナー。現在はプロダクトコンサル会社Philosophie所属。ウェブやモバイル製品の構築を15年以上行っています。https://twitter.com/scotthurff。 本記事はTinderの元リードデザイナーであり、今はGoogleや任天堂をクライアントに持つプロダクトコンサル会社Philosophieに所属するScott Hurff氏のブログエントリーからの翻訳転載です。記事自体はiPhone 6発表時に書かれたものですが、議論自体は現行のものにも適用されますので、時事的な部分は割愛しつつ翻訳してお届けします。 親指のためのデザインとは、親指が自然な動きで弧を描く動作で使えるように、最適な形でインターフェイスを構築することです。 しかしこれは非常に複雑な問題です。私たちは画面上の至るところに点在するUI要素に触れよ

検索事業部の日高(@kaa)です。 検索事業部では作りたいレシピが見つかることをひとつの目標に、レシピを探す行動を助けることに挑戦しています。 その中で、レシピ検索した際の結果画面でのコンテンツを改善していくための仕組みについて紹介します。 作りたいレシピが見つかるためへの色々なアイデア レシピ検索結果画面でレシピを一覧で見せるだけでなく、作りたいレシピがより見つかるために考えられることはたくさんあります。 例えば もし、入力ミスと思われる検索ワードだったら 正しいと思われる検索ワードを提案、または正しいと思われるワードで検索し、元のワードも表示(Google検索のように) あいまいな検索ワードだったら より具体的に検索できるよう検索ワードを提案。「さっぱり」だったら「冷しゃぶ」「さっぱり　麺」など。 (具体的なワードで検索するとレシピが決まりやすい傾向があります) さらに小分類をもつワー

アプリエンジニアならおさえておきたい！知っていると差がつくディープリンク関連サービス総まとめ【2015年上半期版】 はじめまして！ フクロウラボのエンジニアチームです。 このブログでは、ディープリンクに関連するコアな技術を紹介していければと考えています。 その第一弾として、ディープリンクを使ったソリューションについて簡単にご紹介したいと思います。 2015年6月8日のWWDCにてAppleもiOS9からアプリ内のコンテンツをインデックス可能とし、Spotlightの検索結果に表示できるようにすると発表しました(※詳細はこちら)。これによりSpotLightの検索結果をタップすると、ディープリンクによりアプリ起動し詳細ページへの直接遷移が可能となりました。 アプリのディープリンク対応がますます重要になってきています。 そういった状況の中、ディープリンク対応を施しているアプリはほとんど存在して

複雑かつリッチな体験を提供するスマートフォンアプリを開発するためのチームワーク、その中でのエンジニアの役割について

アプリデザインにおけるUIのアニメーションは、いざ作るとなると「どう動かすか」などと考えてしまい、無難なものに落ち着きがちです。発想が小さくなっているなと感じたら、他の人の自由な発想を見てみるのもいいかもしれません。 そこで今回は、dribbbleにて公開されているメニューUIのアニメーションから10点ご紹介いたします。ぬるぬる動きまくるポートフォリオからインスピレーションを見いだせれば幸いです。 ※過剰で独りよがりなアニメーションはユーザー体験として不適切になりがちですので、きちんとTPOをわきまえたアニメーションを心がけましょう！ Animated sliding tab bar フッター部分を完全に非表示にさせつつも、折りたたまれていたかのように表示させるアニメーションです。ユーザーが混乱しないように予め操作方法を説明しておくといった配慮が必要になりますが、デザインとしては使いやすい