ライブ配信中 書籍『具体例と解決策で学ぶ Webアクセシビリティの教科書』の発売を記念し、著者のお二人にWebアクセシビリティ向上の取り組みの第一歩について解説いただきます。

明日夜に開催！ 書籍『具体例と解決策で学ぶ Webアクセシビリティの教科書』の発売を記念し、著者のお二人にWebアクセシビリティ向上の取り組みの第一歩について解説いただきます。 出演： ・伊原 力也 @magi1125 ・太田 良典 @bakera 2026年7月24日（金）21:00 - 22:00 オンライン開催 できることから始めるWebアクセシビリティ

🎥Webアクセシビリティ初心者におすすめ！ アクセシビリティについて学びたい制作者の方から、とても好評だった配信。 ポイントだけでも掴みたいという方、動画をぜひご覧ください。 #Webアクセシビリティの教科書# 👇視聴する

📝フォントラボ ひとりごこち Inc. 欧文フォント『DM Sans』 ・Google Fontsにおいて、現代のデジタルプロダクトやWebデザインの最前線で「絶対に外さない万能フォント」として不動の地位を築いているのが、この書体 ・イギリスの高名なフォントファウンドリ「Colophon Foundry」によってデザインされ、Googleの資金提供によってオープンソースとして公開された ・デザインの世界観において、DM Sans は「透明感、親しみやすさ、実直な先進性、アクセシビリティ」を演出 ・幾何学由来のポップさと、風通しの良いクリアな空間設計によって、インターフェースに「ユーザーを温かく迎え入れる、オープンで優しい体温」が宿る ・モダンなB2B/B2C SaaS、教育やヘルスケアアプリ、親しみやすさを最優先したいフィンテック、ミニマルで清潔感のあるライフスタイルブランドのWebサイトなどに調和する 和文・タイトルフォント『見出ゴMB31』 ・日本のフォントデザインの歴史、特に出版・広告・グラフィックデザインの領域において、半世紀以上にわたり「強い見出し」の絶対王者として君臨し続けている伝説的な太ゴシック体が、この書体 ・写植時代に誕生して以来、その圧倒的な存在感と完成度から、デジタル化した現代でも新聞のインサイド見出し、書籍の表紙、ポスター、映画のタイポグラフィ、そしてエディトリアルデザインの現場で熱狂的に使われ続けている ・デザインの世界観において、見出ゴMB31は「確固たる信頼感、ジャーナリズム、言葉の重み、男気、泥臭いまでの人間味」を演出 ・思想をアピールしたいグラフィック、あるいはクラフトマンシップや歴史の重みを無骨に伝えたいWebサイトのヒーローコピーにおいて、他の追随を許さない威力を発揮する 和文・ボディフォント『中ゴシックBBB』 ・「見出ゴMB31」が日本の“強い見出し”の絶対王者であるならば、同じモリサワの系譜において、“日本の長文用オールドスタイル・ゴシックの頂点”として半世紀以上デザイン界を支え続けているのが、この書体 ・写植時代に生まれ、デジタル化した現代でもなお、書籍の本文、文芸誌、教科書、製品の取扱説明書、そしてテレビ（特にNHKなどのドキュメンタリーやニュース）のテロップの標準として、日本の「言葉のインフラ」を担い続けている ・デザインの世界観において、中ゴシックBBBは「誠実さ、実直、知的、公共性、不変のスタンダード」を演出 ・過度なトレンドや流行の消費に流されたくないプロダクト。例えば、思想を深く語るWebメディア、学術・教育系のUI、信頼性が100%求められる医療・インフラ系アプリ、あるいはミニマルで誠実な日本のクラフト（工芸・生活道具）を扱うD2Cブランドなどにフィットする

3/24に開催した、GMOペパボさんとの共催イベント #pepabo_marimo# について、レポートを書いて頂きました！ またやりたいですね！！！ 【レポート】毬藻企画とGMOペパボでWebアクセシビリティのイベントを開催しました！ - Pepabo Tech Portal #pepabotechblog#

