TOPフォーカス量産型UIから脱却したくて。個人開発の賃貸検索「Comfy」が提言する“探しやすさ”の形【フォーカス】 ソフトウェアエンジニア・個人開発者 choo 大学では文学部だったが、卒業後、たまたま内定が出たため入った大手SIerでプログラミングの面白さに目覚める。2年半で退職した後、1年間アルバイトをしつつ情報科学を独学し、Webサービス開発会社にプログラマとして就職する。2019年から個人開発に取り組んでおり、手描き文字の美麗さをAIで判定する「Letters」というWebアプリも運営している。独学時代には生活費を切り詰めるため、格安の事故物件で生活していた。 X Comfy Letters 賃貸物件の検索条件を入力すると、地図上の地域がリアルタイムに色を変え、「この条件の物件は、この地域にこれくらいある」とひと目でわかるWebサービス「Comfy（コンフィ）」。条件にフィット

「デザイナーだけがデザインをする時代は古い」「デザインにセンスはない」と語るのは、Udemyの「UI/UXの改善を進めるための基礎講座」などで人気を誇る、UI/UXデザイナーの濱野将氏。生成AI時代において、デザインをビジネスをつなげるためのポイントや、UI/UXの基礎を解説します。 UI/UXデザイナーが教えるデザインの基本 濱野将氏：それでは、僕からは「ビジネスを実現する『デザイン』の基本」をお話しさせていただきます。よろしくお願いします。 今日のアジェンダはこんな感じです。「デザインの必要性」「デザイナーだけがデザインする時代はもう古い」「UI/UXについて」。今回はAIがテーマなので「AIを使ったプロジェクトの進め方」も少し紹介させていただきたいなと思っております。 簡単に自己紹介をさせてください。株式会社IMAKE代表の濱野と申します。職業はUI/UXデザイナーで、講師もさせてい

アプリの画面をデザインする際、エンジニアさんに 「なにも登録データがない場合、どう表示しますか」「選択したときの状態ってどんなデザインですか」などと聞かれて 「ｳﾜｱ考えてなかったすみません、今作ります。。」 （なんて自分はポンコツなんだ、、ｳｳｳ） と、なりたくないですよね。 UI Stackは👆のような状況を回避するのに便利で大事な考え方だと思ったので、言葉の意味を知らない方はぜひ読んでってください！ UI Stack アメリカのプロダクトデザイナー Scott Hurff さんが世に出した 「UIの考慮すべき5つの状態」という考え方です 5つの状態 ・Blank State（空っぽの状態） ・Loading State（ローディング状態） ・Partial State（部分達成状態） ・Error State（エラー状態） ・Ideal State（理想状態） 一つ一つ参考を交えな

前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 デバイスやソフトによるUIの違い皆さんがお使

v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です！ Tailwindが好きな人にはたまらないコンポーネント集ですね！ shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。 下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ

アクセシビリティとはアクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざまな環境や状況にいる人、高齢者、日本語以外を得意な言語とする人など、すべての人のためのものです。人だけでなく、サービスや情報にアクセスする機械(ロボット)もアクセシビリティの影響を受けます。 SmartHRの開発方針SmartHRは「well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会を作る。」というミッションを掲げ、働くすべての人を後押しするプラットフォームをつくっています。 誰もがその人らしく働ける社会を実現するため、SmartHRはアクセシビリティの向上に取

2023年もCSSとUIの進化がすごいです！ 先日開催されたGoogle I/O 2023から、各ブラウザにサポートされたモダンCSSの新機能をはじめ、まもなくサポートされる機能まで、CSSの新しい機能を紹介します。 コンテナクエリ、スタイルクエリ、ダイナミックビューポート単位、カスケードレイヤー、ネスト、三角関数、広色域のカラースペースなど、これからのWebサイトやスマホアプリのUI制作に役立ちます。 What's new in CSS and UI: I/O 2023 Edition by Una Kravets, Bramus, Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに モダンCSSの新しいレスポンシブ モダンCSSの基礎機能の強化 カスタマイズ可能なコンポーネント CSSによるインタラクション 終わり

This page collects all the familiar navigation patterns for structuring iOS apps, like drill-downs, modals, pyramids, sequences, and more! Think of it as an unofficial bonus chapter for Apple’s Human Interface Guidelines, written by someone who cares deeply about well-crafted user interfaces. A typical iOS application has a fixed architecture—often a hierarchical tree with multiple levels. This ri

スマホアプリやWebサービスなど、スクリーン上のUIには様々な形でモーション（動き）が使われています。
こうしたUIモーションは利用者として毎日何気なく目にしているものですが、そこには作り手がいて目的があるはずです。この記事ではUIモーションの目的と効果的な使用方法について考察します。 UIモーションとUIアニメーション「モーション」と「アニメーション」はどちらも動きを表す言葉として、同じ意味で使われることもありますが、元々の言葉の意味を踏まえると以下のような違いがあると言えます。 UIモーション：UI要素に動きを与えたもの。ユーザーの操作や時間経過に応じてUI要素が移動・拡大・縮小・変形などの変化が生じること。（例：モーダルウィンドウの表示・非表示など） UIアニメーション：時間とともに変化するグラフィックをUIに取り入れること。（例：Twitterのいいねボタンを実行した際の演出） 厳

