ノンデザイナーでもできる。直感的で使いやすいUIの設計方法本セミナーでは、デザインやITの知識を持たない方でも直感的で使いやすいUIの検討（アプリケーションの画面設計等）を行える方法論をご紹介します。 DXに取り組む企業の増加、ノーコード開発ツールの発展などの背景から、最近、デザインやITの知識をほとんど持たない方が業務用アプリ等の画面をつくる機会が増え…
【爆速UI設計術】モダンなwebデザイン素材集 - Qiita
特徴 女性らしいイメージがやや多い 下記のような柔らかい印象のイラストが多いです。 【ガジェットストック】 ガジェット関連のものを使用したい場合は、下記を使用すると良いと思われます。 【アイコン系】 【human pictogram 2.0】 オリンピックで流行ったやつです。 本サイトでは、アタッチメントをつけたりすることでかなりカスタマイズ性が高いのが特徴です。 【EXPERIENCE JAPAN PICTOGRAMS】 特徴 海外から見た日本が表現されている これはシンプルにUIが凝ってたので紹介します。 和テイストを演出したい場合は、良さそうですね！ 【ICOOON MONO】 こちら色・サイズも変更可能です！ 【Icon-rainbow】 ICOOON MONOと異なり、こちらは、中が肉抜きされているのが特徴。 【IFN FREE ICONS】 このデザインはどのようなパターンにマ
オブジェクト指向でUIを考えられるようになりたい。 - Qiita
1. 目的 UIデザインを勉強し始めました。現在「オブジェクト指向UIデザイン-使いやすいソフトウェアの原理」を読んでいます。そのため、学習進行の記録と復習を兼ねて、学んだことを記事にしようと思います。 以下「1. オブジェクト指向UIとは何か」という本書のさわり部分についてまとめています。 この記事で載せている例には私が考えたものも含まれていますので、間違い等ありましたらコメントにてご指摘いただけますと幸いです。 2. オブジェクト指向UI(OOUI) UIをオブジェクト(ユーザーが操作する時の対象物)を起点に設計します。GUIももともとオブジェクト指向プログラミングのコンセプトに合わせて考案されました。多くのアプリはオブジェクト指向型のGUIです。 最大の目的は、ユーザーがオブジェクトに対して自由な順序で働きかけながら目的を達成することです。 原則 オブジェクトを知覚でき直接的に働きか
知識０から、ちょっとUIデザインに詳しくなるnote｜やました
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 デバイスやソフトによるUIの違い皆さんがお使
WebRTC と React を組み合わせるなら Flux 設計が有効
この前ポジショントークしたらそれなりに反響があったので書いてみる。 これまでの人生を振り返ると毎年ラジオや電話や配信サービスを作っている気がするし、なんかそういう仕事が回ってくることが多い気がする。 最近自分なりに答えが出たかなと思ったことがあるので言語化してみようと思う。 OGP は Flux ぽい画像だ。 注意・免責事項 ここにあるソースコードは不完全です。これは私が元々手元で実験していたボイラープレートであるとはいえ、いろんな仕事で培ったノウハウ的なものも含まれているので、念には念を入れて意図的に要件が透けそうな箇所は削除しています。 その結果元々のボイラープレートと乖離してしまい、動作しないコードになっています。ただ概念を伝えるには十分なコードになっているはずなので、脳内補完してください。質問は Twitter のメンション、もしくは Issue でのみ受け付けます。 (完全版を書
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の基本的な使い方が十分にわから
Adobe XDの使い方が、これでよく分かる！WebページのUIを設計するワークフローに沿って学べる解説書
Adobe XDを使用してワイヤーフレーム、プロトタイプ、デザインカンプなど、WebページのUIを設計するワークフローに沿って学べる解説書を紹介します。 ワイヤーフレームを作るにあたっての準備から、実際の作り方、コンポーネント管理、画面遷移設計、プロトタイプ共有、デザインスペック共有など、Adobe XDの実践的な使い方を基礎からしっかり学べます。 Adobe XDの解説書を探していた人には、間違いのない決定版の一冊です！ 本書はWeb制作に携わるすべての人、ディレクター、デザイナー、コーダーにお勧めの本です。Adobe XDをまだ使用したことがない、すでに使用しているけどもっと使いこなしたい、そんな人にぴったりの一冊です。 発売されて間もないのに、Amazonで☆5レビューが早くもかなりついています。
いま話題の 「stand.fm」 のUIを全力でトレースしてみた！｜kakeru tokunaga
皆さん stand.fmというアプリ/サービスを知っていますか？ そうです。音声サービス界隈に彗星の如く現れたニューヒーローとも言えるサービスです。そのぐらい今、勢いがあると思います。 皆さんご存知の通り、音声コンテンツ市場は近年、googleやspotifyの参入やスマートスピーカーの普及に伴ってかなり盛り上がっており、日本の市場も例外ではなく、RadiotalkやVoicy、Recなど様々なサービスが存在しています。 そんな盛り上がりを見せる市場で、最近、特にコンテンツの充実・サービスとしての伸びを見せているのが、この stand.fm だという事です。 僕は今まで、appleのpodcast、Voicy,Radiotalkのユーザーでしたが、そんな僕が最初にこのアプリを触った印象は、 「使いやすい！UIがかわいい！」 気軽にTwitterのタイムラインから飛んで配信を一度聞いたつもり
【初心者向け】Atomic Design っぽい、Figma の使い方 - Qiita
はじめに みなさま、いかがお過ごしでしょうか。Figma 流行ってきてますね〜。 他にも Framer X や STUDIO 、そして Figma の上位互換かもしれない Phase が盛り上がりを見せています。 導入記事も増えてきているので、具体的な 作成フロー を紹介したいと思います。 作成済みのファイルは探せばいっぱいあるので、Atomic Design ぽいプロセスで、よく使う UI パーツを作るところまでハンズオン形式で書いてみます。 ただし、原理主義的なプロセスや理論 ではなく、誰でも順を追って Figma を使える状態を目指します。 ストラテジストとエンジニア、そしてデザイナの作業が分断されている時点でイノベーティブではありません。 この三者が統合的にデザインできること、すなわち ワークフローそのものを最適化することが目標 です。 Figma と Atomic Design
デザインをするときに使える7つの裏ワザ
この記事は、「7 Practical Tips for Cheating at Design」 をざっくりと要約したものです。意訳多く含まれています。きちんとしたもの読みたい場合は、原文を読んでください。 1. フォントサイズの代わりに文字の色や太さで階層分ける テキストのUIを設計するときに過ちがちなミスは、フォントサイズに頼りすぎて、階層のコントロールできていないことです。 「このテキストは重要だから、文字を大きくしよう！」 「このテキストは重要ではないから、文字を小さくしよう！」 このように、普段設計していないですか？ すべてのテキストに、これを当てはめてはいけません。 文字の色や太さを、同じような役割として使用しましょう。 「このテキストは重要。だったら、文字を太くしよう！」 「このテキストは重要ではない。だったら、文字の色を明るくしよう！」 2,3色使用するのがおすすめです。 例
任天堂デザインの輪郭 / UI Crunch #13 娯楽のUI イベントレポート｜スワン
こんにちは、スワンです( 'ω') noteではしばらくご無沙汰してたのですが、今回激戦を極めた「UI Crunch #13 娯楽のUI」に奇跡的にnoteレポート枠で受かったので、花金に早々に仕事を切り上げてご機嫌でイベントに行ってきました。 噂によると倍率40倍近くだったそうで「全盛期の東京芸術大学の受験倍率かよ」って突っ込みたくなりました（笑）ありがたい機会をゲットしたとともにいけなかった方々にこの興奮を還元するべくゴリっとイベントレポートをまとめてみようと思います。 前がき私事ですが、ちょうどこの春で働く環境が変わり、株式会社メルペイでデザイナーとして働くことになりました。社会人になって初めての、自分を取り巻く「場所」や「人」が大きく変わる体験。そしたら、まだ働き始めて本当に間もないのだけど「場所が変わるとこんなにも入ってくる情報の種類が変わってくるんだな〜」という予想外の驚きが
快適なUXを実現するOptimistic Updates(楽観的更新)とは何か
先日、とあるJavaScript関連の記事を読んでいたところ、"Optimistic Updates" という技術が紹介されていました。 日本語に直すと "楽観的更新" といったところでしょうか。 はじめて聞いた言葉で、日本語の記事も見当たらなかったため記事にしてみます。 Optimistic Updatesとは Optimistic Updatesというのは、ネイティブアプリやSPA(Single Page Application)などで使われる技術で、非同期の通信処理が成功するという前提(楽観)のもとに、通信のレスポンスを待たずに次の処理を行うというものです。 最も多いOptimistic Updatesの使い方は、UIへの反映をリクエストの結果を待たずに行うというものでしょう。 Optimistic Updatesの例 例えば、よくある「いいね」ボタンのようなものにOptimisti
iOS ヒューマンインターフェースの原則 — Medium
iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴から情報設計の原則、それぞれ何のための部品なのか、という解説がされています。なぜこうなったのか、なぜこれが良くてあれが駄目なのか、Apple の UI デザイナーは何を考えてこのような設計にしたのか、HIG ではそのようなところまでは説明されていないことがあります。いくら内容を丸暗記したとしても「 なぜ 」がわからなければ本質から理解したとは言えません。 よくある UI デザインにおける誤り、『磨りガラス効果がかっこいい』『アニメーションしておくとかっこいい』『ボタンは右配置の方が押しやすい』『色が綺麗』『流行っているから優れている』…などがありますが、そういうことではない
iOS ヒューマンインターフェースの原則 - Qiita
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
クックパッドのUI設計の秘訣は仮説思考にあった！ - UX-design
2013-04-11 クックパッドのUI設計の秘訣は仮説思考にあった！ クックパッドと言えばRubyの匠として有名ですが、どうやらUX / UI に関してもめちゃくちゃ力を入れているようで、「こりゃ調べるっきゃねぇ！」と思い立ったが吉日。ググってるとこんな記事（【インタビュー】クックパッドのUIデザイナー：「エンジニアの仕事が0を1にする仕事なら、デザインは1を100にする仕事 」）に出会うことができたので、この記事の中からエッセンスを読み取ってまとめてみました！ こんな人に読んでほしい！ ・他社はUI設計をどうやってるんだろう？と気になっている方 ・自社のUI設計を見直したいと考えている方 仮説思考とは そもそも仮説思考ってなんやねん！っておっしゃる方もいらっしゃいますでしょうから、少しばかり仮説思考についてお話させて頂きます。 仮説思考とはズバリ、”（精度の高い）思い込み”です。「もし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
cmmntr.com