ホームページ制作の困ったを解決！HTML初心者でもできるスマホ対応サイト公開手順

この記事では、ホームページのスマートフォン対応を業者に依頼したものの、HTMLやサーバーに関する知識が乏しく、作業に戸惑っている方を対象に、具体的な手順と注意点、そして心のケアまでを包括的に解説します。専門用語をかみ砕き、まるで隣でコンサルタントがアドバイスしているかのように、あなたの疑問を解消します。HTML初心者でも安心して作業を進められるよう、画像付きで分かりやすく説明しますので、ぜひ最後までお付き合いください。

ホームページについてです。業者にスマートフォン向けのサイト作成を依頼しました。

ム―バブルタイプを使用しており、サーバーはｆｆｆｔｐです。

現在ＰＣ版のＨＰがある状態です。

業者からはＨＴＭＬでデータを受け取っています。

業者より

①データ一式を

サーバー上に（下層の【s】フォルダ）に

アップして下さい。

②ＰＣ版ホームページの<head>～</head>の中に、

下記のタグをコピペして設置して下さい。

※タグ自体はもらっています。

①と②の指示を受けていますが初心者でよくわかりません。

下層の【s】フォルダも見当たりません。

最下層がどこなのかを知る方法も教えていただきたいです。

サクラエディタで既存のページの写真変更、文字変更程度は出来ますが

全くの初心者なのでわかりやすく教えていただけると助かります。

添付画像は業者からのデータです。

宜しくお願い致します。

ステップ1：現状把握と心の準備

まず、落ち着いて現状を整理しましょう。あなたは、ホームページのスマートフォン対応を業者に依頼し、HTMLデータを受け取ったものの、サーバーへのアップロードやタグの設置方法が分からず、困っている状況です。初めての作業で不安を感じるのは当然のことです。焦らず、一つ一つ丁寧に確認していきましょう。

不安を乗り越えるための心の準備

完璧主義を手放す: 最初から完璧を目指す必要はありません。まずは、指示された手順通りに進めてみましょう。
小さな成功体験を積み重ねる: 一つのステップをクリアするごとに、自分を褒めてあげましょう。小さな成功体験が自信につながります。
困ったらすぐに相談する: 家族や友人、または専門家に相談することも有効です。一人で抱え込まず、誰かに頼ることも大切です。

ステップ2：FTPソフトの準備とサーバーへの接続

FTPソフト（File Transfer Protocol）は、あなたのパソコンとサーバーの間でファイルの送受信を行うためのツールです。まず、FTPソフトを準備し、サーバーに接続することから始めましょう。

1. FTPソフトの選択とインストール

FTPソフトには、無料のものから有料のものまで、様々な種類があります。初心者の方には、使いやすく、日本語対応のものがおすすめです。

FileZilla（無料）: 多くの人に利用されており、安定した動作が特徴です。
Cyberduck（無料）: Macユーザーにおすすめです。直感的な操作で、初心者でも使いやすいです。
FFFTP（無料）: Windowsユーザー向けの定番ソフトです。日本語対応で、分かりやすいインターフェースが特徴です。

お好みのFTPソフトをダウンロードし、インストールしましょう。

2. サーバー情報の確認

FTPソフトでサーバーに接続するためには、以下の情報が必要です。これらの情報は、通常、レンタルサーバー会社から送られてくるメールや、契約時に発行される書類に記載されています。もし、情報が見つからない場合は、レンタルサーバー会社に問い合わせて確認しましょう。

ホスト名（またはサーバーアドレス）: サーバーのIPアドレスまたはドメイン名です。
ユーザー名: サーバーにログインするためのユーザー名です。
パスワード: ユーザー名に対応するパスワードです。
ポート番号: 通常は21番ですが、場合によっては異なることがあります。

3. FTPソフトでのサーバー接続

FTPソフトを起動し、上記のサーバー情報を入力して、サーバーに接続します。接続に成功すると、サーバー上のファイルやフォルダが表示されます。

例：FileZillaの場合

FileZillaを起動し、画面上部の入力欄に、ホスト名、ユーザー名、パスワード、ポート番号を入力します。
「クイック接続」ボタンをクリックします。
接続に成功すると、画面右側にサーバー上のファイルやフォルダが表示されます。

ステップ3：ファイルのアップロード（下層フォルダの確認）

サーバーに接続できたら、いよいよファイルのアップロードです。業者から受け取ったHTMLデータを、サーバー上の指定されたフォルダにアップロードします。

1. 下層フォルダの確認

業者から「下層の【s】フォルダ」にアップロードするよう指示があったとのことですが、このフォルダが見当たらない場合は、以下の方法で確認してみましょう。

