4,638 測定値

ゼロから SaaS まで - 10 日間で SaaS を構築して立ち上げます! 🚀

に Fernando Pessagno18m2023/06/08

長すぎる; 読むには

私は最近、個人的な #buildinpublic チャレンジに挑戦することに決め、わずか 10 日間で SaaS 製品を構築してリリースすることにしました。 Instagram と LinkedIn 用に最も使いやすいカルーセルメーカーを作成することにしました。すべては、技術的能力に関係なく、設計プロセスをよりシンプルにし、誰もが利用しやすいものにすることです。

featured image - ゼロから SaaS まで - 10 日間で SaaS を構築して立ち上げます! 🚀

私は最近、個人的な #buildinpublic チャレンジに挑戦することに決め、わずか 10 日間で SaaS 製品を構築してリリースすることにしました。ゼロからプロダクトを作るのは久しぶりだったので、今年は何か新しいものを作ることに力を入れたいと思いました。

まず最初に、なぜ私がこの挑戦をするのかを説明させてください。私の目標は、自分自身に責任を負わせることです。私は、「これを追加したらどうなるだろう?」とさらに多くの機能を構築し続ける傾向があります。または「それを追加したらどうなるでしょうか？」しかし今回は、その衝動に抵抗し、この時間制限を設けることで、シンプルでありながら機能的であることに集中したいと考えています。

以下から SaaS 製品を構築するプロセス全体を示します。

アイデア出し
開発、そして
発売

ただし、これは私にとって初めてのサブスクリプションベースの製品なので、アドバイスをしたり、自分が何をしているかを知っているふりをしたりするつもりはありません。その代わりに、皆さんが私の成功と失敗の両方から学べるように、開発プロセスと最終結果については透明性を持って説明します。

💡アイデア

それで、新しいプロジェクトはどのようなものになるのでしょうか？ Instagram と LinkedIn 用に最も使いやすいカルーセルメーカーを作成することにしました。

このプロジェクトのアイデアを思いついたのは、LinkedIn でカルーセル投稿がいかに人気があるかに気づいたからです。私はカルーセルの作成に取り組んできましたが、信じてください、カルーセルの設計にはかなりの時間がかかります。そこで、デザイナーではない人でも視覚的に魅力的な独自のカルーセルを簡単に作成できるものを作成してはどうだろうかと考えました。

ただし、デザインのオプションが多すぎてユーザーを圧倒したくありません。結局のところ、ソーシャルメディア上の投稿の寿命は非常に短いため、投稿を完成させるために多くの時間を費やす価値は必ずしもありません。私の目標は、ユーザーが複雑になりすぎずに、個人または会社のブランドを反映した目を引くデザインを作成できるように、十分なオプションを提供することです。

私がスタートアップのデザイナーとして働いていた頃、複数の責任を両立させていることによく気づきました。マーケティングデザインだけでなく、プロダクトデザインなどもやらなければいけません。それがスタートアップの人生です。やるべきことがたくさんあるため、コピーライティングを何度も繰り返した後、デザインの変更に時間を費やさなければならなかったときは特にイライラしました。私はデザイナーとして関わらずに、コピー担当者が自分たちでこうした変更を加えてくれればいいのにとよく思っていました。

だからこそ、私のカルーセル作成ツールは、個人ブランドを管理する一般の人、個人の創業者、インディーズハッカーだけでなく、デザインに費やす時間やリソースが限られている中小企業や新興企業にも役立つのではないかと考えています。すべては、技術的能力に関係なく、設計プロセスをよりシンプルにし、誰もが利用しやすいものにすることです。

私のアプローチがユーザーにアピールできるかどうかはわかりませんが、デザインテンプレート市場にはすでに大手企業が存在するのが事実です。目立つには十分な差別化が必要ですが、広範な聴衆を引きつけられないほど差別化する必要はありません。

そこで、このアイデアが実現するかどうかを確認するために、10 日間の実験を行っています。多少の荒削りな部分はあるだろうが、すべてはこのまま続けるべきかどうかを試すことだ。その製品が最初の 1 か月以内に収益を生み出さなければ、別のことを試す時期が来たと判断します。

