プロンプトでUIを生成してくれるAIサービス「v0」をUIUXデザイナーが使ってみた
デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回はAIサービス「v0」についてです。 こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。今回は、プロンプトからUIを作成してくれるツール「v0」の使いかたや、実際に使ってみた感想などを紹介していきます。 「v0 by Vercel」とは Next.jsを開発するVercelが、生成AIへのプロンプトでUIを自動生成するサービスを公開しました。2024年1月頭時点ではベータ版ですが、Freeプランも提供されているためログインすれば誰でも使用することができます。ChatGPTのように、プロンプトを投げるとAIがTailwind CSSとShadcn
生成AI で思い通りのサイトを出力しよう - Qiita
こんにちは。日頃は blockchain の記事ばかり書いていますが、たまには生成 AI についても書きたいと思います。テーマは生成 AI で出来るだけ思い通りにサイトの生成を行います。 前提 今回は以下条件のサイトを生成します。 Next.js Tailwind LP向け レスポンシブ向け また、検証で利用した GPT は ChatGPT 3.5 です。 Bing Copilot を使用する場合、可能であれば Web 検索との連動を OFF にすることをオススメします。また、自社独自の専門用語をプロンプトへ加える場合は適宜補足説明を手動、または RAG 等でプロンプトへ加えてください。 背景 この記事を書くに当たって感じていた課題と解決したことを記載します。 課題 普段は、GPT系を駆使して素早くコードを作成することを心がけています。バックエンドの生成にはそれほど問題はないのですが、フロ
設計書を書かない設計で開発効率を向上させた話 - Tabelog Tech Blog
この記事は 食べログアドベントカレンダー2023 の23日目の記事です🎅🎄 こんにちは。食べログシステム本部 技術部 仕入チームの@shohei-yです。 今回は、新規事業の「食べログ仕入」プロダクト開発において所謂「設計書」を書かない設計に挑戦して開発効率を向上させた話を書きます。 （結局「書くの？書かないの？どっちなんだい！」と感じた人は、ぜひ読み進めてください。） 所属している仕入チームについてはこちらの記事をご覧ください。 目次 なぜ設計書を書かない設計に挑戦したのか 設計書を書かないチーム 設計書を書かないことによる問題 1. チーム協力の課題 2. ソースコードの複雑化 3. チーム変動に関わる問題 設計工程導入のきっかけ 設計書を書かない挑戦の背景 設計書を書かない設計 フロントエンド・バックエンドのインターフェースの明確化 ソースコードのスリム化対策 設計のレビュー方法
12のソフトウェア・アーキテクチャの落とし穴とその避け方
これは、多数派が支配すべきだという意味ではない。委員会によって設計されたアーキテクチャは、肥大化し、焦点が定まらない傾向がある。私たちの経験では、理想的なバランスとは、多様な経験と視点を持つ数人の仲間が、より良い情報に基づいた決定を下すために、主張に異議を唱えることである。 再利用の目標が誤った決定を左右するようなことがあってはならない。その代わり、再利用は理にかなった場合のみ行うこと。 コード、コンポーネント、設計、あるいはコンフィギュレーションの再利用は、最初は良いアイディアのように聞こえる。経営陣は、再利用によってコストが削減され、納期が短縮され、品質が向上すると信じて、このコンセプトを推進したがる。チームは、MVPをより早く提供するために既存のアプリケーションの大部分を再利用することを決定するかもしれないし、かなり成功した製品を提供するために作成された既存のアーキテクチャを再利用す
ADR を1年間書いてみた感想 - 一休.com Developers Blog
宿泊開発チームでエンジニアをしている @kosuke1012 です。チームで ADR を書き始めて1年くらい経ったので、その感想を書いてみたいと思います。 この記事は 一休.comのカレンダー | Advent Calendar 2023 - Qiita の13日目の記事です。 ADRとは アーキテクチャ・ディシジョン・レコードの略で、アーキテクチャに関する意思決定を軽量なテキストドキュメントで記録していくものです。 出典はこちらで、 Documenting Architecture Decisions わかりやすい和訳は以下の記事が、 アーキテクチャ決定レコードの概要 | Cloud アーキテクチャ センター | Google Cloud アーキテクチャ・デシジョン・レコードの勧め | 豆蔵デベロッパーサイト アーキテクチャの「なぜ？」を記録する！ADRってなんぞや？ #設計 -
タグ入力UIのパターンをまとめてみた - Goodpatch Tech Blog
この記事は「Goodpatch Advent Calendar 2021」の 23 日目の記事です。 初めまして、フロントエンドエンジニアの かず と申します。 自社サービスの開発でタグ入力UIを実装することになり、他サービスではどのような仕様になっているかを調査しました。 この記事では、タグ入力UIについてパターンをまとめ、それぞれのメリット・デメリットについて考えたことを共有したいと思います。 タグ入力UIとは 使用例とパターン テキストフィールド内に追加されていくパターン テキストボックスの外に追加されていくパターン ドロップダウンリストから選択するパターン ユーザー操作に対する挙動の違い タグ追加のタイミング 特定のキーを押してタグ追加 最初からタグとして入力されている テキストボックスからフォーカスが外れたときの入力文字の扱い タグ化される 消去される そのまま残る 候補表示のタ
UI-patterns.com
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.
aisplash: Free AI-Generated Stock Photos & Royalty-Free Images
Sans Photographer PhotosThe best free stock photos and royalty-free images... powered by robots everywhere.
ソフトウェア設計についてtwada技術顧問と話してみた 〜 A Philosophy of Software Design をベースに 〜 - NTT Communications Engineers' Blog
はじめに スタンフォード大学の John Ousterhout 教授が執筆された “A Philosophy of Software Design”(以下 APoSD と略す) という書籍をご存じでしょうか？ 書籍のタイトルを直訳すると、「ソフトウェア設計の哲学」となります。書籍の内容はまさに、ソフトウェア設計について扱っています。 本書籍をベースに、「A Philosophy of Software Design を30分でざっと理解する」というお題で社内ランチ勉強会が開催されました。本記事執筆者である岩瀬(@iwashi86)が発表者であり、勉強会資料は以下のとおりです。 スライド P.4 に記載したとおり、本書籍は John Ousterhout 教授の意見が強く反映されており、ソフトウェアエンジニアであれば、議論を呼ぶ箇所があります。実際、勉強会の実況Slackでは、「これはどうな
いいねとその通知機能をDynamoDBで設計したら思ったよりムズい - エムスリーテックブログ
【Unit4 ブログリレー4日目】 こんにちは、エムスリーエンジニアリンググループの福林 (@fukubaya) です。 今回は、SNSではごく一般的ないいねとその通知機能をDynamoDBを利用して実装したら思ったより大変だったので、その詳細をご紹介します。 キャナルシティ劇場は、福岡県福岡市博多区の複合商業施設「キャナルシティ博多」のシアタービル最上階に位置する劇場。本文には特に関係ありません。 m3ラウンジ m3ラウンジのいいねとその通知の要件 RDBで実装したらどうなるか いいね機能 通知機能 DynamoDBで実装する いいね機能 通知機能 いいねする いいねを取り消す 通知を表示する 未読の通知の取得 未読の通知数 未読の通知を既読にする テーブル設計むずい PKとSKに何を選ぶか LSIは途中から作れない DynamoDBをローカルで動かして設計する まとめ We are h
デザイナーのとなりで仕事を見ている気分 「そのデザイン、どうやって作るの？」が分かる、デザインの参考書 | 翔泳社
デザイナーの頭の中、手の内がまるわかり！ 「ロゴ、ポスター、パンフレットなどの身近なデザイン、プロは実際どう作っているの？」 企画、アイデアの考え方から、Illustratorなどによる制作テクニックまで。グラフィックデザイン初心者が、仕事の知っておきたい知識と技術を学べるやさしい入門書です。 プロのデザイナーでありデザイン学校の講師としても活躍する著者が、実際の作品例を交えながらレクチャー。プロが頭の中、手の内を惜しみなく見せてくれます。 デザインの流れを見られることで、具体的なものを作りたい人にもすぐ参考になると同時に、基本的なデザインが上手くなるためのコツや、初心者が陥りがちな気を付けてほしいポイントについても紹介しています。 「デザインって楽しい、面白い」 「自分が作っていて楽しいと思えるデザインでないと、他の人の心も動かせない」 そう語る著者による温かく実務的なアドバイスは、デザ
CTO から見た，なぜスタートアップ
初期のソフトウェア設計は壊れがちなのか - Speaker Deck
Speaker Deck This deck requires a password Password
隠れた課題を見つけ出す「構造化シナリオ」を使った画面設計とは | 株式会社PLAN-B
いくつもの画面設計を重ねていくと、このような状況に陥ることはありませんか？ 「この部分の設計は、昔作ったあのサイトと同じ感じに」 「他社さんが作ったここイケてる！この部分をまねしよう」 というように、どこか他のサイトの「まねごと」だったり、過去に作ったサイトの「いいとこ取り」をしていたり。私自身、（深い理由もないまま）部分的に他のサイトのまねをして、画面設計をしていたこともあったと思います。 どうしてこのサイトに、この要素が必要なのか、なぜこの位置にあるのか、そしてそれがユーザーにとって本当に使いやすいのか。その理由が説明できないことに、モヤモヤしたことも。 そんな私ですが、この後お伝えする「構造化シナリオ」という考え方を使うことで、サイトを使うユーザーにとって「本当に欲しい情報」「価値を感じる情報」を、その優先度順に設計することができました。 「構造化シナリオ」を使う前は、どことなく難し
GoodpatchのUXデザイナーがおすすめ UXデザインを理解するためのブックリスト【2021増補版】｜Goodpatch Blog グッドパッチブログ
今回は、GoodpatchのUXデザイナーに、UXデザインを理解するためのおすすめ本を教えてもらいました。これからUXデザインを学んでいく初心者の人や、ユーザー中心の視点でプロジェクトを進めたい人に向けて、目的別に6つのカテゴリに分けてご紹介します。2021年最新版のブックリストです。 1. UXデザインを基礎から理解する 初心者向けに、まずは「ユーザー体験(UX)」という捉えにくい概念について理解するための教科書のような本をご紹介します。 ■ UXデザインの教科書 UXデザインを「知る・理解する・実践するための教科書」といえるでしょう。本書ではUXデザインをひとつの学問領域として捉えており、歴史的背景から理論、プロセス、手法までを体系的に学ぶことができます。 教科書という名の通り、体系的でボリュームがある内容なので、基礎的なプロセスを理解している中級者レベルの人だとスムーズに読み進められ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Preview feature… New Filter UI
v0 by Vercel
JavaScript is not available.
Iconoir | Free Icons
Amazon.co.jp: ユーザビリティエンジニアリング(第2版)―ユーザエクスペリエンスのための調査、設計、評価手法―: 樽本徹也: 本
https://www.ipa.go.jp/files/000044154.pdf