爆速・低コスト・運用楽々！「らくらくサイト」でポートフォリオや技術ブログをGoogleスプレッドシート管理する新体験

# 【JAMstack】GoogleスプレッドシートがCMSに！？爆速ポートフォリオ/技術サイトをノーコードで構築できる「らくらくサイト」とは

エンジニアや技術に関わる皆さん、こんにちは！
日々の開発業務や技術研鑽、お疲れ様です。

ところで、こんな課題を感じたことはありませんか？

-   「自分の技術スタックや実績をまとめた**ポートフォリオサイト**が欲しいけど、イチから作る時間も気力もない…」
-   「技術ブログやドキュメントサイトを始めたいけど、WordPressのセットアップや運用は面倒。静的サイトジェネレーターもいいけど、記事の管理や非エンジニアとの共同編集が…」
-   「ちょっとした告知サイトやLPが必要だけど、デザインは苦手だし、サクッと作って公開したい…」
-   「頻繁に更新が必要な情報をWebサイトに載せたいけど、毎回デプロイするのは手間…」

もし一つでも「あるある！」と思ったら、今回ご紹介する「**らくらくサイト**」が、あなたのその悩みを解決する面白い選択肢になるかもしれません。

## 「らくらくサイト」とは？ ～ スプレッドシートをデータソースとするJAMstackなアプローチ

「らくらくサイト」は、なんと**Googleスプレッドシートに情報を入力するだけで、ウェブサイトを自動更新できるノーコードCMS**です。

