はじめに
弊社では技術ブログ「Fun Notes」を立ち上げました。しかし、ブログ投稿のためにローカル環境でビルドしてコミットするフローだと、エンジニア以外のメンバーにはハードルが高く、結局投稿が続かないという問題が目に見えていました。
そこで、普段全員が使っているSlackから直接ブログを投稿できる仕組みを構築しました。
従来のブログ投稿フロー
一般的な静的サイトジェネレータを使ったブログの投稿フローは以下のようになります。
- ローカルでMarkdownファイルを作成
- ビルドコマンドを実行して動作確認
- gitでコミット・プッシュ
- PRを作成してレビュー
- マージ後にCI/CDでデプロイ
エンジニアにとっては当たり前の作業ですが、非エンジニアにとってはgitの操作やMarkdownの記法だけでもハードルになります。
Slack Workflowを使った新しいフロー
今回構築したフローはこうです。
- Slackでワークフローフォームを開く
- タイトル・タグ・本文などを入力して送信
- チャンネルに投稿内容が表示される
- AIアシスタントが内容をMarkdownに整形してGitHubにコミット・プッシュ
- GitHub ActionsがMarkdownからHTMLをビルドしてNetlifyにデプロイ
Slackのフォームに入力するだけで記事が公開されるため、gitやターミナルに触れる必要が一切ありません。
技術構成
ブログ基盤
- 静的HTML + Tailwind CSS（既存の会社HPと同じ技術スタック）
- Markdownをビルドスクリプト（Node.js + marked + gray-matter）でHTMLに変換
- 同一ドメインのサブディレクトリ（/blog/）で配信し、SEO効果を本体サイトに還元
CI/CDパイプライン
GitHub Actionsのワークフローにブログビルドステップを追加しました。
mainブランチにマージされると、npm ciで依存関係をインストールし、npm run build:blogでMarkdownからHTMLを生成、その後Netlify CLIでデプロイされます。
ビルド生成物はgitignoreしているため、リポジトリにはMarkdownソースだけが管理されます。
Slack Workflow
Slackのワークフロービルダーで投稿フォームを作成しました。フォームには記事タイトル、スラッグ（URL）、タグ、概要、本文、サムネイル画像のフィールドがあります。送信するとチャンネルにテンプレート形式で投稿され、AIアシスタントへの指示のベースになります。
設計で意識したポイント
同一ドメインにこだわった理由
ブログをnoteやZennなどの外部サービスに書くという選択肢もありました。しかし、外部サービスのドメインにコンテンツを置いても、自社ドメインのSEO評価は上がりません。codist.fun/blog/という同一ドメイン配下に置くことで、ブログ記事のSEO効果が会社HPに直接還元されます。
Markdownを選んだ理由
ブログの本文はParagraph（プレーンテキスト）で入力してもらい、見出しやリストなどのMarkdown記法は最低限で済むようにしています。整形が必要な場合はAIアシスタントが補完するため、投稿者は内容に集中できます。
運用の継続性を最優先にした
どんなに優れた仕組みでも、使われなければ意味がありません。今回最も重視したのは投稿のハードルを下げることです。Slackという普段使いのツールから離れずに完結することで、投稿を習慣化しやすくしています。
まとめ
Slack Workflow + AI + GitHub Actions + Netlifyを組み合わせることで、フォーム入力だけでブログ記事を公開できる仕組みが実現しました。技術的には特別なことをしていませんが、既存ツールの組み合わせ方次第で、チーム全体の発信力を底上げできる良い事例になったと思います。