モバイルアプリ日本語UIキットの公開｜Japan Digital Design, Inc.
なぜ日本語UIキットを公開するのか？ デザインチームの研究活動のひとつとして、体験設計やUIデザインの品質を高めたり、デザインチーム内の協働を円滑に行うために、汎用的なデザインテンプレートやデザインアセットを作成し、体験デザインプロセスの仕組み化と共有を行っています。 UIデザインにおいても、Figma Communityをはじめとした様々な媒体でUIキットが共有・配布されており、UIキットを参考にデザインワークを行うというケースが増えてきているかと思います。 一方でUIキットの多くが欧文フォントで構成されているため、日本語フォントに変換する必要があり、場合によってはサイズやレイアウトを微調整しなくてはなりませんでした。 このUIキットも、単にAppleやGoogleのUIコンポーネントを日本語化しているだけと言えばそうかもしれませんが、これを活用することでデザイナーやプロダクト開発に携わ
iOS とAndroid の違い クロスプラットフォームのアプリデザインで特に気をつけるべき点｜marin
私が一番最初にAndroid アプリをデザインしたのが2016年の初夏頃で、その頃はまだiOS・Android とデザインが違うのが主流でしたが、2021年現在のアプリはiOS もAndroid もプラットフォームごとの細かな違いはあれどほぼ同じデザインが主流となっています。 これは2016年の10月にAndroid APIがBottomNavigationView に対応してからじわじわ浸透していった変化だと考えているのですが、その辺の歴史の話は省略します。プラットフォームは違えどスマートフォンアプリである以上デザインは同じ方が楽なので、共通化されていったのは自然な流れだと思います。実際両者が全然違うUI・デザインだと大変ですしね……。 とはいえ、プラットフォームが違うので全て同じというわけにもいきません。iOS にはHuman Interface Guidelines、Android
Google I/O 2021 Keynote: Android 12注目の新機能まとめ | TechBooster
2021年5月18日（現地時刻）Google I/O 2021 KeynoteよりAndroid関連のトピックをお届けします。2年ぶりのGoogle I/Oはデジタルイベントとして開催、すでにオンライン上に全セッションが公開されています。 Keynote、Develoer KeynoteそしてWhat’s new in Android、What’s new in Google PlayよりAndroidやモバイル分野の新機能を紹介します。パーソナライゼーションおよびプライバシーを中心にJetpack Composeなど新機能・新技術が目白押しです。本記事ではモバイル業界の動向と共にAPIやテクノロジーを解説します。 Google I/O 2021はデジタルイベントとして開催（Google I/O Keynoteより） キーノートの動画は公開されており、YouTubeより視聴できます。わかり
モバイルアプリにおけるUIデザイン - Qiita
1.はじめに 私は(筆者は)モバイルエンジニア転職を目指す立場です。個人的にアプリのUIデザイン知識はデザイナーだけでなくエンジニアにも必須だと思っています。私自身がアプリ開発の過程でデザインについて指摘され、「このままデザインに無知では良くないと思った」、「同じような立場の方にモバイルアプリのデザインの事を少しでも知ってもらいたいと思った」その２つの理由から本記事を執筆しました。 現在、エンジニアを目指している方やアプリ開発はしているけどモバイルデザインについて改めて知りたいという方、そのような方向けに改めてiOS・Android双方のデザインガイドラインについてまとめてみました。 2.iOSとAndroidのデザインの考え方 2020年現在、iOSではHuman Interface Guidelines、AndroidではMaterial Designの考え方をもとにアプリUIが作られ
Bad な UI を改善する 「UI Stack」 って知ってます？｜nr
突然ですが、「UI Stack」ってご存知ですか？ アメリカのプロダクトデザイナー Scott Hurff さんが3年ほど前に世に出した考え方で、考慮すべき UI の5つの側面を示したものです。 当時「これは使える！」と思って社内向けに作った勉強会資料を見つけて、今でもやっぱりすごく大事だと思ったので、備忘録的に書いておきます。 ちなみに元記事はこちら。（英語です） UI Stack とは？Stackとは、1つの画面が持つ（複数の）側面、状態、ステータスのようなもの。その側面ごとに最適化されたUIを設計しようするのが UI Stack の考えです。 Scottさんが紹介しているUI Stackは5つ。 ※図はScottさんのページから引用 ・Blank State（空っぽの状態） ・Loading State（ローディング状態） ・Partial State（部分達成状態） ・Error
配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki IKEDA｜note
今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオワ、オワリです。さっそくこのPolipoliベッチュー、タタキケンサキエディションに色をつけていきます。 1. メインカラーを選ぼうまずはじめにメインとなるカラーを決めます。Polipoliのテーマカラーはピンクなのでブラウザの検索欄に「pink flat ui design」と打ち込みます。イメージに近い色が出てきたらスポイトで吸い取りましょう。著作権にはくれぐれも注意してください責任は負いません。 Polipoliに関しては最初からメインカラー
本日（11/5）販売開始：書籍「Androidテスト全書」のUIテスト部分を執筆しました - DeNA Testing Blog
こんにちは。SWETの外山（@sumio_tym）です。 本日、書籍「Androidテスト全書」の一般販売が開始されました！ 本書のUIテスト部分（第4〜6章）は、SWETの平田（@tarappo）と私が執筆しています。 本書の一般販売を記念して、本エントリーでは本書全体の概要と想定読者を紹介してから、 それぞれの担当著者がUIテスト各章の「見どころ」を解説します。 本書の概要 本書の目次は次のとおりです。 第1章：テスト入門 第2章：ユニットテスト実践入門 第3章：ユニットテスト応用編 第4章：UIテスト（概要編） 第5章：UIテスト（Espresso編） 第6章：UIテスト（Appium編） 第7章：JUnit 5 第8章：CI/CD ユニットテストやUIテストはもちろん、 最新のテストフレームワークであるJUnit 5や、 テストの運用や開発プロセスの効率化に欠かせないCI/CDまで
「AndroidはiOSと同じデザインで！」と言われたときの対応案 - Qiita
はじめに 「AndroidはiOSと同じデザインで！」と言われてどう実装しようか悩んでる方向けの記事です。 Androidアプリを作るなら当然マテリアルデザインガイドラインに合わせて1から画面設計するのが最高なんですが、そうはいかないことが経験上多いので対応案をざっくりまとめました。 諸注意 これは「iOSとAndroidのUI対応一覧」ではありません。 iOSとAndroidで同じような見た目のUI部品でも作られた経緯や目的は違うので、比較して置き換えるようなことは基本的にできないと思います。 とはいえなんの指標もないと辛いので、ここでは「iOSのこのUIをAndroidで代用できるのはこれかもね」くらいのニュアンスで列挙しています。 必ずしもどのアプリにも言えるようなことではないので、あくまでたたき台と思ってください。 「なぜAndroidらしくする必要があるのか」についてはこ
iPhone X対応におけるデザイン上の注意ポイント | fladdict
iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな
ユーザビリティ工学に無関心なUIデザイナが「UX」という言葉を方便としている問題 - Random Thoughts
むかし「ユーザビリティ」という概念が普及したことがあった。「ユーザビリティ工学的なことをやらなければUIデザインではない」という理解が共有されていた時代があった。 そのころ、工学に関心のないUIデザイナたちは、肩身の狭い思いをしていたことだろう。たんに「かっこいい絵」を描いただけでは「UIデザイン」したことにならない、と言われていたのだから。 その後、「ユーザーエクスペリエンス」という概念が普及してきた。それによって、「UIデザインには、工学的な機能性だけでなく、見た目の印象も大事」ということが言いやすくなった。 これは工学に無関心なUIデザイナにとって「朗報」となっただろう。ユーザビリティ工学そっちのけでUIデザインできる状況をつくるのに、「ユーザーエクスペリエンス」という言葉は便利だっただろう。 「使いやすさだけじゃダメなんですよ。使い始めてもらえる魅力的なデザインじゃないと」と主張す
盲目のプログラマーはどのようにコードを書くのか | スラド デベロッパー
プログラマーの中には盲目の人もいる。その一人、Ed Summers氏は30歳で視力を失い、現在はソフトウェアエンジニア兼アクセシビリティ専門家として働く傍ら、盲導犬 Willieのブログのゴーストブロガーもやっている。目の見えない人がどのようにしてコードを書くのか不思議に思う人もいるだろう。生まれながらにして盲目のFlorian Beijers氏の場合、普通のDell Inspiron 15R SEノートパソコンと、彼が信頼するオープンソースのスクリーンリーダー「NVDA」があればコードを書くだけでなく、一般的なパソコン操作は問題なくできるという。彼は「これが盲目のコンピューターユーザーのニーズに適応するもののすべてだ」と述べているが、ちょっとした希望としては「あなたが次に素晴らしいUIとワークフローを搭載した大きなアプリケーションを書くとき、要素の一つとしてアクセシビリティを考慮していた
Webユーザインターフェースの "暗黙知" を意識していますか？ : LINE Corporation ディレクターブログ
暗黙知（あんもくち、Tacit Knowing）は、ハンガリーの哲学者・社会学者マイケル・ポランニー（Michael Polanyi) によって1966 年に提示された概念で、認知のプロセス、或は、言葉に表せる知覚に対して、（全体的・部分的に）言葉に表せない・説明できない知覚を指す。Wikipediaより こんにちは。livedoorで検索全般を担当しております、須田です。 タイトルのままなのですが、少しづつ日本のWEBにおける暗黙知を共有したいと思っています。 暗黙知の共有することで得られるメリットですが、 ユーザーにとっては、分かりづらいUIを日本からできるだけ無くすことができ、斬新なUIに慣れるという煩わしい時間からの開放企業にとっては、暗黙知として決まりがあることで、UIを検討する時間の短縮にもなるというメリットがあると思います。 まずは誰でも知っていると思われる基本的なところだけ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI Movement - The best UI design inspiration, every day
Material Design
http://www.life-is-bitter.com/entry/ui_checklist
ゲームUIブログ | Page 10
ゲームUIブログ
Engadget | Technology News & Reviews