個人サイトをコードなしで作る方法

個人サイトは、ほとんどの人が「あったほうがいい」とわかっていながら、なかなか手をつけないものの代表格です。誰かがあなたの名前を検索したときに辿り着く場所であり、新しいクライアントや採用担当者、あるいはあなたの仕事を気に入って「もっと見たい」と思ってくれた人を案内する場所でもあります。

朗報があります。もうHTMLを覚える必要も、テンプレートと格闘する必要も、誰かを雇う必要もありません。作りたいものを普通の言葉で説明するだけで、ソフトウェアがサイトを組み立ててくれます。アイデアから、公開して共有できるページまで、順を追って考えていきましょう。

サイトの目的をはっきりさせる

説明を始める前に、そのサイトが果たす役割をはっきりさせておきましょう。個人サイトは、たいてい次のどれか一つが主な目的です。

• 名前や顔を知ってもらうためのシンプルな自己紹介
• 見込み客や採用担当者に作品を見せるポートフォリオ
• 他のアカウントや連絡先へ誘導するランディングページ

すべてを詰め込む必要はありません。目的が一つに絞られたサイトのほうが、ごちゃごちゃしたサイトよりずっと良く仕上がります。訪問者に一番してほしいこと — プロフィールを読んでもらう、作品を見てもらう、メッセージを送ってもらう — をひとつだけ選びましょう。

素材を先に集めておく

料理の前に材料をそろえるように、作り始める前にコンテンツを集めておくとスムーズです。たいていの個人サイトには次のようなものが必要になります。

• 名前と短い肩書き（何をしている人か、一言で）
• 短い自己紹介文。2〜3文で十分です
• 自信のあるプロジェクトや写真、リンクをいくつか
• メールやお問い合わせフォームなど、連絡できる手段

これらをメモにまとめておきましょう。サイトを説明するときに、そのままコピペできます。

欲しいものを普通の言葉で伝える

ここが、これまでエンジニアが必要だった部分です。今は、親切な友人に説明するときと同じ調子で、普通の言葉でリクエストを書くだけでいい。欲しいパーツと、出したい雰囲気を具体的に伝えましょう。

「上部に名前、その下に短い自己紹介、そしてプロジェクトをカード形式で3つ並べた1ページのサイトが欲しい。清潔感があって落ち着いた雰囲気で、余白をたっぷり取って。メールが開くお問い合わせボタンも追加して。」

これで本当に十分です。「カード」や「セクション」が技術的に何を指すか知る必要はありません。大事なのは出来上がりを描写することです。色や雰囲気の好みがあれば、「あたたかくて親しみやすい」「ミニマルでプロフェッショナル」といった普段使いの言葉で伝えればOKです。

出来上がりを見て、直していく

説明すると、すぐに見られる動くバージョンが出来上がります。ここからが本番です。ゼロから想像するのではなく、実際にあるものを見て反応できるからです。

正直な目で眺めて、気になるところを探しましょう。そして、同じように普通の言葉で修正を伝えます。

「自己紹介をもっと短くして、お問い合わせボタンを上に移動して。もう少し柔らかい青にして、プロジェクトのタイトルを少し大きくして。」

微調整は当たり前のプロセスです。良いサイトは、一発で完璧に仕上げることではなく、何度か小さな調整を重ねることで生まれます。自分らしいと感じられるまで続けましょう。

スマホでの見え方を確認する

ほとんどの人は、あなたのサイトをノートパソコンではなくスマホで見ます。完成とする前に、小さな画面での見え方を必ず確認しましょう。文字は読みやすいか、画像やボタンはきちんと並んでいるか、窮屈だったり切れていたりしないか。

違和感があれば、そのまま伝えればいいだけです。「スマホだとプロジェクトが詰まって見えるから、もう少し間隔を空けて」。モバイル表示を後回しにせず最優先で扱うことで、訪問者からの一番よくある不満を避けられます。

公開して、共有する

満足できたら、最後のステップは公開して誰でもアクセスできるようにすることです。知っておくと良い点がいくつかあります。

• すぐに共有できるURLがもらえます
• 独自ドメイン（yourname.com のようなもの）は、サイトをより個人的でプロフェッショナルな印象にします。自分の仕事を代表するサイトなら、設定する価値があります
• 公開後は、自分のリンクとお問い合わせボタンを一度テストしておきましょう

メール署名、SNSプロフィール、名刺など、効果のある場所でURLを共有しましょう。

育て続ける

個人サイトは一度作ったら終わり、というものではありません。一番役に立つのは、常に最新の状態に保つことです。新しいプロジェクトを終えたとき、役割が変わったとき、連絡先を変えたときは、戻ってきて変更を説明しましょう。普通の言葉で作業しているので、更新はほんの数分で済みます。一日仕事にはなりません。2年前のまま止まっている磨き上げられたサイトより、今の自分を映しているサイトのほうがずっと価値があります。

コードなしで個人サイトを作るというのは、結局のところこういうことです。欲しいものをはっきりさせ、普通の言葉で伝え、出来上がったものを見て直していく。

meshcodeはMac、Windowsで使えるデスクトップアプリで、普通の言葉での説明から動くソフトウェアを組み立てます。現在アーリーアクセス中です。

👉 meshcodeをダウンロード — Mac、Windows