Image for post
Image for post
イラスト:@tobefrog

前回に引き続き、ユーザーインターフェイス・デザインについて、私たちの「文化」がどのように関わっているのかということを考察してみるというシリーズです。

前編では、私たちが使う言語がどのように書かれて、どのように使われているのかを考察しました。同じ日本語でも、縦書きと横書きで左右が変化することがわかりました。また、外国語、特に東アジアの諸外国での縦書き事情を簡単にではありますが探ってみました。

今回は言語以外の文化事例を見つつ、アプリでの一般例と利き手のユーザビリティを考えるべき場面というものを考察してみたいと思います。

書字方向以外の習慣がユーザーインターフェイスの方向を決めている例

横から見たイラストはどっち向き?

現在Unicodeが検討中のEmoji 11.0では、一部の横向き絵文字に右向きのものを追加しようとしています。思えば、世の中の横向きのイラストは左向きに描かれていることが多いです …


Image for post
Image for post
https://flic.kr/p/Tngybf, Credit: Some rights reserved

この記事は、ユーザーインターフェイス・デザインについて、私たちの「文化」がどのように関わっているのかということを考察してみるというものです。具体的な“アプリケーションのUIデザイン”に踏み込む前にまずは日本語の使われ方を観察し、そして海外の文化との比較を簡単に行ってみたいと思います。

はじめに

今までにも私はユーザーインターフェイスにおける左右について考察したことがありました。Mac OSのウインドウについているクローズボタンはなぜ左配置であるのか。デスクトップアイコンはなぜ右配置であるのか。デスクトップの方については若干疑問が残る形となってしまいましたが、メニューバーが左寄せであることと狭い画面サイズが関係していそうであるというところまでは辿り着けたかなと思います。

今回は、私たちが使う言語や文化がユ …


Image for post
Image for post
https://dribbble.com/shots/1679085-Mobile-UI-Blueprint-freebie

私の職場ではUIについてのマニアックな談義が行われることがあります。アプリやwebだとかのデザイン会社なので周囲にはUIやUXのプロフェッショナルが集まっていて、『UI談義』の文化が根付いています。

UIを解剖するためのUI談義

UI談義とは、UIオタクで集まってUIのことをひたすら考察し合うだけの集まりです。ここには職種問わず誰でも参加が可能で、UIデザイナーはもちろん、iOSデベロッパー、Androidデベロッパー、PM、マネージャーなどなど、あらゆるタイプの人が集まります。

UI談義のテーマは突如設定されます。普段利用しているアプリのちょっとしたインタラクションが気になったらそこでUI談義が始まります。iOSのアップデートでApple純正アプリのUIが変わったタイミングや、Twitter, Instagramなど有名アプ …


UIがとてもイケている『エロい』Macアプリを適当に挙げようと思う。

