サイトのコーディング方法（完全初心者ガイド）

WPBeginnerチームの私たちのほとんどは、初めて使う真っ白なコードエディターとにらめっこし、覚えなければならないHTMLタグ、CSSプロパティ、JavaScript関数のすべてに圧倒されたことを覚えています。

それ以来、私たちは何千人もの初心者が同じように真っ白な画面を美しく機能的なサイトに変えるお手伝いをしてきました。

コーディングは「技術者」だけのものではありません。適切なアプローチと指導があれば、誰でもゼロからサイト構築を学ぶことができます。私たちは、ビジネスオーナーからアーティストまで、すべてのバックグラウンドの受講生を対象に、指導方法をテストし、改良してきました。

この初心者にやさしいガイドでは、これまでに何度も成功した実績のある方法を使って、初めてのサイトをコーディングする全プロセスを説明します。技術的なバックグラウンドは必須ではありません。

サイトビルダーとコーディングの比較

インターネットの黎明期、サイトを作るのはちょっとした頭痛の種だった。基本的にコードを使って一からすべてを構築しなければならず、数時間から数週間かかることもあった。

ありがたいことに、そんな時代はとっくに終わっている。今では、すべてのサイトの実に62.9％がウェブサイト・フレームワークを使って構築されている。つまり、もうゼロからサイトを構築する方法を知る必要はないのだ。

現在、ほとんどの人がウェブサイトを構築するために、オープンソースのWordPressやその他のコンテンツ管理システム（ウェブサイト・ビルダー・フレームワーク）を利用している。

WPBeginnerでは、すべてのサイトにWordPressやSeedProdのようなコード不要のページビルダーを使用しています。とても便利で、カスタマイズが簡単で、効率的です。

素晴らしいニュースは、約95％の場合、これらのウェブサイトビルダーやノーコードソリューションを使用して素晴らしいサイトを構築することができるということです。

サイトビルダーを利用する利点と欠点

サイトビルダーを利用するメリットは以下の通りです：

• 初心者でも使いやすい。
• ウェブ開発を学ぶために時間やお金を投資する必要はない。
• 時間を節約し、その分をビジネスの成長に充てることができる。
• お金をかけずにeコマース、会員制、ビジネスサイトを簡単に構築できます。

しかし、サイトビルダーを使うことにはいくつかの欠点がある：

• あなたのサイトには不必要な機能がついてしまい、サイトの表示速度が遅くなるかもしれません。
• プロジェクトにCMS機能は必要ないかもしれないが、ソフトウェアの更新やバックアップを維持する必要はある。

ゼロからコードを書くことの長所と短所

ゼロからすべて自分でコードを書くことの利点をいくつか挙げてみよう：

• サイトには必要なコードだけが表示され、読み込みが速くなります。
• ソフトウェアの更新を維持する必要はない。
• WordPressのキャリアにつながる貴重なプログラミングスキルを身につけることができます。

しかし、これらの利点と以下の欠点を比較しなければならない：

• 何時間も何日もかけて、HTML、CSS、JavaScriptのコードを学ぶことになる。
• あらかじめビルトインされたバックエンドシステムを利用することができないため、コンテンツを動的に生成するのは難しいだろう。さらに、PHPやPythonのようなサーバーサイド言語を学ぶ必要がある。
• コンテンツの追加や更新には、複数のファイルの編集が必須となる。
• 新機能の追加、SEO（検索エンジン最適化）、サードパーティツールとの統合は難しい。
• 自分のサイトへのアクセスを、他の誰かに完全にコントロールさせることなく、簡単に共有することはできない。
• もし開発者を雇ってコードを書いてもらうとしたら、高くつくし、費用対効果もあまりよくない。

詳しくは、サイトビルダーと手作業によるコーディングについてのガイドをご覧ください。

あなたの時間は貴重なので、基本的にあなたの代わりにコードを書いてくれるツールを使ってサイトを作る方法を紹介しよう（これらの方法は1と2で取り上げる）。

そして方法3では、完全にゼロからサイトを構築する方法について、いくつかのリソースを紹介する。プログラミングを学びたい学生にはぴったりだ。

ということで、サイトのコーディング方法を見ていきましょう。以下のクイックリンクから、使いたい方法にジャンプできます：

1.WordPressでカスタムサイトを作る

WordPressは最も人気のあるサイト構築プラットフォームです。実際、弊社のCMSマーケットシェアレポートによると、WordPressはインターネット上のすべてのサイトの43%以上を支えています。

私たちはすべてのサイトにWordPressを使用しています。WordPressの詳細なレビューでは、その長所と短所について詳しく説明しています。

