スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流｜Go Ando / THE GUILD｜note
前回の投稿で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まで
スマホデザインで見やすいサイズ、行間は？デフォルトのアプリ等を調べてみた｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、デザイナーの小林です。 最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。 Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。 「小さすぎるんじゃないか？」 「見出しと本文の違いがパッと見で分かるだろうか？」などなど… そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。 検証方法 iPhone4S（古くてスイマセン）でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。） ホーム画面 通話履歴 メール リマインダー メモ帳 ミュージック Google Chrome Facebook Twitter Youtube はてなブックマーク evernot
はてなブックマークiOSアプリはマテリアルデザインの悪い見本 - UXエンジニアになりたい人のブログ
はてなブックマークのiOSアプリを真面目に使ってみたらひどい出来だったので書きます。 基本構造 まずはアプリの基本構造をおさらいします。このアプリは大きな画面構成として メイン（様々なエントリー一覧） フィード マイページ の3つからなっています。 それぞれの画面と親子関係、各画面を呼び出すための操作をまとめると以下のようになります。[ ]で囲まれた青文字がUI表現で、赤文字部分が最終操作画面とその説明です。★が初期画面です。 まとめたつもりなんですが読みにくいし主題とあまり関係がないので、面倒な人は下の画像まで読み飛ばしてください [フローティング操作ボタン] メイン（様々なエントリー一覧） [ツールバー横のナビゲーションドロワーボタンから左部ナビゲーション：タイトルは「話題を探す」] [仕切り線：カテゴリー] ホーム [タブ] 人気エントリー（いわゆるホッテントリ）★ 新着エントリー（
デバイスのアクセス許可を求めるUI | UXデザイン会社Standardのブログ
あなたのアプリケーションではユーザーにいくつの許可を求めていますか？例えばiOSの写真アプリケーションであれば、「カメラロール」「カメラ」などの許可を求めるポップオーバーが初回起動時に表示され、ユーザーはそれぞれを許可する必要があります。 もしここでユーザーが「カメラ」の許可をしなかった場合には、まず写真を撮影すること自体ができなくなります（仕様にもよりますが一応シャッターを切ることはできても、真っ暗な写真になります）。ここでようやくユーザーはおかしいと気づくことになりますが、どのようにこの状態を改善すれば良いのかわかっていることは少ないでしょう。 ヘルプなどの項目に書かれている場合もありますが、設定 → プライバシー → カメラ → アプリ名を探してトグルをオンにするという複雑なタスクを行わなければいけません。しかし、そもそもヘルプにさえ辿り着けなければアプリがおかしいと感じ、星1の評価
Hybrid sweet spot: Native navigation, web content
When we launched the iPhone version of Basecamp in February of last year, it was after many rounds of experimentation on the architectural direction. The default route suggested by most when we got started back in early/mid-2012 was simple enough: Everything Be Native! This was a sensible recommendation, given the experiences people had in years prior with anything else. Facebook famously folded t
#6 ガワネイティブアプリをつくろう!! - KAYAC engineers' blog
ガワネイティブアプリをつくろう！ こんばんは。カヤックのAdvent Calendar6日目は、@fnobiがお送りします。 最近の業務ではいけてるSDKを作るため、Javaを書いたりC#を書いたりC++を書いたりしつつ、 Webを作るのも大好きなのでJavasciptをがりがりしたりしています。雑食エンジニアです。 さて今回のブログですが、専門的な話をしても、弊社のもっと専門的な人に踏み潰されそうな予感がするので、 こちらも雑食な話をしようと思います。 テーマはズバリ、 ガワネイティブアプリです！ ガワネイティブアプリとは ガワネイティブとは 「側ネイティブ, ガワだけネイティブ, ガワだけアプリ, ハイブリッドアプリ」： - IT用語辞典バイナリ ガワネイティブアプリとはつまり、 ガワ(外側)はスマホアプリとして書くけれど、コンテンツはほとんどWebViewっていうアプリのことです。
ハイブリッドモバイルアプリ開発をしてみて分かった、WebViewアプリのできることできないこと - Qiita
少し前からシリコンバレーまわりで働いているのですが、こちらのスタートアップではアプリのプロトタイプをネイティブではなくWebViewで作るのは割と普通のことのようです。 私自身、数ヶ月前に趣味アプリとしてWebViewベースのハイブリッドモバイルアプリをiOSとAndroidで公開したので、そのときに感じたこと・ノウハウとかをまとめてみました。 使ったフレームワーク Ionic Frameworkというフレームワークを使いました。 このフレームワークは、Cordovaという、JavaScriptからiOSやAndroidのネイティブコードにアクセスできる仕組みをもったプラットフォームをベースに作られています。 さらに、WebView上では流行りのAngularJSを用いられています。 また、Ioniconというiconが無償で提供されており、デザイナーがいなくてもかなり綺麗なUIのアプリを
誰でもハイパフォーマンス！OnsenUIが変えるハイブリッドアプリ開発の常識ーng-japan 2015
誰でもハイパフォーマンス！OnsenUIが変えるハイブリッドアプリ開発の常識ーng-japan 2015 佐川 夫美雄（Ashiras, inc.） この記事は、Angularをテーマとした日本初のカンファレンス 「ng-japan」のイベントレポート（第2回目）です。 はじめに HTML5ハイブリッドアプリケーションとは、内部の実装にHTML5が利用されているモバイルアプリケーションです。アプリの内部実装にHTML5を使うことでクロスプラットフォーム対応が可能になりますが、その代わり問題となるのがUIとパフォーマンスです。このセッションでは、Angularの上に構築されたUIフレームワークであるOnsen UIを紹介しながら、Angularでどうすれば高速かつ快適なUIを持つモバイルアプリを作れるかについて話します。 AngularとOnsen UIで作る最高のHTML5ハイブリッドアプ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ！ワンコインセミナーでその一歩を踏み出してみよう！Yoshinori Kobayashi
Your favourite app isn’t native
Preface I tried writing this post in a style that is different from the others on my site, and I don’t think it offers a particularly nuanced point of view. Today I’d say: Web views are still (unsurprisingly) useful for displaying text in HTML-friendly situationsCross platform app systems can be very helpful for teams that don’t have the capacity or user base to justify unique native implementatio
「ネイティブアプリかWebアプリか」の争いはいい加減やめにしよう | readwrite.jp
Mozillaの開発者であり、Webの支持者であるジェームズ・ロングは、モバイルWebアプリはネイティブアプリに敵うことはないと主張する。ロングの挑発的な物言いはわざとかもしれないが、彼の言ってる事も一理ある。 しかしながら同時に、こういった事はますます論争の種では無くなってもきている。 Forresterは「クライアント・サーバー時代はネイティブが制したが、Webに取って代わられた。歴史は繰り返す」と主張する。そうなのかもしれない。 もしフェイスブックのReactJSが何かの兆しなのだとしたら、それはネイティブ及びWebの未来はハイブリッドにあるということなのかもしれない。実際、そういったことは今現在でも見受けられる。 Webは「遅すぎる」Webアプリの問題とは、ロングが言うようにDOM（ドキュメント・オブジェクトモデル。ドキュメントやWebページ/アプリをどの様にプログラムがアクセスす
React Native / Alternative な開発ツールの採択について
#nikkeidenshiban_Sansan の勉強会での発表資料です
Seleniumのモバイルテストは今どうなっているのか | MagicPod Tech Blog | MagicPod: AIテスト自動化プラットフォーム
スマートフォンの普及に伴い、インターネットの利用はデスクトップからモバイルにシフトしており、最近の調査ではスマートフォンからのアクセスがパソコンを上回るウェブサイトも増えています。 Seleniumでもこのモバイルへの対応が重要なテーマになっており、 Seleniumプロジェクトやその周辺プロジェクトにおいて、既に様々なツールがリリースされています。 今日は、このSeleniumによるモバイルテストの現状についてご紹介します。 iPhoneDriverとAndroidDriver Seleniumプロジェクトのモバイルへの対応はかなり早くから始まっており、2009年2月にはiOS(iPhoneおよびiPad)のブラウザテストを行うiPhoneDriver※1が 、2010年6月にはAndroidのブラウザテストを行うAndroidDriverがリリースされています※2。(ちなみにSelen
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - tastejs/PropertyCross: Helping developers select a framework for cross-platform mobile development.
RettyアプリのWeb/Native連携
DeNA Engineering - DeNAエンジニアのポータルサイト