スマホだけで、技術ブログにポートフォリオページを追加して公開した話

開発はPCでやるものか？

答えはもちろん「基本はYES」なんですが、どうしてもPCでやれない・やりたくない場面はあると思います。

• PCを立ち上げるのがだるいとき
• パッとアイデアが思いついた瞬間
• そもそもPC持ち歩いてないとき

このブログサイトを構築するときに、Vercel で自動デプロイできるようにしていました。
修正作業自体も、いまは Codex みたいなツールにある程度任せられて、しかも裏でやってくれる時代。
スマホアプリには GitHub もあるし、ChatGPT（経由で Codex）も使える。
…ということは、「スマホだけで開発って成立するのでは？」と思って試してみましたので、概要を記録しておきます。

また、今回紹介する話は非エンジニアの方でも極論可能です。
ChatGPTの有料プランに入っている方であればCodex使えるので気が向いたらやってみてね。

今回使った構成

• 対象：自分の技術ブログ（https://github.com/Mr-Unchain/my-tech-blog）
• ホスティング：Vercel
• ソース管理：GitHub
• 実装支援：Codex（ChatGPT 経由）
• 操作環境：iPhone（アプリ経由）

実際にやったこと

ChatGPTに相談したこと

• たたき台は直接Codexに指示して作らせていたので、改善させる用のCodex用プロンプトを作成させた
• 掲載する内容（経歴/技術/個人開発など）

Codexに渡す指示を作った

• ChatGPT に、Codex向けの具体指示（プロンプト）を作らせた
• AIにAI用の指示を書かせる構造にした
• スマホだと細かい指示を書くのがつらいので、ここがかなり楽だった

実際にCodex投げた内容。まず計画を立てさせる。

転職活動に使えるポートフォリオのページを作成したいです。計画を立ててください。

Codexの回答はこんな感じ。

ポートフォリオページ作成計画
1. ゴール設定と情報設計
目的：転職向けに「何ができるか・実績・人となり」を即座に伝え、問い合わせ導線を明確にする。

必須セクション案：ヒーロー（肩書き＋CTA）、スキルタグ、代表プロジェクト（3〜6件）、
職務経歴サマリー、成果・数値、ブログ/登壇リンク、問い合わせ（メール・SNS）。

既存のプロフィールレイアウト（ヘッダー・スキル・経歴・問い合わせ）を流用・拡張して再利用性を確保。

2. デザイン方針
現行テーマはダーク＋シアン/ブルー系アクセント。
これに合わせたカードレイアウトとグラデーションを踏襲し、一貫したトーンで差し替える。

各プロジェクトをカード化し、成果指標（例：PV、CVR改善、工数削減）を右上バッジに表示。
Hoverで詳細（技術スタック・役割）を表示。

3. コンテンツ入力/取得計画
CMS：microCMSの既存スキーマを活用し、プロジェクト用の新コンテンツタイプ（タイトル、期間、役割、技術、成果、リンク、サムネ）を追加。
プロフィールで既に使っているフィールド構造（skills, work_history, contact_email）を参考にする。

ブログ記事・カテゴリーは既存のblog/categoryルートがあるため、
関連投稿をポートフォリオページ下部に「最近の技術記事」として3件表示する。

4. 実装ステップ（Astro + Tailwind）
ルート追加：src/pages/portfolio.astroを新設し、
BaseLayoutを利用してSEOメタとOGPを設定（プロフィールページの実装を踏襲）。

データ取得：src/lib/microcms.tsにプロジェクト一覧取得関数を追加し、
ページのgetStaticPaths/awaitで読み込む。

コンポーネント化：src/componentsにProjectCard.astro（サムネ、タイトル、役割、技術タグ、成果バッジ、外部リンク）を作成。Tailwindの既存カラー（primary 500/600）を流用。

セクション配置：

Hero：氏名・肩書き・主要スキル3つ＋「プロジェクトを見る」「問い合わせ」ボタン。

Projects：Grid (md:2, lg:3)でカードを並べ、フィルタ（Web/モバイル/インフラなど）を追加。

Experience：職務経歴サマリーはプロフィールのwork_history構造を引用し、短文化して掲載。

Skills：プロフィールのskills配列を転用し、優先度順タグ＋補足テキスト。

Contact：メールとSNS（X・GitHub）を明示し、コピーUIは既存の実装を再利用。

パフォーマンスとアクセシビリティ：画像のloading="lazy"、ボタンにaria-label、キーボードフォーカスリングを追加（既存スタイルに合わせる）。

5. 運用・デプロイ
ローカル確認：npm install && npm run devでUIとリンク動作を確認（現行セットアップ手順と同様）。

デプロイ：Vercel連携済みならmainへpushで自動デプロイ。環境変数にmicroCMS/Firebase設定を忘れず反映。

上でCodexが作成してくれた計画を採用して、次の指示

この計画を採用したいと思います。実装へ着手しても構いません。
が、実装計画を綿密に立ててから実装してください。

これでCodexが作業してくれて、PRの作成までワンボタンでスマホから行える。

GitHub → Vercel の流れ

• Codex が PR を作成

上の画像でも出てるけど、PRを作成するボタンがCodexの右下にある
（画像は既に作成済みなので表示する、という記載）
これを押すと、Githubのアプリが立ち上がり、該当のプルリクエストが表示される

• GitHub 上で差分を確認（スマホアプリから可能）

差分自体は実はCodex上でも見れるけど、ここでも確認可能。

• Vercel が自動で Preview デプロイ
• スマホで実際のページを開いて確認

VercelとGithubの連携が別途必要だが、このCI/CD環境さえ整っていれば、
PR作成と同時にVercelのPreview環境のデプロイが開始される。

しばらく待っていれば、「デプロイを表示」ボタンから、実際の画面で確認が可能。

できたこと / きつかったこと

できたこと

• ページ追加
• レイアウト確認
• 本番反映

きつかったこと

• 細かいデザイン調整はやりづらい
• 差分レビューはPCのほうが楽
• 考える作業はやっぱりPCに軍配

ただ、デザインの構成とそのアイデアを簡単に形にできて、なおスマホひとつで目で見て確認できるところに持っていくのは、正直めっちゃ便利だと感じる点。

このやり方が向いている場面

• 新規ページ追加
• 軽微な修正
• アイデアを形にする初動

向いていない場面

• 大規模リファクタ
• 複雑な状態管理
• 厳密なテストやデバッグ

まとめ

スマホひとつで、開発 → 自動デプロイ → 動作確認までを実際にやってみました。

想像以上に便利で、アイデアが浮かんだタイミングに、隙間時間を使ってそのまま開発できるのはかなり良い体験でした。

一方で、便利だからこそ頼りすぎるのは注意が必要だなとも感じています。

特に本番環境へ反映する前（Vercel で言うと main / master ブランチへマージする前）には、必ずしっかりテストをしてからマージするのが大事です。

そのため、Codex を使う場合でも、必ず専用のブランチを切って、その中で動かすのが基本だと思います。

個人開発、特にブログのような個人利用であれば、main ブランチに対して Codex を動かし、Preview 環境で最終確認する、という運用が許容できる場面もあるかもしれません。

ただ、main ブランチでそのまま動かして安易に PR をマージしてしまうと、本番でバグるリスクは普通にあるので、その点は要注意かなと。

結局、ローカル環境で丁寧にテストしようと思うと PC は必要になるので、スマホと PC をうまく使い分けるのが現実的だなと感じました。

とはいえ、便利なのは間違いないので、今後もガンガン使っていきつつ、検証したことは記事にしていく予定です。

よければ、また見に来てください！