🤔 問題

まず、テンプレートは扱いにくい場合があります。適切なフォントサイズ、調和のとれたカラーパレット、厳選された画像など、最初は素晴らしく見えるかもしれませんが、カスタマイズする段階になるとユーザーは苦労することがあります。

テキストを追加したり、フォントサイズを変更したり、移動したりすると、最終的なデザインが期待どおりにならない場合があります。それは驚くことではありません。あなたがデザイナーではない場合、使用するフォントのサイズ、色、マージン、パディングをどうやって知ることができるでしょうか?自由が多すぎると、厄介な結果につながる可能性があります。

また、これらのテンプレートの多くはユニークで派手であり、特定のブランドに適合させるのが難しい場合があり、見た目に一貫性がなく、ブランドイメージが混在する原因となります。もう 1 つの問題は、非常にユニークで人目を引くテンプレートが人気になりすぎて、ユーザーがそれをあちこちで目にすると、「テンプレート!」と叫んでしまうことです。そしてそれは通常、うまくいきません。

🤔 解決策

私がやりたいのは、ユーザーが余分な付加機能なしでブランドのフォント、色、ロゴを追加できるシンプルなデザインソリューションを提供することです。シンプルなデザインは普遍的であり、誰の所有物でもありませんが、ブランドの色やフォントを追加して独自のタッチを与えることで、独自のデザインにすることができます。これにより、全員と同じテンプレートを使用しているように見えるリスクが本質的に排除されます。それ以外。

⚠️ 潜在的な落とし穴

しかし、落とし穴があります。デザイナーではない人は自分のイメージに自信が持てず、シンプルなデザインでは十分ではないと考える可能性があります。

彼らは、そのツールが基本的すぎるとして却下し、他のものを選択し、派手なグラフィックやエフェクトを追加することでデザインスキルの不足を補おうとして、多ければ多いほど良いと信じてしまう可能性があります。ご存知のとおり、典型的な「ロゴを大きくする」という状況です。デザイン会社でクライアントと仕事をしたことがある方なら、私の言いたいことが完全に理解できるでしょう。

これらの問題、解決策、潜在的な落とし穴について説明したので、今度は開発プロセスに踏み込み、これらの課題にどのように真正面から取り組むかを見てみましょう。

📅 1日目

初日は基本的な構造を立ち上げて実行しました。カルーセルは機能しており、ユーザーがデザイン要素を直接操作する必要がないように、設定を意図的に各スライドの下に配置しました。何も移動したり選択したりすることはできませんが、これは他のデザインツールとは大きく異なります。

このアプローチがどのようにうまくいくかは完全にはわかりませんが、これはちょっとした賭けです。これは特に、デザインキャンバスの操作に慣れていないユーザーを対象としています。代わりに、設定は簡単に入力して調整できるフォームとして表示されます。

「イントロ」スライドには、サブタイトル、タイトル、説明、右にスワイプアイコン、絵文字を含めました。ここで、私がもう 1 つ挑戦していることがあります。絵文字の追加は、ユーザーがデザインを補完する画像を見つけるのに苦労することなく、カルーセルのテーマを伝える優れた方法になる可能性があります。

しかし、本当に興味深いのは、テキストを変更するとフォントサイズが自動的に調整されることです。テキストは必要なだけ追加でき、常にそれに合わせて調整されます。

これによりどれだけの時間と労力が節約できるか想像してみてください。テキストを編集するたびにフォントサイズを手動で調整したり要素を再配置したりする必要はもうありません。これは真のゲームチェンジャーとなる可能性があり、ユーザーはデザインの詳細に囚われることなく、魅力的なコンテンツの作成に集中できるようになります。

タイトルに色を追加したり斜体にしたりできるテキスト編集オプションのセットも含まれています。非常に基本的なものですが、今のところはこれで十分です。

通常のスライドに関しては、フォントサイズをカルーセル全体で一貫した状態に保つようにしています。フォントサイズを常に変更すると、デザインが台無しになり、プロフェッショナルらしくないものになる可能性があるためです。将来的には、一般的なサイズセレクターを追加することで、ユーザーにもう少し制御性と柔軟性を提供したいと考えています。

