[B! UI] syo-sa19820615のブックマーク

モバイルアプリ日本語UIキットの公開｜Japan Digital Design, Inc.

なぜ日本語UIキットを公開するのか？デザインチームの研究活動のひとつとして、体験設計やUIデザインの品質を高めたり、デザインチーム内の協働を円滑に行うために、汎用的なデザインテンプレートやデザインアセットを作成し、体験デザインプロセスの仕組み化と共有を行っています。 UIデザインにおいても、Figma Communityをはじめとした様々な媒体でUIキットが共有・配布されており、UIキットを参考にデザインワークを行うというケースが増えてきているかと思います。一方でUIキットの多くが欧文フォントで構成されているため、日本語フォントに変換する必要があり、場合によってはサイズやレイアウトを微調整しなくてはなりませんでした。このUIキットも、単にAppleやGoogleのUIコンポーネントを日本語化しているだけと言えばそうかもしれませんが、これを活用することでデザイナーやプロダクト開発に携わ

syo-sa19820615 2021/08/08

リンク

iOS とAndroid の違いクロスプラットフォームのアプリデザインで特に気をつけるべき点｜marin

私が一番最初にAndroid アプリをデザインしたのが2016年の初夏頃で、その頃はまだiOS・Android とデザインが違うのが主流でしたが、2021年現在のアプリはiOS もAndroid もプラットフォームごとの細かな違いはあれどほぼ同じデザインが主流となっています。これは2016年の10月にAndroid APIがBottomNavigationView に対応してからじわじわ浸透していった変化だと考えているのですが、その辺の歴史の話は省略します。プラットフォームは違えどスマートフォンアプリである以上デザインは同じ方が楽なので、共通化されていったのは自然な流れだと思います。実際両者が全然違うUI・デザインだと大変ですしね……。とはいえ、プラットフォームが違うので全て同じというわけにもいきません。iOS にはHuman Interface Guidelines、Android

syo-sa19820615 2021/07/26

リンク

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より視聴できます。わかり

syo-sa19820615 2021/05/19

android
UI

リンク

モバイルアプリにおけるUIデザイン - Qiita

1.はじめに私は(筆者は)モバイルエンジニア転職を目指す立場です。個人的にアプリのUIデザイン知識はデザイナーだけでなくエンジニアにも必須だと思っています。私自身がアプリ開発の過程でデザインについて指摘され、﹁このままデザインに無知では良くないと思った﹂、﹁同じような立場の方にモバイルアプリのデザインの事を少しでも知ってもらいたいと思った﹂その2つの理由から本記事を執筆しました。現在、エンジニアを目指している方やアプリ開発はしているけどモバイルデザインについて改めて知りたいという方、そのような方向けに改めてiOS・Android双方のデザインガイドラインについてまとめてみました。 2.iOSとAndroidのデザインの考え方 2020年現在、iOSではHuman Interface Guidelines、AndroidではMaterial Designの考え方をもとにアプリUIが作られ

syo-sa19820615 2020/10/10

リンク

Bad な UI を改善する「UI Stack」って知ってます？｜nr

突然ですが、﹁UI Stack﹂ってご存知ですか？アメリカのプロダクトデザイナー Scott Hurff さんが3年ほど前に世に出した考え方で、考慮すべき UI の5つの側面を示したものです。当時﹁これは使える！﹂と思って社内向けに作った勉強会資料を見つけて、今でもやっぱりすごく大事だと思ったので、備忘録的に書いておきます。ちなみに元記事はこちら。︵英語です︶ UIStack とは？Stackとは、1つの画面が持つ︵複数の︶側面、状態、ステータスのようなもの。その側面ごとに最適化されたUIを設計しようするのが UIStack の考えです。 Scottさんが紹介しているUI Stackは5つ。 ※図はScottさんのページから引用・Blank State︵空っぽの状態︶・Loading State︵ローディング状態︶・Partial State︵部分達成状態︶・Error

syo-sa19820615 2020/02/18

リンク

UI Movement - The best UI design inspiration, every day

