iOSブラウザのセレクトボックスUIが使い辛すぎ問題 | キノコログ
WEB屋さんなら、タイトルである程度察してもらえるこの問題。 昨今のWEBサイトは、スマートフォンからのアクセスがほとんどのため、デザインや操作性はスマートフォンでストレスなく使えることが最重要課題となっている。 特に、ユーザーが商品の購入を行う際に、必ず経由するであろう「フォーム」の入力。 ここがストレスなく入力できるかが、成約の肝となるのだが…。 ユーザーに入力する際に、選択肢の中から項目を選んでもらう「セレクトボックス」というものがある。 複数の選択肢の中から、ユーザーに選んでもらう、というフォームを設けたい場合は、「セレクトボックス」が最も使われていると思う。 （ラジオボタンやチェックボックスよりも癖がないため） 「セレクトボックス」とは、↓コレのことである。 今見ている端末によって、このSELECTの仕様が異なっていると思うが、iPhone端末はこんな表示になっている。 いわゆる
消えゆくスクロールバー｜3inowayosuke
最近スクロールバーを見かけなくなった気がします。ざっと調べてみると、スクロールバーはすでに消え始めており、今のスタンダードはスクロールインジケーターになってる様です。そうかと思えば、そのスクロールインジケーターすら消え始めている状況です。 ▼１．消えゆくスクロールインジケーター1.1 フェイスブックiOSアプリ フェイスブックのアプリでは、もはやスクロールインジケーターすら表示されていません。ご自身のスマートフォンで見てみると、画面右側には何も表示されないはずです。 1.2 電話帳 iOS 実は電話帳からもスクロールインジケーターが消えています。インデックスが表示されているので、スクロールインジケーターとインデックスが重なってしまうのを防ぐためと思われます。 1.3 メモ帳 iOS メモ帳ではスクロールをするまでインジケーターは表示されません。スクロール後は一定時間が経つとスクロールインジ
新しいHTML5 APPプラットフォーム「Capacitor」とは。HTML5を1ソースで、PWA、iOS/Androidアプリ、デスクトップアプリをリリース！｜リレーションデザイン研究所
新しいHTML5 APPプラットフォーム「Capacitor」とは。HTML5を1ソースで、PWA、iOS/Androidアプリ、デスクトップアプリをリリース！ 「a spiritual successor to Apache Cordova and Adobe PhoneGap」を目指して、Ionic teamがCapacitorをリリースしました。Cordovaの後継としてクロスプラットフォーム開発が大きく変わるので、ぜひご利用ください！（本記事は2018年8月執筆記事ですので、一部情報が古い場合があります。ご了承ください）。 Capacitorとは HTMP5 APPSを、PWA、iOSアプリ／Androidアプリ（ハイブリッドアプリ）、Electron（デスクトップアプリ）に変換するためのツールです。厳密にいえば、適切にラップや分岐処理をしてるのですが、まぁそこらへんの「どう動いて
フォリオのアプリでこだわったのは、「OS最適化」と「秩序のある設計」｜コウノ アスヤ
株式会社FOLIOで、モバイルアプリのUIデザインを担当している コウノ アスヤ ( @asuyakono )と申します。 やっとのこと、7月23日（月）にアプリをリリースすることができました。このアプリの開発にはチームのキックオフから計算すると実に1年と3ヶ月を要しており、並々ならぬ感慨を感じています。せっかくなので今回は、本アプリを設計・デザインしていくうえで大切にしたことと、主要な画面のデザインを少しだけ紹介させてください。 ※画像内の金融商品・データは、デザイン紹介のためのサンプルです。コンセプトは「OS最適化」と「秩序のある設計」 フォリオのアプリは、”最適なユーザー・インターフェースはOS毎に異なる”という「OS最適化」の思想に基づいてデザインしました。したがって、機能は同じでもiOSとAndroidでデザインが異なります。「この画面で何ができるのか」というベースの体験だけしっ
iOS でテスト容易な設計を
実現するためのデザインパターン
https://orecon.connpass.com/event/63769/
iPhone X対応におけるデザイン上の注意ポイント | fladdict
iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ
妻が一人で開発したアプリの売上が順調に伸びていてうらやましい - sakaharaのブログ
半年以上前のことですが、今年の3/25にMilk TimeというiOSアプリを妻がリリースしました。 Milk Time - 育児記録を共有できる授乳タイマー Mocologyメディカル無料 妻自身が子育て中に授乳のことなどで苦労した経験を活かし、授乳記録を簡単にできてもっとデザインのよいアプリを作りたいという思いをそのまま形にしています。 妻は元々エンジニアではありましたが、アプリを開発して自分でリリースするというのは初めてでした。 それにも関わらずアプリを作る決心をして、新品の15インチMacBook Proを購入しました。 そこから子育てをしつつ合間を見ては1人で企画、設計、デザイン、開発までを1人で行いました。 ちゃんと計算したわけではないですが、トータルでかかった工数は2,3ヶ月くらいではないかと思います。 私自身が個人でいくつかアプリを開発してリリースしてそれなりの売上を上げて
制作事例紹介：Misoca iOSアプリ
今年手がけたお仕事の紹介です。 少し前になってしまいますが、8月にMisoca(ミソカ)様のiOSアプリのUIデザインをTHE GUILDにご依頼いただき、今年THE GUILDにジョインした@nobtakaと2人で担当させていただきました。 Misocaについて Misoca様は名古屋を拠点に、Web上で請求書の作成・処理が行える無料サービス「Misoca」を運営し急成長している企業です。 個人事業主やフリーランスの方には手間と時間がかかる、顧客に請求書を送る業務を全てオンラインで行う事が出来る非常に便利なサービスなので、THE GUILDメンバーを始めフリーランス界隈ではMisocaファンが数多く居ます。 元々はWebだけで運営されていたのですが、例えばヘアメイクやスタイリストの方など普段の業務でPCに触れる機会が少ないユーザーにもリーチすべく、iOSアプリの開発が企画され大変光栄にも
Origami - Design prototyping with Quartz Composer
Most designers today create static mockups to communicate app ideas. But increasingly apps are anything but static, which means as designers we need a better tool for interaction design. Origami is a free toolkit for Quartz Composer—created by the Facebook Design team—that makes interactive design prototyping easy and doesn’t require programming. Quartz Composer is a freely-available Mac OS X appl
ソシオメディア | iPhone の当たり判定を検証した
スマートフォンやタブレットなどのモバイルデバイス向けにUIをデザインする際には、タッチ操作に適したコントロール表現を追求しなければいけません。 タッチ操作に適したコントロール表現とは、前回書いたジェスチャもありますが、それ以前に、ボタンやリンクなどのUI要素を指で押しやすい大きさにすることが大切です。 パソコン画面のマウスポインターと違って、タッチスクリーンにおいて指でボタンをタップする場合、指がそのボタンを覆い隠してしまうので、意図した場所に正しく触れているのか分かりにくく、またボタン自体の視覚的なフィードバックも確認しづらいという課題があります。 またマウスポインターではピクセルレベルで画面上の座標を指し示すことができますが、指先ではそのような細かい操作はできません。 ですからタッチデバイスでは、ボタンやリンクが細かく密集しているようなデザインは大きなストレスになります。 最低限の大き
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
macOS native
「AndroidはiOSと同じデザインで！」と言われたときのTips
iPhone や iPad の画面サイズ早見表 : iPhone プログラミング