komori, masaaki

こもりまさあき。フリーランスで活動し始めて25年。これまで手がけたWeb制作関連書籍は執筆／監修含め多数。2025年秋よりFigma関連の解説動画、TypeScirptやReact、Tailwind CSSなどの初心者向け解説動画など販売中。Unsplashの全投稿者中、最も閲覧数の多い500人の中の1人でもあります。

[komori, masaaki @cipher]

@hiloki 後日公開を待つことにしますｗ

[komori, masaaki @cipher]

めっちゃ見ようと思って日付見たら、自分が某社でAI系の研修やってる最中でござった。

[Hiroki Tani / Figma @hiloki]

6月16日のお昼にFigma agentのデモなどをお見せします！実際どういうことができるのかのイメージをお伝えするので、ぜひご参加ください！

[komori, masaaki @cipher]

一回のスキルの呼び出しで、何か作り始めるまでの一連の処理を全部指定して連続して動いてくれるようにしてやった。捗る

[Hiroki Tani / Figma @hiloki]

6月16日のお昼にFigma agentのデモなどをお見せします！実際どういうことができるのかのイメージをお伝えするので、ぜひご参加ください！

[Gaji-Labo Inc. @gaji_labo]

RubyKaigi 2026 のビジュアルグランドデザインで目指したこと ― 「世界観を作る」プロダクト思考のデザイン ++ Gaji-Laboブログ
https://t.co/aidriLViDn

[SoftwareDesign @gihyosd]

6月1日からGitHub Copilotが従量課金制になり、「今までのプランのままではGitHub AIクレジットが足りず、十分に使えない」といった声をたびたびXで目にします。
編集部としては、弊誌6月号のGitHub Copilot特集の内容も実際に試してみてほしいのですが、多額の費用がかかるかもしれないことを考えると、積極的にお勧めできないのが残念です。

AIの開発・運用には膨大な計算リソースと電力が必要だが、それに比べてこれまでのAIサービスの利用料金は安すぎる。いずれは値上げされるだろう。――そのような指摘はすでに各方面からありました。とはいえ、現実にそうなると辛いものがありますね。他のAIコーディングツールに乗り換える動きもありますが、それで根本解決になるのかどうか……。

GitHub Copilotの料金体系変更についてはWeb記事（以下のURL参照）で補足したものの、「ユーザーは新しい料金体系のもとで、どう利用していくのが効率的か」というところまではフォローできていません。そのようなノウハウはこれから現場で試行錯誤されていくのでしょう。編集部もAIのコスト面に着目した記事を企画していく必要がありそうです。

前述のような金銭面の課題があるとはいえ、GitHub Copilotは、ITエンジニアが使い慣れたGitHubが提供しているものであり、多くの人が使っているVS Codeからも手軽に使えるということで、引き続き利用する方も多いのではないかと思っています（「普段使いのツールの延長線上の機能として使える」というのは、技術選定の大事な要素の一つなのではないかと）。とくに企業からは「GitHub Copilotは組織で導入しやすい」という声が多いと聞きます。

本誌6月号の特集は現時点のGitHub Copilotの全体像を把握できる内容になっています。他のAIコーディングツールとの比較資料としても役立てると思います。引き続き、本特集にご注目ください。

以下に、本特集の誌面の一部や、本特集の追録記事、特定の章の全記事を公開しています。購読を検討する際に、参考になさってください。

▼本特集のすべての章の冒頭の誌面
https://t.co/uxOCbH4VRT

▼本特集の追録記事
（誌面に盛り込めなかった直近の料金体系などの変更についてまとめています）
https://t.co/6DZXN5mWxR

▼第3章の全文無料公開
（Copilot cloud agentなどGitHubと親和性の高い機能の解説が読めます。GitHub Copilotが使えるのはエディタだけだけじゃない！）
https://t.co/I6mV6LRXI5

[komori, masaaki @cipher]

一発撮りでやってるのでサンプルが若干ショボい感あるのはご容赦ください。動画内では詳細な指示を与えてないので、AIさんの気分次第ですꉂ🤣𐤔

[komori, masaaki @cipher]

セミナー特典や動画講座の付録として配布している「create-mockup」スキルを拡張して、レイアウトパターンを複数出してそれを元に詳細を詰めてモックアップを作れる「create-muilt-mockup」スキルを作ったのでその紹介です。スキルは新講座の添付ファイルから配布開始予定。

https://t.co/NSc20lMFgS

[広野 萌 @hajipion]

【有言実行】
こちらDMでも数人からお声がけいただいたこともあり、人材紹介業の許認可を得て、シニアデザイナー〜CDOクラス限定の転職・採用支援をはじめました！

箱は会社ですが、すべて僕ひとりでやります。
「年収1,000万円以上」の求人のみ取り扱います。

AI時代にはどう考えてもハイクラス人材の採用が鍵を握っていますよね。
自分のプライドにかけて「絶対合う」と思う人だけを紹介します。

転職を考えているデザイナー諸氏も、
採用を考えている企業の皆さんも、
どちらも気軽に面談しましょう🫶

デザインリーダー限定の、静かな人材紹介。
https://t.co/j0eCsHnqaT

[komori, masaaki @cipher]

所要時間なんてゼロからやっても20分かからないかな…

[komori, masaaki @cipher]

で、ここからFigmaに持っていくもよし、DESIGN.md 再生成してもよし、TailwindのクラスとHTML（今回はAstro）の構造とかアクセシビリティのチェックかけてもいいし、完璧ですね

[komori, masaaki @cipher]

一切コード書いてないし、何ならプロンプトに出てくる選択肢選んだだけ。

[komori, masaaki @cipher]

レイアウトパターンを出すのにモノクロでプレースホルダーだとイメージ湧かない人もいると思うので、その時点で写真を入れたりサイトタイプで推奨カラーを選んでもらうことができるようにした。で、パターンミックスはもちろん、ひとつ選んで詳細化するのも細かく指定できるように変更。だいぶ良いｗ

[komori, masaaki @cipher]

問題は「create-mockup」同様に未公開（笑）

[komori, masaaki @cipher]

レイアウトパターンを出すのにモノクロでプレースホルダーだとイメージ湧かない人もいると思うので、その時点で写真を入れたりサイトタイプで推奨カラーを選んでもらうことができるようにした。で、パターンミックスはもちろん、ひとつ選んで詳細化するのも細かく指定できるように変更。だいぶ良いｗ

[komori, masaaki @cipher]

改良した。また後で試そう。

[komori, masaaki @cipher]

3パターン作らせて、そのままFigmaに持って行って、1つを取り出して詳細化モードに。

[komori, masaaki @cipher]

特に細かい指示は与えてないのでまあどうか？ってのはあるけど（笑）、詳細化に持って行くときにもう少し質問してくれるようにしようっと。

[komori, masaaki @cipher]

生成終わると、「Figmaに書き出す？」「どれか気に入ったものを深掘りする？」ってのが動画では出てきてるんだけど、「AのHeroとBのFeatures足して」みたいなことができるようにさらに拡張した。

[komori, masaaki @cipher]

よく画像生成AIで複数のLPのデザインを作れて便利〜とか見るんだけど、だったら「そのままコードにできた方がもっと楽じゃない？」と思ったので、こないだからモゾモゾ拡張してる「create-mockup」で複数のレイアウトパターンを作って比較できるものを作ってみた。

4分ちょっとの動画。無音です。