デザイナーがMacアプリをリリースするまでに使ったツールと制作ログ｜アプリ本体、LP、背景画像、公開準備まで

先日、スクショと録画を整えてシェアできるMacアプリ「ScreenTune」をリリースしました。

去年末に「2025年にデザイナーがVibe Codingで作った、個人制作の記録」というnoteを投稿してからしばらくして、「AIで数は作れるようになってきたけれど、次は自分が本当に欲しいと思えるツールを作って、リリースまで持っていきたい」と思うようになりました。

本当は他のアプリも並行して開発していたのですが、「一定期間は1つに絞らないと何も終わらない…！」と感じ、およそ3か月ほど、個人で開発に使える時間を捻出してScreenTuneに集中して開発を進めていきました。

ScreenTuneを作りながら考えていたことは、「スクショと録画を整えてシェアできるMacアプリ「ScreenTune」をリリースしました」というnote記事にも書いています。

今回はもう少し実務寄りに、ScreenTuneを作るまでに実際に使っていたツールや、その使い分けをまとめます。

AIに任せたところ、一緒に詰めたところ、自分で決めたところ

ScreenTuneを作っていて面白かったのは、AIに任せるところと、自分で見続けるところの境界、またそのグラデーションが少しずつ自分の中で形成されていったことです。

ここでいう「AIに任せる」は、丸投げするというより、自分が毎回ゼロから調べたり判断したりしなくてもよい部分を、今のプロジェクトに合う形で整理・実装してもらう、という感覚です。

逆に、触ったときの気持ちよさや、プロダクトの印象に関わる部分は、AIの案を材料にしつつも、自分で見て判断するようにしていました。

🤖 AIにかなり任せたところ

ある程度ベストプラクティスがあるものは、かなりAIに任せました。

• 公開に必要な設定（SEO、OGP、ダウンロード導線など）

• 運用まわりの整備（クラッシュ検知、LP計測、メタ情報の設定など）

• 定型的なUI文言の下書き（確認メッセージ、設定項目の説明など）

• リリース前後の確認作業（配布前チェック、Changelogの下書きなど）

こういうものは、自分で細かくリサーチして考え込むよりも、AIに今の構成に合う形で調べてもらい、実装してもらうほうが進めやすかったです。

🤝 AIと一緒に詰めたところ

一方で、操作感や見せ方、体験はAIと一緒に何度も詰めました。

• 操作感の調整（スライダー、クロップUI、ズーム、カーソルの動きなど）

• アウトプットの見え方（背景を変えたときの印象、スクショや録画の見え方など）

• LPでの体験の見せ方（ファーストビューの動き、触れるUI、セクションの見せ方など）

• コピーの温度感（LPコピー、Changelog、X投稿文など）

ただ実装できているだけでは足りない部分です。自分で触って、違和感を見つけて、それを言葉にして、AIに渡して、また触る。ここはかなり繰り返しました。

👩‍💻 自分で決めたところ

逆に、AIに任せきりにしたくなかったのは、プロダクトの印象や意思に関わる部分です。

• ブランドの方向性（ロゴ、色、フォント、ビジュアルのトーンなど）

• プロダクトの見え方（ScreenTuneがどういうツールとして伝わるべきか）

• LPのトーンやストーリー

• 最後に自分の目で判断する部分（これはScreenTuneらしいか、使いたくなる見え方か）

AIに案を出してもらうことはできます。でも、最終的に「これはScreenTuneっぽいか」を判断するのは自分でした。

このnoteで書くこと

ここからは、ScreenTuneを作る中で実際に使っていたツールや、その使い分けをもう少し具体的にまとめています。

AI開発ツール、デザインツール、画像生成、LP公開、決済、計測、リリース確認など、個人でMacアプリを作って公開するまでに使ったものを、制作ログとして残したまとめになっています。

AI関連ツールは変化がかなり速く、1か月どころか1週間単位でも使い方が変わっていきます。なので今回は、現時点での制作ログとして、有料記事という形で少し限定的に公開してみることにしました。

🙆‍♀️ 含まれていること

• ScreenTune制作で使ったツールやサービスと、それぞれ何に使ったか

• AI開発支援ツールを、アプリ本体の開発でどう使い分けたか

• 実装前の整理、実装後レビュー、リリース前チェックなど、開発中に作ったSkillやスクリプトの活用例

• Claude Designを使った、コードベースでのデザインイテレーション

• LPを0から作り、公開まで持っていく流れ

• Midjourney / GPT Image 2 / Figmaなどを使ったビジュアル制作の大まかなツール使い分け

• AIに任せたところ、一緒に詰めたところ、自分で決めたところの切り分け

⚠️ 含まれていないこと

この記事は、コードの詳しい解説や、手順を追ったチュートリアルではありません。各ツールの使い方の説明やHow-toではなく、コードから距離があったデザイナーの私が、AIと一緒にひとつのプロダクトを作る中で、実際にどんなツールを使い、どこを任せて、どこを自分で判断していたかをまとめた制作ログです。

そのため、以下のような内容はあまり扱っていません。

• 各ツールの詳細な紹介

• 手順を追ったチュートリアル

• そのまま使える詳細なプロンプト集

• Skillやスクリプト、フォルダ構成の中身の公開

• 画像生成のプロンプトや手順の解説

• 開発費用やスケジュールの詳細な内訳

すでにAIを活用して個人プロダクトを作っている人や、デザイナーがAI開発ツールをどう使っているのか気になる人には、読んでもらいやすいと思います。

1. ScreenTune制作で使ったツール/サービス一覧

まず、ScreenTune開発で使っていたツールをざっくりまとめるとこんな感じです。