Weekly Digest
2026年6月8日〜6月14日に公開された記事から、生成AI×デザイン・Figma・デザインシステムなどの注目トピックを自動で厳選しています。毎週自動更新。
ペーパープロトで画面の構造を確認したら、次は何をするのか。教科書通りに進めばFigmaでワイヤーフレームを作るステップです。でも最近の現場では、そのワイヤーをAIが作るようになってきました。...
グッドパッチでは毎年4月から7月にかけて、新卒向けの研修を実施しています。 営業、PM、エンジニア、UI/UXデザインなど、さまざまな専門領域を横断して学び、その後は実際のプロジェクトに入りながら実務経験を積んでいきます […]...
Web Designing Web記者が、Webに携わる人向けにニュースをピックアップ。話題の本質を整理し、実務に役立つポイントをコンパクトにまとめました。 ブルーアール株式会社は5月28日、株式会社タジクと技術連携し、 […] 投稿 AI...
プロ向け制作プラットフォーム「Wix Studio」は、柔軟なレイアウト設計やCMS機能、AIを活用した制作支援などを備え、Web制作の新たな選択肢として注目を集めています。今回は、第一線で活躍するWebデザイナーの方々 […] 投稿 Wi...
Web Designing Web記者が、Webに携わる人向けにニュースをピックアップ。話題の本質を整理し、実務に役立つポイントをコンパクトにまとめました。 5月28日、Studio株式会社の米国子会社Studio Te […] 投稿 St...
プロ向け制作プラットフォーム「Wix Studio」は、柔軟なレイアウト設計やCMS機能、AIを活用した制作支援などを備え、Web制作の新たな選択肢として注目を集めています。今回は、第一線で活躍するWebデザイナーの方々 […] 投稿 遊び...
AIの台頭により、Webサイト制作や運用の現場では、AIを活用して業務効率を高めることが当たり前になりつつあります。こうした状況において、CMSを実装・運用する立場では、CMSとAIの関係をどのように捉え、活用していくべ […] 投稿 CM...
Chromeに表示したWebページや特定のセクションをコピペで、Figmaの編集可能なレイヤーに変換できる拡張機能を紹介します。 以前紹介したhtml.to.designと似ていますが、html.to.designはサブ […]...
今回は、要素数が多くレイアウトが複雑なWebサイトを Figma MCP（Model Context Protocol）を使って効率的、かつ綺麗なデータ構造で実装（生成）するためのベストプラクティスをまとめました。 ナレッジとして共有します...
はじめに SREホールディングス株式会社でエンジニアをしている加藤です。 以前「Figma MCPって本当にすごいの？」という記事で、Figma MCPをいろいろ触って検証してみました。しかし当時は課題も多く、「現場で扱うにはまだ難しいので...
「キーボードで操作できること」「状態が支援技術に伝わること」……。WCAG のようなアクセシビリティガイドラインは、達成基準というルール単位で整理されています。でも、いざ UI を実装するときに知りたいのは、「“今から作るこのコンポーネント...
今回は、Vueのコンポーネント設計で私が実際にやってしまった責務分離のミス4パターンと、その直し方を紹介します。 責務分離とは「親と子のコンポーネントが、それぞれ自分の仕事だけをする」ように書くことです。親は親の役割に、子は子の役割に集中さ...
イオンペットが運営する、ペットライフブランド「ペテモ」。ペッ ト用品販売や動物病院など、多角的なサービスを通じてペットと飼い主の心身の健康をサポートしています。 今回、2025年11月にリリースされたスマートフォンアプリ […]...
最近知った言葉の一つに「人間中心設計」があります。 これはアプリを作る際にペルソナから作る自分にはとても親和性の高い思考だと思い、深掘りすることにしました。 人間中心って何それ 人間中心設計とは Human Centered Design ...
遅延そのものよりもつらかったのは、その後の体験だった ― 旅行や出張で飛行機を利用していると、天候や機材トラブルなどによる遅延は避けられない。 先日、北海道から東京へ戻るANA国内線を利用した際、出発が2時間30分以上遅延した。結果として空...
プレーンなHTMLを使用して、モダンでレスポンシブ対応のWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 ポートフォリオやブログ、プロトタイプなどをさくっと作成したい時に便利で、リセ […]...
※本ページは、アフィリエイト広告を利用しています。 デザインで「3色配色」が人気の理由は、使用する色にベースカラー・サブカラー・アクセントカラーという明確な役割を担わせることで、色の関係性がコントロールしやすくなるからで […]...
ぱっと見、なんじゃこりゃ！ と思ったのですが、よく見ると絵文字をclass名としてしっかりとしたBEMメソッドで実装された、本番環境レベルで使えるCSSのフレームワークを紹介します。 完全なデザイントークンシステム、プリ […]...
魅力的なデザインを生み出すには、文字や要素をグリッドに整列させ、明確な視覚的階層を構築し、意図的に色を用いて、デザイン上のあらゆる選択において一貫性を保つことだ。...
