
2026/01/14 2:23
**ウェブサイトを作る方法(2024)** 1. **サイト設計をする** - 目的と対象読者を定義 - レイアウトとナビゲーションをスケッチ 2. **プラットフォームを選ぶ** - コンテンツ管理システム(例:WordPress、Joomla) - 静的サイトジェネレーター(例:Hugo、Jekyll) 3. **ホスティングとドメインを取得** - ドメイン名を登録 - ホスティングプロバイダーを選択(共有、VPS、クラウド) 4. **開発環境を整える** - 必要なソフトウェアをインストール(IDE、Git、Node.js など) - Gitでバージョン管理を初期化 5. **サイト構築** - HTML/CSS/JavaScript を書くかテンプレートを利用 - 画像や資産を最適化 6. **ブラウザ・デバイスでテスト** - レスポンシブとアクセシビリティを確認 - パフォーマンス指標(PageSpeed、Lighthouse)をチェック 7. **本番環境へデプロイ** - FTP、Git、CI/CDパイプラインでコードをアップロード - HTTPS 用に SSL/TLS を設定 8. **保守・更新** - 定期的にバックアップ - ソフトウェアとプラグインを最新状態に保つ **ヒント** - SEO 強化のためセマンティック HTML を使用 - 外部スクリプトは最小限にして読み込み速度を向上 - 可能な限りキャッシュ(ブラウザ、CDN)を活用
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
Summary
記事は、単一のプレーンHTML投稿から始めて機能的なブログを最小限に構築し、徐々に機能を追加していく方法を説明しています。
- 最初の投稿を書く:
やh1
などの基本的なHTMLタグだけを使用し、ファイル名は分かりやすい名前(例:p
)にします。FTPでアップロードするだけで、CSS、CMS、複雑なツールは必要ありません。how-to-make-a-damn-website.html - 過剰な計画を避ける:ドメイン/ホスティングの購入やGitHubの設定などは、実際に1つ以上の投稿ができていないうちは行わず、まず最初のコンテンツを配信することに集中します。
- RSSフィードを作成:
を手書きで作り、チャンネルメタデータと各投稿用のfeed.xml
エントリを含めます。<item>
には生のHTMLを使用し、日付はGMT形式にします。また、各アイテムには URL のみならず固有の GUID を設定して、リーダーで「未読」状態が崩れないようにします。<description> - フィードへのリンク:すべてのページに
を配置し、ブラウザやプラグインがフィードを検出できるようにします。XMLファイルは小さく保ち、最新エントリか限定期間のみを含め、新しい投稿があるたびに更新します。<link rel="alternate" type="application/rss+xml" href="https://lmnt.me/feed.xml"> - インデックスページを追加:サイトのルートと
にインデックスページを設置し、お互いへのリンクと最初の投稿へのリンクを設定します。引き続きプレーンHTMLタグのみで構成します。/blog - 反復作業:さらに投稿を増やし、
やhr
、ol/ul
など追加のHTML要素を試し、それらを1つずつCSSファイルでスタイリングしていきます。更新を継続的に配信します。img/video/audio
この段階的手順は個人ブロガーや小規模チームにとって参入障壁を下げ、コンテンツの提供速度を加速させ、大規模ウェブプロジェクトの低コストプロトタイプとしても活用できます。
本文
多くの人がウェブサイトを作りたいと思っていますが、どこから始めればいいか分からない、あるいは途中で立ち止まってしまうケースがよくあります。これは、過去20年間にわたり「ウェブサイトとは何か」という認識が劇的に変化したことの一端でもあります。
「ハード」なやり方
ウェブサイトはとてもシンプルであることを忘れがちです。実際、一ページだけのサイトも十分に機能します。CSSさえなくても構いませんし、WordPress のような CMS も必要ありません。HTML を書いてそのファイルを FTP でサーバへ転送するだけです。
長年、人々はこれが「ウェブサイト作りのハードルだ」と説得されてきました。しかし実際には、最も簡単な方法かもしれません。複雑にしなくても大丈夫です。ただし、本稿では少なくとも HTML と CSS を一度は書いたことがあると仮定しています。また、サーバへファイルをアップロードする方法も知っている前提で進めます。初めての場合は手順が省略されているように感じるかもしれませんが、それはそうです。
ベビーステップ:HTML を最初に
まず始めたくないことから始めましょう。CMS を探さない、ウェブサイトの設計やアウトラインを作らない、ドメインもホスティングも購入しない、GitHub リポジトリを設定しない――いずれも手間がかかります。
代わりに、最初のブログ記事を書きましょう。私が最初にしたことは、TextEdit(プレーンテキスト)で HTML を直接書くことでした。Markdown でも Nova や BBEdit のようなエディタを使う必要はありません。ぜひ一度だけ試してみてください。リフレッシュ感があります。後でコードエディタに戻るのも問題ありません。
以下はそのブログ記事のドラフトです:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>How to Make a Damn Website</title> </head> <body> <h1><a href="how-to-make-a-damn-website.html">How to Make a Damn Website</a></h1> <p>A lot of people want to make a website but don’t know where to start or they get stuck.</p> </body> </html>
これだけで十分です。とてもチャーミングですよね。
ポイントは
- 書式設定には HTML 要素のみを使用 してください。
- CSS に気を取られないようにしましょう。将来使うかもしれませんが、今は必要ありません。
- ID やクラスもまだ書かず、
を作らないでください。<div>
最初の投稿を書いたら、ファイル名を分かりやすく設定します:
how-to-make-a-damn-website.html
もしドメインとホスティングがあるなら、サーバ上に
blog フォルダを作り、その中にこのファイルをアップロードします。まだない場合は、FTP でファイルを転送できるようになったら「設定して忘れる」フェーズに入ります。
ブラウザでその HTML ファイルへアクセスすると、実際にウェブ上にページが表示されます。おめでとうございます!
Times New Roman、白背景に黒文字、青く下線付きのハイパーリンク――シンプルながら機能します。
この未スタイル化の HTML ページを見て、そのままで十分だと実感してください。ウェブサイトは本当にこれだけで成立します。優れたサイトも、必要ならもっと要素が増えても、基本形は同じです。
RSS(Really Simple Syndication)
次に CSS やインデックスページを作る前に、RSS フィードを手書きしてみましょう。XML ファイルを数分で作成でき、完了すれば読者は RSS リーダーでブログを購読できます。
<?xml version="1.0" encoding="utf-8"?> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> <channel> <title>LMNT</title> <link>https://lmnt.me/</link> <description>Louie Mantia’s weblog.</description> <language>en-us</language> <atom:link href="https://lmnt.me/feed.xml" rel="self" type="application/rss+xml"/> </channel> </rss>
上記はフィード全体のメタ情報です。記事を追加する場合は
<item> 要素を <channel> 内に挿入します:
<item> <title>How to Make a Damn Website</title> <pubDate>Mon, 25 Mar 2024 09:05:00 GMT</pubDate> <guid>C5CC4199-E380-4851-B621-2C1AEF2CE7A1</guid> <link>https://lmnt.me/blog/how-to-make-a-damn-website.html</link> <description><![CDATA[ <h1><a href="how-to-make-a-damn-website.html">How to Make a Damn Website</a></h1> <p>A lot of people want to make a website but don’t know where to start or they get stuck.</p> ]]></description> </item>
<description> 内の内容は実際の記事と同じ HTML を使っても構いません。RSS リーダーは独自のスタイルシートで表示しますが、原始的な HTML がどのようにレンダリングされるかを理解しておくと役立ちます。
pubDate は GMT 時間を使用し、24 時間表記で入力してください。画像やメディアがある場合は相対 URL ではなく絶対 URL を指定します。RSS 経由で配信する際に外部からアクセスされるためです。
XML ファイルをウェブサイトのルートフォルダへアップロードし、NetNewsWire 等のお好きな RSS リーダーで開いて購読してください。ブラウザで
feed.xml を開くと自動的にリーダーが起動します。
HTML 内にも RSS フィードへのリンクを入れておくと便利です:
<link rel="alternate" type="application/rss+xml" title="LMNT" href="https://lmnt.me/feed.xml"/>
新しい記事を追加する際は、XML ファイルの
<item> を一番上に挿入します。RSS リーダーが定期的にファイルを取得するため、サイズ管理にも注意してください。一般的には最新数件だけを残すか、一定期間分のみを保持すると良いでしょう。
guid はユニークな文字列である必要があります。URL を使うと変更される可能性があるので避けましょう。簡単に生成できるツール(例:Tulip)を活用してください。
インデックスページ
インデックスは極めてシンプルです。サーバのルートにはブログディレクトリへのリンクを、
blog ディレクトリ内には最初の記事へのリンクを配置します。各ページに <h1> タイトルと <p> で簡単な説明文を書きましょう。
ブログ作成習慣の構築
次に数件記事を書く際は、以前使わなかった HTML 要素(
<hr>, <ol>, <ul>, <img>, <video>, <audio> など)を試してみてください。CSS をスタイリングする前に、どの要素が必要かを把握できるので便利です。
記事を書き終えたらすぐに XML ファイルへ追加し、インデックスページも更新してください。リンクやフィードは常に確認しましょう。
スタイルを一歩ずつ
レイアウトより先に、最初の数記事で使った基本的な HTML 要素(
<h1>, <h2>, <h3>, <hr>, <p>, <strong>, <em>, <ol>, <ul>)をスタイル設定します。本文フォント、幅、テキストサイズ、色などを決めます。
スタイルシートは変化しやすいので、小さな更新を頻繁に行うことがコツです。CSS をサーバへアップロードするのも数秒で完了できます。直接サーバ上で作業しても構いません。
継続的に発信
これらを終えれば、障壁はクリアです。以降は楽しい部分だけに集中しましょう。新たなブログ記事を書き、ページを増やし、好きなようにスタイルを整えてください。RSS で更新情報を配信すれば、読者も常に最新の状態を把握できます。
エンジニアが自動化ツールを好む一方で、この手作業は実際にはそれほど複雑ではありません。必要なものは極めて少なく、手間をかける価値があります。
**重要なのは「公開すること」**です。これが最も困難でありながら、成功への鍵となります。