WordPressにはすでに多くの機能が搭載されていますが、プラグインと呼ばれるアドオンをインストールすることができます。プラグインはWordPressに機能を追加するソフトウェアで、WordPress.orgのリポジトリだけでも59,000以上のプラグインを見つけることができます。

ページビルダーといえば、SeedProdが私たちの一番の選択です。ドラッグ＆ドロップのWordPressページビルダーとして人気があり、私たちは多くのパートナーサイトのデザインに使用してきました。SeedProdのサイトもSeedProdを使ってデザインしました！

詳しくは、SeedProdのレビューをご覧ください。

WordPressを始めるには、ドメイン名とホスティングサービスが必要です。我々はBluehostを使用することをお勧めします。彼らはWordPressのトップホスティングサービスのプロバイダーの一つであり、読者にドメイン名を無料で提供し、ホスティングの大幅な割引（わずか$ 1.99/月）を提供しています。

代替を検討したい場合は、ホスティングサービス、SiteGround、または他の最高のWordPressホスティング会社のいずれかをお勧めします。

ドメインとホスティングサービスを取得したら、次のステップはWordPressのインストール（正しい方法）です。

素晴らしいニュースは、Bluehostのようなほとんどの良いウェブホスティングサービス会社は、彼らのワンクリックインストールプロセスでWordPressを超簡単にインストールできることです。それは本当にユーザーフレンドリーなので、あなたはただ始めるために画面の指示に従ってくださいすることができます。

WordPressをインストールしたら、管理ダッシュボードにログインします。このように表示されます：

それでは、個別コードを一行も書くことなく、あなたのサイトを素晴らしいものにする方法について説明しましょう。まず始めに、SeedProdプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストールに関するチュートリアルをご覧ください。

SeedProdを使えば、自分のサイトを簡単にデザインすることができ、ドラッグ＆ドロップするだけで美しいページを作成することができる。コーディングは必要ないので、このチュートリアルには最適だ。

また、WordPressのカスタムテーマをゼロから作成することもできます。このテーマは、ユーザーがサイトを訪れた際に目にするフロントエンドとなります。

さらに、SeedProdは、60秒以内にあなたのために全体のカスタムテーマを作成するAIビルダーを持っています。詳しくは、AIを使ったWordPressサイトの作り方ガイドをご覧ください。

SeedProdをインストールしたら、SeedProd ” ランディングページページのページに行き、’新規ランディングページの追加’ボタンをクリックするだけです。

次の画面では、テンプレートの選択を求められます。

SeedProdには、美しいデザインのテンプレートが豊富に用意されています。これには、非営利サイトや自動車ビジネスサイトなど、特定の使用ケース用のテンプレートが含まれています。また、’Blank Template’を選択して、空のページから始めることもできます。

その後、ページのタイトルとURLスラッグを入力するよう求められます。

例えば、サイトのトップページを作成する場合、タイトルとURL（特定のページのウェブアドレス）として「Home」を入力します。

そして、「Save and Start Editing the Page」ボタンをクリックします。

SeedProdはページビルダーのインターフェースを読み込みます。これは直感的なページビルダーで、ポイント＆クリックするだけで編集を開始できます。

SeedProdのドラッグ＆ドロップ・インターフェースは、初心者にとって簡単ですが、経験豊富な開発者にとっても十分にパワフルです。

左側には、一般的なウェブデザイン要素がすべてブロックとして表示されています。これらは、ページにドラッグするだけで使えるブロックだと思ってください。

右側には、デザインのライブプレビューが表示されます。任意の要素をポイント＆クリックするだけで、編集、削除、移動ができます。

インスピレーションに困っている、または単にウェブサイトを素早く構築したいですか？SeedProdは、見出し、キャプション、行動喚起などのテキストを簡単に生成できる強力なAI機能を備えています。

テキストブロックをデザインに追加し、「AIテキストをジェネレータ」ボタンをクリックするだけです。使用したいプロンプトを入力し、「ジェネレータ・テキスト」をクリックします。SeedProdがあなたの指示に基づいてテキストを生成します。

Canvaのようなウェブデザインソフトウェアを使わずに、ユニークな画像やグラフィックを作成したいですか？

SeedProdはDALL-Eと統合されているので、数秒でオリジナル画像を生成し、個別クリックでサイトに追加することができます。

基本的に、ナビゲーションメニュー、サイドバー、フッターなどのカスタマイザーウェブデザインを、コードを書くことなく作成することができます。

カスタムコードを追加する必要がある場合も、SeedProdがカバーします。カスタムHTML’ブロックをページにドラッグ＆ドロップするだけです。