サーバーのファイル構造を確認する: FTPソフトでサーバーに接続し、画面右側のファイル一覧をよく見てください。ルートディレクトリ（最上位のフォルダ）から順番にフォルダを開いていくと、目的のフォルダが見つかることがあります。
フォルダ名を確認する: フォルダ名が「s」ではなく、「smartphone」、「sp」、「mobile」など、別の名前になっている可能性もあります。業者の指示を再度確認するか、業者に直接問い合わせてみましょう。
フォルダがない場合: フォルダが見つからない場合は、自分で作成することも可能です。FTPソフトの操作方法に従い、新しいフォルダを作成し、「s」という名前を付けましょう。

2. ファイルのアップロード

目的のフォルダが見つかったら、HTMLデータをアップロードします。アップロード方法は、FTPソフトによって異なりますが、一般的には以下の手順で行います。

FTPソフトの画面左側（ローカル側のファイル一覧）で、アップロードしたいHTMLデータを選択します。
FTPソフトの画面右側（サーバー側のファイル一覧）で、先ほど確認した「s」フォルダを開きます。
選択したHTMLデータを、「s」フォルダにドラッグ＆ドロップするか、右クリックして「アップロード」を選択します。
アップロードが完了するまで待ちます。

ステップ4：HTMLタグの設置

ファイルのアップロードが完了したら、PC版ホームページのHTMLファイルに、業者から受け取ったHTMLタグを設置します。このタグは、スマートフォン向けのサイトを表示させるための重要な役割を果たします。

1. PC版ホームページのHTMLファイルの特定

まず、PC版ホームページのHTMLファイルを探す必要があります。通常、ホームページのトップページ（最初に表示されるページ）のファイル名が「index.html」や「index.php」などであることが多いです。FTPソフトでサーバーに接続し、ファイル名を確認しましょう。

2. HTMLファイルのダウンロード

FTPソフトを使って、PC版ホームページのHTMLファイルをパソコンにダウンロードします。ダウンロード方法は、ファイルを右クリックして「ダウンロード」を選択するなど、FTPソフトによって異なります。

3. HTMLファイルの編集

ダウンロードしたHTMLファイルを、テキストエディタ（サクラエディタなど）で開きます。

4. <head>～</head>内へのタグの貼り付け

HTMLファイルの<head>～</head>内に、業者から受け取ったHTMLタグをコピー＆ペーストします。<head>タグは、HTMLファイルの冒頭部分にあり、<title>タグや<meta>タグなどが記述されている箇所です。

HTMLファイルを開き、<head>タグを探します。
<head>タグの直後（または、<head>タグ内の適切な位置）に、HTMLタグを貼り付けます。
ファイルを保存します。

5. HTMLファイルのアップロード

編集したHTMLファイルを、FTPソフトを使ってサーバーにアップロードします。上書き保存する形でアップロードします。

ステップ5：動作確認と修正

HTMLタグの設置とファイルのアップロードが完了したら、スマートフォンであなたのホームページにアクセスし、正しく表示されるか確認しましょう。

1. スマートフォンでのアクセス

スマートフォンのブラウザで、あなたのホームページのURLを入力してアクセスします。スマートフォン向けのサイトが表示されれば、成功です。

2. 表示の確認

以下の点を確認しましょう。

レイアウト: スマートフォンに最適化されたレイアウトで表示されているか。
文字の大きさ: 文字が小さすぎたり、大きすぎたりしないか。
画像の表示: 画像が正しく表示されているか。
リンクの動作: リンクが正しく動作するか。

3. 問題点の修正

もし、表示に問題がある場合は、以下の点をチェックし、修正を試みましょう。

HTMLタグの確認: 設置したHTMLタグに誤りがないか、再度確認しましょう。
CSSの確認: スマートフォン向けのCSSファイルが正しく読み込まれているか確認しましょう。
キャッシュのクリア: ブラウザのキャッシュが原因で、古い情報が表示されている可能性があります。ブラウザのキャッシュをクリアし、再度アクセスしてみましょう。
業者のサポート: 問題が解決しない場合は、業者に相談し、サポートを受けてください。

ステップ6：困ったときの対処法と心のケア

ホームページ制作は、予期せぬ問題が発生することもあります。そんな時に、どのように対処すれば良いか、そして、精神的な負担を軽減するための心のケアについて解説します。

1. エラーメッセージへの対処

作業中にエラーメッセージが表示された場合は、落ち着いて内容を確認し、以下の方法で対処しましょう。

エラーメッセージをメモする: エラーメッセージの内容を正確にメモしておきましょう。
検索エンジンで調べる: エラーメッセージを検索エンジンに入力し、解決策を探しましょう。
専門家に相談する: 解決策が見つからない場合は、専門家に相談しましょう。

2. 困ったときの相談先

一人で解決できない問題に直面した場合は、以下の相談先を頼りましょう。