私が考えるエロいUIの条件:

  • AppKitを利用したCocoa App
  • デスクトップアプリ
  • WebView, Electron, Flash, Javaなどの技術で構築しない
  • HIGを守る/Apple純正アプリをリスペクトする
  • WindowsのUIを基準にしない
  • ドラッグアンドドロップなど機能的にもMac OSの仕組みに従う
  • 独自UIで汚染しすぎない
  • Mac OSらしい色使い
  • Mac OSらしいアニメーション/インタラクション
  • Mac OSらしい言語表現(例えば「ウインドウ」「環境設定...」など)
  • Mac OSらしいフォント(San Francisco, Helvetica Neue, Lucida Grande, Hiragino Sans …


Image for post
Image for post

セル(UITableViewCell)は iOS においてもっとも一般的なビューのひとつです。セルを利用することで、コンテンツの表示、選択、スイッチやボタンの配置、テキストフィールド、ナビゲーションを実装することができます。この辺りの具体的な実装例は『設定』や『Apple Store』が参考になるでしょう。セルにはさまざまな役割を与えられますが、どのような作法に従ってデザインされているのかよく理解する必要があります。

セルの一般的な利用作法は iOS Human Interface Guidelines で解説されていますが、私はこれを読んだだけでは十分に理解が及ばなかったため、iOS 標準アプリの事例からセルのデザインについて考察したものをまとめました。この記事では iOS の標準的なセル …


Image for post
Image for post

今年のWWDCは率直に言って、Appleはプラットフォームの強化を図ってきたんだなあという印象です。各所で期待された新ハードウェアの発表が無いのは予想通りで、よほど “開発” に関係がない限りはWWDCではソフトウェアやサービスにフォーカスするのが恒例です。しかしながら今回発表されたメッセージを読み解くと、プラットフォームの未来の姿を予想できるヒントが見えてきました。

ようやく4つのOSが並んだ

Image for post
Image for post

OS X(オーエス・テン)と呼ばれたOSが今回“macOS”(マックオーエス)に改められ、表記上 *OS に統一されました。iOSがバージョン10に到達して“ten”の発音が多すぎるというブランドの問題だけではなく、macOSを特別扱いするのではなくこの4つを同等に扱っていくぞ、更にはこの4つを軸にしてユーザーの生活の中に“A …


iOS のグラフィックスを司る Core Graphics フレームワークの中にある CGColorSpace という色空間を担当するクラスのインターフェースを眺めていたら、以下ような記述を見つけました。これらは全て iOS 9.0 で追加された APIです。

※Medium の行間が広いせいもあってちょっと長いです。あと勢いで書いたので所々日本語がおかしいのはご容赦ください。

kCGColorSpaceGenericGray

The name of the generic gray color space.

kCGColorSpaceGenericRGB

The name of the generic RGB color space.

kCGColorSpaceGenericCMYK

The na …


「融けるデザイン」で書かれている自己帰属感とは、ユーザーの動作の結果がほぼリアルタイムに近い形でユーザー自身にフィードバックされ、現実世界と画面の向こう側の世界との境界がなくなり、その結果として画面の映像が身体の一部のように感じられるあの感覚のことだと認識しているが、スマホのようなタッチUIでは特にこの感覚をデザインすることがユーザー体験の品質を決定するものになると考えている。

例えばiOSのUIScrollViewは自己帰属感を得られるUIの代表だ。60FPSで描画されるスクロールアニメーション、端に到達したらバウンスバックしたり、指が離れたらその瞬間を初速として滑らかに減速してゆくインタラクション、そしてパフォーマンスを上げるためのセルの再利用機構など、これらすべてがスクロール時の自己帰属 …


Image for post
Image for post

社内のSlackでUI談義が突発的に始まることがあるのだけれども、以前そこで上がったiOS純正メールアプリのUIについてのネタがなかなか面白いのでまとめてみようと思った。結論から言うと、純正メールアプリ、ヤバイ。

まずは観察

メールの新規メッセージ画面は他の純正アプリではあまり見かけないようなトランジションを採用していて、開くと元の画面が少し後ろに下がってナビバーだけが見えつつもメッセージ画面が中途半端なモーダルビューで現れたような状態になる。このUIが使いやすいとか何となく見た目がかっこいいとか、そんな上辺だけの理由では絶対ないはずなので、AppleがメールアプリをデザインするときになぜこのUIに至ったのか、その理由を考えてみた。

Image for post
Image for post
メールの新規メッセージ画面を開いた状態

普段純正メールアプリでメッセージを送信することはほとんどなかったので、まずは …


Image for post
Image for post
https://en.wikipedia.org/wiki/Mac_OS

Mac OS の左と右考察シリーズ。今度のお題はウインドウのクローズボタン。閉じるボタンとも言う。昔は四角かったからクローズボックスとも言われた。Windows では右配置になっているクローズボタンだが、Mac OS を前提になぜ左配置なのかを考察したい。

ウインドウは左上からはじまり、右下に終わる

情報の流れの原則に従うと、ウインドウの起点は左上、終点は右下になる。右下には(かつての Mac OS では)サイズボックスと呼ばれるウインドウを拡大縮小するための箱が設置されており、それ=終点をドラッグすることで起点を固定したままウインドウの大きさを変えられた。ウインドウに収められるコンテンツも左上起点に描画されるので矛盾がない。

Image for post
Image for post
System 7

About

usagimaru

Interface Design / Interaction Design / macOS / iOS 🇯🇵 / https://note.com/usagimaruma

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store