そのブロックの中に、必要なHTMLコードを手動で追加することができる。

カスタムHTMLブロックのマージン、パディング、デザイン属性を調整することもできます。

同様に、ページにカスタムCSSコードを追加することもできます。

左下の「設定」ボタンをクリックし、「カスタマイザー」を選択するだけです。

ページの編集が完了したら、「保存して公開する」ボタンをクリックして公開します。

また、「プレビュー」ボタンをクリックして、ページを実写で表示することもできます。

このプロセスを繰り返すだけで、あなたのサイトの他のページを作成することができます。文字通り、数分で1ページのウェブサイト、あるいは中小企業のウェブサイト全体を構築することができます。

SeedProdの素晴らしさは、サイトの作成と編集が驚くほど簡単にできることです。

そのため、世界中の多くのプロの開発者がSeedProdを使用しています。実際、Awesome Motiveのような大企業の開発者でさえ、メインサイトの構築にSeedProdを使用しています。

SeedProdの代替品

SeedProdを使いたくないですか？私たちがカバーします！その他のWordPressページビルダーをご紹介します：

• Thrive Architect– コンバージョン獲得に特化した素晴らしいページビルダーです。357以上のデザイン済みレイアウトが用意されており、すぐに使い始めることができます。
• Divi Builder– テーマとしてもページビルダーとしても機能する、もうひとつの強力なドラッグ＆ドロップビルダー。柔軟性に富んでいる。
• Beaver Builder– これも有名で信頼できるWordPressページビルダーで、多くの人に愛されている。
• Astra– テーマを探しているなら、Astraは超カスタマイズ可能で、ワンクリックでインストールできる既製のスターターサイトが付属しています。本当に時間の節約になる！

私たちは少しWordPressに偏っているかもしれませんが（私たちはWPBeginnerですから！）、その人気は本当によくわかります。BBC、Microsoft、Facebook、The New York Timesなどの有名企業がWordPressを使っています。だから、あなたは良い仲間に恵まれているのです！

2.Web.com ウェブサイトビルダーでサイトをコーディングする

ドメイン名の取得、ホスティングサービスのセットアップ、WordPressのようなソフトウェアのインストールといったステップを省きたいのであれば、Web.comウェブサイトビルダーをチェックしてみてはいかがだろうか。

シンプルなビジネスサイトやオンラインストアを構築するのに最適なプラットフォームだ。ガイド付きウィザードも用意されている。

Web.comの料金プランには、無料のドメイン名、無料のSSL証明書（セキュリティのために重要）、数十種類のテンプレート、ウェブサイトのコピーを素早く生成するのに役立つAIライティングツールが含まれています。

何千もの美しい既成のサイトテンプレートから選び、ポイント＆クリックであなたのブランドのニーズに一致するようにデザインをカスタマイズするだけです。

このビルダーには、期待される強力な機能がすべて備わっています。

フォトギャラリー、動画、お客様の声スライダー、お問い合わせフォーム、マップロケーション、ソーシャルメディアボタンなどを簡単に追加できます。

更新、セキュリティ、バックアップはWeb.comが代行するので心配する必要はありません。また、24時間365日のチャット、メール、電話サポートがあります。

Web.comの代替

オールインワンのソリューションはたくさんあります。Web.comとは別に、WordPress以外の使いやすいサイトビルダーをいくつかご紹介します：

• Gator by HostGator– ドラッグアンドドロップツールとテンプレートを備えた完全ホスティングサービスサイトビルダー。
• Domain.com ウェブサイトビルダー– すべての種類のウェブサイトのための美しいテンプレートのトンを持つ別のホスティングサービスオプション。
• HubSpot– 中小企業に最適な、すべて1つになったサイトビルダーとマーケティングプラットフォームです。
• Wix– ドラッグ＆ドロップでウェブサイトを作成できる有名なサイト。
• BigCommerce– オンラインストアの構築を特にお考えなら、BigCommerceは完全にホスティングされたオプションです。

より多くのオプションについては、長所と短所を持つ最高のウェブサイトビルダーの私達の比較を参照してくださいすることができます。我々はそこにほとんどすべての主要なウェブサイトビルダーをテストし、ハードワークに入れました。だから、我々はそれが右のウェブサイトビルダーを選ぶことになると我々が話しているのか知っていると思いたい！

3.ゼロからサイトのコーディングを学ぶ

あなたは学生で、ゼロからサイトのコードを学ぶことに熱心ですか？それは素晴らしいことです！HTMLやCSSなど、サイト開発の基本的な知識を身につける必要があります。

