プロンプトで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
【デザイナー直伝】デザインレイアウトで意識したい7つの型。センスに頼らない確実な方法を解説 - Workship MAGAZINE(ワークシップマガジン)
「センスがないから」とおざなりにされることも多いデザインですが、じつは「デザインはセンスではなく、知識」。なかでも、知識の有無でクオリティが大きく変わるのが「レイアウト」です。 適切に設計したレイアウトは、情報を明確に伝え、アクションを促します。レイアウトの知識を身につけることで、さまざまな場面で効果を感じられるでしょう。 今回は、デザイナーの齋藤 緑さんに、レイアウトの基本原則からよく使うレイアウトパターンまで、美しさと機能性を兼ね備えたデザインを作成する方法を教えてもらいます。
デザインを早く仕上げるために必要だった4つのこと | ARCHETYP BLOG | Webビジネスに関するUI/UXデザイン｜株式会社アーキタイプ｜ARCHETYP Inc.
こんにちは、デザイナーのもとまつです。 はやいもので、入社3年目、デザイナー歴9年目になります。 さて。 デザイナーのみなさまの中には「早くデザインを仕上げるにはどうしたらいいか」と考えたことがある方も多いのではないでしょうか。 かく言う私もその一人でした。 上司や周りの方から「デザインが遅い」と指摘を受け、 デザインを早く仕上げることを、ここ数年の目標にかかげてやってきました。 その甲斐あってか、最近「早いね」と言っていただけることがちょこちょこ増えてきたため この機会に振り返ってみたいと思います。 1. 手を動かす間は考えない デザインの作業自体は、案件のお話を聞いた時からはじまります。 ただ、その前の準備がとても大切ではないでしょうか。 具体的には、「良いデザインをたくさん見ておく」という日頃の準備と、 「デスクについたらすぐデザインを始められる」という案件の準備です。 考えるという
デザインとアートの違い: 問題解決と自己表現 デザイン会社 ビートラックス: ブログ
デザインとアートは何が違うのか？いまさらこんなシンプルで基本的な質問に対しての答えを考えてみたい。 というのも、先日クライアント向けにデザイン思考に関しての社内セミナーを開催させていただき、そこでそもそもなぜ “デザイン”思考と呼ばれているのか、を考えてみたことがきっかけで、一度デザインとは、そしてアートとは何が違うのかをまとめてみたいと思っていた。 デザイン思考の4つの基本的な考え方 – デザイン思考を学ぶ Part 1 アートは自己表現、デザインは問題解決デザインとアートの違いの問いに対して最も端的な答えは、アートは自己表現で、デザインは問題解決であろう。もう少し長めに書くのであれば、 アートは、なるべく制限のない状態で最大限の自己表現をすること。デザインは、与えられた制限の中で求められる最大の結果を出すためのプロセスだと考えられる。 その点においてアートとデザインは対極にあるぐらい異
全ての人が知っておくべきデザイン・レイアウトの基本ルールとテクニック15選 - LITERALLY
デザイナーでなくとも、デザインについてのいくつかのルールを知っておくと、日々の生活で何かと役に立つ。今回は、誰もが知っておくべきデザインの基本原則・テクニックを紹介する。 1.デザインの基本原則を覚えよう 1-1.「1/3ルール」を覚えよう レイアウトや写真の構成を考えるときには、黄金比*1よりも「1/3の法則」が便利だ。上の図のように、全体を9等分割したとき、各線の交点（図の丸点）に主張したいモノを配置するようにする。これだけで、不思議とスッキリとしたデザインになる。技の1つとして覚えておこう。 1-2.端をそろえて線をつくろう 写真や文などの「要素の端」をきちんとそろえると、きれいに整理されて見える。これはデザインにおいてとくに重要な基本ルールだ。全てをそろえる必要はないが、縦にいくつか要素を並べる場合は常に意識しよう。 1-3.視線の流れを意識したデザインにしよう 情報がたくさん詰め
余白とはなにか。デザインが上達する６つのTips - コムテブログ
TL;DR 余白とはなにか、漠然としていたので、今回は余白の種類や使い方を少しでもマスターするために参考になる知識をまとめました。 余白とはなにか 余白（margin）とはタイポグラフィやレイアウトにおいて何も書かれていない空間、もしくは何も配置されていない空白部分のことをいいます。一見何も存在しない真っ白のスペースのようでありながら、意図的に配置されていることもあります。だからといって白である必要はありません。 つまり、余白とは「一見何もなさそうだけど ○○」といったような感じです。例えば… 西洋画に余白を使った絵は少ないですが、雪舟のような水墨画では「間」や「静かさ」を演出するなどの余白の使われ方によって、しみじみとした余情を感じることができます。 雑誌などの紙面では小さなテキストを広い余白に配置し存在感を出したり、視線の滞在時間をコントロールするなどの活用方法があります。 コメディア
UIデザイナーとWebデザイナーの違いって？ Webデザインを始める前に知っておきたいこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 Pooleチームのアートディレクターの竹原です。 本日よりLIGデザイナー陣による新連載「Webデザインをはじめよう」が始まります。この連載はこれからWebデザイナーを目指す人、またWebデザインへの興味を深めたい人に向けた連載です。 Vol.1ではWebデザイナーの仕事の内容や、制作に必要なマシンやツールのご紹介、Webサイト１つ作るのに具体的にどんなものをデザインすればいいのかについてご紹介します。またVol.2以降では、Webデザイナーが知っておくべきHTML/CSSの基礎知識や、Webサイトを実際にデザインしていく過程をご紹介していく予定ですので、お楽しみに。 さて、Vol.1の第一回目となる今回は、本題であるWebデザインの説明に入る前に、そもそも「デザイン」とは何なのか、「デザイナー」とはどういう職業なのかについて簡単ではありますが、ご説明できればと思います。 そ
デザインやレイアウトで取り入れたい心理効果13選｜ferret
Webマーケティングをはじめ、デザインにおいても心理的な観点からアプローチすることはユーザーの行動を促す重要なポイントです。 なぜなら、五感の中でも視覚しか使わないインターネットだからこそ、心理効果を踏まえたデザインがユーザーの行動に大きく影響を与えるからです。 今回は、心理効果に基づいた画像の使い方をまとめてご紹介します。 もし見た目の印象だけでデザインを決めている、という方がいらっしゃるようでしたら、参考にしてみてください。 画像に使える心理効果のテクニックまとめ 1.ホワイトスペース効果 引用：coliss 飾り、テキストといった要素が何もない「ホワイトスペース」を意図的に作ることで、目立たせたいポイントを強調したり、デザインをはっきりと見せることができる効果が得られます。 商品紹介ページなどは、特に意識するべきでしょう。 ちなみに、「ホワイト」とはいっても、余白は必ず白である必要は
デザイン上達の秘訣は「文字の扱い方」！テキストを読みやすくする5つのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デザイナーのまきこです。 わたしは以前、著名なアートディレクターの方に「デザインがうまくなるにはどうしたらいいでしょう？」と、大変にストレートな質問をしたことがあります。そのときいただいたのは、「文字の扱いがうまくなると、デザインがうまくなるよ」という言葉でした。 あれから何年か経ちますが、ふとその言葉を思い出すことがあります。そして、「あのときはあんなふうに言われたけど、たいしてうまくなってないなあ」と、ぼんやり考えてから、また作業に戻っていく。と、ここまでが、去年までのわたしのいつものパターンでした。 でも、2016年のわたしはちょっと違います。ちょうど昨日、「文字の扱いがうまくなると、デザインがうまくなるよ」という言葉をまた思い出しました。そこで、「あ、これ、ブログにしよう」と思い立ったわけです。 今回はデザインにおける文字の扱い方の中でも、わたしが普段意識している、「
レイアウトに関する5つのデザインのルール
広告やチラシや提案書を作成する時、また名刺やWebサイトをデザインする際にも、無造作に文字や画像を並べるだけでは綺麗で見やすいものにはなりません。 配置する要素の関係性を考慮した上で、近くに置くのか、揃えるのか、コントラストで見た目の変化をつけるかなど一定のルールや基本、セオリーをもってデザインを行えば、わかりやすく綺麗なレイアウトになります。 そこで今回は、レイアウトに関する“近接、整列、反復、コントラスト、余白”の5つのデザインの原理・原則をご紹介します。 1.近接（Proximity） 近接とは、関連する要素を近くに配置しグループ化することを指します。 近接の大きな目的は要素の「構造化」になります。関連する要素を近ずけてグループ化することにより、なんでもなかったものが構造化して意味を持つようになります。 要素間のスペースの距離は、その要素同士の関係性を示すことになるので、反対に関係の
物足りなさの原因は整理ができていないから？デザイナーのためのグリッド活用術
ロゴやビジュアルのデザインをしているとき、なんとなく上手くできないと感じた経験はないでしょうか。 デザインが失敗する原因の一つとして、レイアウトが問題となっていることが多くあります。 その場合は、レイアウトに規則をつくるだけでしっかりとしたデザインになることも多いので、デザインをおこなう機会がある方は覚えておくと便利です。 今回は、レイアウトを行う際に使う手法である「グリッド」の活用に関する情報をまとめてご紹介します。参考実例として実際にグリッドを使ったロゴデザインもピックアップしています。 自分のデザインがいまいちだと感じている方、デザインを始めたばかりの方は特に必見です。 デザインのクオリティを高める！グリッドの活用まとめ 1.グリッドとは 引用：http://welovetypography.com/post/11817 グリッド・システムとは、スイス出身のデザイナー ヨゼフ・ミュー
Webデザイナー必見、実務で役立つ逆引きレイアウト集
作成：2015/07/21 更新：2016/06/29 Webデザイン > オシャレなレイアウトやユーザーが使いやすい配置を実現するには、どのようなことに気をつければよいのか。クライアントの要望に合わせてアイデアを出したいとき、レイアウトで困った時に読んでおきたいメモ。イメージが湧きやすいように、国産サイトを多めにピックアップしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．視線を停止させたい ２．上質さを出したい ３．静寂さを出したい ４．親しみやすさ を出したい ５．文字の存在感を出したい ６．メリハリを出したい ７．先進的な演出をしたい ８．広がりを出したい ９．メッセージを目立たせい １０．要素を上手に対比させたい １１．ラインをオシャレに使いたい １２．躍動感を出したい １３．ハッキリ見せたい １４．シンボル・ロゴを目立つ位置に配置した
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ログイン - はてな
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
「デザインのバリエーションや代案をくださいと言われてももう悩まない本。」発売記念 DTPの勉強会 第19回『型（かた）から展開するデザインバリエーション』
非デザイナーも必見！「4大原則」を知るだけで見違えるデザインに | Swings
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