便利だけど知られていないGemini APIの機能 🖥️ 「この画面を見て、ここをクリックして」ができるAI。ブラウザ操作の自動化が変わります。 Geminiの「コンピュータ使用（Computer Use）」は、画面を見てマウスやキーボードを操作するエージェント機能です。UIテストやWeb操作タスクの自動化に新しい可能性を開きます。 📌 タイトル：コンピュータ使用（Computer Use） 🔗 URL： 🧩 概要 従来のUI自動化はDOM構造やセレクタに依存しており、UIが変わると壊れやすいのが難点でした。Computer Useは画面のスクリーンショットを「見て」理解し、クリックやタイプなどの操作を指示できるエージェント機能です。人間がブラウザを操作するのと同じように、視覚ベースでUIを操作できます。 🛠 使い方 スクリーンショットをGeminiに渡し、実行したいタスクを自然言語で指示します。Geminiが画面上のどこをクリック/入力すべきかを判断し、操作アクションを返します。それをブラウザ自動化ツール（Playwright等）と連携して実行する流れです。 🏗 本番システムへの組み込み方 ・E2Eテスト自動化：「ログインして商品をカートに入れて決済まで進めて」のような複雑なフローを自然言語で記述。UIの変更に強いテストに。 ・RPA的業務自動化：社内システムのフォーム入力やデータ転記を、画面を見ながら自動実行。APIがないレガシーシステムにも対応。 ・Web操作エージェント：「この比較サイトで最安値を調べて」のようなタスクを画面操作で完遂。 ・アクセシビリティ検証：画面を視覚的に解釈して、操作性の問題を検出するテストツールに。 💡 ユースケース 🧪 視覚ベースのE2Eテスト自動化 🤖 APIのないシステムのRPA的自動化 🌐 Webブラウジング・情報収集エージェント ♿ アクセシビリティの自動検証 ⚠️ 注意点 画面の解釈に基づくため、操作の正確性は100%ではありません。重要な操作（決済、削除等）には人間の確認ステップを挟むべきです。また、レイテンシが大きめなので、高速な連続操作には不向き。セキュリティ面でも、操作対象のシステムへのアクセス権限管理に注意が必要です。 ✨ 「APIがないからLLMで自動化できない」は過去の話。画面を見て操作するエージェントの世界を、まずは簡単なタスクから試してみてください。 #Gemini# #LLM#

便利だけど知られていないGemini APIの機能 🖥️ 「この画面を見て、ここをクリックして」ができるAI。ブラウザ操作の自動化が変わります。 Geminiの「コンピュータ使用（Computer Use）」は、画面を見てマウスやキーボードを操作するエージェント機能です。UIテストやWeb操作タスクの自動化に新しい可能性を開きます。 📌 タイトル：コンピュータ使用（Computer Use） 🔗 URL： 🧩 概要 従来のUI自動化はDOM構造やセレクタに依存しており、UIが変わると壊れやすいのが難点でした。Computer Useは画面のスクリーンショットを「見て」理解し、クリックやタイプなどの操作を指示できるエージェント機能です。人間がブラウザを操作するのと同じように、視覚ベースでUIを操作できます。 🛠 使い方 スクリーンショットをGeminiに渡し、実行したいタスクを自然言語で指示します。Geminiが画面上のどこをクリック/入力すべきかを判断し、操作アクションを返します。それをブラウザ自動化ツール（Playwright等）と連携して実行する流れです。 🏗 本番システムへの組み込み方 ・E2Eテスト自動化：「ログインして商品をカートに入れて決済まで進めて」のような複雑なフローを自然言語で記述。UIの変更に強いテストに。 ・RPA的業務自動化：社内システムのフォーム入力やデータ転記を、画面を見ながら自動実行。APIがないレガシーシステムにも対応。 ・Web操作エージェント：「この比較サイトで最安値を調べて」のようなタスクを画面操作で完遂。 ・アクセシビリティ検証：画面を視覚的に解釈して、操作性の問題を検出するテストツールに。 💡 ユースケース 🧪 視覚ベースのE2Eテスト自動化 🤖 APIのないシステムのRPA的自動化 🌐 Webブラウジング・情報収集エージェント ♿ アクセシビリティの自動検証 ⚠️ 注意点 画面の解釈に基づくため、操作の正確性は100%ではありません。重要な操作（決済、削除等）には人間の確認ステップを挟むべきです。また、レイテンシが大きめなので、高速な連続操作には不向き。セキュリティ面でも、操作対象のシステムへのアクセス権限管理に注意が必要です。 ✨ 「APIがないからLLMで自動化できない」は過去の話。画面を見て操作するエージェントの世界を、まずは簡単なタスクから試してみてください。 #Gemini# #LLM#

