【ココ重要ですよ!】スマホアプリのブラウザ解像度&アスペクト比率を本気で考えてみたんだってさ。【ココ重要ですよ!】スマホアプリのブラウザ解像度&アスペクト比率を本気で考えてみたんだってさ。【ココ重要ですよ!】スマホアプリのブラウザ解像度&アスペクト比率を本気で考えてみたんだってさ。LINE2020.01.17こにゃにゃちわ。もとい、ワイ!エム!オー!!です。(ジー!〇ム!オー!!みたいに言ってます)ストリクスではネイティブアプリ(いわゆるスマホにダウンロードするアプリ)の画面デザインをよく作るのですが、スマホって画面サイズやブラウザのアスペクト比率もいろいろあってよく分からないから、ちょっと整理してみようかと思ったんだってさ。以降の端末をターゲットに、どのサイズに向けてデザインするのが好ましいかをお話ししてみるんだとさ。以降)ほんでターゲットサイズを決めて最小・最大サイズを意識した設計をiOS(iPhone6以降)まずはiOS(iPhone6以降)です。ポイントで言うと、横幅375pxが1番狭く、アスペクト比率で言うと16:9が横幅に対した高さが1番短いです。次に1番横幅が広いのが414pxで、アスペクト比率では約2:1の機種が横幅に対し高さが1番長いです。高さ896px×横幅414pxで、ステータスバーやホームエリアを差し引くと↓のセーフエリアとなります。みたとき全ての機種の横幅が360pxになります。※例外の機種があるかも知れませんが。アスペクト比率を見て、最小・最大サイズを割り出せばオッツのケーです。1番高さが短いのは約19:6、逆に高いのは約18.5:9になります。Androidはステータスバーとボタンナビゲーションがありますので、その分を差し引いたセーフエリアは↓のようになります。iOS&Androidの中から最小・最大サイズをピックしてみましょう。↓のイメージを見てもらうと分かるとおり、最小はAndroid(16:9)、最大はiPhone11ProMaxの(27:1)になりましたね。上から順に大きいサイズ最小・最大サイズを意識した設計をトップ画面などは見栄えを気にしたいところですので、最小・最大でレイアウトを組むのが良いかと思います。初めからシッカリ計画を立てて進めたいところですね。STRIX関連記事ストリクスの日常[スタッフコラム]5分で描けちゃう!?簡単キャラクターイラスト講座こんにちは。〜7月編〜こんにちは。広報担当SAKURAIです。「令和」になってあっという間に2ヶ月が経ちましたね。ストリクスでは渋谷にあるオフィスの入り口付近に、ウェルカムボードを設置しておりまして、毎月弊社デザイナー達が季節に合わせた...2019.07.08はたらく仲間たち「何か思ってたイメージと違ったかも」大学生インターンSOEが感じたストリクスという会社こんにちは。ストリクス広報担当のSAKURAIです。ストリクスに来てから約2週間が経過した大学生インターンSOE。今回は2週間前のインターン初日に書いてもらった「ストリクスで初日に感じたコト」をご紹介。SOEについての紹介...2019.07.30ストリクスの日常[スタッフコラム]渋谷・神泉にオフィスがあるメリットを考えてみたら12個もあったよーお待たせしました、いや、お待たせしすぎたかもしれません。ジャーマネのYMOです。ワイ!エム!オー!!です。デザインスポンサーリンクスポンサーリンクスポンサーリンク。