プロンプトで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
UI UXデザインに役立つ心理学の法則19選！具体例を交えて解説 | 株式会社ニジボックス
ユーザーにとって、より分かりやすく使いやすいプロダクトを設計するためには、ユーザー心理に寄り添ったUI UXデザインが必要です。 「良いUI UXデザインとは？」を考える上で指針となる、心理学などをベースとした法則・ルールがあるのをご存じでしょうか？ この記事ではその中から、特に押さえておくべき19の法則・ルールをピックアップ。 デザインへの生かし方と一緒に解説します。 UIデザイン、UXデザインとは？ 本題となる法則・ルールを紹介する前に、そもそもUIデザイン・UXデザインとは何か、を押さえておきましょう。 UIデザインとは？ 「UIデザイン（ユーザーインターフェースデザイン）」とは、ユーザーがプロダクトをスムーズに使えるように、ユーザーとサービスの接点（UI）をデザインすることです。 UIとは、例えばサイトの見た目から、文字、画像・動画やアニメーション、ボタンなどの機能、入力フォームに
わかりやすさを作るIA（情報アーキテクチャ）_ペパボCDO小久保浩大郎氏_fgn.Design School｜leony(miki horio)｜note
コンテキスト、ユーザーは決まっている（市場） ゴールも決まっている 考えないといけないのはコンテンツ いきなりコンテンツを考え始めるのは五里霧中的#fgnds — miki🤤leony (@leony79119157) January 13, 2023 ながらくEC運用に携わってたので、この２つめっちゃくちゃわがるー！てなりました。EC運用って言うと聞こえはいい（いいか？ｗ）のですが、実際はスーパー短納期でバナー作りまくったり、画像ベタ貼りのLP作ったり、htmlメールのデザインやったりがメインなので、実績になるようなカッコイイサイトを作りたい若者には人気がないとおもう。。。😂 売上を上げることにフォーカスされがちな先方の担当の方に、長い目で見ていいものを作るというアプローチからのグロースも同時にやりましょうって、地道に語りかけるお仕事でもあると思います。 いや、きっとそこを買ってくれ
デザイン素人に贈る、UIディレクション10個のポイント｜ひとし｜note
トレタ代表の中村です。 年末ですね。僭越ながら、今年もアドベントカレンダーの大トリを務めさせていただきます。 今年は何を書こうかなあってずっと悩んでいたのですが、毎年「想い」やら「ビジョン」「意義」やら、同じようなことばかり書いていても芸がないので、今年は趣向を変えてみたいと思います。 テーマは実務方向に振りきって「非デザイナーはどうやってデザイナーにUIディレクションをしたらいいのか」をお題に選びました。ビジネスサイドなど、デザイナーではない人たち向けの記事です。 僕はもともとデザイナーとしての専門的な訓練は受けていないのですが、それでもUI/UXにこだわったサービスを作ろうとすると、どうしてもデザイナーの皆さんとの議論や相談、互いの考えをすり合わせることから避けられなくなります。時には対立することもありますから、このコミュニケーションは本当に大事。 とはいえ経験や知識が乏しいと、デザイ
UIデザインのための心理学：33の法則・原則（実例つき） | ベイジのUIラボ
ユーザーが「使いやすい」と感じるアプリケーションは、良いUIデザインで設計されているともいえます。良いUIデザインでは、ユーザーの認知負荷を下げる工夫がされています。認知負荷を下げる仕組みを知るには、心理学とUIデザインの密接な関係を理解することが重要です。 行動心理学や認知心理学の発展により、人間の感情や行動は、脳の仕組みに基づいて様々な法則に当てはめられることが分かってきました。UIデザインでも、心理学を活用したアプローチでより良いユーザー体験を生み出すことができます。特に業務システムのような複雑なアプリケーションでは、メニューや画面レイアウトなど幅広く活用できます。 今まで心理学はマーケティング領域で応用されることが多く、ウェブサイトやアプリケーションのUIデザインで語られることはそれほど多くありませんでした。そこで本記事では、人の様々な心理現象や認知の法則を、UIデザインに活用する
ベイジの業務システムUIデザインワークフロー（100のタスクを徹底解説） | ベイジのUIラボ～業務システムとSaaSのUIを考える
2021年現在、ベイジの柱の事業はウェブ制作事業とウェブアプリデザイン事業です。ウェブ制作事業は会社設立の2010年からの主力事業で、サービス品質の平準化を目的に2014年頃からワークフローの整備を進めてきました。 一方ウェブアプリデザイン事業については、事業拡大したのがここ数年で、まだワークフローが整備されておらず、各人の裁量に委ねた進め方になっていました。そこで今後の事業拡大とメンバー増員を想定し作成したのが、業務システムやSaaSのUIデザインに特化した「ベイジの業務システムUIデザインワークフロー2021年版」です。 基本的な進め方は国際規格（ISO 9241-210※）の人間中心設計プロセスに基づいて組み立てていますが、細かいタスクの順序や内容は、今までベイジで培ってきたノウハウをふんだんに盛り込み、組み換えています。 また今回ワークフローを整備するうえでは、クライアントごとの開
スマートフォンサイトのUIデザイン考察 〜ナビゲーション編〜
こんにちは、ウミの森山です。あっ・・という間に年の暮れですね！先日ウミの忘年会も終わりまして、時が過ぎる早さに焦り気味の私です。 さて本日は、「スマートフォンサイトにおけるUIデザイン」について書きたいのですが、 その中でも特に重要な役割を果たしている「グローバルナビゲーション（メインメニュー）」について掘り下げてみたいと思います。 スマホサイトの使いやすさを左右するナビゲーションメニューあれこれ 普段スマートフォンでサイトを閲覧される機会の多い方であれば、よく見かけるナビゲーションデザインのパターンがいくつか思い浮かぶかと思いますが、ここではスマートフォンサイトで使われているナビゲーションのUIパターンをいくつかご紹介したいと思います。 1. ハンバーガーボタン + プルダウン(ドロップダウン)メニュー これがもっとも一般的なスタイルでないかと思います。「 ≡ 」のアイコンをタップすると
Facebook Design Resources
A collection of free resources made by designers at Facebook.A collection of free resources made by designers at Facebook. iOS 9 GUI (iPhone) Photoshop and Sketch templates of GUI elements found in the public release of iOS 9. Diverse Device Hands Two different diverse hands holding various modern smartphones (iPhone 4-6+, Nexus, Windows Phone).
Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 | HTML5でサイトをつくろう
Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 最近、自分の中でWebサイトの参考としてPinterestがとても便利で毎日みてるのですが、かっこよいサイトの他にレイアウトの例としてUIやUXに特化したボードなどもありチェックしています。 そんな時見つけた、Webサイトやスマホサイトを画面構成を作る際にたくさんのモジュールが用意されている「UI TITES」と「UX KITS」がシンプルだけですが組み合わせによって色々なレイアウトが作れるのでとても参考になりますので紹介します。 http://pixelbuddha.net/ui-tiles/ こちらは72個もモジュールがあり無料でダウンロードができます。 PHOTOSHOPデータやイラレデータがありますので、個々のモジュールを組み合わせてWebサイトのワイヤー
【デザインまとめ】綺麗なデザインの管理画面 30選
以前記事にした「【デザインまとめ】綺麗なデザインの管理画面 40種類 」、時間が経ってリンク先が消えていたりしますね。 また綺麗なデザインの管理画面も追加したいと思います。 サムネイルだけで見ると、全部似たようなものに見えてきますが、デモサイトを見てみると細かな部分でデザイナーさんの個性が出ていて面白いです。 ご参考になれば幸いです。 左に紺か黒のナビがあるやつ ◆Material Admin デモサイト ◆Edumix 黄緑がきれい デモサイト ◆Make デモサイト ◆Con デモサイト メガネのロゴがかわいい ◆Mega デモサイト 黒でメリハリ ◆Admin box デモサイト ちょっとレトロ感ある色遣いが印象的。 ◆Singular デモサイト やわらかな色遣い。 ◆Azan デモサイト ◆Brio Web App デモサイト 丸みの強い要素がかわいい ◆HeyMetro デモサ
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
重要な情報は左上に――効果的なデザインに必要な4つの原則
エンジニアが知っておくべきWebデザインの4原則、「近接」「整列」「反復」「コントラスト」を分かりやすく解説する。 連載目次 エンジニアが作るシステムやアプリケーションには、デザインが欠かせません。デザインというと、「ビジュアル」「見た目がカッコいい」「おしゃれ」など外見のデザインを思い浮かべがちですが、WebアプリやWebサイトのデザインで大切なのは、そこではありません。 Webのデザインで必要なのは、「ユーザーの目的達成を助ける」ことです。本連載「エンジニアのためのWebデザイン基礎の基礎」は、あなたのWebサイトを訪れた人を引きつけ、ユーザーへと転換（コンバージョン）させるためのデザインの基本を伝授します。 良いデザインの4原則 「エンジニアが知るべき最低限のデザイン基礎」とは何でしょう？ 専用ソフトウェアの使い方？ いいえ、違います。IllustratorやPhotoshopの使い
[触る・動く・気持ちいい、RamotionによるUI/UXアニメーション] 他 海外のWebデザイン情報 | WEBデザインすーぷ
2015年2月13日 Webデザイン RamotionによるUI/UXアニメーション UI/UX Animations by Ramotion Ramotion is a digital agency focusing in brand identity, mobile apps and web products based in San Francisco, USA. We are featuring their collection of UI/UX Animations from the last year, it’s amazing to see their experimentations on how the users will interact with an interface. For this case, on mobile. Ramotionはアメリカのサンフランシ
![[触る・動く・気持ちいい、RamotionによるUI/UXアニメーション] 他 海外のWebデザイン情報 | WEBデザインすーぷ](https://cdn-ak-scissors.b.st-hatena.com/image/square/215203d9bd5bfc3978493b7278848b55c19fd482/height=288;version=1;width=512/http%3A%2F%2Fi0.wp.com%2Fweb.html-css-javascript.com%2Fwp-content%2Fuploads%2F2015%2F02%2Fi7.jpg%3Ffit%3D723%252C240)
黄金比とは？基礎・書き方とデザインに活用するときの5つのポイント | LISKUL
黄金比とは、「1:1.618」という比率のことです。 黄金比は、物事のバランスと調和を最適化し、視覚的魅力を引き出すと言われています。 自然界では、貝殻の螺旋形状などがこの比率で形成されており、モナリザなどの美術品や、エッフェル塔などの建造物にも活用されています。 しかし、具体的にはどのようなものなのか、どのようにデザインに取り入れればよいのかわからないという方も多いのではないでしょうか。 そこで本記事では、黄金比の基礎や、歴史、計算方法、身の回りにある例、具体的な活用方法、などの情報を一挙にご紹介します。 黄金比を活用して魅力的なデザインを作成したい方は、ぜひご一読ください。 黄金比とは、1：1.618という比率のこと黄金比とは、「1：1.618」という比率のことで、数学、美術、自然の中で頻繁に見受けられる特別な比です。 この比率は「黄金分割」とも呼ばれ、ある長さを二分割した時、全体と大
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
心理学は簡単じゃない！差がつくデザイナーになる心得が学べる | UX TIMES
Webサイトやスマホアプリに使用されているさまざまなアイデアを実現する小さなディテールのまとめ -CallToInspiration
Appealing | Mobile UI Animations
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
スマホサービスにおける、UIデザインのノウハウと実例
PCサイトのUIデザインにおける12のトレンド