# Cursorの機能と実践的な使い方 🌐 「画面を見ながら直してほしい」を、AIエージェントがそのまま実行できます。CursorのBrowserツールは、エージェントにブラウザの操作権を渡し、E2Eテストからデザイン→コードまでを一気通貫でこなします。 🏷️ タイトル: ブラウザ操作 🔗 URL: 📘 概要 Browserツールは、CursorのエージェントがIDE内のブラウザを直接操作できるようにする機能です。URLの移動、クリック、フォーム入力、スクリーンショット取得、コンソールログやネットワーク通信の確認までをエージェント自身が行えます。視覚的な確認とコード修正を同じループの中で回せるのが特徴です。 ⚙️ 機能の説明 ブラウザはMCPサーバー拡張で制御される安全なWebビューとして動作し、エージェントは次のような操作ができます。 ・ナビゲーション: URLへ移動、リンク追跡、履歴の前後移動、リロード ・操作: クリック、ダブルクリック、右クリック、ホバー、フォーム入力と送信 ・視覚確認: スクリーンショットを画像として取得し、レイアウトやUIを目で確認 ・デバッグ: JavaScriptコンソールのログ・エラー、ネットワーク通信を参照 ログはファイルに書き出され、エージェントは関連する行だけを選んで読むため、出力が膨大でも効率的に扱えます。また開発サーバーの自動検出により、サーバーの二重起動を防ぎます。認証Cookieやlocalstorage、sessionStorage、IndexedDBは同一ワークスペース内のセッションをまたいで保持されるため、ログイン状態を維持したまま検証を続けられます。 🛠️ 実践的な使い方 デザインサイドバーを使うと、デザインとコーディングを同時に進められます。要素の配置やflex方向、整列、グリッド、幅・高さ・padding・margin、色やグラデーション、影、不透明度、角丸などをスライダーで視覚的に調整できます。意図どおりの見た目になったら `Apply` を押すと、エージェントが視覚的な変更を適切なコード変更へ翻訳します。複数要素を選択してホットリロードでまとめて反映することも可能です。実行の安全性は承認モードで制御でき、`手動承認`（推奨）、`許可リスト方式`、`自動実行`から選べます。 💡 ユースケース ・E2Eテスト: テストデータでフォームを埋め、エラーメッセージを検証し、スクリーンショットを撮ってビジュアルリグレッションを確認 ・デザイン→コード: Figmaやモックを取り込み、ピクセル単位でHTML/CSSへ変換 ・アクセシビリティ監査: コントラスト比、セマンティックHTML、ARIAラベル、キーボード操作などWCAG観点でチェック ⚠️ 注意点 オリジン許可リストは「ベストエフォートの保護」に過ぎず、許可ドメインからのリンク遷移やクライアントサイドのリダイレクトで許可外オリジンに到達する場合があります。ユーザー自身の手動ナビゲーションは許可リストの制限を回避します。信頼できないコードに対して `自動実行` を使うのは避け、許可リスト設定は定期的に見直してください。 #Cursor# #AIコーディング#