採用トップ

Webサイト基礎 カリキュラム

Webサイト基礎(5)~Webサイト公開と改善の基本~

Webサイトを作成した後は、それを公開し、実際に運用して改善を繰り返すプロセスが重要です。

本記事では、無料ホスティングサービスを使ったWebサイトの公開方法やファイルのアップロード、さらに改善のポイントとしてデザインや動作のブラッシュアップ、モバイル対応の基本について解説します。

初心者の方でも簡単に実践できる内容をまとめましたので、ぜひ参考にしてください。

1.Webサイトの公開方法

Webサイトを公開するには、以下の手順を踏む必要があります。

  1. ドメインの準備:
    独自ドメインを取得するか、無料ホスティングサービスのサブドメインを利用します。
  2. ホスティングサービスの選択:
    無料で利用できるホスティングサービスを活用しましょう。以下で詳しく解説します。
  3. ファイルのアップロード:
    HTML、CSS、JavaScriptのファイルを指定された方法でアップロードします。

2.無料ホスティングサービスの活用

1. GitHub Pages

GitHub Pagesは、GitHubが提供する無料のホスティングサービスです。

静的サイト（HTML、CSS、JavaScript）を簡単に公開できるため、初心者からプロフェッショナルまで幅広く利用されています。

特徴:

  • 無料で利用可能:
    GitHubアカウントさえあれば誰でも使える。
  • 静的サイトに特化:
    静的なHTMLやCSS、JavaScriptのサイトを公開するのに最適。
  • サブドメイン付き:
    「username.github.io」の形式で公開されるため、独自ドメインがなくても利用可能。

利用手順:

1. GitHubにリポジトリを作成

• GitHubにログインし、新しいリポジトリを作成します。
リポジトリ名は自由ですが、username.github.ioという名前にすると専用のURLで公開できます。

2. ファイルをプッシュ

• ローカルで作成したHTML、CSS、JavaScriptファイルをリポジトリにプッシュします。

git add .
git commit -m "Initial commit"
git push origin main

3. リポジトリの「Settings」>「Pages」からデプロイ設定を行う
  • GitHubのリポジトリページに移動し、設定(Settings)を開きます。
  • 左側のメニューから「Pages」を選択し、デプロイ元のブランチを指定（例: mainブランチ）。
  • 数秒で公開され、公開URLが表示されます。

注意点:

  • 動的な機能（例: PHPやデータベース連携）は利用できません。
  • デプロイ後にキャッシュが原因で変更が反映されない場合があるため、必要に応じてキャッシュをクリアしてください。

2. Netlify

Netlifyは、静的および動的なWebサイトを無料でホスティングできるサービスです。

特に、継続的デプロイ（CI/CD）や簡単なフォーム機能の提供など、多機能で初心者に優しいのが魅力です。

特徴:

  • 継続的デプロイ対応:
    GitHub、GitLab、Bitbucketなどと連携し、変更をプッシュするだけで自動でデプロイされます。
  • フォーム機能が簡単:
    JavaScript不要でHTMLに数行のコードを加えるだけでフォーム機能を実現。
  • ドラッグ＆ドロップで簡単デプロイ:
    サインアップ後、ファイルをアップロードするだけで公開可能。
  • サーバーレス機能対応:
    サーバーレス関数を使用して、動的なサイトの要素も実現可能。

利用手順:

1. Netlifyにサインアップ
  • Netlifyの公式サイト（Netlify）にアクセスし、GitHubまたはGoogleアカウントでサインアップします。
2. GitHubリポジトリと連携
  • 「New site from Git」を選択し、GitHubアカウントと連携します。
  • 公開したいリポジトリを選択し、Netlifyが自動的にサイトをデプロイします。
3. ドラッグ＆ドロップでデプロイ
  • コード管理が不要な場合、Netlifyの管理画面に作成したHTML、CSS、JavaScriptのファイルをドラッグ＆ドロップするだけでサイトが公開されます。
  • 公開URL（例: sitename.netlify.app）が即座に発行されます。

注意点:

  • 無料プランでも十分な機能を利用できますが、大量のトラフィックや高度な機能を使う場合は有料プランが必要になる場合があります。
  • 動的サイトを構築する場合、サーバーレス関数やAPI連携が必要です。

3.比較表: GitHub PagesとNetlify

