サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Twitterでこういう発言を見かけましてTailwindCSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、TailwindCSSを選んだ話を書きます。 はじめに 以前、TailwindCSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
第1章 コンテンツマーケティングとは？ コンテンツマーケティングはビジネスに大きなインパクトをもたらすマーケティング手法だ。得るはずの成長のチャンスを逃してしまわないようその手法を知ろう。
はじめに今回は、Cursorで業務フローをdraw.ioで可視化し、n8nのワークフローを作成するまでの流れを自動化するシステムの構築方法をご紹介します。 このシステムでは対話形式で要件を整理し、段階的にフロー図やn8nのワークフローを作成できます。 このシステムでは、精度高く、n8nのワークフローを構築してくれますが、ノードの細かな設定部分は人間が修正する必要はあります。 ただし、今後のLLMの精度向上に従って、よりn8nワークフロー作成精度の向上も期待できます。そのため、LLMで作成することを前提としたシステムを作成しておくことは非常に便利だと考えられます。 システムの概要このシステムは4つの段階でフロー図やn8nのワークフローを作成します。 対話形式でのヒアリング → 構造化された要件定義書を自動生成 要件定義書 → 中間設計書（DSL）を自動変換 中間設計書 →Draw.io形式
kiso.css - 日本のWebサイトのための「基礎」となるリセットCSS kiso.css は、日本のWebサイトのための「基礎」となるリセットCSSです。日本語に最適化しつつ、アクセシビリティやカスタマイズのし易さを重視しています。 tak-dcxi.github.io kiso.cssは、単なるスタイルのリセットを超えて「より良いデフォルト」を提供することを目指したリセットCSSです。その名が示すように、Webサイト構築の「基礎」として機能します。 有用なUAスタイルシートは活かしつつ、独自のスタイルも追加しているため、厳密には「リセットCSS」の定義から外れるかもしれません。しかし、類似のCSSが一般的に「リセットCSS」として紹介されている現状を踏まえ、検索性を考慮して本記事でもそのように呼称します。 kiso.cssはdestyle.cssやUA+を参考にしつつ、独自性も加え
ProductZine Day＆オンラインセミナーは、プロダクト開発にフォーカスし、最新情報をお届けしているWebメディア「ProductZine（プロダクトジン）」が主催する読者向けイベントです。現場の最前線で活躍されているゲストの方をお招きし、日々のプロダクト開発のヒントとなるような内容を、講演とディスカッションを通してお伝えしていきます。
本記事では、Vercel が提供するAI 駆動型UI 生成ツール「v0」の基本的な使い方と、生成したReact＋TailwindCSS コードを現場の開発プロジェクトに組み込む手順を解説します。プロンプト駆動型UI 開発の概念やメリット、実際のワークフロー、注意点を体系的にまとめ、業務での PoC や新規サービス開発に役立つ知見をお届けします。 はじめに 近年、SaaS および Web アプリケーション開発の現場では、迅速なUI/UX の構築や、分業体制におけるコミュニケーションコストの削減が大きな課題となっています。従来の開発フローでは、デザイナーとエンジニア間の反復的なやり取りや、UI の実装・修正に多くの工数がかかることが一般的でした。 こうした現場の課題を解決するため、Vercel が開発したAI 駆動型UI 生成ツール「v0（ブイゼロ）」が注目を集めています。v0
2014年から先端テクノロジーの研究を論文単位で記事にして紹介しているWebメディアのSeamless（シームレス）を運営し、執筆しています。 この1週間の気になる生成AI技術・研究をいくつかピックアップして解説する「生成AIウィークリー」（第91回）では、複数の写真に写る被写体を1枚の写真に統合させる画像生成AI「UNO」や、1枚の写真から音声に応じた話す人物映像を作成するトーキングヘッド生成AI「FantasyTalking」を取り上げます。 また、複雑で高品質なデザインでもSVG画像生成できるAI「OmniSVG」や、3Dモデルを意味のあるパーツに分解するAI「HoloPart」をご紹介します。 そして、生成AIウィークリーの中でも特に興味深いAI技術や研究にスポットライトを当てる「生成AIクローズアップ」では、大規模言語モデル（LLM）が人間の本質をどのように捉えているかを調査した
💡 MCPの始め方シリーズについて Claude などのAI を強化する「MCP（Model Context Protocol）」の導入方法と活用テクニックのシリーズ。今回は、Figma MCP の導入方法と活用例を解説します。デザイナーとエンジニアの連携が格段にスムーズになり、開発効率が向上するはずです。 シリーズ目次 MCPの概要と導入方法 Filesystem MCP Server：AIでローカルファイルを扱う YouTube MCPサーバー：動画の内容を取得 mcp-pandoc：AIでドキュメント形式を変換GitHub MCPサーバー：AIでリポジトリを管理 👉Figma MCP：デザインとコードを効率的に連携Slack MCPサーバー：チームコミュニケーションを強化 Firecrawl MCP：スクレイピングでウェブ情報を取得・分析Markdownify M
Warning: Trying to access array offset on int in /home/igial/presentnote.com/public_html/wp-content/plugins/secure-wordpress/res/inc/SwpaPlugin.php online 242 Warning: Trying to access array offset on int in /home/igial/presentnote.com/public_html/wp-content/plugins/secure-wordpress/res/inc/SwpaPlugin.php online 242 Warning: Trying to access array offset on int in /home/igial/presentnote.com/pub
こんにちは。この記事を読もうと開いてくださってありがとうございます。 タイトルからとっても強めのワードを使っていますが、これはあくまで「私史上最高だな！神だな！」と思うプロンプトを生み出す方法です。人によって差はあると思いますということはお断りしておきますね☺️。 私とChatGPTとの衝撃的な出会い2年前、新しく学んでいる言語のプログラムエラーにはまってしまい、試しにChatGPTに聞いたところおそらく自力であれば半日かかるかもしれないバグを秒で解決。iPhoneが登場した時以上に衝撃が走りました。 最近、プログラムばかり書いていて深～く自分の世界に潜っている気分ｗ。 エラーも見慣れたもので、これ半日はかかるかな～とか思ってchatGPTにとりあえず聞いてみたら秒で解決されて泣きそう😭😭 ほんとすごすぎる！！！ — mito@『15分でOKに！バナーデザインはかどり事典』発売中 (
ChatGPT（o1）で作ったHTML &Reactアプリをプレビューできるようになってたので色々（Webサイト、アプリ、ゲーム等）作ってみました。ChatGPTキャンバスでアプリをリアルタイムレンダリングする方法ChatGPTキャンバスで作ったHTML &ReactアプリをChatGPT内でプレビュー・リンクを共有できるようになりました。フロントエンドだけであれば、Webアプリのプロトタイプを爆速でリリースできます。 執筆時点から2週間以上前にリリースされた機能ですが、今の今まで気づきませんでした。 Canvas update: today we’re rolling out a few highly-requested updates to canvas inChatGPT. ✅Canvas now works withOpenAI o1—Select o1 from the
はじめに 2025年はAIエージェントの年です。注目されているAIエージェントの一つが『AIが自動で自分のPC画面を操作』するBrowser Useというツールです。 Browser Useの面白さ Browser Useを使うと、AIが自動で自身のPC画面を操作することであらかじめ決めた目的を達成をしてくれます。 簡単な指示を出すだけで、自動でAIが色々操作してくれるのはキャッチーで衝撃的ですよね。 例えば下記のように完全自動でAIが記事を検索して記事の情報を取得してくれます。 簡単な指示でAIが自分で考えて画面操作をしてくれるのは近未来感ありますよね。 しかし、現場でAIを使いこなすには「AIがすごい」のレベルではまだ足りません。 実際に触ってみて何ができるのか？逆に何が苦手なのか？という肌感覚を持つことが非常に重要です。 そこで本記事は、その肌感覚を養うために実際にBrowser U
AI エディター Cursor を試してみるAI エディター Cursor はGitHub Copilot と同様にコードの補完やチャットによるコードの生成をサポートしてくれます。Cursor は VS Code をフォークして作られており、既存の VS Code の拡張機能やキーバインドをそのまま利用することも特徴の 1 つです。 生成AI の台頭はプログラミングの世界に大きな変革をもたらしました。我々開発者はAI の助けを借りながらまるでペアプログラミングをしているかのようにコードを書くことができます。私自身も普段からGitHub Copilot を使ってコードを書いています。コードを書いている最中にAI がコードを補完してくれる体験は、素早いフィードバックを得られるため非常に効率的です。 コードを選択してテストコードやドキュメントを生成したり、コードのリファクタリングを行
これからUXデザイン(やその他のデザイン)をやりたいと思っている人、デザイン思考をやってみたがうまくいかなかった人、組織や経営にデザインを取り入れていきたい人、デザインが重要といわれ困惑する人、「誰もがデザイナーになれる」と言われ「その必要ある？」と思った人、もがき苦しむデザイナー、そのほか全てのデザイン関係者に向けて。 昨今、多くの組織で「デザイン思考」や「UXデザイン」の導入が試みられていますが、その多くは表面的な取り組みに終わってしまい、本当の役には立たない実態があります。 なぜでしょうか。 それは、デザインを「手法やプロセス」として捉えすぎているからです。本記事では「デザインの民主化」に焦点を当てながら、多くの人が誤解している「デザイン」と言う単語や、デザインの力について考えます。 この視点は、組織でデザインに関わる全ての人—デザイナーはもちろん、マネージャーやステークホルダーに
Cody とはなんぞや Cody は、VSCode や、JetBrains IDEs、Neovim、Eclipseなどのコードエディタの拡張機能として使えるコーディング補助AI ツールです。 他の生成AI コードツールと同様に、AI コード補完とAIチャットがあります。 なぜ Cody がおススメなのか Cody をおすすめする理由は、3 つです！ 抜群の機能性 ありえんコスパ オープンソース 一般的なコーディング補助AIとの違いを含めてまとめていきます。 💡 抜群の機能性 インストールが簡単 Cody は、普段使っているコードエディタに拡張機能をインストールするだけで導入が完了します。ブラウザを別途開いて何度もコピペしたり、Cursor のように新しいエディタを導入したりする必要はありません。 チャット機能 コードエディタ内に作成されたチャット欄で、AI とチャットできます。Cod
Webサイトのデザインやアプリデザインを考える際、どうデザインすべきか悩んでしまいがちなのが「UIUX」ではないでしょうか。「どう設計すれば良いUIUXになるのか分からない」「イメージはあるけどうまくデザインに落とし込めない」という方も少なくないでしょう。 そこで今回は、UIUXデザインやWebデザインの参考になるおすすめのサイトを39選紹介します。 ぜひ、自身の作りたいWebサイトやアプリデザインの参考にしてみてください。 なお、UIUXデザインに悩んだ際は「UX専門家の支援」を受けるのもおすすめです！ ニジボックスでは、UX改善への第一歩を踏み出せるサービス「BeginUX!」をご提供しています。 自社サイトやアプリのUIUXデザインに課題感をお持ちの方は、ぜひ気軽にご相談ください！ 「BeginUX!」サービスサイトUIUXデザインとは そもそも、「UIUXとは何
以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限りChrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス
Anthropic社のClaude発！AIアシスタントが「何でも繋がる」時代へ。新技術MCPが切り開く可能性 ※この記事は、Anthropicが発表したModel Context Protocolについて、エンジニアではない方にも分かりやすく解説する記事です。 Model Context Protocol (MCP) -AIとデータを「つなぐ」新しい標準規格今回は、AI業界で大きな注目を集めている新しい技術「Model Context Protocol（MCP）」について、できるだけ分かりやすく解説していきたいと思います。 目次そもそもなぜMCPが必要なの？みなさんは、ChatGPTやClaudeなどのAIアシスタントを使っていて、こんな経験はありませんか？ 「社内の資料を見ながら回答して欲しいのに...」 「SlackやGitHubの内容も含めて分析して欲しいけど...」 「データベー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