業者: スマートフォンサイトの制作を依頼した業者に、直接相談するのが最も確実です。
レンタルサーバー会社: サーバーに関する問題は、レンタルサーバー会社のサポートに相談できます。
ウェブ制作の専門家: ウェブ制作の専門家は、技術的な問題だけでなく、デザインやSEOに関するアドバイスもしてくれます。
オンラインコミュニティ: ウェブ制作に関するオンラインコミュニティに参加し、他のユーザーと情報交換したり、質問したりすることもできます。

3. 精神的な負担を軽減するための心のケア

ホームページ制作は、時間と労力がかかる作業です。精神的な負担を感じたら、以下の方法で心のケアを行いましょう。

休憩を取る: 作業に行き詰まったら、一度休憩を取り、気分転換しましょう。
目標を細分化する: 大きな目標を小さなタスクに分割し、一つずつクリアしていくことで、達成感を得やすくなります。
自分を褒める: 作業が進んだら、自分を褒めて、モチベーションを維持しましょう。
周りの人に話す: 家族や友人、同僚に悩みを聞いてもらうだけでも、心が軽くなることがあります。

もっとパーソナルなアドバイスが必要なあなたへ

この記事では一般的な解決策を提示しましたが、あなたの悩みは唯一無二です。
AIキャリアパートナー「あかりちゃん」が、LINEであなたの悩みをリアルタイムに聞き、具体的な求人探しまでサポートします。

今すぐLINEで「あかりちゃん」に無料相談する

無理な勧誘は一切ありません。まずは話を聞いてもらうだけでも、心が軽くなるはずです。

ステップ7：成功への道：まとめと次の一歩

この記事では、HTML初心者の方でも、業者に依頼したスマートフォン対応のホームページを公開できるよう、具体的な手順と注意点、そして心のケアについて解説しました。サーバーへの接続、ファイルのアップロード、HTMLタグの設置、動作確認と修正、そして困ったときの対処法まで、一連の流れを丁寧に説明しました。

まとめ

現状把握: 状況を整理し、不安を解消しましょう。
FTPソフトの準備: FTPソフトをインストールし、サーバーに接続しましょう。
ファイルのアップロード: HTMLデータをサーバーにアップロードしましょう。
HTMLタグの設置: PC版ホームページにHTMLタグを設置しましょう。
動作確認と修正: スマートフォンで表示を確認し、必要に応じて修正しましょう。
困ったときの対処法: エラーメッセージへの対処法や相談先を確認しましょう。
心のケア: 精神的な負担を軽減するための方法を実践しましょう。

次の一歩

この記事で得た知識を活かし、実際に手を動かして作業を進めてみましょう。最初は戸惑うかもしれませんが、一つ一つステップを踏むことで、必ず目標を達成できます。もし、途中でつまずいたり、疑問点が出てきたら、遠慮なく専門家や周りの人に相談してください。あなたのホームページが、スマートフォンでも快適に表示されるようになることを願っています。

付録：よくある質問（FAQ）

この章では、よくある質問とその回答をまとめました。あなたの疑問を解決し、スムーズな作業をサポートします。

Q: FTPソフトの設定方法が分かりません。

A: FTPソフトの設定方法は、ソフトによって異なります。各ソフトの公式サイトやヘルプページで、詳しい設定方法を確認してください。また、レンタルサーバー会社が提供している設定マニュアルも参考になります。
Q: サーバーに接続できません。

A: サーバー情報（ホスト名、ユーザー名、パスワード、ポート番号）が間違っている可能性があります。レンタルサーバー会社から送られてきた情報を再度確認し、正しく入力してください。また、ファイアウォールやセキュリティソフトがFTP接続をブロックしている可能性もあります。一時的に無効にして、接続を試してみてください。
Q: ファイルをアップロードできません。

A: サーバーの容量が不足している可能性があります。レンタルサーバーの契約内容を確認し、必要に応じて容量を追加してください。また、ファイル名に日本語が含まれていると、アップロードできない場合があります。ファイル名を半角英数字に変更してみてください。
Q: HTMLタグを設置しても、スマートフォンサイトが表示されません。

A: HTMLタグの記述に誤りがある可能性があります。業者から受け取ったタグを再度確認し、正確にコピー＆ペーストしてください。また、キャッシュが原因で、古い情報が表示されている可能性もあります。ブラウザのキャッシュをクリアし、再度アクセスしてみてください。
Q: スマートフォンサイトの表示が崩れています。

A: CSSファイルが正しく読み込まれていない可能性があります。HTMLファイル内のCSSファイルへのリンクを確認し、正しいパスが記述されているか確認してください。また、CSSファイル自体に問題がある可能性もあります。CSSファイルを修正するか、業者に相談してください。

“`

コメントするコメントをキャンセル

お役立ちコンテンツ

転職体験談

転職ノウハウ

転職コラム