【Screenshot-to-Code】スクショを貼るとWebサイトを5秒でコピーしてくれる裏技AIを使ってみた | WEEL
【Screenshot-to-Code】スクショを貼るとWebサイトを5秒でコピーしてくれる裏技AIを使ってみた 2023 11/27 WEELメディア事業部LLMリサーチャーのゆうやです。 screenshot-to-codeというスクリーンショットを解析してHTML/Tailwind CSSに変換してくれるオープンソースアプリケーションが公開されました。 このアプリケーションは、以下の動画のようにスクリーンショットのUIをかなりの精度で再現してくれます。 画像の解析、UIの生成はGPT-4 VisionとDALL-E 3を使用しているため、超高性能なのは間違いなしです。 そんなscreenshot-to-codeは、公開から1週間も経っていないですが、GitHubのスター数は4,200を超えており、大注目されています。 今回は、screenshot-to-codeの概要や使ってみた感想
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
App.js | Mobile webapps made easy
Mobile webapps made easy. Download Get Started App.js is a lightweight JavaScript UI library for creating mobile webapps that behave like native apps, sacrificing neither performance nor polish.
選ばれるウェブデザインとは
東京ベイ潮見プリンスホテル ”水辺の宿場町”をデザインコンセプトとするアートホテル「東京ベイ潮見... 詳細を見る
Webカメラを使った視線プロット - ならば
ウェブサイトのユーザビリティテストの方法にはユーザの視線を可視化するものがある。gaze plotと呼ばれる方法はユーザの視線の軌跡を記録し、注視した部分に円を描画する。円内の番号は注視した順番を表し、円の大きさは注視時間の長さを表す。この結果から、ウェブサイトのどの部分がどの順番でどのくらい注目されるのかを知ることができる。 面白そうだったからウェブカメラとオープンソースの視線追跡ソフトで簡易なgaze plot環境を作って遊んだ。対象をウェブサイトに限らずに、いろいろ試した結果一覧。 はてなトップページ（はてな） Google Chromeテーマ選択画面（https://tools.google.com/chrome/intl/ja/themes/google.html） 英文（Eye movement in music readingの冒頭を真面目に読む） 楽譜（ラフマニノフ「ピアノ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TailwindCSSで、最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ
http://www.designwalker.com/2009/09/shopping-design.html