iOSアプリ開発時に注意したい色空間(Generic RGB vs sRGB) - Takahiro Octopress Blog
はじめに 最近、iOSアプリ開発をしている際に、 デザイナーさんが指定している色をXcode上で指定しているにも関わらず、 iPhoneで見た時に、デザイナーさんが指定した色になっていない といった話が出ました。 結論から言えば、 デザイナーさんが利用しているツール(PhotoshopやXdなど)と、 エンジニアが利用しているXcodeとで、 指定している 色空間が異なる ことが原因でした。 筆者は過去に同様の問題に直面した経験があったため、すぐに理由の予測がついたのですが、 ふと『元々こういった話って開発時に出てきていただろうか？』と疑問に思いました。 そこでXcodeでの色空間について触りを見ていきたいと思います。 Xcodeの色空間について Xcodeでは様々な方法で色を定義・設定することができます。 しかしながら筆者が見る限り、デフォルトの色空間の指定は、色の設定方法次第で異なって
優れたボタンデザインのための７つのガイドライン
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 ボタンはインタラクションデザインに欠かせない要素です。ユーザーとシステムの意思伝達において大切な役割を担っています。この記事では、効果的なボタンを作成する際に知っておくべき７つの基本原則について説明します。 １. ボタンをボタンらしく見せる UIを操作するとき、ユーザーは「クリックできる」ものとそうでないものを即座に知る必要があります。ユーザーは、デザインされたすべてのアイテムを解読しなければなりません。そのため一般的に、ユーザーがUIを解読するのに必要な時間が長くなればなるほど、ユーザーにとって使いにくくなります。 しかし、ユーザーはどのようにして要素がインタラクティブかどうかを判断するのでしょうか？ UIのオブジェクトを理解するために、ユーザーはこれまでの経
クリエイティブなタブバー型ナビゲーションを考える | UX MILK
モバイルナビゲーションの基本パターンを選ぶときに、プロダクトデザイナーは２つの選択肢から選びます。ハンバーガーメニューとしても知られるドロワー型か、タブバー型です。どちらのナビゲーションにも長所と短所があります。 この記事はそのうち、タブバー型に関するものなので、ドロワー型を上回るタブバー型の利点から話しましょう。 ユーザーの現在地がひと目でわかる。アプリの中で自分がどの位置にいるのかをメニューを開いて確認する必要がありません。ひと目で知ることが可能です。 見つけやすさ。ユーザーはトップレベルのナビゲーションオプションを最初から見ることができます。 指の届く範囲にある。タブバーは届きやすい場所（画面の１番下）に位置しています。ユーザーは指を伸ばして選択する必要がありません。 しかし、タブバー型にはいくつかの欠点があります。 ナビゲーションに載せる選択肢の数が限られる。タッチ箇所が小さくなり
iOSにおける半モーダルビューの解釈｜usagimaru
iOS 8の頃より見かけるようになった新しいモーダルビューの形態と、その設計思想、UI としての使われ方について考察します。この新しいモーダルビューのことを私は他のモーダルビューと区別する意味合いで「半モーダルビュー（Semi-Modal View）」と呼んでいますが、実際にガイドライン上でそのような定義がされているわけではありません。「ハーフモーダル」という呼び方も耳にすることがありますが、私は後述の理由からこの呼び方は推奨していません。 今回はパターンとしてあえて区別することで他のモーダルビューとの違いを明確にし、その特徴や仕組み、正しい設計とはどのようにあるべきかを理解しやすくすることを目指します。なお、2019年版のHIG（すなわちiOS 13対応版）からはモーダルビューのスタイルの一つとして Sheet の記述が現れるようになりましたが、今回は Sheet スタイルに限らずもう少
iOSDC 2018 前夜祭 「時空設計のリファクタリング」をまとめました。
フゥーハハハ！よくぞ我がトォークを聞きに来てくれた...ナ。これより、おべレーション・スクルドの概要を説明する！
iOS/Androidアプリのレビューを取得 - Qiita
App Store、Google Playにユーザーが書いたアプリのレビューを取得する方法を記述。 App Store上のiOSアプリのレビュー RSSから取得できる。 手順 iTunes Connect でURLを確認 RSSのURLは形式が決まっている模様だが公式のドキュメントは見つからない。 一応iTunes ConnectでURLを確認できる。 iTunes Connect からアプリを選択。 アクティビティ を選択。 評価とレビュー を選択。 RSSアイコンを選択し、RSSリンクをコピー。 URLの形式 https://itunes.apple.com/COUNTRYCODE/rss/customerreviews/id=APPID/sortBy=mostRecent/xml COUNTRYCODE: 国のコード。例：jp APPID: アプリのID。例：284882215 UR
【翻訳】React Native at Airbnb: The Technology - Studio Andy
はじめに この記事は2018年6月20日にAirbnb社のGabriel Pealによって公開された記事を日本語に翻訳したものです。 公開にあたっては氏本人の同意を確認中ですが、誤訳や問題のある表現等を見つけた方は僕のTwitterアカウントまでDMいただけますと幸いです。 元記事: medium.com 本文 この記事はAirbnb社におけるReact Native体験と 次の時代のモバイルアプリケーション開発について記したブログシリーズの第二弾です。 React NativeはAndroid, iOS, Webで横断的に動作する、それ自体が比較的新しく急速に発展しているクロスプラットフォームフレームワークです。2年間に渡って使ってきた今、React Nativeは多くの点において革新的なツールであると自信を持って言えます。それはモバイル開発におけるパラダイムシフトであり、私たちはRea
React Nativeとは何なのか - Qiita
改めて、React Nativeについて書いていきたいと思います。 React Nativeとは何か？ ReactはFacebookが開発したJavaScriptのフレームワークであり、React Nativeはそれをモバイルで使えるようにしたものである。 React Nativeを使用することでネイティブに描画されるiOSとAndroidのアプリを作ることができる。１つのコードで、両方のプラットフォームで動くものが作れる。さらに、JavaやObjective-Cのライブラリを自分で書いてReact Native自体を拡張することもできる。WebでReactを使っているなら、ターゲットがモバイルに代わるだけなので簡単に使い始めることができる。 React同様、React NativeもJavaScriptと、JSXと呼ばれるXMLライクなマークアップを使って記述される。内部では、ネイティブ
スマフォアプリで見る UI の気付き
この記事は「#UI Design Advent Calendar 2015」第18日目の記事です。 スマフォアプリの普及により、UI デザインの需要は年々増しています。最近になってアプリの UI デザイナーとしてお仕事を始められた方も多いかと思います。UI デザインは、原則や関連知識の理解を深めることも重要ですが、ケーススタディとしてみることでスキルの習得も早くなります。 今回は、これまでユーザビリティの観点で監修したアプリ UI の中から、ユーザビリティテストのスコアリングが低くなる傾向のデザインパターンをご紹介します。それらは少し見直すだけでスコアが改善されるというのもまた特徴です。やってしまいがちな失敗 UI ケースの入門として、ご参考になればと思います。 スコアリングの指標 アプリ UI のユーザビリティ測定には、アクセシビリティや他の定義を考慮することもありますが、今回のスコアリ
ドロワーというナビゲーションの再考 | UXデザイン会社Standardのブログ
以前Facebookのアプリケーションで採用されたことを皮切りに、ここ数年で多くのアプリケーションで使われることになったドロワーというナビゲーションについての考察です。 最近ネット上でも話題になっており、安易なナビゲーションへの採用が見直されているされているインターフェイスでもあります。しかしドロワーの必要性について疑うことは良いのですが、表面的にただドロワーを使ってはいけないという情報に左右されていては、安易なドロワーはなくなったとしても、次に安易なタブなどが量産されるということが予測できます。 UIに関わるデザイナーとしては、なぜドロワーが適していないのかということと同時に、どのような状況下であればドロワーが適しているのかは考え続ける必要があるでしょう。 ドロワーの歴史 まず名前の由来としては、たしか2013年にAndroidでナビゲーションドロワーのためのフレームワークが公開されたこ
君たちはそんなにハンバーガーメニューが好きなのかね？
はじめに 本稿は UI Design Advent Calendar 2015 – 8日目のモバイル UI に関する記事です。 まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。 あの三本線を人はハンバーガーと呼ぶ 最近よく見かけるあの“三本線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。にしてもこのただの三本線をハンバーガーと表現するのは少し無理があるような気がします。まあ違和感あれどそこに抗っても仕方がないので、とりあえずこれはハンバーガーと呼称することにします。 ハンバーガーメニューを避けたい理由 真面目にハンバーガーメニューを考察してみます。 1. 何をするのかがわからないアイコン https://dri
iOSヒューマンインターフェイスガイドライン まとめ (Alert ActionSheet ModalView ) - Qiita
はじめに エンジニアとしてプログラミングだけではなく、見やすい・使いやすいUIやユーザ体験を考慮する必要性があると感じ、今後iOSヒューマンインターフェイスガイドライン通して学んだことやUI/UXに関する知識をQiitaに投稿していきたいと思います。 今回はアラート、アクションシート、およびモーダルビューについての内容になります。 外観や動作 アラートの外観が独立しているように見えるので、アプリケーション・デバイスの変化を意味し、ユーザが最近行った結果ではないことを感じさせる ユーザはアラートを閉じなければ現在実行中のアプリケーションの使用を継続できない 少なくても一つのボタンを含み、テキストフィールドを含めることが可能 アラートの幅・背景の外観・テキストの配置(中央揃え)については変更ができない 1. デバイスの向きによる外観テストを行う 2. 一般的に、二つのボタンを設置 3つ以上の選
ユーザーインターフェイス解剖学・改訂版（公開版）
社内イベントで登壇した際のスライドです。｢ユーザーインターフェイス解剖学｣の改訂版。主に、UIデザインにおいて検討した方がよい／すべき考え方というものを簡単にご紹介しました。
iOS ヒューマンインターフェースの原則 - Qiita
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
アイフォンX、凹みを切るか？凹みを使うか？ ~iPhoneX対応のススメ~
CA.swift #4 （ https://cyberagent.connpass.com/event/66850/ ）での発表資料です。
スマホヘッダーデザインのトレンドと気をつけるべき5つのポイント | in-Pocket インポケット
こんにちは。デザイナーの武本です。 スマホサイトのヘッダーをデザインする時に気をつけているポイントをまとめてみました。 1. ヘッダーの縦幅 - だいたい44〜50pxが標準 ヘッダーには多くの場合、リンクが配置されます。その為、タップ可能な最小領域とされる「縦幅36px」は必ず取りましょう。有名サイトを幾つか見てみると、だいたい44〜50pxくらいが標準となるようです。 私は、48px or 大きめなら60pxにする事が多いです。60pxを超えるとちょっと邪魔に感じるかもしれません。ですが、ヘッダーの色をページ背景色と同じにする・あるいは透明にするなどすれば、70~80pxのヘッダーでも邪魔に感じなくなる事もあります。 2. 情報を入れすぎない - 2、3要素に絞る モバイル端末では、ヘッダー領域はかなり限られてしまいます。多くの要素をヘッダーに詰め込む事は、見た目によくないだけでなく、
【怒りのUI】iOSとAndroidの標準UIを比較してみた｜アクトゼロ｜SMMやSEMを中心としたデジタルマーケティング会社
こんにちは、デザイナーのスライです。 日サロ行ってるの？とよく聞かれます。 夏ですね。。。 さて、怒りのUIでは過去にiOSとAndroidに使用されている デザインガイドラインについて記事を書きました。 【怒りのUI】iOSヒューマンインターフェイスガイドラインから学ぶUI設計 【怒りのUI】Googleのマテリアルデザインから学ぶUI設計 今回はそれらを踏まえて、標準UIはそれぞれどう違うか、設定画面を主にまとめてみました。 怒りのUI第5回目「iOSとAndroidの標準UIを比較してみた」です。 （※検証環境：iOS 9.3.2、Android 5.1.1） トグルスイッチ トグルスイッチは、機能のオン・オフを設定する際に利用されます。 iOS、Androidのどちらも殆ど同じデザインです。 実生活で利用する照明などのスイッチと同じで、 右側がオン、左側がオフになっています。 どち
[iOS 10] iOS Human Interface GuidelinesのHaptic Feedbackを読んでみる | DevelopersIO
Haptic Feedbackとは 日本語では「触覚フィードバック」と訳されます。 例えば、MacBookの感圧トラックパッドでも実際に押し込んだ感じがする、でも電源落とすと押し込んだ感じがしなくなる不思議なあれです。 iPhone 7 及び iPhone 7 Plusではホームボタンが物理ボタンではなくなったことをご存知の方も多いかと思います。 更にiOS 10では上記デバイスでHaptic FeedbackのAPIがアプリから使えるようになりました。 それに伴いiOS Human Interface GuidelinesにもHaptic Feedbackの項目が追加されていたので読んでみました。 ※2016年10月4日現在、Haptic Feedbackについては英語のドキュメントにのみ書かれています。 ※なお、以降説明のためにHaptic FeedbackはHFと略します。 ガイドラ
![[iOS 10] iOS Human Interface GuidelinesのHaptic Feedbackを読んでみる | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf4a0dd376b0a2fd49b646cbe9847ff1d8b2f9b0/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2016%2F09%2Fios10_400x400.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Android/iOS/フロントエンドを横断する開発体制 - Speaker Deck
nvtrlab.jp