![らくらくサイト ロゴ](https://rakuraku-site.prodouga.com/logo.png)
（画像は公式サイトより引用）

「え、スプレッドシートでサイト作るの？」と侮るなかれ。その裏側では、**JAMstack**（JavaScript, APIs, Markup）アーキテクチャに基づいたモダンな技術が採用されています。

簡単に言うと：
1.  **データ管理**: Googleスプレッドシート（使い慣れたUI！）
2.  **ビルド**: スプレッドシートのデータを元に静的HTMLファイルを生成
3.  **デプロイ**: 生成された静的ファイルをCDNエッジに配信

これにより、**高速表示、高セキュリティ、優れたスケーラビリティ**といった静的サイトの恩恵を受けつつ、コンテンツ管理は非常に手軽に行えるという、まさにいいとこ取りのソリューションなのです。

技術者視点で見ると、「データとプレゼンテーションの分離」「自動ビルド＆デプロイ」といったコンセプトが、身近なスプレッドシートで実現されている点がユニークで面白いポイントです。

[➡️ まずは簡単デモ体験！（無料）](https://rakuraku-site.prodouga.com/demo)

## 「らくらくサイト」の技術的特徴と開発者にとってのメリット

### 1. JAMstackアーキテクチャによるモダンなWebサイト
-   **高速表示**: 事前ビルドされた静的ファイルなので、サーバーサイドの処理待ちがなく爆速表示。
-   **セキュリティ向上**: 動的な処理系が少ないため、攻撃対象領域を大幅に削減。
-   **スケーラビリティ**: CDN配信により、突発的なアクセス増にも強い。
-   **開発体験の向上**: (カスタムプランやGitHub連携時) Gitベースのワークフローも可能。

### 2. データソースとしてのGoogleスプレッドシートの威力
-   **直感的なUI**: エンジニアでなくても誰でも簡単にデータ入力・編集が可能。
-   **リアルタイム共同編集**: チームでのコンテンツ作成・更新がスムーズ。
-   **バージョン管理**: スプレッドシートの変更履歴で簡易的なバージョン管理。
-   **API不要の手軽さ**: 複雑なCMS APIを叩く必要なく、データをWebに反映。

### 3. 静的サイト生成 (SSG)
-   シンプルで堅牢なサイト構造。
-   SEOにも有利（クローラーがコンテンツを解釈しやすい）。
-   CDNとの相性が抜群で、グローバル配信も容易。

### 4. 低コスト運用
-   サーバーレスに近いアーキテクチャのため、高価なサーバー維持費が不要。
-   トラフィックに応じた従量課金のリスクも低い。

### 5. 拡張性とカスタマイズ性 (プランによる)
-   **独自コード追加**: 基本プラン以上では、HTML/CSS/JavaScriptの独自コードを追加可能（サポート対象外）。
-   **GitHubリポジトリ提供**: 基本プラン以上では、サイトのソースコード（読み取り専用）が提供され、ローカルでの開発やカスタマイズのベースに。
-   **外部API連携**: プレミアム/カスタム開発プランでは、外部APIとの連携など、より高度な要件にも対応。

## 開発者・技術者向けの具体的な活用例

「らくらくサイト」は、特に以下のような用途で開発者の皆さんの時間と労力を大幅に削減できます。

-   **爆速ポートフォリオサイト構築**
    -   スキルセット、開発実績、GitHub/Qiita/Zennなどの活動リンク、連絡先などをスプレッドシートで一元管理。
    -   デザインテンプレートを選べば、あっという間にプロフェッショナルなポートフォリオが完成。
-   **技術ブログ / ドキュメントサイトの基盤として**
    -   記事タイトル、本文（Markdownライクな記述もスプレッドシートのセル内で工夫可能）、タグ、公開日などをスプレッドシートで管理。
    -   「らくらくサイト」側でこれを読み込み、ブログ一覧ページや記事詳細ページを静的に生成。
    -   (※) より本格的なブログ機能は、別途Google Blogger連携オプション（有料）も用意されています。
-   **勉強会 / イベント告知サイト**
    -   開催日時、場所、内容、登壇者情報、申込フォームへのリンクなど、更新頻度の高い情報をスプレッドシートから手軽に更新。
-   **個人開発プロジェクトのLP / 公式サイト**
    -   サービスの概要、特徴、料金プラン、デモなどを手軽に見栄え良く公開。
-   **社内ツール / APIの簡易ドキュメントサイト**
    -   エンドポイント、リクエスト/レスポンス形式、利用方法などをスプレッドシートにまとめ、チーム内で共有。

[➡️ 豊富なテンプレートを見てみる](https://rakuraku-site.prodouga.com/sample)

## 料金プランと開発者向け注目ポイント

契約期間の縛りなし！ **期間限定で初期費用50%OFFキャンペーン実施中**とのことです。(2024年5月時点、最新情報は公式サイトをご確認ください)

| プラン名             | 初期費用 (50%OFF時) | 月額費用  | Googleスプレッドシート連携数 | ページ数上限 | 独自コード追加 | GitHubリポジトリ提供 | おすすめ対象                                                               |
| :------------------- | :-------------------- | :-------- | :--------------------------- | :----------- | :------------- | :------------------- | :------------------------------------------------------------------------- |
| **おてがるプラン**   | ¥15,000               | ¥400      | 1シートまで                  | 5ページ      | 非対応         | 非対応               | 個人ポートフォリオ、超シンプルな告知サイト、まずはお試し                     |
| **基本プラン**       | ¥20,000               | ¥700      | 3シートまで                  | 15ページ     | **対応**       | **対応**             | カスタマイズしたい個人開発者、小規模な技術ブログ/ドキュメントサイト        |
| **サポート充実プラン** | ¥30,000               | ¥1,000    | 5シートまで                  | 30ページ     | **対応**       | **対応**             | PC操作が苦手な方との共同運用、電話サポートが必要な場合                       |
| **プレミアム/カスタム開発** | ¥50,000～             | ¥2,000～  | 10シート～ (応相談)          | 制限なし     | **要相談**     | **要相談**           | 外部API連携、独自機能開発、大規模サイト、フルオーダーメイド                |

-   **おてがるプラン**: とにかく手軽に始めたい、シンプルなサイトで十分という方に。
-   **基本プラン**: 独自コードの追加やGitHubリポジトリへのアクセスが可能になるため、技術者にとってはここからが本領発揮かもしれません。ちょっとしたカスタマイズで自分色を出したい場合に最適。
-   **プレミアム/カスタム開発プラン**: 「こんなことできる？」というアイデアを形にしたい場合に。外部APIとの連携など、より高度な要件にも対応可能です。

詳細は<a href="https://rakuraku-site.prodouga.com/#pricing" target="_blank" rel="noopener noreferrer">公式サイトの料金プランページ</a>をご確認ください。
「どのプランが良いか分からない…」という場合は、[無料相談](https://rakuraku-site.prodouga.com/contact)で気軽に相談してみるのがおすすめです。

## まとめ：開発者の「ちょっとしたサイト」を「驚くほど手軽」に

「らくらくサイト」は、
-   **「Webサイトは欲しいけど、作る時間や手間をかけたくない」**
-   **「非エンジニアにも更新を任せたい」**
-   **「モダンな技術スタックの恩恵は受けたいけど、複雑なことはしたくない」**
という、開発者なら一度は抱えるであろうジレンマに対する、非常にスマートな解決策の一つです。

Googleスプレッドシートという誰もが使えるツールをインターフェースに、JAMstackのパワーをバックエンドで活用するこのアプローチ。
あなたの次のポートフォリオ、技術ブログ、プロジェクトサイトの選択肢として、検討してみてはいかがでしょうか？

**公式サイトはこちら**
[➡️ らくらくサイト - Googleスプレッドシートで簡単サイト作成・自動更新CMS](https://rakuraku-site.prodouga.com/)

**詳細・お申込みはこちらから**
-   [おてがるプラン申込](https://rakuraku-site.prodouga.com/applicationform?plan=otegaru)
-   [基本プラン申込](https://rakuraku-site.prodouga.com/applicationform?plan=kihon)
-   [その他プラン・無料相談](https://rakuraku-site.prodouga.com/contact)

---
この記事が、皆さんの情報発信やプロジェクトの一助となれば幸いです。
ぜひ「らくらくサイト」を触ってみて、その手軽さと可能性を体験してみてください！

<a href="https://github.com/YushiYamamoto">
<img src="https://img.shields.io/badge/　GitHub-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub">
</a>

<a href="https://yushi.prodouga.com/" target="_blank" rel="noopener">
<img src="https://img.shields.io/badge/　ポートフォリオ-FF5500?style=for-the-badge&logo=react&logoColor=white" alt="ポートフォリオ">
</a>
  
<a href="https://qiita.com/YushiYamamoto" target="_blank" rel="noopener">
<img src="https://img.shields.io/badge/　Qiita-55C500?style=for-the-badge&logo=qiita&logoColor=white" alt="Qiita">
</a>

<a href="https://codepen.io/yamamotoyushi" target="_blank" rel="noopener">
<img src="https://img.shields.io/badge/　Codepen-000000?style=for-the-badge&logo=codepen&logoColor=white" alt="Codepen">
</a>
<br>
<a href="https://prodouga.com/" target="_blank" rel="noopener">
<img src="https://img.shields.io/badge/　株式会社プロドウガ-FF0000?style=for-the-badge&logo=firefox&logoColor=white" alt="株式会社プロドウガ">
</a>
<a href="https://rakuraku-site.prodouga.com/" target="_blank" rel="noopener">
<img src="https://img.shields.io/badge/　らくらくサイト-4285F4?style=for-the-badge&logo=rocket&logoColor=white" alt="らくらくサイト">
</a>