スタートアップのコーポレートサイト MVP を爆速で構築・運用するために、 Markdown AI をフル活用する記事です。
完成品がこちらとなります。
ARM3rd 株式会社 コーポレートサイト MVP（by Markdown AI）
自己紹介
こんにちは、アームサード 株式会社 CEO のへいきょと申します。
元々は SaaS や SNS, マッチングサイト、オウンドメディアなどあらゆる分野で新規事業を立ち上げてきたのですが、最終的に Web3 業界に辿り着きました。
PdM/PjMとして国内外で多くの Web3 プロダクトに従事し、CTO や VPoE も複数社で経験しました。
今年からアームサード株式会社を創業し、グローバルの L1/L2 チェーンやプロトコルに対して開発支援や事業開発支援を提供しています。
この記事はこんな人におすすめ
- リーンスタートアップ信者
- AI を実務に活用したい人
- ウェブサイト制作に時間を取られたくない人
- マークダウン記法が好きな人
Markdown AI とは
Markdown AI は、Markdown 記法と AI 機能を活用し、誰でも手軽に Web サイトを作成・公開できるツールです。
コーディング不要。サーバー設定やデプロイ作業も自動化されており、意識せずに使用することができます。
ウェブサイト制作のノーコードツールはたくさん存在しますが、中でも Markdown AI は徹底的に手間を省いており、コンテンツ制作に集中できます。
サイト制作における真のボトルネックはコーディングではなくコンテンツ
Studio や WIX のようなサイトビルダーが解決している課題は「コーディングの省略」（あるいは削減）です。
しかし、今まで数十社・数百以上のウェブサイトを制作した経験上、ウェブサイトを構築するときの本当のボトルネックはコンテンツ作成だと思います。
具体的には文言と画像の用意です。特に文言。
現に、Studio や WIX には数々のテンプレートが備え付けられており、あるいは、HTML や React, Vue.js など主要な言語・UI ライブラリで無数のテンプレートが公開されています。サイトとは First View や Features Section, CTA(Call To Action) などいくつかのセクションが構成されますが、テンプレートでは汎用的なセクション群が適切な順番で配置されています。
つまり、任意のテンプレートを選び、サイト内のセクションにコンテンツを差し替えていくだけで、一定の完成度のサイトが完成するはずなのです。
しかしこれらのツールを使って実際にサイトを完成・公開させることができるユーザーはごく一部ではないでしょうか。
なぜなら、サイトの本質はコンテンツだからです。
企業のミッションやサービス、強み、訴求点などが明確になっていなければ、コンテンツを用意することができません。
ここでの「明確」とはすなわち、「何も知らない第三者に対してわかりやすく伝えることができるくらい深く理解している」ということです。
例えば SaaS なら、プロダクトのヴィジョンや競合優位性、導入フローなどが明確になっている必要があります。
一番良くないのが、これらが不明瞭な状態でデザイナーやエンジニアにサイト制作を依頼することです。
（そしてよく目にすることでもあります。悲しいかな）
自分のプロダクトや会社について深く理解して、コンテンツを作成するのは高度な作業です。
あらゆる要素を言語化できないならその会社や事業が成功する可能性は低く、まだやることが残されています。
文字だけ MVP 構築の勧め
そこで僕がおすすめしているのが、 「まずマークダウンだけで HP を作る」ことです。
必要なセクションを考え、それぞれをマークダウンの文字だけで表現する。余裕があればこの段階でアイコンや画像を使用するのも良いでしょう。
そしてそれを公開する。
今までは Notion を推奨していたのですが、今は Markdown AI も有力な選択肢ではないかと思います。
実際に公開することで初めて気づくことや、浮き彫りになるものも多いです。なぜなら公開するには「完成させる」必要があるからです。
0%から 95%まで進める作業と、95%から 100%まで完成させる作業には同じかそれ以上の道のりがあります。
だからまずは最小要件・最短工数で公開することを目指しましょう。
MVP ローンチの心得
実際にMarkdown AIを活用したサイト制作に進みますが、その前に、MVP ローンチの心得をおさらいします。
（※我流です）
- 最速最小でリリースする
- エゴを捨てて、要件を最小化する
- リリースを刻む
- デザイナーやエンジニアをアサインするのは解像度の高い要求定義書があるときのみ
会社ウェブサイトを作る
では、具体的に Markdown AI を活用したコーポレートサイト制作を進めていきましょう。
与件整理
まず与件を整理します。
- 目的: 会社の概要や事業内容、信頼性を伝えること
- リリーススケジュール: 今日から始めて、明日に完成させて、今週中に公開する
- 機能要件:
- 静的なサイト
- ワンページ完結でシンプルなサイト
- お問い合わせフォームは外部リンクで OK
- ブログやプレスリリースなども外部リンクでOK
- i18n（多言語対応）機能は不要。必要であれば、日本語・英語それぞれでサイトを制作すれば OK
- ライト/ダークモード切り替え機能は不要
- 最速最小でリリースすること
参考事例をリサーチする
サイトを構成するセクションを決める
会社紹介サイトのようなウェブサイトは、「セクションの組み合わせ」として捉えるとわかりやすいです。
まず、セクションの候補を考えてみましょう。
スタートアップの会社紹介サイトとしては主に下記です。
- Header Navigation: 会社ロゴや CV ボタン、SNS リンクなどを設置
- First View（あるいは Hero Section など）: サイトを開いて最初に表示される箇所。一番上
- Services（あるいは Product, Solution など）: 事業内容やプロダクトの紹介
- Team: 会社のメンバー紹介
- Call To Action（CTA）: 資料請求や商談申し込みなどを促す箇所
- Contact Us: 連絡先
- Portfolio（あるいは Our Projects など）: 導入企業や取引先など、実績紹介
- Testimonials: 顧客からの反響やレビューの紹介
- Partners: パートナー企業の紹介
- FAQ: よくある質問とその回答
- News（あるいは Announce, Press Release など）: 会社のニュースを投稿する
- Company Overview: 会社の基本情報（代表者や登記場所、資本金、株主構成など）を記載
- Footer: コピーライトなどを設置
このうち、要らないものや、要件を最小化できるものを考えましょう。
大事なことは、不要なものを削ることです。最小構成で臨むくらいの気構えでいきましょう。
今回は下記で行きます。
- Header Navigation
- First View
- Solutions
- Contact Us
- Company Overview:
- Footer
各セクションの作成
そして、それぞれのセクションの構成要素を用意していきます。
コツとしては、マークダウンで、まずはラフに全体を書き上げることです。
全体を通しで作成した後に、それぞれのセクションの細かいブラッシュアップや調整を行いましょう。
具体的な項目としては、完成品を参考にしてください。
通常のLP制作と異なり、構成要素が制限されるので、かなり思い切って要素を最小化しています。
ARM3rd 株式会社 コーポレートサイト MVP（by Markdown AI）
初期公開後のネクストステップ
上記を公開したらイニシャルローンチとしては完了なのですが、ネクストステップも案内します。
内容を更新する
一度公開した後、一日頭を寝かせてから改めて内容を確認・修正してみます。
セクションを追加する
イニシャルローンチで見送ったセクションを追加しましょう。
イニシャルローンチを早く完了させるコツは、必須要素以外を後回しにすることです。
逆に言うと、イニシャルローンチ後には、セクションの追加やサイト内容に充実をのびのびと行うことができます。
中長期のネクストステップ: コーポレートサイトのリッチ化計画
事業が軌道に乗ったり、採用を拡大したいなどの任意のタイミングで、コーポレートサイトのリニューアルを行いましょう。
デザイナーやエンジニアをアサインして、リッチな会社サイト制作に移りましょう。
実は上記のMVPはそのまま下記に転用できます:
- デザイナーに共有する細かい要求定義書
- AIでサイトモックを構築するための最適なプロンプト
AIでサイトモック制作
デザイナー向けのサイトモック作成にも上記は役立ちます。
Markdown AIのマークダウンファイルをそのまま、v0やbolt.newのようなAIデザインツールにプロンプトとして入力するだけで、サイトモックを作成できます。
複数のツールでそれぞれ何回か試したり、カスタマイズしてみて、最もイメージに近いモックを用意しましょう。
APPENDIX: Notion Sites との比較
最近発表された Notion Sites も良い選択肢です。
有料プランで実際に使用しました。
独自ドメインを設定できることも良いです。
ただ、下記の点が懸念です。
- 強制的にダークモードになる: サイト訪問者のデバイスのダーク/ライトモード設定が反映されてしまい、強制的にダークモードになります
- 多機能すぎる: できることが多すぎるので、通常のマークダウン以上に凝ってしまいがちだと思います
- 不安定さ: まだローンチしたての新機能なので、不具合がちょくちょくありました。特にドメイン設定周りで急にサイトが停止するなど
- 料金が高い: 一番はこれで、高いです。独自ドメインを一つ追加するたびに料金が上がります。だったらStudioやVercelに課金した方が良いかなと
APPENDIX: リッチな会社HPが必要ではない状況も多い
必ずしもリッチなウェブサイトが必要とも限りません。むしろ不要なことであることの方が多いでしょう。
好例は光通信です。
光通信は時価総額1.5兆円の大企業ですが、そのHPは極めて質素であることが知られています。これは質実剛健な企業風土の象徴であり、むしろブランディングに効果的です。
https://www.hikari.co.jp/
また、メルコインなどの有望なスタートアップも、立ち上げ当初はスクラッチでウェブサイトを用意せず、Notionで済ませていました。
LayerXも日本で最も優秀なエンジニアが集まっているチームですが、いまだにシンプルなWordpressです。