最後に、1 日目の締めくくりとして、各カルーセルスライドを別のページに含む PDF ファイルを生成するダウンロードボタンを追加しました。これは現在、LinkedIn がドキュメントとしてアップロードする際にカルーセル投稿を作成するために必要な形式です。

これは世界で最も美しいものではないかもしれませんが、カルーセルメーカーは機能すると公式に言えます。

Instagram の場合は、代わりに一連の画像をエクスポートする必要がありますが、それは今のところ待つ必要があります。

📅 #02日目

まだ 2 日目ですが、UI をより視覚的に魅力的なものにするために改良を加えずにはいられませんでした。普段は MVP の見た目を優先することはありませんが、デザインツールなので、少なくともある程度はまともな見た目でなければならないと考えました。

ほかに何かあたらしいことは？法外な額の 🕒 を費やした結果、絵文字セレクターには選択できる完全なリストが表示され、スライドにソーシャルメディアバッジを追加しました。ユーザーはこれを個人ブランディングの一環として後でカスタマイズできるようになります。

さらに、ユーザーが必要に応じてスライドを削除、並べ替え、または新しいスライドを追加できるボタンを実装しました。そして、ここにちょっとしたボーナスがあります。スライドカウンターは自動的にカウントされるため、ユーザーはスライドカウンターを追跡することを心配する必要はありません。

また、スライドごとに要素のオンとオフを切り替える機能も追加し、カルーセルのコンテンツをより詳細に制御できるようにしました。そして、その日は終わったと思ったら、イントロとアウトロのスライドの自動サイズ変更スクリプトを修正するために戻らなければなりませんでした。現在では、どの要素が表示または非表示になっているかが考慮され、それに応じてフォントサイズがテキストに（ほぼ）完全にフィットするように調整されます。

これで、私の 10 日間の #buildinpublic チャレンジの 2 日目が終わります。これまでの進歩についてはかなり良い感触を持っています!

📅 #03日目

3 日目は、ユーザーがカルーセルの全体的な設定を管理できるようにするサイドバーの実装に焦点を当てました。これが私が目指す主なデザインです。一般設定用の左側のバーでありながら、ユーザーがカルーセル内の各スライドをカスタマイズできるようにします。

サイドメニューの最初のオプションはカルーセルタイプです。 LinkedIn を選択した場合は、プラットフォーム上でカルーセルを作成するために必要な形式である PDF をダウンロードします。 Instagram を選択すると、代わりに一連の JPG がダウンロードされます。

もう 1 つの便利な機能は、ユーザーがイントロスライドとアウトロスライド、あるいはその両方を必要とするかどうかを決定できる機能です。場合によっては、前置きなしですぐに行動に移したい場合もあります。

カラーパレットについては、事前に選択された色の洗練されたコレクションからユーザーが非常に簡単に選択できるようにしたいと考えました。現時点では 4 つしかありませんが、さらに追加する予定です。もちろん、将来的にはユーザーがカスタムパレットを作成できるようにします。

イントロとアウトロのスライドのテキストの自動サイズ変更機能は非常に優れていますが、前にも述べたように、フォントサイズが一定であれば通常のスライドの方が見栄えが良く、読みやすくなります。そのため、全体のサイズと配置の選択を確実に制御できるようにするために、テキストサイズに小、中、大のオプションを導入しました。

フォントに関しても、私は色と同じ原則を適用しています。つまり、何が似合うかについての推測を排除する、厳選されたフォントの組み合わせを提供しています。

今後のアップデートでさらにフォントのオプションを追加する予定です。ただし、このアプローチがすべての人にとって、特に Google Fonts ライブラリ以外のフォントを使用しているブランドにとってはうまくいかない可能性があることは承知しています。

見た目をすっきりさせたい場合は、スライドカウンターを無効にすることもできます。