Announcement: Clicking "Sign in" or "Join now" now redirects to our new website for an improved experience. Contact support for assistance. Thank you for your understanding.

syo-sa19820615 2019/07/17

UI
design

リンク

配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki IKEDA｜note

今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。はじめるよレイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオワ、オワリです。さっそくこのPolipoliベッチュー、タタキケンサキエディションに色をつけていきます。 1. メインカラーを選ぼうまずはじめにメインとなるカラーを決めます。Polipoliのテーマカラーはピンクなのでブラウザの検索欄に﹁pink flat uidesign﹂と打ち込みます。イメージに近い色が出てきたらスポイトで吸い取りましょう。著作権にはくれぐれも注意してください責任は負いません。 Polipoliに関しては最初からメインカラー

syo-sa19820615 2019/03/15

リンク

本日（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章‥JUnit5第8章‥CI/CD ユニットテストやUIテストはもちろん、最新のテストフレームワークであるJUnit5や、テストの運用や開発プロセスの効率化に欠かせないCI/CDまで

syo-sa19820615 2018/11/13

リンク

Material Design

Build beautiful, usa ble products faster. Material Design is an adapta ble system—backed by open-source code—that helps teams build high quality digital experiences.

syo-sa19820615 2018/11/07

リンク

http://www.life-is-bitter.com/entry/ui_checklist

syo-sa19820615 2018/04/26

リンク

「AndroidはiOSと同じデザインで！」と言われたときの対応案 - Qiita

はじめに﹁AndroidはiOSと同じデザインで！﹂と言われてどう実装しようか悩んでる方向けの記事です。 Androidアプリを作るなら当然マテリアルデザインガイドラインに合わせて1から画面設計するのが最高なんですが、そうはいかないことが経験上多いので対応案をざっくりまとめました。諸注意これは﹁iOSとAndroidのUI対応一覧﹂ではありません。 iOSとAndroidで同じような見た目のUI部品でも作られた経緯や目的は違うので、比較して置き換えるようなことは基本的にできないと思います。とはいえなんの指標もないと辛いので、ここでは﹁iOSのこのUIをAndroidで代用できるのはこれかもね﹂くらいのニュアンスで列挙しています。必ずしもどのアプリにも言えるようなことではないので、あくまでたたき台と思ってください。﹁なぜAndroidらしくする必要があるのか﹂についてはこ

syo-sa19820615 2018/04/04

リンク

iPhone X対応におけるデザイン上の注意ポイント | fladdict

iPhoneXが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。ざっくりデザインガイドラインを読んでの、気になったところメモ。画面サイズサイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。想定されるインパクト表示可能な情報量が増える縦スクロール系コンテンツのコンバージョンが増加スクロールで隠れるナビゲーションの必要性が低下画面上部のボタンのコンバージョンが低下ゲームなどの全画面イラストに、黒枠が出たり、見切れたりするグラフィッ

syo-sa19820615 2017/09/13

つらい

UI

リンク

優れたフォームをデザインする

サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。

syo-sa19820615 2016/11/29

リンク

Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA

ボックス要素の横並びをCSSで行う場合は、CSSの﹁Flexboxフレックスボックス﹂が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。この記事で学べること Flexboxの使い方スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。サンプルの紹介今回はレスポンシブな

syo-sa19820615 2016/08/22

リンク

ゲームUIブログ | Page 10

Search for: Cancel 飛空艇騎士団陰の実力者になりたくて！マスターオブガーデンミシックヒーローズゴッデスエラ（Goddess Era） X-ヒーロー：犬を助けろ！誓約少女戦国再臨：大戦の覇者となれブラックロックシューター FRAGMENT ニューラルクラウドソードアート・オンラインヴァリアント・ショウダウン無期迷途勝利の女神：NIKKE インフィニティーパーティーバトルドルフィンウェーブ（ドルウェブ）デート・ア・ライブ精霊クライシス 10 of 87« 前へ1…89101112…87次へ »

syo-sa19820615 2016/01/22

リンク

ユーザビリティ工学に無関心なUIデザイナが「UX」という言葉を方便としている問題 - Random Thoughts

