知識０から、ちょっとUIデザインに詳しくなるnote｜やました
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 デバイスやソフトによるUIの違い皆さんがお使
なぜ使われないダッシュボードが作られるかという話 - satoshihirose.log
はじめに 最近、ビジネスダッシュボードの設計・実装ガイドブックという書籍が出版された。今まであまりなかった視点から書かれたデータに関する本で面白く読んだ。 ビジネスダッシュボード 設計・実装ガイドブック 成果を生み出すデータと分析のデザイン 作者:トレジャーデータ,池田 俊介,藤井 温子,櫻井 将允,花岡 明翔泳社Amazon 作ったダッシュボードの利用が進まず、虚しさを覚えた経験がある人は多いと思う。どうしてそうなってしまうのか、自分の経験を元にまとめたいなと思ったのでまとめる。 なぜ使われないダッシュボードが作られるか なぜ作られたダッシュボードが使われないかと言うと、基本的にはそのダッシュボードがそんなに必要なものではないからだ（社内周知がうまくない、ツールの使い方がわからない人が多いなどの理由もあったりするがここでは無視する）。 必要のないダッシュボードが作られてしまう状況に関して
Figma の Dev Mode で UI の確認を楽にする｜ふじけん / kenshir0f
こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2023 で Developer Mode (Dev Mode) が追加され、エンジニアなど実装を担当する人目線でのデザインの確認がより便利になりました。 この Dev Mode はいったい何が便利なのか、どうやって既存のファイルで活用するのかを紹介したいと思います。 公式のチュートリアルはこちら↓ Dev Mode とは？Dev Mode はデザインデータを実装担当者が見るときのモードです。 エンジニアが Figma にあるデザインを実装する時に、デザインに関する情報をすぐに参照したり、UIに関連するコードを確認したりすることができます。 具体的なメリットは以下の通りです。 開発に必要なデザイン・画面だけを素早く参照できる デザインに関連するリンク(GitHub や Storybook, Notion など)を
なぜ <div> に onClick がダメなのか？
■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか？ ただ、なぜ渡すべきでないのか？ 理解してなかったので今回調べてみました。 サンプルコード 今回動作確認に利用したサンプルリポジトリのコードはReactで書いています。 ■ 結論：<div>にonClickを定義するのがなぜダメなのか？ ユーザーにとって操作性の低いボタンになってしまうから、です！ 要するに UX が悪くなってしまうから！ その理由を解説していきます！ ■ 操作性の低いボタンになってしまう理由 大きく３つあると考えています。 div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ◎ focus を持たないから <div>要素はfocusを持ちません。 なので、tabキーで要素に
ChatGPT×Whisperで履歴書と職務経歴書づくりを効率化 開発してみてわかった、生成AIの活かし方
大規模言語モデル（LLM）を、実際にプロダクトや実務に役立つかたちで利用している各社が見た使いどころや、実践の上での工夫について学び合うためのイベント「ChatGPT IN ACTION 実践で使う大規模言語モデル」。株式会社ROXXからは、CTOの松本宏太氏が登壇。「ChatGPT×Whisper」で作ったプロトタイプを紹介しました。 ROXX社・CTO松本宏太氏 松本宏太氏：弊社は「ChatGPT×Whisper」でいろいろプロトタイプを作っているので、その中の事例を1つ紹介して、そこで学んだ内容をもとに、今後の展望をお話できればなと思っています。 （スライドを示して）今日は、こういう感じで話していこうかなと思っています。まず、自己紹介をさせていただきます。 あらためて、株式会社ROXXでCTOをやっている松本と申します。「kotamat」という名前でいろいろやっているのですが、もとも
ChatGPTに要件定義をお願いしたらハンパなかった | DevelopersIO
架空の営業管理システムを作ってもらう前提で、ChatGPTに要件定義をお願いしてみました。 実験として軽く試すレベルで始めてみたのですが、予想を超えるクオリティでしたので、一部始終を皆様にもご紹介します。 ChatGPTとのやりとり まず、ざっくりと必要な機能の洗い出しをお願いしてみました。 あっという間に必要な機能を網羅的にリストアップしてくれまた。私自身、SFA/CRMをいくつか触った経験がありますが、適切な内容だと思います。 中には、「データのインポート・エクスポート機能」のように、検討初期段階ではつい忘れそうな機能も含まれています。さらに頼んでもいないのにオススメの検討プロセスまで教えてくれました。気が利いてます。 機能ベースだと要件の妥当性が判断しにくく思ったので、画面ベースで要件定義してもらことにしました。 「図で教えて」とできないことをお願いしたところ、やんわり断りつつ、意図
Flutter開発をマスターするための手引き 2022年版
はじめに 知っている人も少なくないが、FlutterはAndroid/iOS開発で最も注目を集めているフレームワークの１つである。モバイル開発に携わらないプログラマーでもFlutterが人気であることを見聞きしたことはあるのではないだろうか。 そこで、今回の記事ではFlutter開発をマスターするためのスキルや確認するべき情報源をまとめる。今回の記事を参考に、Flutterに興味を持ってくれる人が少しでも増えたら幸いである。 Flutter開発をマスターするのに必要なスキル Visual Studio Code FlutterはVisual Studio Codeで開発を進めるのが通例となっている。Flutterを学ぶ前に、必ずVisual Studio Codeをインストールし、基本的な使い方を十分にマスターしておこう。 Visual Studio Codeの基本的な使い方が十分にわから
5つの文字から1万4000文字を自動生成 筑波大発AIベンチャーがフォント生成システム 特許出願
筑波大学発AIスタートアップのAIdeaLab（東京都千代田区）は8月17日、5つの文字から1万4000以上の文字をAIで自動生成するフォント生成システムの特許を出願したと発表した。 システムは、敵対生成ネットワーク（GAN）をベースに、大量のフォントを学習させた上で、手作業でデザインした数個の文字から、太さやセリフ（装飾）の形状を抽出し、生成する。パラメーターの値を調整することで、新しいフォントとして出力することも可能。ピクセル画像ではなく、ベクター画像として生成する独自技術により、フォントファイルとしての出力を可能にしたという。 特許は、フォント生成モデルだけでなく、アプリケーションUIも含む。パラメーター調整でフォントを生成するUI、少ない文字数でのアップロードでフォントを生成するUIなど、さまざまなパターンのサービス展開を織り込んでおり、特許出願技術をベースに、フォント制作会社向け
【ツイッターで毎週トレンド入りするサービス開発者が教える】再現性を持って「バズ」るサービスを作る方法 - AppBrew Tech Blog
こんにちは。れとるときゃりー(@retoruto_carry)と申します。 AppbrewではPdM・デザイナー・フロントエンドエンジニアをやっています。 プライベートでは、個人開発でみんなのボタンメーカーというサービスを運営したりしています。 ほぼ毎週ツイッターのトレンドに乗るような、所謂「バズ系」のWebサービスで、月に50万人くらいに利用してもらっています。 ツイッターをやっている方は、なんとなく見たことある気がする人も多いのではないでしょうか？ みんなのボタンメーカー 今回は、その知見を活用し、お仕事で「LIPSショッピング」というコスメの買い物ができるサービスのバズキャンペーンの企画・デザイン・実装を行いました。 コスメクーポンガチャ ちょうどいいので、それを題材にして、再現性をもって「バズ」るサービスを作る方法について話していこうと思います。 キャンペーンはかなり好評で、ツイッ
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
お金はないけどUIはキレイにしたい！ “インディーズゲームにおけるUI制作”のノウハウが語られたセッションをレポート
お金はないけどUIはキレイにしたい！ “インディーズゲームにおけるUI制作”のノウハウが語られたセッションをレポート ライター：高橋祐介 2021年8月21日にインディーズゲーム開発者向けのオンラインカンファレンス「Indie Developers Conference 2021」が開催された。その中で，インディーズゲームのUIにフォーカスしたセッション「プログラマしかいない お金もない それでもUIを綺麗にする！」が行われた。 登壇したのは，東方Projectのファンゲーム「幻想郷ディフェンダーズ」「幻想戦略譚」などを制作した開発グループ，Neetpiaに所属する少佐氏。氏は両作品のプログラマでありながら，同時にユーザーインタフェース（UI）のデザインも手掛けているという。 少佐氏は大前提として「UIはデザイナーが専任すべき」仕事と前置きしたうえで，「実際の現場ではそこまで人手がなく，グ
求人メディア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でアプリを
個人開発の雑誌取材がボツになったので供養します - 下町柚子黄昏記 by @yuzutas0
まえがき 某有名誌に取材を受けたのですが諸事情でボツになったので供養します。 事前質問とカンペと議事録を組み合わせて取材風テキストにしています。 自分で自分のブログに自分の取材テキストを貼り付けるというヤバさには目を瞑っていただけると幸いです。 Q. ゆずたそ様はご自身でもウェブサービスを開発され、またさまざまなエンジニアの個人開発の経験をまとめた著書も発刊されています。 よろしくお願い致します。 まず簡単に自己紹介させてください。 私は @yuzutas0（ゆずたそ） というハンドルネームで活動しています。 Webサービスやプログラムを個人で開発して、何度か有名なメディアに取り上げていただいたこともあります。 今年の4月には、25人の個人開発の事例をまとめた書籍『個人開発をはじめよう！』を出版しました。 個人開発をはじめよう！クリエイター25人の実践エピソード (技術の泉シリーズ（Nex
Flutterで高速開発したAnewsモバイルアプリ
はじめに2020年11月にリリースされた、ストックマークのAnewsのモバイルアプリケーションにはFlutterが利用されています。本記事では、Flutterをなぜ採用したのか、どのような点に課題があり、どのように工夫していったのか、という開発現場の知見について紹介いたします。(本記事は、実際に開発を行った祖父江 聡士さん・海老原 隆太さんへの社内インタビューを元に執筆されています） Flutterで開発されたAnewsの画面イメージ FlutterとはGoogle社によって開発されているオープンソースのフレームワークです。クロスプラットフォーム向けの開発が可能であり、iOSやAndroidといったモバイルアプリケーションに多く利用されますが、Windows/Mac/Linuxといったプラットフォームのアプリケーションも開発可能です。 StockmarkにおけるFlutterの適用領域An
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を選択して、シミュレータへとドラッグ&ドロップをします。 ②シミュレ
Atomic Designを分かったつもりになる
「Atomic Design」（アトミック・デザイン）という言葉がしばしば聞かれるようになってきました。実際にちょっとしたトライアルをしつつ、Atomic Design について考えてみました。
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
農業分野のアプリ開発のスタート地点は『手が土で汚れてるのでアプリは操作しないな』の状態 現場で本当に求められているものの話
