画像生成AIでウェブサイトやUIデザインを生成するコツ
人工知能（AI）は、ウェブサイト制作を、根本から変えてしまうでしょう。 今のところ、AI画像生成ツールは、呪文（プロンプト）を唱える、ちょっとしたコツを覚えることで、以下のようなWebレイアウトを作成できます。 beautiful landing for spiderman website, design, ux/ui, ux, ui --ar 3:2 --v 4 --q 2 「花屋、フラワーショップ」をテーマにすると、一発でWebサイト向けレイアウトを錬成できます。 「日本」をテーマにすると、こんな美しいUIデザインに。 実際にAI画像生成ツールを使いこむうちに、少しずつわかってきた、AIツールでウェブサイトやUIデザイン画像を生成するコツを、メモ的にご紹介。 アップデート、継続していきます。 コンテンツ目次 ✨ AI画像生成ツールとは？ ✨ 唱える呪文（プロンプト）って何？ ✨ 画像を
Stable Diffusion web UIのインストールと使い方
今回は、「Stable Diffusion web UI」をWindowsやMacにインストールする方法と、その使い方を紹介します。 Stable Diffusion web UIについて Stable Diffusion web UIは、ブラウザをインターフェースとして利用して、AIによる画像生成を行うことができるツールです。 GitHub[AUTOMATIC1111/stable-diffusion-webui]（https://github.com/AUTOMATIC1111/stable-diffusion-webui） Stable Diffusion web UIでは、次のような画面をブラウザで動かすことができ、かんたんにAIによる画像生成を行うことができます。 この、ブラウザを使うというスタイルのおかげで、Windowsでも、Mac(Apple Silicon)でも、Linu
【まとめ】エンジニア向けデザイン参考サイト - Qiita
本記事は、身の回りの困りごとを楽しく解決！ by Works Human Intelligence Advent Calendar 2022の13日目の記事です。 はじめに エンジニアの私「個人開発したアプリのデザインがイマイチで世に出す勇気がなくて困っとる」 デザイナーの知人「どれどれ。あー確かに。いい意味でエンジニアらしさ出てますな♪」 私「『いい意味で』を先頭に付ければ何いっても許される説！！」 知人「デザイン作るときは既存にあるアプリやサービスのUIを参考にするといいですよ」 私「具体的には何を参考にすればエンジニアでもいい感じにデザイン作れそうですか？」 知人「それでは自分が参考にしているデザイン系のサイトをいくつか紹介していきます」 てことで、今回はエンジニア向けの個人開発やアイディア探しで役立つサイトをまとめていきます。 「ポートフォリオのアイディアが思いつかない」「開発した
.NETエンタープライズWebアプリケーション開発技術大全 スマートクライアント型システムにおけるVisual Studio .NETのメリット（1/4） - ＠IT
.NETエンタープライズWebアプリケーション 開発技術大全 本記事は、日経BPソフトプレス／マイクロソフトプレスが発行している『.NETエンタープライズWebアプリケーション開発技術大全 Vol.1 .NET Framework導入編』の「第2章 2.4 スマートクライアント型システムにおけるVisual Studio .NETのメリット 」より、同社の許可を得てその内容を転載したものです。 同書はマイクロソフトのコンサルタントが執筆した.NETシステム設計／構築のための技術解説書で、全5巻で構成されています。 このうち、第1巻から第3巻までがすでに発売されています（第4巻と第5巻は、2004年秋以降の発行が予定されています）。 Insider.NETでは、全6回に渡り、.NET開発者にとって特に重要だと思われる個所をこの3巻より抜粋して掲載していく予定です。なお、書籍の詳細については本
ドラッグで並べ替え可能なグリッドを実現する「draggable_grid.js」を作りました - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 本日は、久しぶりに JavaScript のライブラリを公開します。よく、画像ギャラリー等でマウスのドラッグ＆ドロップで画像の並べ替えができるものがありますが、そんな UI を簡単に実現できるものを作ってみました。以前に公開してご好評をいただいた DragResize.js のノウハウを引き継いでおり、以下の特徴があります。 JavaScript の呼び出しひとつ
ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&有料まとめサイト - 酒と泪とRubyとRailsと
ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&有料まとめサイト Jan 28th, 2013 Tweet Twitter Bootstrapはデザインが苦手なプログラマのための必須ツールです。今回は、一味違ったBootstrapサイトを作るときにきっと参考になるテンプレートをまとめてみました！ (03/05 追記) FlatUI、Bootstrap Expoを追加しました (03/24 追記) Flatstrapを追加しました (04/03 追記) MagicSuggestを追加しました (04/04 追記) Bootstrapのリソースネタを別の記事にしました 無料のテンプレート 無料のBootstrapテンプレートの紹介です。BootswachのようにCSSだけで適用できるものと、HTML/CSS/JSなどいろいろ追加しないと実現できないものがあります
UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ
前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない
Scheduler JavaScript Сalendar - DHTMLX Scheduler
Feature-Rich JavaScript Scheduler DHTMLX Scheduler is a JavaScript scheduling calendar with 10 views and customizable interface for developing any kind of scheduling applications.
年間300億。Webユーザビリティ３つの間違い・落とし穴
「ユーザビリティを意識することが大切！」って言われても、何となく意味は分かるけど具体的にどうすれば良いの……と悩んでいる方も多いのではないでしょうか？ ユーザビリティとは、「単なる使いやすさ」のことではありません。特にWebにおいては売上や成果などビジネスを左右する重要な概念です。しかし、多くの人がユーザビリティについて間違った認識を持っているために、みすみす売上や成果を逃しているケースをよく目にします。 ユーザビリティを正しく理解するポイントは、特定のユーザの行動、心理、目的に焦点を当てることです。 本日は、よくある「間違い・落とし穴」を例に出しながら、売上改善に直結する「正しい」ユーザビリティの考え方をご紹介します。ぜひ皆さんもユーザビリティの理解を深め、Webサイトの改良に役立ててください！ 【事例】１つのボタンを変えただけで、年間300億の売上増！売上に直結するユーザビリティとは、
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
UXを学ぶならこれだけは目を通しておけ！ - UX-design
2013-04-11 UXを学ぶならこれだけは目を通しておけ！ UXとはなんぞや!?って日々思いながら手探りでUXを意識したサービス開発、UXの向上を測っております、どうも @tacumacy です。 ボク自身、UXのことはなんとなーくわかってはいましたが、本格的にそれを仕事としてやろうとなった時から本気で勉強しなきゃやばい！と思い猛烈に危機感を感じたので、めちゃくちゃネットサーフィンをしてUXに関する情報を集めては読みまくりました。そこでボクが読んで参考になった書籍や記事を、どうせならここでまとめて見れるようにしておこうと思います。もし勉強したいな、と思ったときに見ていただけると幸いです。 こんな人に読んでほしい ・これからUXを学びたいと思っている人 ・UXについて、手っ取り早く情報が欲しいと思っている人 書籍紹介 以下、これだけは頭に入れておきたいなぁと感じた内容をまとめてくださって
トレンドに振り回されない。デザインの考え方を等身大にまとめた本を書きました。
東京都でフリーランスデザイナーをしているイシジマミキのブログです。制作実績やその作り方とか。あと運営しているコワーキングスペース「こけむさズ」に関して。書評などのレビューもします。 1月29日に「スマートフォンデザインでラクするためには」という本を技術評論社さんにて書かせていただきました。 表紙カッコイイ！！！ いつも書いているブログ記事の豪華版 このブログではよく作ったアイコンやロゴ、Webサイトの製作過程を紹介しています。 なぜそれをするのかというとデザインでは「何を考え、どう決断し、どう表現したか」が大切だからです。 「スマートフォンデザインでラクするために」はその「何を考え、どう決断し、どう表現したか」をより掘り下げて232ページ、6万文字弱使って書いています。 いやー豪華ですねー。死ぬかと思った！ 画面に向かうな 「画面に向かうな」とはわたしがよく行うデザインの模索方法です。これ
Bootstrap向けの汎用的なモーダルボックス実装スクリプト・Bootstrap Modal
よさ気だったのでメモ。Twitter Bootstrap向けのモーダルスクリ プト、Bootstrap Modalです。既存 のモーダルクラスの代替、または パッチとして利用出来る、との事 です。 Bootstrap向けのモーダルスクリプトです。レスポンシブ対応でスタックも可能との事です。デモを触って見ましたが結構使い勝手が良さそうでした。 こういうやつ。モーダルボックス内は自由にマークアップできます。Bootstrap用なので勿論レスポンシブにも対応しています。 このようにモーダルを表示したまま、別のモーダルボックスを呼び出すことも出来ます。 汎用性も高そうです。これは覚えておこう・・・時間が作れなかったのでコードやサンプルは割愛しました。貧乏暇無し。 Bootstrap Modal
BootstrapのUIがドラッグアンドドロップだけで組める！最速でウェブのユーザーインターフェースが構築できるエディタ「Jetstrap」 - Chrome Life
先日、Twitter Bootstrapが2.1.1にアップデートされました。 Bootstrapが2.1になって大幅に機能も追加され、ウェブサイトを構築する上で必要なUIがほとんど揃っている感じがします。 最近では、スタートアップ系のWebサービスを作る人にとっては、Bootstrapが必要不可欠な存在になりつつあります。 とはいっても、Bootstrapに慣れていない人が、実際にページを作っていくにはコンポーネントのタグ構造やClass名を意識して作らないといけないので、少し難しい部分もあります。 Bootstrapのサイトを見ればマークアップのサンプルがあるので、それを見ながら作れば良いのですが1つ1つ確認しながら行うのも手間です。 そこで今回ご紹介するのが、BootstrapのUIをドラッグアンドドロップだけで簡単に組めるエディタ「Jetstrap」です。 jetstrap - B
ウェブサイトのユーザビリティに関する最高の秘訣20か条 ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
昨日、ウェブサイトのリーダビリティに関する記事を配信しましたが、意外と好評でした。ということで、2匹目のドジョウを狙って今回はユーザビリティについての記事を紹介したいと思います m(__)m ウェブデザイナーにもSEO担当者にも、基本ながら一読の価値ある内容。 — SEO Japan ユーザビリティは、ウェブサイトにとってものすごく大切なことだ。訪問者が素早く簡単に楽しくウェブサイトにアクセスしてそれを使うことができなければ、ウェブサイトの外観がどんなに格好良くても、コンテンツがどんなに素晴らしくても関係ないのだ。訪問者の多くは、ただ諦めて他のどこかに行ってしまうだろう。 それでは、どうやってできる限り使い易いウェブサイトを作ればいいのだろうか？あなたはラッキーだ。だって、この記事ではあなたのウェブサイトのために20個のユーザビリティの秘訣を特集しているのだ。テクノロジーは常に変化するため
ユーザビリティの原則と現場で使えるユーザビリティテストの方法
今回は、Web制作の現場でも使えるようなユーザビリティテストの方法をご紹介します。 アクセス解析を使ったものではなく、あくまでもサイトの構造の問題点を洗い出す方法です。 そのため、それにいたる細かい基本部分についてもかなり大胆に触れてます。 試験をする前に、どのような観点からサイトを見て行く必要があるのかと言うユーザビリティの原則から、試験方法、試験の結果からの問題解決にむけて、私がこれまで行ってきている仕事の一部をご紹介します。 Webユーザビリティについて：目次 書き出したらとまらなくなりましたが、これでも結構情報削りすぎたかなぁというのはあります。 私の仕事について方法を学べばユーザビリティテストは出来る最大の原則はユーザーに考えさせない事たった一人でも試験をするほうが100倍ましになるユーザーの視点を理解する箇所法則1「長いテキストを最初からよし見ようとは思わない」法則2「長たらし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【永久保存版】エンジニア・デザイナー必見！「UI/UX」の基礎が学べるSlideshare30選
日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました！（たぶん） | BtoBサービスキューレーション Boxil（ボクシル）まとめ！
Webデザインのセンスを磨く！2014年上半期洗練されたディテールのUIデザインのまとめ
タブやフォームなどのUIもレスポンシブWebデザインに対応させた960グリッドシステム搭載のCSSフレームワーク・Gumby Framework
