このサイトの4週間プランでは、3週目に「見本を残す」という課題があります。見本は、学んだことを人に見せられる形にしたものです。ここで作ったものを1か所にまとめて公開しておくと、4週目の「練習の入口」で人に見せるときにも使えます。この記事では、タイプ別の見本の例と、静的ホスティングを使った公開の方法を説明します。まだ診断を受けていない場合は、リモート副業タイプ診断かITスキル適性診断から始めると、この記事を自分のタイプに当てはめて読めます。
タイプ別・見本の例
見本は小さくてかまいません。「何のために」「何を使って」「どこを工夫したか」が伝われば十分です。
- ストーリーテラー型：テーマを決めた記事1本と、直す前後の比較
- ビジュアルメーカー型：同じ題材のバナー3パターンと、それぞれの意図
- ビルダー型：フォームと表計算で作った仕組みと、その流れの図
- サポーター型：よくある問い合わせ5つへの返信例
- ガイド型：15分の小さな授業のスライドと練習問題
- オーガナイザー型：整えた公開データと、直したルールの一覧
- インターフェース職人型：スマートフォンでも崩れない1ページ
- アーキテクト型：小さなAPIと、データの持ち方の説明
- アナリスト型：公開データのグラフと3行の説明
- オペレーター型：クラウドで1ページを公開した手順書
- インスペクター型：テストケース10個と、自動化した1つ
- プロダクトデザイナー型：画面の改善案と、試してもらった結果
- ガーディアン型：アカウント保護の見直しチェックリスト
- プロンプトパイロット型：3通りの指示と出力の比較メモ
静的ホスティングとは
静的ホスティングは、HTML、CSS、画像などのファイルをそのまま配信するサービスです。サーバーの設定やデータベースが不要なので、初めての公開に向いています。多くのサービスに無料のプランがありますが、条件は変わることがあるので公式ページで確認しましょう。
- コードの保管サービスと連携するもの（GitHub Pagesなど）
- ファイルを置くと自動で公開してくれるもの（Cloudflare Pages、Netlify、Vercelなど）
- 大手クラウドのホスティング機能（Firebase Hosting、AWS Amplify Hostingなど）
タイプに合わせた公開の形
コードを書く方向のインターフェース職人型やアーキテクト型は、コードの保管サービスと連携するホスティングが便利です。ビジュアルメーカー型やストーリーテラー型など、コードを書かないタイプは、テンプレートを使って文章と画像を差し替えるだけでも始められます。オペレーター型は、大手クラウドのホスティング機能や保存領域を使うと、それ自体が学習になります。
作品説明の書き方
説明は30秒で読める長さを目安に、「目的」「使った道具」「工夫した点」「次の課題」の4つを短く書きます。学習中の作品は「学習中」と明記すれば、成長の過程として伝わります。月に一度、説明を見直して新しい見本を1点追加するリズムを決めておくと、続けやすくなります。
公開前のチェックリスト
公開したページは誰でも見られます。最後に次の点を確認します。
コードを公開のリポジトリに置く場合は、READMEに概要と動かし方を書いておくと親切です。
- 他人の作品や、勤務先・取引先の資料を載せていない
- APIキーやパスワードがファイルに含まれていない
- 住所や電話番号など、不要な個人情報を載せていない
- スマートフォンとパソコンの両方で表示を確認した
よくある質問
プログラミングの知識がなくても公開できますか？
テンプレートを使えば、文章と画像を差し替えるだけでも始められます。慣れてきたらHTMLやCSSを少しずつ触ってみましょう。
見本が1つしかなくても公開していいですか？
はい。1つでも、目的と工夫が書かれていれば十分です。次の4週間で少しずつ追加していきましょう。
費用はかかりますか？
多くの静的ホスティングには無料のプランがありますが、条件はサービスごとに異なります。独自ドメインを使う場合は別途費用がかかることがあります。