先日、「イカれたUIを作ろうの会」というオンラインイベントを開催しました。多くの皆さまにご参加いただき、誠にありがとうございました。 また、当イベントでは期待以上に自由で多様なUIがお披露目され、おおいに血湧き肉躍りました。主催者としてうれしい限りです。 ちなみに社内でも「ダメなUIを作ろうの会」と銘打って勉強会を実施しました。こちらもクローズドな空間ならではの盛り上がりを見せました。 社内での勉強会のお知らせ背景そもそもこのような会を実施した背景には、つぎのように思ったことがきっかけでした。 エンジニアとかUXとかDXとかHCDとかと比べてUIのイベントが少ない気がする。酔いどれUIデザイン選手権をやりたい。一番イカれたUIをデザインしたやつが勝ち。 — yumemi (@n__yumemi) January 24, 2023 たとえば、connpassで検索したときの結果は「UIデザイ

button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi

これは designing plus nine Advent Calendar 19日目の記事です。 こんにちは。ritarと申します。 今年の10月頃、YouTubeに大きいデザイン変更がありました。 アイコンの変更、角丸やレイアウトなど全体的に一新されているのですが、中でも自分が仰天したのは「アンビエントモード」という新機能です。 アンビエントモードこのモードをオンにすると、動画の下側のUI領域が、まるで動画部分から光が漏れているかのようにじんわりと色づきます。 これを見たとき自分は度肝を抜かれました。なんたってUIの領域にコンテンツの色が侵食しているのです。 これを踏まえて、最近UIと色について考えたことを、UIデザインの歴史を振り返りながら記していきます。先に要点を言うと、UIはどんどん「無色透明」になっていくと考えます。これは「技術が生活に浸透することによってUIは存在感を減らし

Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法がまとめられたThe Component Galleryを紹介します。 コンポーネントは再利用可能な単一の部品として利用でき、実装するコードや名前の付け方など、Web制作者には非常に勉強になると思います。 The Component Gallery The Component Galleryの特徴 The Component Galleryの利用方法 各UIコンポーネントのまとめ The Component Galleryの特徴 The Component Galleryには、実際のデザインシステムで使用されているUIコンポーネントがまとめられています。フロントエンドのデベロッパーとして毎日経験する問題を解決するために作成されました。 The Component Gallery コンポーネントや要素に名前を付けるの

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー

コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、？となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない（複数呼び名がある）ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ

こんにちは。i3DESIGNのデザイナー 小島です。 突然ですが、皆さんは何か商品(おもちゃ・ゲーム・楽器 etc)を買った時、付属されている説明書を読んでから使い始めますか？ 私は元々読まないで使い始めるタイプでした。しかし、途中で使い方が分からなくなり説明書を読み直したり、使うことを挫折したりしていました。※最近は読むようにしています。 なぜこのようなことが起きていたか振り返ると、 ・説明書が分厚くて読み込むハードルが高く感じる ・説明が複雑で分かりづらい こんなことが考えられます。 この話は身近なアプリでも同じことが言えるのではないでしょうか。 ユーザーが初めてアプリに触れる際、必ずと言っていいほど目にする「チュートリアル」 この「チュートリアル」がアプリにとっての「説明書」のような位置付けで、アプリの使い方をユーザーに分かりやすく伝える目的があります。 しかしこれに果てしなく長い文

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第15弾は、ユーザビリティ・フォーム・ミニマルにデザインする弊害に関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Fifteen. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ページ内リンクを効果的に用意する 2. ボタンのラベルは一貫性を保つ 3. 長いフォームは冗長な作業を最小限に抑える 4. 長いフォームは常にラベルを上部に配置する 5. 不要なテキストでフォームのUIを乱雑にしない 6. 特定のUI要素でミニマムな外観を避ける はじめに 次のプロジェクト

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第14弾は、レイアウトのグリッド・使いやすいフォーム・配色で悩んだ時に関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Fourteen. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. グリッドの間隔はハードではなく、ソフトに 2. フォームはインタラクションの後、すぐにフィードバックを提供 3. 配色で悩んだ時は、類似色 4. テキストの見栄えを良くするグリッドの使い方 5. 検索ボックスの幅は広くする 6. 素早いアクセスは、ナビゲーションをスティッキーに はじ

「デザイナーやクリエイターが、巧妙で興味深いUIを将来的に開発するためのインスピレーションを得られること」を目的に、映画・ゲーム・コンセプトデザイン・現実のシステムから集められたユーザーインターフェース(UI)のデザインをまとめたサイトが「HUDS+GUIS」です。HUDS+GUISではさまざまな創作物に登場するUIデザインを無料で、UIやタイポグラフィ、画像などの要素ごとに閲覧することができます。 HUDS+GUIS https://www.hudsandguis.com/ HUDS+GUISにアクセスするとこんな感じ。試しに「Battlefield 2042 Opening Cinematic」を見てみます。 ページのトップにはゲーム「Battlefield 2042」のオープニングムービーが埋め込まれており、その場でどんな映像なのかを視聴可能。 HUDS+GUISは「ノイズやグリッチ