ブランド化の場合、「個人」モードには、コンテンツ作成者、思想的リーダー、または通常の LinkedIn および Instagram ユーザーを対象とした、顔写真、名前、またはソーシャルメディアのハンドル名、および Web サイトのオプションがあります。企業向けには、ロゴや Web サイトを表示する「企業モード」があります。

これまでの進歩に本当に満足しています。ようやく本物の製品のように見え始めましたが、今日はまだ磨きとバグ修正が必要です。

📅 4日目

4 日目はほとんどをセーブ/ロード機能の開発に費やしました。基本的に、ユーザーはカルーセルを一度デザインし、すべての一般設定をテンプレートとして保存し、後でそれをロードして貴重な時間を節約できます。

現時点での実装は非常に簡単で、JSON ファイルをローカルに保存するだけです。しかし、この MVP 段階のほとんどの機能と同様に、これで仕事は完了します。

Instagram ストーリー専用の新しいカルーセルタイプオプションも追加しました。人気の選択肢になるかどうかはよくわかりませんが、ユーザーは Instagram ストーリーを選択し、適切なサイズのシリーズ画像をダウンロードして、ストーリーとして直接アップロードできるようになりました。 Instagram ではストーリーの表示中にプロフィール写真と名前のオーバーレイがすでに表示されているため、このオプションではブランドが非表示になります。

この日の最も重要なアップデートは、「背景デザインオプション」機能です。この機能の目的は、カルーセルをスクロールしているときでもシームレスに見えるように、微妙な背景デザイン要素を追加することです。

これらのカルーセルを本当にクールにしているのはシームレスな効果だと思います。カルーセルは、視覚的に途切れることなくスムーズにスクロールする 1 つの完全な画像のようになります。

ただし、場違いに見えることなく、同時にどのブランドスタイルにもマッチする見栄えの良いデザインオプションを提供したいので、これは少しバランスを取る必要があります。

今日は 4 つのオプションに取り組む時間しかありませんでした。 CSS で色を変更できる HTML 要素の使用に限定されているため、これは簡単な作業ではありません。しかし、私はさらにいくつかのデザインの選択肢を思いつくことができると確信しています。

チャレンジ 4 日目はこれで終わりです。残り 6 日です。

📅 #05日目

5日目は、いつもより少し刺激が足りませんでした。私はほとんどの時間を既存の機能の磨き上げに費やしました。

まず、独自のカスタムカラーパレットを作成するオプションを含む、さらにカラーパレットを追加しました。また、カラー機能と同様に、ユーザーがフォントの組み合わせをカスタマイズしやすくしました。カスタムフォントの組み合わせのチェックボックスをオンにするか、希望する場合は 1 つのフォントのみを使用することを選択できます。

また、ばらばらに見えたり、場違いに見えたりすることなく、あらゆるブランドスタイルを補完できるように、より繊細なデザインの背景効果も追加しました。

もう 1 つのアップデートは「ランダム化」ボタンです。ページが読み込まれるたびにカルーセルはすでにランダムなオプションで開始されますが、「ランダム化」ボタンを使用すると、ユーザーは好みの組み合わせが見つかるまでランダムなオプションを選択できます。ちょっとした追加ですが、とても便利になりますよ！

最後に、「スライドの種類」オプション (テキスト、テキスト + 画像、または画像のみ) を追加しました。私のターゲット読者 (非デザイナー) はすべてをテキストとして保持することを好む可能性がありますが、それでもカルーセルに画像を追加したいユーザーにオプションを提供したいと考えました。

5 日目はこれでほぼ終わりです。この時点では、ツールは機能しており、ほぼそのまま起動できました。しかし、実際に今日から作業を始めた非常にエキサイティングなものがあるのですが、公開する前にある程度仕上げておきたいと思っています。

📅 #06日目

この #buildinpublic 個人チャレンジの 6 日目とカルーセルメーカーはほぼ完了しました。とても誇らしく思いますが、次に来るのは本当に素晴らしいことです。

私は、他の製品であるresumemaker.onlineを構築した経験から多くのことを学びました。これは履歴書をデザインするためのツールですが、内容についてのサポートを提供することが、デザインのサポートと同じくらい、あるいはそれ以上に重要であることに気づくまでにしばらく時間がかかりました。

