【イカしたUIを見る】Vol.2 これは発明だ！と思ったUIパーツ10選｜Goodpatch Blog グッドパッチブログ
知れば知るほど面白くなるUIの世界を皆さんにもチラ見せしたい……ということで、連載の第2弾となる今回は「これは発明だ！」と私たちが感動したUIパーツについてご紹介します。 ミクロな視点でアプリを観察し、UIパーツ一つひとつに注目してみると、普段は気付けない面白い発見がたくさんありますよ。 ※各UIパーツの名称は、公式で発表されているものではなく、私たちが便宜的につけた呼称になります。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 Apple Booksのセミモーダル Appleが提供する電子書籍アプリ「Apple Books」では、カルーセル状に並んだ本を押すと、そのままセミモーダルが立ち上がります。前の画面の一覧性を保ちながら、それぞれの本の詳細を見ることができるのが特徴的ですね。さらに下スクロールすることで、全モーダルへと滑らかに変化します。 このUIのポイン
FigmaがAIでさらに進化！ Web制作はもはや完全自動化目前？ 「Config APAC 2024」現地レポ | 進化が止まらない！ 最新ツール
Figma（フィグマ）が主催する世界最大級のデザインカンファレンス「Config（コンフィグ）2024」が本拠地・米国のサンフランシスコで6月26〜27日に開催された。その翌週、Figma経営陣はシンガポールへと飛び、7月2日に「Config APAC 2024」を開催。アジアで初開催となったこのConfigには約1,000人以上が参加し、新機能の発表を歓声をもって迎えた。 シンガポールの「Config APAC 2024」を現地取材した筆者が、最新の機能アップデートとAI活用を中心にお伝えする。 マリーナベイサンズ・コンベンションセンター内のConfig APACの会場 アジアには72ものFigmaコミュニティがあり、2万人以上の会員がいます。そんなアジアで初のConfigをシンガポールで開催できたことは最高の気分。アジアには、人類、世界にインパクトを与えるデザイナーが生まれてきた歴史が
【爆速UI設計術】モダンなwebデザイン素材集 - Qiita
特徴 女性らしいイメージがやや多い 下記のような柔らかい印象のイラストが多いです。 【ガジェットストック】 ガジェット関連のものを使用したい場合は、下記を使用すると良いと思われます。 【アイコン系】 【human pictogram 2.0】 オリンピックで流行ったやつです。 本サイトでは、アタッチメントをつけたりすることでかなりカスタマイズ性が高いのが特徴です。 【EXPERIENCE JAPAN PICTOGRAMS】 特徴 海外から見た日本が表現されている これはシンプルにUIが凝ってたので紹介します。 和テイストを演出したい場合は、良さそうですね！ 【ICOOON MONO】 こちら色・サイズも変更可能です！ 【Icon-rainbow】 ICOOON MONOと異なり、こちらは、中が肉抜きされているのが特徴。 【IFN FREE ICONS】 このデザインはどのようなパターンにマ
Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供
Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供 Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebアプリケーションのユーザーインターフェイスを自動生成してくれるサービス「v0」のベータ公開を発表しました。 v0を使うと、人間のWebデザイナーに「こんな画面を作って」「ここの色は青にして」「ここのフォントは大きく」などと言葉で指定するの同じような感じで生成AIに指示をして、HTMLやCSSなどのコードを書くことなくWebアプリケーション画面の生成が可能です。 Introducing v0: generate UI from simple text prompts. 5,000 waitlist invites were sent today—with over 25
ユーザーが迷わない、直感的に操作できるUIの作り方 | UX TIMES
こんにちは、デザイナーの小蕎です。UX DAYS TOKYOの読書会で学んだ”心理学や脳科学”の内容を取り入れた「脳科学で習慣化を促すアプリ（以下、習慣化アプリ）」を作ってみようということになりました。 アプリの画面設計をして、オーガナイザーである大本さんからUIを指摘されることで多くのナレッジを得られました。知識として頭にいれるだけでは身につかない、実際に作ってみたことで学べた事例をご紹介します。 CTAはメインカラーと異なるものを利用する 色を決定していく時に、ヘッダーや行動を誘導するボタン（CTA）もメインカラーにあわせた色にしていました。 それが左の画像です。ヘッダーと「次へ」ボタンが同じ色になっていて一見まとまりがあるように見えますが、馴染みすぎてしまいCTAであることや強調したい部分がユーザーに伝わりません。 メインカラーとボタンを同じにしてしまうと画面に馴染みすぎてユーザーの
Flutter開発をマスターするための手引き 2022年版
はじめに 知っている人も少なくないが、FlutterはAndroid/iOS開発で最も注目を集めているフレームワークの１つである。モバイル開発に携わらないプログラマーでもFlutterが人気であることを見聞きしたことはあるのではないだろうか。 そこで、今回の記事ではFlutter開発をマスターするためのスキルや確認するべき情報源をまとめる。今回の記事を参考に、Flutterに興味を持ってくれる人が少しでも増えたら幸いである。 Flutter開発をマスターするのに必要なスキル Visual Studio Code FlutterはVisual Studio Codeで開発を進めるのが通例となっている。Flutterを学ぶ前に、必ずVisual Studio Codeをインストールし、基本的な使い方を十分にマスターしておこう。 Visual Studio Codeの基本的な使い方が十分にわから
求人メディアGreen の Flutterの構成について - Atrae Tech Blog
こんにちは、エンジニアの @muttsu_623 です。 最近、開発を頑張っている自分へのご褒美として念願だった『左右分離型キーボード』のMISTEL『Barocco MD770 静音赤軸』を購入しました。 Mistel BAROCCO MD770 RGB メカニカルキーボード 英語配列 85キー 左右分離型 CHERRY MX RGB 静音赤軸 ブラック MD770-PUSPDBBT1 発売日: 2020/01/30メディア: Personal Computers 購入してからまだ2週間くらいなのでまだ効果を実感できているわけではありませんが、肩が開かれた状態で姿勢良く開発を行うことができるため、長期的にみればいいお買い物になったかなと思います。 さて本題ですが、先日弊社の「求人サイト Green」のAndroidアプリをFlutterで作成しリリースしました。 Flutterでアプリを
メルカリが検索に「売り切れ品」を置く理由、初期のLINEが友だち追加を「電話番号マッチング」に絞った理由など、アプリのマーケティング施策まとめ30｜アプリマーケティング研究所
2017年〜2020年（+α）に取材した記事から、今でも参考になりそうな施策などまとめてみました。※ 数値等はあくまで取材当時のものです。 1、フリマアプリの検索結果に、あえて「売り切れ商品」を表示している理由（メルカリ）フリマアプリの「メルカリ」では、検索をかけると販売済みになっている、「売り切れ品」も表示されるようになっている。 あるとき邪魔ではないかと、検索結果から「売り切れ品」を消してみたら、あらゆる数値（継続率・購入率など）が悪化してしまった。 実は「売り切れ品」を置いておくことが、ユーザーに「これ買いたかった」「マメにチェックしとこう」と思ってもらう、うまい演出として機能していたのが理由。 2、コメント欄のタイムラグを小さくすると、コメント率が改善されて荒れにくくなる（ミラティブ）配信アプリの「ミラティブ」では、コメント欄のタイムラグを小さくしたところ、コメント率が改善されたと
UI テストの自動化に Magic Pod を導入した話 | MEDLEY Developer Portal
2021-01-15UI テストの自動化に Magic Pod を導入した話こんにちは。インキュベーション本部の QA エンジニアの米山です。主に CLINICS アプリの QA を担当しています。メドレーには 2020 年 8 月に入社しました。 今回は入社してまず行ったことの一つ、リグレッションテストの自動化と、そのために導入した Magic Pod というツールについて、経緯や導入してみた結果をご紹介したいと思います。 CLINICS とは私の所属するチームで開発しているCLINICSというプロダクトはアプリでオンライン診療や、クリニック・病院から処方箋を発行してもらうことができ、オンライン上で診察からお薬の受け取りまで完結できるサービスです。 プラットフォームは iOS と Android のネイティブアプリ、それから同様のサービスを Web ブラウザからも利用することが出来ます。
少年ジャンプ＋副編集長が大学1年生から「漫画アプリのUIについて物申したい！」というDMが来て実際に会って考えが整理されて意義深い時間になったという話
モミー 【少年ジャンプ＋編集】 @momiyama2019 「少年ジャンプ＋」編集長（デジタル担当）です。ほか「ジャンプルーキー！」「MANGA Plus by SHUEISHA」など。 リプライやDMの返信は気まぐれです。 https://t.co/BcS1vrJfWQ モミー 【少年ジャンプ＋編集】 @momiyama2019 先日、見知らぬ大学１年生から、漫画アプリのUIについて物申したい！というこんなDMが。 で、実際にお会いした。 話題はアプリの設計から、最終的には漫画表現の時代に合わせた進化など、広く漫画全体の課題や未来まで広がった。 結果、逆に僕の考えが整理されて意義深い時間に。学生氏に感謝！ pic.twitter.com/Q6XZUtPAEi
いま話題の 「stand.fm」 のUIを全力でトレースしてみた！｜kakeru tokunaga
皆さん stand.fmというアプリ/サービスを知っていますか？ そうです。音声サービス界隈に彗星の如く現れたニューヒーローとも言えるサービスです。そのぐらい今、勢いがあると思います。 皆さんご存知の通り、音声コンテンツ市場は近年、googleやspotifyの参入やスマートスピーカーの普及に伴ってかなり盛り上がっており、日本の市場も例外ではなく、RadiotalkやVoicy、Recなど様々なサービスが存在しています。 そんな盛り上がりを見せる市場で、最近、特にコンテンツの充実・サービスとしての伸びを見せているのが、この stand.fm だという事です。 僕は今まで、appleのpodcast、Voicy,Radiotalkのユーザーでしたが、そんな僕が最初にこのアプリを触った印象は、 「使いやすい！UIがかわいい！」 気軽にTwitterのタイムラインから飛んで配信を一度聞いたつもり
Flutter StudioでアプリのUIをつくろう！｜TechRacho by BPS株式会社
こんにちは。ウイングドアの田上です🐈 最近弊社ではFlutter™の機運が高まっておりまして社内勉強会も行われています💪 FlutterではコードでUIを組まないといけないので、なかなかむずかしいな〜😰と思っていたところ、 Flutter Studioという便利なツールがあったのでご紹介させていただきます❗️ Flutter Studioとは Webブラウザ上でFlutterのUIを組むことができるツールです。 マウス操作でWidgetの配置を行ってレイアウトを作成することができます。 Flutter StudioのUI説明 Flutter Studio にアクセスをすると、まずこの画面が表示されます。 ①Widget一覧 Flutterで使えるWidgetが選択できます。 レイアウトを組む際は、ここからWidgetを選択して、シミュレータへとドラッグ&ドロップをします。 ②シミュレ
コントラスト比が低いUIは20人に1人以上に影響! 対策をまとめてみた | DevelopersIO
はじめに スマホアプリやWebアプリで、ボタンなどのUIを作る場合を考えます。例えばボタンの色と、その上の"OK"などのテキストの色を決める際に注意すべき点を紹介します。UIだけでなく、ドキュメントの図やプレゼン資料など、色を使う全ての場面に使えます。 例えば、スマホアプリに次のようなボタンがあるとします。 こういう配色のボタン、よく見ますよね。ところが、このボタンは背景の黄緑色と「今すぐ購入」のフォントの白の「コントラスト比」が低い、つまり「色の明るさの差」が少ないので、「文字が薄くて読めない」と感じるユーザーが存在します。 人間の色の感じ方はみな同じではなく、遺伝子の状況や疾患などによって異なります。例えば、正常とされる人とは異なった色に見えたり感じたりする「先天性色覚異常」は、日本人男性の20人に１人(5%)、日本人女性の500人に1人(0.2%)といわれており、男性ではAB型の血液
React Native をプロダクションで使ってわかった良かった点・悪かった点 - Qiita
こんにちは、株式会社ピケ CTO の中西（@nakanishy）です。 Dish というランチ検索アプリのフロントエンドとデザインを担当しています。 Dish では、React Native を採用して iOS アプリの開発をしています。iOS アプリを正式にリリースしたことがなく、また React Native も初めてだったので、苦戦する場面も多々ありましたが、良かった点もたくさんありました。 この記事では、Web 開発者の視点で React Native の良かった点と悪かった点を紹介したいと思います。 React Native の良かった点 高速に開発できる React Native は、ライブリロードとホットリロードをデフォルトでサポートしているので、Web 開発をしているかの如く高速に開発が進められました。保存すると即座に変更が反映されます。また、ホットリロードの場合、状態を維
React Native製アプリのクオリティを上げるために工夫した事
Illustration by unDrawInkdropというMarkdownノートアプリを一人で作っているTAKUYAです。最近、React Nativeを使って、iOS版とAndroid版の新しいバージョンをリリースしました。React Nativeは、JavaScriptとReactを使ってクロスプラットフォームなモバイルアプリが開発できるフレームワークです。 どうすればReact Nativeでハイクオリティなアプリが作れるのか、今回の開発を通して多くのことを学びました。本稿では、よりよいアプリを作るために自分が工夫したことをシェアします。既にReact Nativeでアプリを作っている方も、これから作ろうと思っている方も参考になるかと思います。 概要OSSライブラリは慎重に選ぶネイティブ拡張モジュールは出来るだけ使わないUIテーマの対応タブレットの対応動作を軽く保つ違和感のない
Android / iOS アプリの開発にクロスプラットフォームの Flutter を実戦投入した｜najeira
Flutter を実際にリリースしているプロダクトに採用してみて半年ほど経ったので、その経緯と Flutter についての感想を記しておきます。 The English version is on Medium! Flutter についてFlutter は、クロスプラットフォームでモバイルアプリを開発するための開発フレームワークです。 特徴- 言語は Dart - フルスタックのUI framework (Material and iOS) - Reactive (inspired by React) - Material and iOS - GPU を利用して UI を描画するところまで全て (Skia) - オープンソース on GitHub - developed by Google and community - ネイティブのARMコードにコンパイル - 開発用プラグイン - In
「Redirectable UI」という考え方｜dely design
こんにちは、dely CTOの大竹雅登（@EntreGulss）です。 UIデザインの世界は日々発展しています。先日のWWDC 2018で、Apple Human Interface Design Teamが「Designing Fluid Interfaces」と題して発表を行いました。非常に有益な内容で自分たちのプロダクトにも応用できそうなことが多かったので、単に内容をまとめるのではなく自分なりの考察も含めて書きたいと思います。 はじめに 本編 ・Fluidインターフェースの注目点：Redirectable UI ・iOS標準のRedirectable UIの例「Swipe Back」 ・iPhone XのRedirectableなホームジェスチャー ・Redirectable UIを採用しているアプリ事例 ・Redirectable UIの実装方法 まとめ Fluidインターフェース
任天堂がデザインする、ゲームと親子の関わり方｜娯楽のUI 公式レポート #3 | キャリアハック（CAREER HACK）
[目次] ・安心して、こどもに渡せるゲーム機であるために ・親子の関係性をデザインする ・こどもとの会話のきっかけを生むための3つの工夫 ［1］一瞬で把握できるように ［2］「良い・悪い」を押し付けない ［3］アラームと中断モード ・大切なユーザー体験は、アプリの外にある ・迷ったら、より「嫉妬」を感じる方へ ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 ※全3回にわたって『娯楽のUI - by Nintendo -』公式レポートをお届けしています。 ・任天堂が新人研修で伝えている、あそび心のデザイン｜娯楽のUI 公式レポート #1 ・任天堂『スプラトゥーン』UIデザインの舞台裏｜娯楽のUI 公式レポート #2 安心して、こどもに渡せるゲーム機であるために 『Nintendo みまもり Switc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
農業分野のアプリ開発のスタート地点は『手が土で汚れてるのでアプリは操作しないな』の状態 現場で本当に求められているものの話
デザイン原則の実践｜dely design
