安くて安心なのは断然ロリポップ。おうちではたらく笑顔のママに。Webレッスン・相談お問い合わせムズカシイWebのこと初めてのレンタルサーバー。安くて安心なのは断然ロリポップ。「サーバーをさわれないwebデザイナーはペーパードライバーだぁ」イズミヤそ、そうなんですね。やって?っていうかサーバーって何?スクール時代の恩師う〜ん、とりあえず最初は安いロリポップでいいよ!あとは自分で頑張ってね〜!!これは私のWebデザインを学ぶ社会人スクール時代の実際のやりとりです。サーバーって何?という方はぜひこちらもお読みください。聞けないwebのこと「サーバー・ドメインってなに?!」もちろんカリキュラムにもよると思いますが、スクールで教えてもらえるのはあくまでWebデザインの技術のみ。今思い返してみても実践的なことは、ほとんどなかったなぁと思います。...ただこれは致し方ないかなと思います。Webデザインに必要な知識や技術って本当に果てしない!!!(基本お仕事を始めてからも毎日が勉強です)スクールで基礎の基礎を学んで、自分で調べながらやってみてトライ&エラー!そんな繰り返し。サーバー周りのことは当時ほとんど独学でした。どのサーバーを選んだらいいのか?そして実際の操作もGoogleで調べながら失敗しながらでものすごく苦労しました。お金がかかることなので契約するのにはちょっと躊躇しました。Webデザインの勉強を始めた1年目って、ほんとにお金がかかりますよね。スクール代にPC代、Adobeのライセンス料等々...(私も合計すると100万超えてます...)これ以上の出費はできるだけ抑えたい、そして未知の世界のサーバー、まず試して様子を見てみたいというのが本音ではないかと思います。\そんなWebデザインを勉強中の方に私がオススメするサーバーは、断然ロリポップです!/なぜかというと月額100円から気軽に始められますし、お仕事で使う分にも遜色ないからです。※初期費用は別途かかります。スクールでサーバーをお試しで使わせてもらえる所もありますので確認してみてくださいね。今回はロリポップのプランを簡単に説明した上で、実際の契約の仕方からWebサイトのデータをサーバーにアップする方法までWebデザインを勉強中の方に向けてまとめてみたいと思います!※ちなみに今回はWordPressの話はしません。私も現在はWordPressのお仕事をメインでしています。最初にhtmlとcssの扱いに慣れて「Webサイト」ってどういう仕組みでできているか?を理解していたからこそWordPressの勉強にスッと入れたと思っています。WordPressは簡単!みたいな世の中の流れがありますが...私はとっても難しいと思います。Webデザイナーとしてお仕事をしていかれたい方は段階を踏んで学習を進めることをオススメします。レンタルサーバー1ロリポップ!の料金プラン一覧ロリポップにはこのようにプランが色々あります。メール・チャット・電話ロリポップの公式サイトから一部抜粋2019.10.26現在で?!どれを選べばいいの??たくさんありすぎてわからな〜い!!!こうなりますよね。個人的には本当にお試しでサーバーにアップするためだけに使いたい!ということであれば最初はエコノミープラン(月額100円)でいいんじゃないかと思います。WordPressも試してみたいのであればライトプラン(250円)です。※お仕事で使用される場合はスタンダードプランが無難です。どちらにせよ、10日間のお試しが無料できるのでまずは登録してみましょう。プランの途中変更も可能です。レンタルサーバーならロリポップ!初めてのレンタルサーバー2ロリポップ!の申し込みから使用開始までまずはトップページロリポップ!から「お申し込みページ」へ進みましょう!次にプランを選択します。後からプランの変更も可能なので、まずは使ってみたい!という方はエコノミーかライトで良いと思います。(お仕事で使用される場合でもスタンダードで十分ですよ♪)次の画面でロリポップ初期ドメインパスワードメールアドレスを入力します。このロリポップ初期ドメインはアカウント名(ログインID)になります。この後まずは無料でもらえるこのドメインでWebサイトの公開をしていきます!(仮にこの画像で登録したとすると「http://freelancemama.cheap.jp」がサイトのURLになります).cheap.jp↑これは好きなものに変更ができます。お好きなものを選択しましょう。※このドメインはあくまでロリポップから提供される初期ドメイン。世界に一つの独自ドメインではないため、あくまでもテスト用で使っていきます。Webデザインのお仕事をしていると、こういった場面でパスワードを入力することが非常に多くなります。覚えやすいものでもダメではないでのすが...パスワード生成(パスワード作成)ツールこういったツールを使用して複雑なものにしておくことをオススメします!特にお客様のサイトを管理する場合などは絶対!!!ハッキングの恐れなどを少しでも防ぐことができます。このように安全度:高になっていれば安心です。入力できたら、本人確認へ進みます。画面に従って電話番号の認証を行いましょう。確認が完了すると個人情報の登録画面へ移ります。契約種別は「個人」になります。電話番号まで入れると、下にいくつかチェックボックスが出てきます。お支払いを自動更新にするか?オプションプランをつけるか?といった項目になりますが、まずお試しで使用される場合はどちらも不要です。お仕事で使う場合は、自動更新はオン、またWordPressのサイトを作る場合はバックアップオプションもお付けすることを推奨しますが、まずはなしで良いです(後から追加は簡単にできます♪)。さぁ、いよいよ最後!入力に間違いがないか確認し、問題がなければ「無料お試し開始」です。これでお申し込みが完了です!!青いボタンをポチッと押して、ユーザー専用ページにログインしましょう。同時にお申し込み完了メールも届いているはずなので確認、必要なら保護しておきましょう!初めてのサーバー選び3ロリポップ!に申し込みができたらログインしてみようでは早速、申し込みの際に入力した、ロリポップ初期ドメインパスワードを入力してログインしましょう。忘れないうちにメルマガの解除をしてしまうことをオススメします。(今後色んなサービスを使っているとメルマガがどんどん増えていくからです!)ユーザー設定→お客様情報変更から設定ができます。メール受信設定のチェックを外したら、次に同じくユーザー設定→アカウント情報へ進みます。このような画面になると思います。この「サイトアドレス」が先ほど設定した初期ドメインになります。試しにクリックしてサイトを開いてみましょう♪このような画面が出ましたでしょうか?(設定に時間がかかる場合もあるので、もしエラーなどの画面が出た場合は時間を置いてからお試しください!)これはロリポップ!の初期設定で入っているサンプル画面になります。左上のURLの窓のところが、初期ドメイン(http://●●●.sub.jp)になっていますね♪これがサイトのアドレスになります。サーバー選び4ロリポップFTPを使ってWebサイトを公開してみよう!PCで作成したWebサイトのデータをアップロードするためには、FTPというソフトが必要になります。FTP!?また新しいものが出てきた〜〜。FTPとは?とっても簡単に説明すると、ご自身のPCとサーバーを繋ぐためのツールです。これを使わないとどんなWebサイトを公開することはできません。いうことでFTPを使ってWebサイトのデータをアップロードしていきたいと思います。ちなみにこのFTPソフトは、無料で使えるソフトをダウンロードして使用するのが一般的です。今回まずはサーバーにアップしてみよう!ということで、設定等が不要なロリポップFTPを使っていきます。Playerが必要です。Playerをダウンロード(無料)し、インストールしてください。ロリポップ!FTPの使い方(1)htmlファイルをアップロードしようまずは先ほどに引き続きロリポップの管理画面を開きましょう。サーバーの管理・設定→ロリポップ!FTPを選択します。先ほどの初期ドメイン(http://●●●.sub.jp)で見たロリポップの初期画面のデータになります。これをご自身の作ったサイトに置き換えていきますよ〜!まずは、ご自身で作られたWebサイトのデータが入っているフォルダを開く初期ドメイン(例:http://●●●.sub.jp)をインターネットブラウザで開くこの状態にしておきましょう。<補足>念のためテストサイトをアップロードする時は、Webサイトのhtmlファイルの<head>内に以下を追記しましょう。content="noindex,nofollow"次にロリポップ!FTPの左上にある「アップロード」ボタンを選択します。次に、先ほど開いておいたご自身で作られたWebサイトのデータが入っているフォルダの中のhtmlファイルをこの画面にドラッグ&ドロップします。(もしくは、ファイルを選択するボタンからPC内のファイルを選択してもOKです)複数ファイルをアップすることも可能ですが、練習なのでまずは一つずつアップしていきます!!またロリポップの初期ファイルwelcome.htmlは、消してしまって問題ないです。戸惑う操作ですが、焦らずゆっくり一つずつやっていきましょう〜!!!「index.html」というファイル名が表示され、アップロード待ちですという表示になっていると思います。アップロードするというボタンを押しましょう!転送モードについてAUTO:最適な転送モードでアップロード。ASCII:html、php、cgiなどのプログラムファイルやテキストファイルのアップロードに使用。BINARY:jpg、gifなどの画像ファイルのアップロードに使用。※全て初期設定(AUTO)のままでも問題ないです。するとこのような表示に切り替わります。これで「index.html」がロリポップのサーバーにアップロードされました!!先ほどインターネットブラウザで開いておいた、ご自身の初期ドメイン(例:http://●●●.sub.jp)を更新して確認してみましょう。更新ボタンで変わらない場合はスーパーリロードをしましょう。Rいかがでしょうか?htmlファイルがきちんと表示されましたか?もちろんまだhtmlだけの状態なので、画像やcssの装飾はない状態で大丈夫ですよ♪ロリポップ!FTPの使い方(2)favicon.icoをアップロードしようそれでは次に今と同様の操作で、favicon(ファビコン)をアップしてみましょう!ファイルをドラッグ&ドロップ→アップロードするでしたね。できたらWebサイトの画面に戻って、インターネットブラウザをまた更新しましょう。こんな風になっていればOKです♪ちょっと感動しませんか?!ではでは、続いて画像データもアップしていきましょう。ロリポップ!FTPの使い方(3)画像データやcssファイルをアップロードしようまず新規フォルダ作成を選択します。画像がまとめて入っているフォルダは、一般的には「images」になっていると思います。フォルダ名に「images」を手入力します!(異なる名前をつけている人はご自身のフォルダ名と同じものにしてくださいね)自分のPCの中のWebサイトデータと同じような状態を作っていきます。名前に間違いがなければ作成してOKを選択します。すると以下のように、先ほどのindex.htmlやfavicon.icoと並んで「images」というフォルダが完成しました。「images」を選択して開いた状態にしましょう。この画像のようになっていれば「images」フォルダの中に入れています。次にこの中に画像をアップロードしていきます。アップロードボタンを選択します。PCの中の「images」フォルダの中の画像を全選択して、ドラッグ&ドロップ(もしくはファイルを選択する)します。※一度にアップロードできるファイルは50個までなので、沢山ある方は順番に行ってください。するとこのようにファイル名が表示され「アップロード待ちです」となります。「アップロードする」を選択します。※転送モードは画像の場合、BINARYが推奨されていますが、AUTOでやっても私は問題ありませんでした!画像なので少し時間がかかります。全てのファイルがアップロードされるのをしばらく待ちましょう。アップロードできたら、ご自身のWebサイトに戻りインターネットブラウザを更新してみましょう!!!画像が表示されましたか?これは私の画像ですが、まだCSSが入っていないので画像が縦に並んでいるだけです。引き続きCSSファイルをアップロードしていきましょう!方法は今の画像をアップする流れと全く同じです。「cssフォルダ」を作ります。先ほどと同様に、cssフォルダを開いた状態でその中に〇〇.cssという各ファイルをアップロードします。アップロードか完了したら、再度ご自身のサイトを開いて更新!です。いかがでしょうか?きちんとCSSが入ってPC作成し、ローカルで見た状態と同じになっていますでしょうか?「あれ?できてない・・・」という方は、PCの中身とロリポップFTPの中身が同じ状態になっているか確認してくださいね。(フォルダ名などが間違っている場合などが多いです)あとは更新してダメならスーパーリロードしてみましょう。今アップロードしたフォルダやファイルの削除の方法です。これはとても簡単で、左端のチェックボックスにチェックを入れ、「削除する」を選択するだけです。OKを選択して完了です!今回は練習なので良いのですが...FTPの中身を触るときは慎重に操作を行いましょう。PCと異なって復元できない場合もありますので、特にお仕事をスタートされてお客様のサーバーを触るときなどは気をつけましょうね!!慣れていないとサーバーを触るのは余計ビクビク。練習でガンガンやっておいてよかった!と思います。練習で沢山失敗して学んでおこう。レンタルサーバーはロリポップ!勉強中からサーバーの扱いに慣れておいて良かった!と思う私の体験談ちょっと慣れない操作で、戸惑う方も多かったかもしれません。私自身も自力でGoogle先生に聞きながら、サーバー周りに関しては試行錯誤でやってきました。できなくて、わからなくて、何度も泣きそうになりました...(なので誰よりも詳しく解説をしたい!と思ってこの記事を書きました)結果的に長期的に使うならオススメは、エックスサーバーなのですが...初期費用や年間でかかる費用がかなり変わってきます。個人事業などのお客様の中には「そこまでかけたくない...」という方もいらっしゃいます。その場合はやはりオススメはロリポップ!なのです。この2つの比較を自身で体感し、使い方をマスターしているからこそお客様にきちんと説明ができるという大きなメリットがあります。お客様のサーバーは、私の場合ロリポップとエックスサーバー半々です。両方使えて良かった〜と思っています。あとは、そもそもサーバーってなに?なんでお金かかるの?って話をきちんとできないとダメです。お客様はITやWebに詳しくない方がほとんど。自分で勉強中にやりこんでしっかりマスターしましょう!少しでもhtmlとcssでWebサイトが作れるようになったら...ロリポップ!をお試しで使ってガンガンサーバーに練習でアップしてみましょう。MEイズミヤリエ2017年、長男出産後にWebデザインの世界へ飛び込む。翌年未経験・コネなしから開業。一人ブラック企業も経験しながらフリーランスママ2年目。小さな事業主さん向けのWordPressを使用したしっかり働くサイト制作・運用が得意。現在はインスタ講座やHP作成講座、フリーランスママの支援など活動の幅を広げている。好きなものはブログ・ライティング。転勤妻で3歳男の子ママ。おうちではたらく笑顔のママに。おうちではたらく笑顔のママに。1年でWebデザイナーになった主婦の勉強法。スクール在学期間からできる5...病児保育はかわいそう?在宅フリーランスママが思い切って利用してみた体験談フリーランスwebデザイナーイズミヤリエ2017年、長男出産後にWebデザインの世界へ飛び込む。翌年未経験・コネなしから開業。一人ブラック企業も経験しながらフリーランスママ2年目。小さな事業主さん向けのWordPressを使用したしっかり働くサイト制作・運用が得意。現在はインスタ講座やHP作成講座、フリーランスママの支援など活動の幅を広げている。好きなものはブログ・ライティング。転勤妻で3歳男の子ママ。開業HOMEムズカシイWebのこと初めてのレンタルサーバー。安くて安心なのは断然ロリポップ。おうちではたらく笑顔のママに。