そこで、カルーセルメーカーにAI コンテンツジェネレーターを追加して、これがここでも当てはまるかどうかを確認したいと思います。はい、私は AI の誇大宣伝列車に飛び乗ります!

その仕組みは次のとおりです。スライドの数を設定し、トピックを選択し、AI にカルーセル用の魅力的なコンテンツを作成させます。ユーザーは必要に応じて編集したりカスタマイズしたりでき、適切な絵文字も選択できます。

この機能により、他のカルーセルメーカーと製品を差別化できると思います。デザインだけでなく、コンテンツ作成にも役立ちます。それがどうなるか、そしてユーザーがそれにどう反応するかを見るのが楽しみです。

📅 #07日目

7 日目が終わりましたが、まだ重要な側面が 1 つ欠けています。それは収益化の方法です。これは私にとって初めてのサブスクリプションベースの製品なので、どのようにすればよいのか少しわかりませんが、私が考えていることは次のとおりです。

ほとんどの機能は引き続き無料ですが、お気づきかもしれませんが、スライドには透かしを入れています。ユーザーは透かしのないカルーセルを無料でダウンロードできますが、そのためにはソーシャルメディアでリンクを共有する必要があります。また、ユーザーに私のような個人創業者をサポートし、ソーシャルメディアで情報を広めるよう促すメッセージも追加しました。より多くの人がこのツールを使用できるようになれば幸いです。

しかし、ペイウォールの向こう側にある機能がまだいくつかあり、それを「Time Saver Pro Plan」として販売する予定です。私はデザインを売りにしているわけではありません。私は利便性、つまり何かをより速く行う方法を販売しています。 TIMEを販売しています。価格については、$9.95 /m から始めて、どうなるか見ていきます。

計画には以下が含まれます:

透かしなし
無制限のダウンロード
最大 10 枚のスライドを備えたカルーセル
独自のカスタムプリセットをロードする機能
コンテンツ生成のための AI 機能

これで完了です。ユーザーは、カルーセルメーカーを共有すれば、ウォーターマークなしで無料でカルーセルメーカーを使用できますが、AI コンテンツジェネレーターにアクセスしたり、カスタムプリセットを読み込んだりする機能はありません。無料ダウンロードの一定の制限に達すると、最初から開始する必要があり、最大 6 枚のスライドを含むカルーセルしか作成できません。

全体として、無料オプションは本当に寛大だと思います。また、AI コンテンツジェネレーターの価値を示すために、ユーザーは、起業家精神、ヨガ、UX デザインなどのさまざまなトピックにわたって利用可能な、事前に生成された結果を使用して AI 機能をテストできます。

最後に、支払いプロセスのセットアップを簡単にしてくれたOutsetaに感謝の意を表したいと思います。

📅 #08日目

8 日目は順調に進み、簡単なロゴとランディングページを作成する以外にやるべきことはあまりありません。

ロゴについては、あまり時間をかけたくなかったので、いくつかのオプションから始めましたが、最終的には Instagram のカルーセルアイコンに非常に似たものになってしまいました。それはうまくいくかもしれませんが、私のデザイナーとしてのプライドがそれを無視することができなかったので、それらを破棄する必要がありました。

次に、カルーセルの形状を最も単純な形に蒸留するさまざまな方法を試してみました。「AI」の頭文字と、魔法や人工知能を連想させるアイコンも加えてみました。

私はこれらのバージョンの方がずっと好きになり、それらに多くの時間を無駄にしていると感じ始めました。デザインを決めようとしていたときに、間違った方法でエクスポートしてしまい、ロゴは枠線なしのほうがずっと良く見えることがわかりました。見た目はより上品になりましたが、それでも同じ意味を伝えました。

それで、最終的にはその結果に非常に満足することができました。これはほとんどが偶然であり、スキルによるものではありませんでした。それはまだ重要ですよね？

そして、名前の公開については、AI 機能の驚きを台無しにしたくなかったので秘密にしていました…しかし、さっそく、製品の名前はaiCarouselsです。

