その1.TwitterアプリTweet私はデザイナーではなく、元々はIA(情報設計者)でありかなりバリバリと要件定義レベルでワイヤーフレームを書いていた。最近は会社の事情でUXストラテジストとやらを名乗らされている名乗っている。UXストラテジーとは何なのかという話は置いといて(というか私にもハッキリした定義がない)、爆速でプロトタイプを作る工程は恐らくこれからも残るであろうから、UIのキャッチアップは行っておきたい。...というのは半分建前であり、デザインの現場を離れてもIAとUIの話が好きだというのが単純な動機でもある。いうことでUX業界で流行っているUIスタディをしてみた。対象は、何のヒネリも無くTwitterのiOSアプリとした。第1回目だから許してほしい。俺の場合は情報やUIの構造設計が土俵なので、各UIストラクチャのサイズにフォーカスする。カラーリングはビジュアルのプロに任せる。あとアプリにした理由は、単純に自分で開発したことがないからだ。htmlだと自分でCSSを書いてきたことが結構あるのでだいたいの勘所がわかるが、アプリだとよく分からない。いうリファレンスを作っておくことで、プロトタイプのスピードが上がる(はずである)。スタディ結果iPhone8で撮ったスクリーンショット(横幅750px)を375pxにして計測。0.5px単位になる。ホーム(タイムライン)画面全体の左方マージンが16pxで固定なのはWebUIの文脈からも分かるとして、右方マージンは結構適当な感がある。ドロワーメニューメニューは左方マージンが24pxに変化する。情報量が多く、かつ読ませることが目的のホーム画面と変化しているのがおもしろい。俺だったら同じマージンでやってしまうかもしれない。あとリストの高さは毎回悩むので、こういうリファレンスができると便利だ。文字サイズが参考になる。読ませるものは14px、ユーティリティ系の文字は13px、たまに大きい20px、という感じかぁ。設定画面h2的領域が2つあり、両者で高さが異なる。2つ目の方が高い理由は、その真上のリストの下方マージンが足されているからと解釈していいのかしら。リストの右方マージンはアロー先端まで20.5pxであり、左方マージン16pxと値が異なる。アロー自体が右側に4.5pxの内部マージンを持っていると理解すべき?あと、ここでは新しい文字サイズ12pxが登場した。補足テキストではあるが確かに本文がこのサイズだと目に厳しいものがある。簡単な整理デザイン要素ごとにまとめてみる。文字サイズ本文に該当する文字はサイズ14px、行間20px見出し(WebUI文脈で言うh2)は17px注釈文字はサイズ12px、行間16pxどーんとでかくていい文字はサイズ20px他解像度とOS本当は他のスマホサイズも検証すべきだが、疲れたので一旦iPhone8で上げておく。他の会社がエンジニアやる場合にアプリ開発すると、特にiPhoneSEサイズ(320px)でのデザイン検証がだいたいモメるので、そのあたりも見ておくべきだなぁ、と。手持ちのiPhoneSEがない。あとAndroidではどうなのかしら。Twitterほどの大手だからほぼ同じロジックで作ってそうな気がする。次の展望スマホアプリだったらGoogle系、Gmailとかいいかもしれない。あとはiOS標準の設定画面まわり。メルカリとかやってもいいかもしれない。Analyticsとかそういうのもやってみる価値がありそうだ。スマホアプリコメントコメントをどうぞ(承認後に反映されます)返信をキャンセルする。(8)aboutわたしについて楽器と機材を紹介するライブ情報リンク当サイトについて意識低い系UXストラテジストいまさしのライフログFacebookRSS著者:いまさし都内の某デジタルエージェンシーで働く意識低い系UIストラテジスト。休日はジャズベーシスト兼ゲーマー。imasashi.net。