特徴GitHub PagesNetlify
対応サイト静的サイト静的・一部動的サイト
サブドメインusername.github.iositename.netlify.app
継続的デプロイGitHubリポジトリからのみGitHub、GitLab、Bitbucketなどから対応
フォーム機能×○
サーバーレス機能対応×○
UI/UXシンプル初心者向けで直感的

3.改善のポイント

デザインや動作のブラッシュアップ

Webサイトの見た目や操作感は、ユーザー満足度に直結します。

以下の改善ポイントを意識することで、デザインと動作をより洗練されたものにすることができます。

1. 配色の見直し

重要性:

視認性の高いカラースキームを採用することで、ユーザーが情報を理解しやすくなります。

また、ブランディングにも繋がります。

改善のヒント:
  • コントラスト比を最適化:
    文字と背景のコントラストを十分に確保し、可読性を向上させます。
    例えば、WCAG（ウェブアクセシビリティ基準）で推奨される4.5:1以上のコントラスト比を目指しましょう。
  • ブランドカラーの統一:
    サイト全体で統一感のあるカラーを使用し、プロフェッショナルな印象を与えます。
  • 配色ツールの活用:
    Adobe ColorやCoolorsを使って、バランスの良い配色を検討できます。

2. UI/UXの改善

重要性:

ユーザーが直感的に操作できる設計は、滞在時間やコンバージョン率に大きく影響します。

改善のヒント:
  • ボタン配置の見直し:
    ユーザーが自然に視線を動かせる位置（例: 右下や視線移動先）に配置します。
    重要なボタンはサイズを大きくし、明確なコールトゥアクション（CTA）を追加します。
  • ナビゲーションの簡素化:
    サイト内の動線を整理し、必要な情報に素早くアクセスできるようにします。
    例: メニュー項目を5つ以内に絞る。
  • フィードバックを追加:
    ボタンのホバーアクションやクリック後のアニメーションを加え、操作の結果を即座に伝える工夫をします。

3. パフォーマンスの最適化

重要性:

読み込み時間が長いと、ユーザーが離脱する可能性が高まります。

高速なサイトはSEOにも有利です。

改善のヒント:
  • 画像の圧縮:
    TinyPNGやImageOptimを使って、無駄なデータを削減します。
    WebP形式への変換もおすすめです。
  • 不要なコードの削除:
    開発時に使ったデバッグコードや未使用のCSS/JavaScriptを削除し、コードを最適化します。
  • CDNの利用:
    CloudflareやAWS CloudFrontなどのCDN（コンテンツ配信ネットワーク）を活用して、読み込み速度を改善します。

モバイル対応の基本（レスポンシブデザイン）

モバイルデバイスからのアクセスは年々増加しており、レスポンシブデザインを採用することが不可欠です。

1. メディアクエリの使用

重要性:

デバイスの画面幅に応じてスタイルを変更することで、どのサイズの画面でも快適に閲覧できるようにします。

実装例:

以下のように、画面幅が768px以下の場合にフォントサイズを小さく調整するコードを書きます。

/* デスクトップ用のデフォルトスタイル */
body {
    font-size: 16px;
}

/* スマートフォン対応のメディアクエリ */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

2. フレックスボックスやグリッドの利用

重要性:

フレックスボックスやCSSグリッドを使用することで、レイアウトを簡単に調整できます。これにより、異なるデバイス間で一貫したデザインが実現します。

フレックスボックス例:

ナビゲーションメニューを横並びから縦並びに切り替える例です。

.nav {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .nav {
        flex-direction: column;
    }
}

CSSグリッド例:

カードレイアウトをデバイス幅に応じて調整する例です。

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .cards {
        grid-template-columns: repeat(1, 1fr);
    }
}

3. テスト

重要性:

設計だけではなく、実際の動作確認が必要です。以下のテストを行いましょう。

テスト方法:
  • ブラウザのデベロッパーツールを活用:
    Google Chromeの「デベロッパーツール（F12キー）」を使い、画面サイズを自由に変更して確認します。
  • 実機テスト:
    実際のスマートフォンやタブレットでサイトを開き、操作性や読み込み速度を確認します。
  • オンラインエミュレーターの利用:
    BrowserStackなどを利用して、複数デバイスでの動作を確認できます。

まとめ

Webサイト公開と改善は、Web開発の最終ステップとして重要な工程です。

無料ホスティングサービスを活用して効率的に公開し、改善を重ねることで、より良いユーザー体験を提供できます。

今回ご紹介した内容をぜひ実践してみてください。

次回からはいよいよ応用編に突入いたします。

SHARE

blog 関連記事

すべて見る
採用バナー