個人サイトの作り方：掲載する内容と公開までの流れ

個人サイトを作るには、まずサイトに何をしてほしいのかを決めます。たとえば、就職、顧客の獲得、文章の発信、見つけてもらいやすくすることなどです。そのうえで、3〜4ページ程度を組み立てます。自分が何者かを一文で伝えるホームページ、自己紹介ページ、実績（作品、文章、登壇歴、職務経歴書のいずれか）、そして連絡手段です。名前を含むドメインに設置しましょう。AIウェブサイトビルダーを使えば、構築は半日で終わります。時間がかかるのは、何を伝えるかを決めることです。

サイトの目的を決める

目的のない個人サイトは、これまでにやったことの一覧になりがちです。メインの目的を1つ決め、それに沿ってホームページに何を載せるかを決めましょう。

副次的な目的があっても構いません。ただし、5つの目的を同じ重みでホームページに並べないようにしましょう。

何を載せるか

ホーム

名前、何をしている人か、誰のためか、どこで、どのように働いているかを、1〜2文で伝えます。たとえば「ラゴスでフィンテック企業の信頼性の高いデータパイプライン構築を支援している、データエンジニアのSam Okaforです」のような形です。その後、掲載内容の短い一覧と、連絡先へのリンクを置きます。

自己紹介

一人称で、人間味のある文章で書きましょう。何をしていて、どのような経緯でここに至り、何を大切にしているのか。そして、個人的な話を1〜2つ添えます。実際の最近の写真を載せてください。多くの人は最初の段落を読み、残りは流し読みするので、役に立つ部分を先に書きましょう。

実績

目的に合った形式を選んでください。

• 作品：課題、自分の担当部分、結果を短く説明する。
• 文章：すべての投稿ではなく、代表的な3〜5本。
• 登壇、ポッドキャスト、掲載：リンクと日付を添える。
• 経歴：役職と実績、ダウンロードできる職務経歴書を添える。

連絡先

メールアドレスか短いフォームに加えて、実際に使っているSNSのプロフィールを1〜2つ載せます。打ち合わせを受け付けるなら、予約ページへのリンクを置きましょう。電話番号や自宅の住所は、必要がなければ公開しないでください。

任意のページ

• 「いま」のページ：現在取り組んでいること。
• 使用ツール：使っているツールや環境。開発者やデザイナーに人気があります。
• ニュースレターの登録：配信している場合。
• 登壇用のキット：3種類の長さの自己紹介文、顔写真、テーマ。

判断とトレードオフ

静的なサイトか、データベースを使うか

多くの個人サイトは静的なサイトで、データベースを使わず、テキストと画像だけで構成されます。表示が速く、維持費が安く、壊れにくいのが利点です。データベースは、必要な理由がある場合に限って追加しましょう。たとえば、メッセージを保存するお問い合わせフォーム、管理画面から更新する文章のセクション、ゲストブックなどです。お問い合わせフォームは、メール配信サービスを通じてメールを送るだけでもかまいません。

文章をどこに置くか

サイトに直接記事を書けば、すべてを1か所にまとめられます。ニュースレターやブログのプラットフォームを使ってリンクする方法は、頻繁に投稿する場合に簡単です。あるいは、シンプルなエディターを使って、データベースに記事を保存する方法もあります。多くの文章を書く予定があるなら、AIでブログを作る方法を参照してください。

ドメイン

名前が取得できるなら、自分の名前を使いましょう。firstnamelastname.comのような形や、国や別の末尾のドメインも選べます。短く、声に出して伝えやすく、可能であればハイフンを含まないものが理想です。設定の方法は、独自ドメインの接続方法を参照してください。

1ページか、複数ページか

短い紹介、リンク、連絡先だけなら、スクロールする1ページで十分です。文章や作品があり、それぞれに独自のURLを持たせたいなら、複数ページのほうが適しています。検索エンジンにも有利で、特定の記事だけを共有しやすくなります。リンクの一覧だけが必要なら、リンクインプロフィールページで足りるかもしれません。

AIビルダー向けの最初のプロンプト

