サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
軽量のCSS classレスのHTMLとセマンティックユーティリティおよびコンポーネント用のCSSを組み合わせています。 Webコンポーネント ブラウザネイティブのWebコンポーネントでUIを段階的に拡張しています。 ビルドステップは不要CSS変数、カスケードレイヤー、HTML属性で自由にカスタマイズできます。 ライセンスはFair-codeで、オープンソースに似ていますが実用的になっています。個人や社内または非営利プロジェクトで無料で利用できます。収益が目的の場合はプロライセンスが必要となります。詳しくはライセンスページをご覧ください。 Kelpのデモ Kelpでどんな感じに実装できるかは、デモページをご覧ください。
はじめに 「動けばいい」で済ませがちなUI。でもそれ、ユーザーには伝わってないかもしれません。エンジニアの皆さん、機能開発に集中するあまり、UIが後回しになっていませんか？ コードとして正しく動いていても、ユーザーが使いにくいと感じたら、それは失敗です。どれだけロジックがスマートでも、UIが原因で「なんか使いづらい」と思われてしまうと、全体の評価も下がってしまいます。 この記事では、エンジニアがついやりがちなUIデザインのミスとその回避法を紹介します。共感あり、学びありで、読後すぐに「ちょっとUI直してみようかな」と思える構成を目指しました！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。UIデザインにおける「やりが
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 自分は正直デザインが苦手です...。 なので個人開発で画面のイメージを作ってみたものの、パワーポイントでただ図形をはっつけたような悩ましいもので「なんとかならないものか」と頭を抱えていました。 そんな時に色々調べてく中で出会ったのが、VercelのAIツール「v0」。 なんとなく試してみたら、いい感じになったのでデザイン苦手な人でも大丈夫ですよってことで記事にしようと思いました！ v0とはNext.jsを開発しているVercel社で開発されたAIツールです。 自然言語でUIないしはコードを生成してくれます。 いい感じにしても
アジャイルな開発チームで仕事をするデザイナーには、どういったマインドセットが求められるのでしょうか。アウトプットへのこだわりを抑えて、チームのメンバーとして果たすべき役割があります。またAIによるUIの生成が可能になってきた現在、その役割も大きく変化し始めています。 同じ美術大学に1学年違いで学んだ平野友視（@hiranotomoki）さんと大輪俊行（@ohwatoshiyuki）さんは、現在それぞれ法人向けSaaSを展開する事業会社でアジャイルな開発組織に所属しています。アジャイルな現場におけるデザイナーに必要な姿勢や考え方、そしてこれからの在り方について語り合いました。アジャイルでは完成品ではなく価値を届けるアジャイルに馴染めるデザイナーとそうでないデザイナー 影響の少ないところから始めて4年で8割をリプレイス デザイナーとAIだけで実現するプロトタイプやデモシステム この先生き残
こんにちは。tebiki現場分析のプロダクトデザイナーをしている畔地（あぜち）です。 BtoBプロダクトのデザインって、少しハードルが高そうに感じませんか？「業界が遠いと、業務を理解するのが難しそう…」とか、「課題が複雑すぎて、なかなか共感できないかも…」なんて思われるかもしれません。 実は、私も最初はそう思っていました。 私は前職で、toC向けの転職サイトのデザインを担当していました。私自身も転職経験があったので、プロダクトを使う場面や流れは理解できていましたし、「きっと顧客はこんな気持ちだろう」と想像しながらデザインを進めることができました。 ところが、tebiki現場分析は製造現場向けのプロダクト。工場に行ったこともなければ、製造業の知識もほとんどない私にとって、顧客の置かれた環境や課題を深く理解することは、大きな課題でした。 しかし、顧客理解こそが優れたプロダクトを生む鍵であること
『はじめよう！ 要件定義 ～ビギナーからベテランまで』はそのタイトル通り、ソフトウェア開発に携わるエンジニアやPM向けに、要件定義の進め方について優しく解説してくれる書籍です。かわいいイラストと平易な文章がとっつきやすく、するすると読めてしまいますが、要件定義って何をどうやったらいいの？とお悩みの方に対して、まずはこれだけやっておくべき基礎知識を得ることができる、とてもわかりやすい内容になっています。 そしてそして、ここからが本noteの主な趣旨ですが、この3部作はデザイナー目線で読み解くと、極めて明瞭で本質的で実践的な、ユーザー体験設計とUI設計の進め方について学べるデザイン教則本と言えるのです。 以下、その理由と、本シリーズを使ってUIデザインを進めていく方法を実例を踏まえて解説していきます。 要件定義とはUI・機能・データを決めることいきなり『はじめよう！ 要件定義 』のキモ・コンセ
こんにちは、最近スマホのChatGPTアプリで、音声入出力機能を使って会話を楽しんでいる安部です。 皆さんWebアプリ開発などで、画面モックを作成しなければいけない場面は多いですよね？ 適当なHTMLを作ったり、ツールで図示したりしますが、正直面倒です。 そこで今回は、ChatGPTに最初から画面モックを作ってもらいます。 最近はChatGPTに画像を添付できるようになったので手書き画像からHTMLを出力することもできますが、 この記事では画面要素を言葉で指定し、HTMLを出力してもらいます（配置などのデザインは、ひとまずChatGPTにお任せしてみます）。 では早速始めましょう。使用モデルはGPT-4です。 簡単な入力フォームを出力させる まずは、よく使いそうな簡単な入力フォームを出力してもらいます。 ここでは、「書籍を登録する画面」という設定で指示を出します。 次の画面構成の案を、HT
本書はFigma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、BrandGuidelineに則った内容となっております。(BrandGuideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ
こんにちは、freee会計チームでWebエンジニアをしているe-mohaです。4月に入社しました。 この記事では、先日プレスリリースが発表されたきっぷUIの開発についてご紹介します。 燕駅から大崎駅までの交通経路のスクリーンショット まだプレスリリースをご覧になっていない方は以下のリンクをご確認ください。 prtimes.jp 今回は、freeeのプロダクトのデザイン方針である「Design Philosophy」を意識してUI開発をしました。 Design Philosophyの4つのキーワードに沿って、解説していきます。 brand.freee.co.jp 爽快でシンプルな見た目にする "かろやかシンプル" 「かろやかシンプル」というキーワードでは、業務の面倒な事務作業のストレスから開放するためにシンプルでわかりやすいデザインを心がけることを定義しています。 きっぷUIでは、右上のつば
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 これまでの中で最も注目されたUIデザインのテクニックをまとめました。UI &UX Micro-Tips: Best of the Best by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 細いフォントは暗いカラーにする 2. 長いフォームは常にラベルを上部に配置する 3. ボタンのラベルは一貫性を保つ 4. 不要なテキストでフォームのUIを乱雑にしない 5. フォームはインタラクションの後、すぐにフィードバックを提供 6. 次のステップの情報を提供する 7. CTA用にカラーを1つ確保しておく 8.
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 littleUI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確
AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。 テキストを入力、たとえば「シンプルでモダンなナビゲーション アイテムは日本語」と入力すると、そのUI要素を実装するHTMLとCSSを生成してくれるAIツールを紹介します。AI CODE 実際に試してみましたが、ナビゲーション、ボタン、カード、フォームなど、UI要素やUIコンポーネントやレイアウトが数秒で簡単に実装されました。 また、次のバージョンではJavaScriptにも対応して、UIライブラリも追加する予定とのことです。AI CODEの使い方AI CODEの使い方は簡単、登録など面倒なことは一切不要です。 サイトにアクセスし、テキストを入力して「Generate」ボタンを押すだけです。 テキストは英語だけでなく、日本語でも大丈夫です。たとえば
架空の営業管理システムを作ってもらう前提で、ChatGPTに要件定義をお願いしてみました。 実験として軽く試すレベルで始めてみたのですが、予想を超えるクオリティでしたので、一部始終を皆様にもご紹介します。ChatGPTとのやりとり まず、ざっくりと必要な機能の洗い出しをお願いしてみました。 あっという間に必要な機能を網羅的にリストアップしてくれまた。私自身、SFA/CRMをいくつか触った経験がありますが、適切な内容だと思います。 中には、「データのインポート・エクスポート機能」のように、検討初期段階ではつい忘れそうな機能も含まれています。さらに頼んでもいないのにオススメの検討プロセスまで教えてくれました。気が利いてます。 機能ベースだと要件の妥当性が判断しにくく思ったので、画面ベースで要件定義してもらことにしました。 「図で教えて」とできないことをお願いしたところ、やんわり断りつつ、意図
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "SegoeUI", 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
こんにちは、東芝のUIデザイン担当の池田Rです。PCやスマホを使っていると「ショッピングカート」や「サムアップ」「虫メガネ」など様々なアイコンを目にします。普段意識することはありませんが、実はこのアイコン、テキスト無しでユーザーに情報を伝えることができる重要なアイテムです。 この記事では、そんなアイコンのデザイン検討から完成までのお話をご紹介します。 アイコンには、アプリケーションを起動するランチャーアイコン、メニューの補足やボタンの役割を果たすシステムアイコンの大きく2種類があります。ここでは東芝の様々なアプリケーションで使われるシステムアイコンに絞ってお話します。 １．まずは手書きで「メッセージする」のアイコンのモチーフは“吹き出し”。「ロックする」のモチーフは“南京錠”といったように、まずは使用用途ごとにモチーフを考えます。システムアイコンは誰にでも正しく意味を認識してもらう必要が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
