こんにちは、てつです！
ビジネスにおいて圧倒的な成功を目指し、有象無象の社会人で終わるのではなく、何かに特化した「アンバランスで圧倒的な人材」を目指して日々読書や技術習得に励んでいるあなたへ。
最高にエキサイティングな第2回の話を始めましょう。
自分が作った大切な自動化ツールをWeb上に公開し、ログインするだけで誰でも使える「クラウドSaaS」へと進化させるロードマップ。
前回は「AWSで破産しないためのサーバーレス設計思想」を徹底解説しました。
全体の地図が手に入ったところで、次にクリアすべき大きな壁が立ちはだかります。それが「ドメインの交通整理」と「人間心理をハックするUI/UX画面」の2点です。
1. 導入（イントロダクション）
既存のブログ資産を守りながら新アプリを「プロの顔」で公開するロードマップ
個人開発したWebアプリをいざインターネット上に公開しようとしたとき、多くの初心者が次のような強い不安に直面します。
- 「すでにレンタルサーバー（エックスサーバーなど）で運営している大事なブログのドメイン（例: tetsulog.com）を書き換えて、ブログごと壊してしまったらどうしよう……」
- 「せっかくインフラをプロ仕様にしても、画面デザインが素人っぽくてチープだったら、誰も使ってくれないのでは……」
せっかく実務や副業の枠を超えてビジネスを展開しようとしているのに、ここで足踏みをしてしまうのはあまりにももったいない。
結論から言います。今回ご紹介する手法を実践すれば、現在運用している大切なブログには1ミリも影響を与えず、完全に独立した「プロ仕様の操作画面（SaaS）」を安全に切り出すことができます。
これは実際の開発現場や自動化ビジネスでも広く使われているモダンな手法であり、個人開発でもプロと同じ堅牢な環境が作れます。
既存のブログ資産を守り抜きながら、新設するアプリ用の通信だけをAWS側へ綺麗に逃がす「DNS戦略」。そして、ユーザーが迷わずサクサク使いたくなる「ミニマリズムな画面設計」の裏側を、余すことなくステップバイステップで解説していきます。
2. ステップバイステップの解説（DNS戦略 ＆ 画面構築）
[ステップ1] 既存ブログに1ミリも影響を与えない！Cloudflare DNSによるAWSサブドメインルーティング術
すでにメインドメイン（例: tetsulog.com）でWordPressブログなどを運営している場合、その接続を一切阻害せずに新設アプリ（Monograph）へのアクセスを流すには、「サブドメイン」を用いた交通整理が必須になります。
IT初心者向けに分かりやすく例えるなら、「メインドメインがすでに稼働している本社の本館ビル」なら、「サブドメイン（例: monograph.tetsulog.com）は、少し離れた場所に新しく建てた、完全に独立した別館のビル」のような関係です。
本館への来客（ブログの読者）の流れはそのままに、別館の用事がある人（アプリのユーザー）だけを綺麗に誘導する仕組みを作ります。
この交通整理を世界一安全かつシンプルに行うために、ドメインの権限（ネームサーバー）をCloudflareに委ねる戦略をとります。具体的な設定手順は以下の通り、拍子抜けするほどシンプルです。
- Cloudflareのダッシュボードにログインし、対象のドメイン（tetsulog.com）の管理画面を開きます。
- 左メニューから「DNS」→「レコードを追加」を選択します。
- 以下の内容で 「CNAMEレコード」 を1行だけ追加します。
| 設定項目 | 入力値・選択値 | 役割（初心者向けの解説） |
| タイプ | CNAME | ドメインの行き先を「別のURL（文字列）」に転送する設定 |
| 名前 | monograph | サブドメインの頭に付ける文字列（monograph.tetsulog.com になる） |
| ターゲット | terraform output alb_dns_name の値 | AWS側で自動生成された、ロードバランサー（ALB）の長い宛先URL |
| プロキシステータス | オレンジ雲（プロキシ済み） | Cloudflareの強力なシールドを有効化する、最重要スイッチ |
| TTL | 自動 | DNS情報の更新間隔。通常は自動のままで問題ありません[ |
この設定を行うことで、インターネット上のユーザーが (https[:]//monograph.tetsulog.com) にアクセスした瞬間、Cloudflareのネットワークがその通信を優しく受け止め、裏側で待機しているAWSの受付窓口（ALB）へと瞬時に、そして美しくルーティングしてくれます。
なぜCloudflareを選ぶのか？難しい設定なしでAWSのHTTPS化を完了させる「Flexibleモード」の理由
インフラ構築において、なぜわざわざAWSの前にCloudflareを挟むのか。これには明確な「Why（理由）」が存在します。
インターネット上にWebアプリを公開する場合、現代では「HTTPS（暗号化通信・鍵マーク）」の対応が絶対条件です。しかし、AWSだけでこれを実装しようとすると、証明書の発行（ACM）や暗号化の解除（SSL終端）の設定など、初心者には難解なインフラ構築の手順がいくつも発生してしまいます。
これを極限までシンプルに、かつ強固に突破する極秘ルートが、Cloudflareの「Flexible（フレキシブル）モード」の活用です。
Cloudflareの「SSL/TLS」設定でこのFlexibleモードを選択すると、「インターネットからCloudflareの間」の暗視化処理は、Cloudflareがすべて無料で身代わりに処理（SSL終端）してくれます。
そのため、Cloudflareからその先にあるAWS（ALB）へは、難しい鍵の設定を施していない通常のHTTPポート（80番）のまま通信を届けるだけで、安全な公開環境が完成します。
世界最強のセキュリティガードであるCloudflareをドメインの水際（受付）に立たせることで、悪意のあるハッキング攻撃や大量の不正アクセスを自動で遮断しつつ、自分自身のAWSインフラ構築の難易度を劇的に引き下げられる。
これが、個人開発者が低コストかつノーリスクで戦うためのプロの知恵です。
[NOTE]本連載は各回のテーマに100%集中するため、裏側の処理ロジックやデータベースの内部構造、ソースコード等の解説は一切含めず、純粋なDNS戦略と画面設計のみに集中してお届けします。
[ステップ2] 直感性を極める！Streamlit UIで実装する「シンプル」なプロフィールデザイン設計
いくら裏側のインフラやDNSルーティングがプロ仕様であっても、表側の操作画面が使いにくければ、ユーザーは1秒でブラウザを閉じてしまいます。
ビジネスとしてサービスを横展開し、競合と圧倒的な差別化を図るためには、デザインに徹底的なこだわりを込める必要があります。
今回のアップデートでは、新設されたナビゲーションメニューに「作成者（プロフィール）」ページを追加しました。ここで私が徹底したのが、無駄な装飾やチープな要素を一切排除した「シンプル」の追求です。
具体的には、画面上に以下の要素を持った洗練されたホワイトカードUIを配置しています。
border-radius: 24pxの美しい大きな角丸- 画面から品よく浮き上がる、繊細な配置の影（
box-shadow） - 上部から「Creator」→「名前（てつ）」→「肩書き」→「エンジニアとしてのスタンス文章」へと流れる、視線誘導を計算し尽くした美しいフォント配置
人間には「美しいデザインのシステムは、中身の機能も一級品であるに違いない」と直感的に判断する心理（審美性ユーザビリティ効果）があります。
また、モデル選択などの細かいUI表現においても、素人っぽさの出る絵文字での装飾は一切排除しています。
代わりに、モデル名の横にブラケット形式のテキスト（例: gemini-2.5-pro [pro / studio]）をシンプルに添えることで、プレミアムな質感と高い視認性を維持しています。
この「引き算のデザイン思想」があるからこそ、非エンジニアの社会人読者であっても、画面を開いた瞬間に「これは本物のプロが作ったツールだ」という圧倒的な信頼感を抱いてくれるのです。
[ステップ3] 親指の迷いをなくす！CSSスマホ対応による「48pxピル型ボタン」と当たり判定強化の工夫
PCでの見栄えだけでなく、現代のユーザーが最も多く触れる「スマートフォン（モバイル環境）」での操作性をハックすることも、画面構築において絶対に妥協できないポイントです[cite: 1, 5]。
スマートフォンの画面を操作するとき、人間の心理や行動特性として、「ボタンが小さくて押しにくい」「どこをタップすれば反応するのかわからない」という小さなストレスが積み重なると、それだけでアプリの利用を辞めてしまう（離脱する）原因になります。
そこで、モバイル画面（@media (max-width: 768px)）において、ボタンコンポーネント（div[data-testid="stHorizontalBlock"] button）の当たり判定をCSSで大幅に強化する設計を導入しました。
- height: 48px の確保： 人間工学において、片手の親指でストレスなく確実にタップできる「押しやすさ」の基準である48ピクセルの高さを厳格に持たせています。
- border-radius: 24px のピル型デザイン： 完全に丸みを帯びたカプセル状（ピル型）にすることで、視覚的にも「ここはタップできる領域だ」と一瞬で認識できる工夫を施しています。
さらに、OSやブラウザのシステム設定がダークモード（@media (prefers-color-scheme: dark)）に切り替わっている場合でも、この操作性が損なわれないよう徹底的なチューニングを行っています。
アプリ全体が自動的に美しいダークパレットで表示されるだけでなく、最も重要なプライマリボタンの配色を「背景 #FFFFFF / テキスト #000000」へと大胆に反転させています。
これにより、夜間の暗い部屋やサウナ帰りの移動中であっても、画面のコントラストが極限まで保たれ、ユーザーは親指を迷わせることなくサクサクと快適にアプリを操作できるのです。
3. 専門家・現役エンジニアの視点（差別化コンテンツ）
個人開発でも妥協しない「美しさと堅牢性」を低コストで両立させるデザイン思想
日々の実務として、大規模なネットワークセキュリティやシステムの安定稼働を24時間365日支え続けているシステム運用監視エンジニアの視点から、断言させてください。
今回解説した「Cloudflareによるドメインのガード」×「人間心理をハックするモダンUI」の組み合わせこそが、個人開発者や副業プレイヤーが初期のビジネスを展開する上で、名実ともに最強のベストプラクティスです。
個人開発のよくある失敗として、デザインや公開手順の難しさに挫折して身内にしか配れなかったり、逆にインフラを複雑にしすぎて高額な維持費にサイフが悲鳴を上げたりするパターンが後を絶ちません。
しかし、この戦略であれば、大企業が莫大なインフラ予算を投資して構築するような「鉄壁のセキュリティ」と「洗練されたシンプルな操作感」を、自分自身の既存ドメインの資産を一切傷つけることなく、ほぼ固定費ゼロ（ドメインの維持費のみ）で完全に再現することができます。
「昨日の自分より一歩先へ」をモットーに市場価値を尖らせ、何かに特化したアンバランスで強力な人材を目指すなら、インフラの堅牢性だけでなく、ユーザーの目に触れるフロントエンドのデザイン思想にまでプロのこだわりを宿らせてください。その徹底的なアウトプットの姿勢こそが、有象無象の社会人から抜け出し、ビジネスを圧倒的な成功へと導くための強力な武器になります。
4. まとめと次のステップ（CTA）
今回の振り返りと次回予告：次はいよいよ命を吹き込む「バックエンド・ロジック編」へ
今回は、大切な個人ツールを安全かつ美しいWebサービスとして切り出すためのフロントエンド・DNS戦略をお届けしました。
- 既存ブログに1ミリも影響を与えないよう、Cloudflare DNSのサブドメイン運用でAWSへ綺麗にルーティングする
- CloudflareのFlexibleモードを活用し、インフラの難易度を下げつつHTTPS化と鉄壁の防御を両立させる
- 「シンプル」なホワイトカードUIや「48pxピル型ボタン」で、スマホでも迷わない最高のUI/UXを実装する
全体の美しい「操作画面」と安全な「通信経路」という、頑丈な器（うつわ）は完成しました。では、次に私たちがやるべきことは何でしょうか？
いくら見た目がプロ仕様で美しくても、中身のロジックが伴っていなければ、それはただの「動かないハリボテ」です。
複数ツールでアカウントを共通化してユーザーデータを守るための強固なデータベース構造。本番環境のAWSとローカル環境のモックデータを自動で切り替えるスマートな仕組み。
[free / pro / studio] のような3段階プランの利用制限を裏側で厳格に判定するアルゴリズムなど、システムとしての「命」を吹き込む処理が必要です。
次回、【第3回：最安DB・ロジック編】では、そんなアプリの裏側で冷徹に、そして超高速で稼働するDynamoDBを活用したロジックの構築手順に100%集中して徹底解説します！どうぞお楽しみに！
あなたの自動化ビジネスを一歩先へ進めるために
環境構築の煩わしさをすべて過去にし、ブラウザを開くだけで明日の作業効率を劇的に爆速化する『Monograph クラウドSaaS版』は、現在AWS上での最終テストに向けて熱量高く調整を進めています。公開のアナウンスを絶対に見逃さないよう、ぜひブログのブックマークをお願いします！
また、「次回の記事を待てない」「今すぐ自分のパソコン環境でスクリプトを動かして、明日から生まれる自由な時間を数時間増やしたい」という圧倒的な成長意欲をお持ちの方は、私が実際のブログ運営や実務の効率化で運用し、実績を残している即戦力の自動化スクリプト群をBOOTHにて先行公開しています。
紹介している設計思想は、住所入力不要の安全なStripe決済や、APIキーは個別管理でAWS側には保管されない堅牢性など、将来あなたが自身のツールをマネタイズする際にもそのまま役立つプロ仕様の構成です。導入するだけであなたのビジネスを加速させる強力な武器が揃っていますので、ぜひその目でチェックしてみてください。
[てつログ公式 BOOTHストアで即戦力ツールを見てみる]
コメント