ラゴスでフィンテック企業向けの信頼性の高いデータパイプラインを作っているデータエンジニア、Sam Okaforの個人サイトを作ってください。ページは次のとおりです。ホーム（一文の紹介、写真、注目のプロジェクト3件、最新の記事2本、連絡ボタン）、自己紹介（一人称の短いストーリー）、プロジェクト（それぞれに課題、私の役割、使用ツール、結果）、執筆（日付つきの記事一覧で、各記事は個別のページ）、そして連絡先（メールのリンクと簡単なフォーム）。フッターにLinkedInとGitHubのリンクを置いてください。落ち着いたシンプルなデザインで、アクセントカラーは1色、文字は非常に読みやすくしてください。速く表示され、スマホでもきれいに見えるようにしてください。検索用にページのタイトルと説明を設定し、SNSのリンク用に共有画像も追加してください。

プレースホルダーのプロジェクトと記事は、本物のものに1つずつ差し替えてください。

手順ごとの構築

1. 一文の紹介を書く。 難しければ、ほかのことも難しくなります。友人に、あなたが何をしているのかを説明してもらい、その言葉を使いましょう。
2. 自己紹介を書き、実績を集める。 プロジェクト、文章、登壇歴、職務経歴書。
3. 良い写真を撮るか、選ぶ。 最近のもので、明るく、顔がはっきり見えるもの。
4. プロンプトからサイトを作る。 そのあと、実際のコンテンツをページごとに追加します。
5. スマホで確認する。 見知らぬ人になったつもりで、最初から最後まで読んでみてください。
6. 検索の基本を追加する。 ホームページのタイトルに名前を入れ、説明文を書き、画像ではなく本物のテキストを使います。AIで作ったウェブサイトのSEOを参照してください。
7. 公開して、ドメインを接続する。
8. メールの署名、SNSのプロフィール、職務経歴書からリンクする。
9. カレンダーにリマインダーを入れる。 数か月ごとに更新するためです。

よくある失敗

• 分かりやすい紹介がない。 訪問者は5秒以内に、あなたが何をしている人かを理解できる必要があります。
• これまでのすべてを載せる。 目的に合わせて厳選しましょう。
• 誰も更新しないブログ。 小さな「執筆」ページのほうが、放置されたブログよりずっとよいです。
• 知られたくない個人情報。 自宅の住所、個人の電話番号、家族に関する情報など。
• 重い写真によるページの遅さ。 大きな画像はサイズを小さくし、圧縮しましょう。
• 読みにくくても凝ったデザイン。 小さな灰色の文字、独特なナビゲーション、邪魔になるアニメーションなど。

既製の製品を使ったほうがよい場合

写真、一文、リンクだけを載せた1ページが必要なら、リンクを1つにまとめるサービスや、シンプルなページビルダーのほうが早く作れます。頻繁に文章を書いて読者を増やしたいなら、独自ドメインを使えるニュースレターやブログのプラットフォームのほうが、手入れするサイトより適しているかもしれません。見た目を直感的に編集したい人には、テンプレートつきのフルのウェブサイトビルダーが向いています。デザインを完全に管理したい場合、文章、作品、ツールを1か所にまとめたい場合、またはサイトのコードを所有して、必要なら後で移行したい場合は、自作を検討しましょう。

Mythexで作る

Mythexは、シンプルなサイトも作れるAIアプリビルダーです。サイトを説明すると、スマホサイズの表示も含めたライブプレビューで組み上がります。チャットでコピーやレイアウトを調整できます。個人サイトは、静的なフロントエンドとして動作させるのに向いています（Mythexの静的サイト）。保存されるお問い合わせフォームや、編集できる文章のセクションを追加する場合は、Mythexがプロジェクトにデータベースを追加します。

Freeプランでは、yourname.mythex.appのアドレスで公開できます。Proプランでは、Mythex内でドメインを購入するか、すでに持っているドメインを接続できます。また、コードを書き出して、後で別の場所にホスティングしたい場合はGitHubに同期できます。Mythexでは、イラストや共有用の画像なども、説明文から生成できます。出発点としては、AIウェブサイトビルダーや、ポートフォリオのテンプレートが参考になります。

よくある質問