ランディングページも完成しました。

シンプルにすることが私の目標でしたが、視覚的に面白くするために、ユーザーがスクロールするにつれてカルーセルのサンプルを左から右に移動する小さな JavaScript スクリプトを追加しました。また、機能セクションではアイコンをデザインする代わりに絵文字を使用し、カルーセルメーカーの背後にあるシンプルさの哲学に忠実でした。

すべての設定が完了したので、起動の準備をします。一般にゲートが開く前にまだ試してみたいことがいくつかありますが、カルーセルメーカーをみんなと共有するのが待ちきれません。

自分でランディングページを確認したい場合は、 www.aicarousels.comにアクセスしてください。

📅 #09日目

9日目になり、いよいよ打ち上げです！以前、アイデアの段階から開発プロセスまでをカバーしたいと述べましたが、現在は立ち上げ段階に入っています。

この投稿では私が準備したものを共有し、次の投稿では発売結果を共有し、人々が実際に製品を気に入ったかどうかを確認する予定です。

正直、失敗する可能性が高いです！テンプレート市場の競争は熾烈を極めていますが、それが 1 つのプロジェクトにあまり時間を費やさないことの利点なのです…

半年、あるいは丸一年かけて何かに取り組んだ結果、人々から「おい、あなたの製品はゴミだ」と言われることを想像してみてください。それは少し傷つくでしょうし、これほど多くの時間と労力を費やしてきたのであれば、それを個人的に受け止めることは困難です。それが自分の一部であるように感じ始めます。

ただし、プロジェクトに数週間だけ取り組む場合 (10 日では少し短いかもしれません)、より多くの時間を費やす価値があるかどうかをテストして確認できます。たとえ成功しなかったとしても、次のプロジェクトに適用するための貴重な教訓を得られたと考えると、気分が良くなります。

Product Hunt (知らない人のために説明すると、新しいテクノロジー製品を発見するためのトップサイトです) での発売に関しては、「近日公開」ページをセットアップしました。現在 23 名の登録者がおり、ライブ開始時に通知が届くので投票できます。

また、太平洋時間の午前 12 時に公開される製品ページのセットアップにも時間を費やしました。詳細な説明を書き、議論を巻き起こすために非常に重要な最初のコメントを準備し、Product Hunt ユーザー向けに 50% の割引も追加しました。

画像を作るときは、少し愚かな気分になりました。ページの派手な画像をデザインするのに苦労しました。そこで、製品そのものを使って作れるのではないかと思いつきました。結局のところ、製品をアピールするこれ以上の方法はないでしょうか?そこで、最終的に 3 つの異なるスタイルで 9 枚の画像を作成し、それぞれが製品の機能を垣間見ることができました。

あとはページが公開されるのを待つだけです。そうなった場合は、次のリンクにアクセスしてサポートを示すことができます: https://www.producthunt.com/posts/aicarousels-com 。あなたのサポートは私にとって大きな意味を持つでしょう！

物事がどうなったとしても、久しぶりにゼロから何かを構築するのはとても楽しかったです。また、私生活で起こっているあまり楽しくない出来事から気を紛らわせるのにも最適でした。それでは、打ち上げがどうなるか見てみましょう。結果は明日お知らせします。

📅 10日目 — ミッション完了！

10 日間で SaaS を構築して立ち上げるという、この猛烈なチャレンジの最終日。 aiCarousels.comは現在、一般公開されています。Product Hunt の開始結果と最終的な考えを共有したいと思います。

正直に言うと、適切なテストを行わずに製品を発売することは、暗闇の中を飛躍するようなものでした。何人かの友人に見せましたが、友人というものは、いつもあなたを気分良くさせたいと思っています。ですから、たとえ彼らが気に入ったと言いましたが、私は彼らのフィードバックを割り引いて受け止めました。人々がそれを好むかどうかは本当にわかりませんでした。不安をよそに、打ち上げは驚くほどうまくいきました！

aiCarousels は 154 件の賛成票、64 件のコメント、7 件の 5/5 の優れたレビューを獲得して 9 位を確保しました。