無料でWebページ1枚を作る方法|初心者でも10分でできる超シンプル手順



当サイト、オリジナルWordPressプラグイン「OJapp PWA Marketing」を使用しています。

各記事は専用アイコンでホーム画面に追加できます。ぜひお試しください。

無料でWebページ1枚を作る方法|初心者でも10分でできる超シンプル手順

「Webページを作るには特別なアプリが必要?」
「プログラミング知識がないと無理?」
と思っている初心者はとても多いですが、実は
PCとブラウザだけあれば、誰でも無料でWebページ1枚を作れます。

この記事では、最もカンタンな方法で
“たった10分でWebページを1枚作る手順” を紹介します。
VSCodeなどの専門ツールも不要。コピペだけでOKです。


必要なものは「パソコン」と「ブラウザ」だけ

Webページを作るために必要なのは本当にこれだけ:

  • パソコン(Windows / MacどちらでもOK)
  • ブラウザ(Chrome / Safari など)

インストールは一切不要。
無料で今すぐ始められます。


1. デスクトップに「mypage」というフォルダを作る

まずはWebページの「家」になるフォルダを作ります。

  • デスクトップを右クリック
  • 「新規フォルダ」→ mypage と入力

これだけで準備完了です。


2. フォルダの中に「index.html」ファイルを作る

◆ ファイルの作り方(超初心者向け)

  1. フォルダを開く
  2. 右クリック → 「新規作成」 → 「テキストドキュメント」
  3. ファイル名を index.html に変更

index.html はWebページの入口になる特別な名前です。


3. メモ帳で開いて、下のコードをコピペする

index.html を右クリック → 「プログラムから開く」 → 「メモ帳」

中身を全部消して、以下をまるごと貼り付けます:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>はじめてのWebページ</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    h1 { color: #2b7bff; }
  </style>
</head>
<body>
  <h1>はじめてのWebページ</h1>
  <p>これは無料で作った、あなたの最初のWebページです。</p>
</body>
</html>

貼ったら保存(Ctrl + S)。


4. index.html をブラウザで開く

最後に:

  • index.html をダブルクリック

すると…

あなたのWebページが完成して、ブラウザに表示されます!


これであなたは“Webページ制作者”になった

たったこれだけでWeb制作の最初の一歩はクリアです。
あとは好きに文字や色を変えたり、画像を追加するだけで、
あっという間に「自分だけのページ」が作れます。

Web制作は難しく見えて、実は
1枚のHTMLから始まるシンプルな世界です。


次のステップ(初心者向け)

  • 背景色を変えてみる
  • 画像を入れてみる
  • ボタンを置いて、押したら反応するようにする

1歩踏み出すだけで、Webの仕組みが楽しく理解できるようになります。

GoogleでOJapp Tipsを優先する情報源に追加

今後、Google検索でOJapp Tipsの記事を見つけやすくできます。

最新情報をチェックしよう!
    OJapp Tips  -  PWA・ホーム画面追加の実機検証ブログ

    OJapp Tips  -  PWA・ホーム画面追加の実機検証ブログ

    OJapp Tipsは、 公式ドキュメントをなぞるだけでは分かりにくい挙動を、実際にiPhone・Android・PCで検証しながら記録しています。

    特に、manifest.json、Service Worker、Web App Manifest、WebClip、アイコンキャッシュ、ホーム画面追加の挙動など、 Webサイトを「アプリのような入口」として使うためのノウハウを中心に扱っています。

    OJapp Tipsの記事は、PWA LABでの実機検証や、OJapp・Petal・OJ-Passなど自作ツールの開発で詰まったことを元にしています。 きれいな理論だけではなく、「実際にはここでハマる」という現場寄りの知識を残すための場所です。