むかし﹁ユーザビリティ﹂という概念が普及したことがあった。﹁ユーザビリティ工学的なことをやらなければUIデザインではない﹂という理解が共有されていた時代があった。そのころ、工学に関心のないUIデザイナたちは、肩身の狭い思いをしていたことだろう。たんに﹁かっこいい絵﹂を描いただけでは﹁UIデザイン﹂したことにならない、と言われていたのだから。その後、﹁ユーザーエクスペリエンス﹂という概念が普及してきた。それによって、﹁UIデザインには、工学的な機能性だけでなく、見た目の印象も大事﹂ということが言いやすくなった。これは工学に無関心なUIデザイナにとって﹁朗報﹂となっただろう。ユーザビリティ工学そっちのけでUIデザインできる状況をつくるのに、﹁ユーザーエクスペリエンス﹂という言葉は便利だっただろう。﹁使いやすさだけじゃダメなんですよ。使い始めてもらえる魅力的なデザインじゃないと﹂と主張す

syo-sa19820615 2015/07/12

リンク

ゲームUIブログ

Search for: Cancel 異世界グルメ食堂異世界転生×モンスター飯超次元彼女: 神姫放置の幻想楽園ビックリマン・ワンダーコレクション星になれヴェーダの騎士たちテンペスト機兵とドラゴンサバイバーガールズパンドラノヴァ熱戦少女ウォッチャー・オブ・レルムプリストンテールM デーモンスクワッド異世界傭兵団のそだて方ダークオリンポス：闇の女神ファントムオブキル -オルタナティブ・イミテーション- 1 of 87123…87次へ »

syo-sa19820615 2015/03/18

リンク

盲目のプログラマーはどのようにコードを書くのか | スラドデベロッパー

プログラマーの中には盲目の人もいる。その一人、Ed Summers氏は30歳で視力を失い、現在はソフトウェアエンジニア兼アクセシビリティ専門家として働く傍ら、盲導犬 Willieのブログのゴーストブロガーもやっている。目の見えない人がどのようにしてコードを書くのか不思議に思う人もいるだろう。生まれながらにして盲目のFlorian Beijers氏の場合、普通のDell Inspiron 15R SEノートパソコンと、彼が信頼するオープンソースのスクリーンリーダー﹁NVDA﹂があればコードを書くだけでなく、一般的なパソコン操作は問題なくできるという。彼は﹁これが盲目のコンピューターユーザーのニーズに適応するもののすべてだ﹂と述べているが、ちょっとした希望としては﹁あなたが次に素晴らしいUIとワークフローを搭載した大きなアプリケーションを書くとき、要素の一つとしてアクセシビリティを考慮していた

syo-sa19820615 2015/02/05

リンク

Engadget | Technology News & Reviews

Apple's thinner new iPad Pros feature an M4 chip and "tandem" OLED displays

syo-sa19820615 2010/12/21

リンク

Webユーザインターフェースの "暗黙知" を意識していますか？ : LINE Corporation ディレクターブログ

暗黙知︵あんもくち、Tacit Knowing︶は、ハンガリーの哲学者・社会学者マイケル・ポランニー︵Michael Polanyi) によって1966 年に提示された概念で、認知のプロセス、或は、言葉に表せる知覚に対して、︵全体的・部分的に︶言葉に表せない・説明できない知覚を指す。Wikipediaよりこんにちは。livedoorで検索全般を担当しております、須田です。タイトルのままなのですが、少しづつ日本のWEBにおける暗黙知を共有したいと思っています。暗黙知の共有することで得られるメリットですが、ユーザーにとっては、分かりづらいUIを日本からできるだけ無くすことができ、斬新なUIに慣れるという煩わしい時間からの開放企業にとっては、暗黙知として決まりがあることで、UIを検討する時間の短縮にもなるというメリットがあると思います。まずは誰でも知っていると思われる基本的なところだけ

syo-sa19820615 2010/07/09

リンク

はてなブックマーク

タグ

関連タグで絞り込む (24)

UIに関するsyo-sa19820615のブックマーク (20)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス