FigmaがAIでさらに進化！ Web制作はもはや完全自動化目前？ 「Config APAC 2024」現地レポ | 進化が止まらない！ 最新ツール
Figma（フィグマ）が主催する世界最大級のデザインカンファレンス「Config（コンフィグ）2024」が本拠地・米国のサンフランシスコで6月26〜27日に開催された。その翌週、Figma経営陣はシンガポールへと飛び、7月2日に「Config APAC 2024」を開催。アジアで初開催となったこのConfigには約1,000人以上が参加し、新機能の発表を歓声をもって迎えた。 シンガポールの「Config APAC 2024」を現地取材した筆者が、最新の機能アップデートとAI活用を中心にお伝えする。 マリーナベイサンズ・コンベンションセンター内のConfig APACの会場 アジアには72ものFigmaコミュニティがあり、2万人以上の会員がいます。そんなアジアで初のConfigをシンガポールで開催できたことは最高の気分。アジアには、人類、世界にインパクトを与えるデザイナーが生まれてきた歴史が
Python Web UIフレームワークで作るデスクトップアプリ | gihyo.jp
寺田 学（@terapyon）です。2024年4月の「Python Monthly Topics」は、Python Web UIフレームワークの1つであるStreamlitを使ってWindowsやmacOSのデスクトップアプリを作る方法を解説します。 目的・モチベーション Pythonで自動化のスクリプトを作ったり、JupyterLabやColaboratoryでデータの可視化を行うことがあります。これらを作成者以外の多くの方に利用してもらう方法として、Webシステムやデスクトップアプリとして提供する方法が考えられます。 Webシステムの構築やデスクトップアプリの作成となると、技術的なハードルがあります。他には、時間的なコストに見合わないという状況もあり得ます。 Python Web UIフレームワークを使うことで、比較的少ないコードでWeb UIからスクリプトの実行や可視化をするアプリ
【爆速UI設計術】モダンなwebデザイン素材集 - Qiita
特徴 女性らしいイメージがやや多い 下記のような柔らかい印象のイラストが多いです。 【ガジェットストック】 ガジェット関連のものを使用したい場合は、下記を使用すると良いと思われます。 【アイコン系】 【human pictogram 2.0】 オリンピックで流行ったやつです。 本サイトでは、アタッチメントをつけたりすることでかなりカスタマイズ性が高いのが特徴です。 【EXPERIENCE JAPAN PICTOGRAMS】 特徴 海外から見た日本が表現されている これはシンプルにUIが凝ってたので紹介します。 和テイストを演出したい場合は、良さそうですね！ 【ICOOON MONO】 こちら色・サイズも変更可能です！ 【Icon-rainbow】 ICOOON MONOと異なり、こちらは、中が肉抜きされているのが特徴。 【IFN FREE ICONS】 このデザインはどのようなパターンにマ
Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供
Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供 Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebアプリケーションのユーザーインターフェイスを自動生成してくれるサービス「v0」のベータ公開を発表しました。 v0を使うと、人間のWebデザイナーに「こんな画面を作って」「ここの色は青にして」「ここのフォントは大きく」などと言葉で指定するの同じような感じで生成AIに指示をして、HTMLやCSSなどのコードを書くことなくWebアプリケーション画面の生成が可能です。 Introducing v0: generate UI from simple text prompts. 5,000 waitlist invites were sent today—with over 25
なぜ使われないダッシュボードが作られるかという話 - satoshihirose.log
はじめに 最近、ビジネスダッシュボードの設計・実装ガイドブックという書籍が出版された。今まであまりなかった視点から書かれたデータに関する本で面白く読んだ。 ビジネスダッシュボード 設計・実装ガイドブック 成果を生み出すデータと分析のデザイン 作者:トレジャーデータ,池田 俊介,藤井 温子,櫻井 将允,花岡 明翔泳社Amazon 作ったダッシュボードの利用が進まず、虚しさを覚えた経験がある人は多いと思う。どうしてそうなってしまうのか、自分の経験を元にまとめたいなと思ったのでまとめる。 なぜ使われないダッシュボードが作られるか なぜ作られたダッシュボードが使われないかと言うと、基本的にはそのダッシュボードがそんなに必要なものではないからだ（社内周知がうまくない、ツールの使い方がわからない人が多いなどの理由もあったりするがここでは無視する）。 必要のないダッシュボードが作られてしまう状況に関して
生成したキャラクターを再現できる「MasaCtrl」の使い方！AIが苦手な一貫性の問題を解決しよう【Stable Diffusion web UI】
をご紹介するという内容になっています。 これまでAIイラストというと一貫性の問題、つまり「同じキャラクターを生成するのが難しい」という課題がありました。例えばあるイラストを生成して好みのキャラクターが出たとしても、別の呪文を使うとそのキャラクターを正確に再現できなくなってしまう…ということですね。 ただ最近はこの問題に対する対処法がいくつか登場しており、一貫性が重要なアニメーションや漫画への応用がより実用的になりつつあります。そのような中でこの問題に対して有効な「MasaCtrl」という手法を使えるweb UI用の拡張機能が登場し、一貫性の問題を解決できそうだと先日各所で話題になっていたので私も試してみることにしました。 ここではこのMasaCtrlの概要や使い方について解説していきますね。
Flutter開発をマスターするための手引き 2022年版
はじめに 知っている人も少なくないが、FlutterはAndroid/iOS開発で最も注目を集めているフレームワークの１つである。モバイル開発に携わらないプログラマーでもFlutterが人気であることを見聞きしたことはあるのではないだろうか。 そこで、今回の記事ではFlutter開発をマスターするためのスキルや確認するべき情報源をまとめる。今回の記事を参考に、Flutterに興味を持ってくれる人が少しでも増えたら幸いである。 Flutter開発をマスターするのに必要なスキル Visual Studio Code FlutterはVisual Studio Codeで開発を進めるのが通例となっている。Flutterを学ぶ前に、必ずVisual Studio Codeをインストールし、基本的な使い方を十分にマスターしておこう。 Visual Studio Codeの基本的な使い方が十分にわから
商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 アイコンは小さいサイズでもくっきり見えるようにデザインされており、SVGだけでなく、Webフォントも揃っています。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 アイコンのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute IconはWebサイトやスマホアプリのUI用にシンプルにデザインされた高品質なアイコンです。24x24のグリッドで設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストローク、SVG、PNG、およびWebフォントがサポートされています。 ライセンスはApache License 2.0で、商用
【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita
概要 みなさんは、このドロップシャドウを見てどう思いますか？ ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね？ この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう！ ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。 例えばUIだと、 ベースとなる平面に、カードの平面が重なっていたり、 カード平面の上に画像やボタンといったオブジェクトが置かれています。 このように、UIやグラフィックデザインは２次元で作られているのではなく、 各平面・オブジェクトがZ軸上に重なることで作られています。
Windows：PowerAutomate Desktopをインストールして使ってみる
すげーのが出たぞーーー 誰よりも早く触って記事にしてみたかったので書きなぐってみた。 概要 PowerAutomate Desktopとは MS謹製のRPAツール。全てのRPA製品を過去にするかもしれないやべーやつ。 ついさっき(2021/03/02 23:00くらい)に発表されたばっかり。 インストールしてみる １. MSのサイトにアクセス インストーラをダウンロード インストーラを実行→[次へ]をクリック 同意して[インストール]をクリック インストール完了 起動→利用開始 [サインイン]をクリック メールアドレスを入力 アカウントを選択 完了 作成画面を確認してみる フロー名を入力 別窓が出てきた ...なんか色々項目多くない？ ざっくり確認してみた 変数 条件 ループ 遅延 システム ファイル フォルダー 圧縮 UI オートメーション UI オートメーション-Windows UI
Adobe XDの使い方が、これでよく分かる！WebページのUIを設計するワークフローに沿って学べる解説書
Adobe XDを使用してワイヤーフレーム、プロトタイプ、デザインカンプなど、WebページのUIを設計するワークフローに沿って学べる解説書を紹介します。 ワイヤーフレームを作るにあたっての準備から、実際の作り方、コンポーネント管理、画面遷移設計、プロトタイプ共有、デザインスペック共有など、Adobe XDの実践的な使い方を基礎からしっかり学べます。 Adobe XDの解説書を探していた人には、間違いのない決定版の一冊です！ 本書はWeb制作に携わるすべての人、ディレクター、デザイナー、コーダーにお勧めの本です。Adobe XDをまだ使用したことがない、すでに使用しているけどもっと使いこなしたい、そんな人にぴったりの一冊です。 発売されて間もないのに、Amazonで☆5レビューが早くもかなりついています。
Flutter StudioでアプリのUIをつくろう！｜TechRacho by BPS株式会社
こんにちは。ウイングドアの田上です🐈 最近弊社ではFlutter™の機運が高まっておりまして社内勉強会も行われています💪 FlutterではコードでUIを組まないといけないので、なかなかむずかしいな〜😰と思っていたところ、 Flutter Studioという便利なツールがあったのでご紹介させていただきます❗️ Flutter Studioとは Webブラウザ上でFlutterのUIを組むことができるツールです。 マウス操作でWidgetの配置を行ってレイアウトを作成することができます。 Flutter StudioのUI説明 Flutter Studio にアクセスをすると、まずこの画面が表示されます。 ①Widget一覧 Flutterで使えるWidgetが選択できます。 レイアウトを組む際は、ここからWidgetを選択して、シミュレータへとドラッグ&ドロップをします。 ②シミュレ
React Native をプロダクションで使ってわかった良かった点・悪かった点 - Qiita
こんにちは、株式会社ピケ CTO の中西（@nakanishy）です。 Dish というランチ検索アプリのフロントエンドとデザインを担当しています。 Dish では、React Native を採用して iOS アプリの開発をしています。iOS アプリを正式にリリースしたことがなく、また React Native も初めてだったので、苦戦する場面も多々ありましたが、良かった点もたくさんありました。 この記事では、Web 開発者の視点で React Native の良かった点と悪かった点を紹介したいと思います。 React Native の良かった点 高速に開発できる React Native は、ライブリロードとホットリロードをデフォルトでサポートしているので、Web 開発をしているかの如く高速に開発が進められました。保存すると即座に変更が反映されます。また、ホットリロードの場合、状態を維
Adobe XDでシンプルなワイヤーフレームを作ろう！便利なUIキットいろいろ
2018年7月2日 Webサイト制作, XD 新たなデザインツールとして浸透してきているAdobe XD。Webクリエイターボックスでも何度か紹介してきました。Adobe XDはデザインを作り込むだけではなく、その前段階であるワイヤーフレーム制作にもおすすめです。様々なUIキットと呼ばれるデザインテンプレートが配布されていますが、今回は凝ったデザインのものではない、シンプルなワイヤーフレーム向けのUIキットをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ シンプルなワイヤーフレーム制作向けのUIキット Wires jp Wires jpはAdobeが公開しているUIキット。これまでは後述する英語表記のもののみでしたが、この度日本語バージョンがリリースされました！ 日本のWebサイトでよく見かけるデザイン要素がつまっています。テキストも日本のものらしく変更されていますよ。 W
CSSで作る！押したくなるボタンデザイン100（Web用）
.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }
Webサイト制作がAIで実現!?デザイン、ABテスト実行ツール『FIREDROP』 | Ledge.ai
衝撃的なニュースが飛びこんできました。ほぼタイトルの通りですが、現在事前エントリー受付中の『FIREDROP』なるツールが色々ヤバイです。 テンプレートという概念を無くす。AIによる自動デザイン 以前にLedgeでも紹介したWix ADIやThe Gridの場合、デザインは（ほぼ）自動ながら、それでも事業形態やサイトタイプなど、いくつかのテーマ選択は人間が行う必要がありました。 が、今回発表された『FIREDROP』の場合、それすらAIにマルナーゲでOKらしいです。 テキストで書いたコンテンツをドサッと上げると、言語を形態素解析 ⇒ 文脈から意味を推測して『誰のどんなニーズに対しなにをどう伝えたいサイト』を作りたいのか？を一瞬で把握。 そこからいい感じにページ構成とレイアウトを整えて60秒で完成させてくれる。とかなんとか。 もし人間にそんなことできるデザイナーさんがいたら何としてでも採用し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「デイリーポータルZ」がサイト改善で入会数54.6％増！ ウェブ解析士マスターと語る裏話 | 【レポート】Web担当者Forumミーティング 2022 秋
Macaron | Visual component editor for Web development
Rustの活用でElectronよりも軽くて速いアプリフレームワーク「Tauri」が安定版に／まずはデスクトップから。モバイル・Webへの対応も進行中
文章を読むスピードが最大2倍。「読書アシスト」無償公開