世の中には（無料・有料を問わず）たくさんのコースがあるが、私たちが本当に素晴らしいと思うのはCode Academyのコースだ。

所要時間はおよそ9時間ですが、終了時にはHTML、CSS、Bootstrapを使ったカスタム・レスポンシブ・ウェブサイトのコーディングをゼロから学ぶことができます。

コース終了後も、ゼロからサイトをコーディングするためには練習が必要です。でもご心配なく！次のセクションでは、HTMLとCSSだけで超基本的なサイトをコーディングする方法を紹介します。

コースを修了しても、ゼロからサイトをコーディングできるようになるまでには、何時間もの練習が必要です。次のセクションでは、HTMLとCSSを使ったごく基本的なサイトのコーディング方法を紹介します。

基本的な静的サイトのコーディング

ウェブサイトはHTML、CSS、そして時にはJavaScriptを使ってビルトインされる。このように考えてください：

• HTML（ハイパー・テキスト・マークアップ・ランゲージ）：これはウェブページの基礎となるものです。基本的なレイアウトと、画像、テキスト、動画などすべてのコンテンツを定義します。
• CSS（カスケーディング・スタイル・シート）：CSSは、サイトの見栄えを良くするものです！CSSは、色、余白、パディング、テキストサイズなどを処理します。

このコードを書くには、コードエディターが必要だ。これは特別なテキストエディターのようなもので、さまざまな部分をハイライトすることによってコードを書くのを助け、間違いを見つけやすくし、より効率的に書くことができるようにします。

次に、プロジェクトを開始する必要がある。コンピューター上に新しいフォルダーを作成し、好きな名前を付けてください。ここにあなたのサイトのファイルをすべて保存します。

コードエディターを開き、新規ファイルを作成します。これはあなたのサイトのトップページになるので、index.htmlという名前をつけることをお勧めします。

このファイルに、最初のウェブページのHTMLコードを記述します。

基本的なHTMLページには以下のセクションがある。

• HTMLドキュメント・ラッパー
• ヘッド
• ボディ

次のようなコードを書けば、この基本構造を作ることができる：

doctype HTML宣言は、それがHTMLページであることをウェブブラウザーに伝えるだけである。

headセクション内のコードは画面には表示されません。HTML文書のタイトルやCSSファイルへのリンクなど、HTML文書のメタデータを定義します。

では、HTMLページのheadセクションを埋めてみよう：

ウェブサイトの本文セクションは、ページのレイアウトを定義し、人々が目にするすべてのコンテンツを追加する場所です。

以下は、ヘッダー、メインコンテンツエリア、フッターを持つサンプルウェブページの例である：

自由にプレースホルダーをあなたのコンテンツに置き換えてください。変更を保存することを忘れないでください！

HTML文書を保存したら、ブラウザーでプレビューしてみましょう。最初はこのように少し地味に見えるかもしれません：

それは、HTMLドキュメントが存在しない2つのファイルを指しているからだ。最初のファイルはCSSスタイルシートです。

CSS（カスケーディング・スタイル・シート）もコーディング言語のひとつです。HTMLドキュメントのHTML要素、ビルディング・ブロック、divセレクタのスタイリングに使用されます。

コードエディターを使ってstyle.cssというファイルを作成し、index.htmlファイルと同じフォルダーに保存するだけです。

その後、style.cssファイルに以下のコードを追加する：

これでスタイリングは完了です。しかし、CSSはここで紹介した以外にもいろいろなことができることを覚えておいてください！ユーザーエクスペリエンスを向上させたり、アニメーションを追加したり、メディアクエリーというものを使って異なる画面サイズでのサイトの見え方を調整することもできます。

次に、やはり画像をアップロードする必要がある。

プロジェクト内に新しいフォルダーを作成し、名前をimagesにするだけです。

次に、表示したい画像を見つけて、それをimagesフォルダーに追加する。

次に、index.htmlファイルに戻り、<img>タグ内の画像名を実際の画像ファイル名に変更します。

変更内容をすべて保存し、ブラウザーでページをプレビューすることを忘れないでください。画像とCSSファイルの基本的なスタイルが表示されるはずです。

このプロセスを繰り返して、サイトの他のページを作成することができます。便利な方法は、index.htmlファイルを他のページのテンプレートとして使うことです。別の名前（about.htmlや contact.htmlなど）で保存し、必要に応じてコンテンツを変更するだけです。

この投稿が、サイトのコーディング方法を学ぶのに役立てば幸いです。WordPressを選んだのであれば、1週間以内にWordPressを（無料で）学ぶか、初心者に最適なコードエディターをご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.