WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

初心者はここから。FFFTPでHTMLとCSSをレンタルサーバーにアップロードしてみよう。

はじめてのサーバーアップロードFFFTP
WEBサイトの基本であるHTMLとCSSが書けるようになったらすぐにでもレンタルサーバーにアップロードしましょう。

実際に自分で作ったWEBサイトがどのような作業を経てインターネットに公開されるのかを理解することでWEBデザインの最初の1歩を踏み出すといっても過言ではありません。

レンタルサーバーへのアップロードは無料のFTPクライアント(サーバーにファイルをアップロードするソフト)であるFFFTPとWEBデザイナーの必須ソフトであるDreamweaverが有名です。まずは誰でも手に入れられる環境であるFFFTPを使ってレンタルサーバーとのやり取りを覚えましょう。

HTMLとCSSなどに不安がある人はステップを少し戻って確認しておきましょう

デザイナーLevel:1 「はじめてのWEBデザイン」目次

この記事の内容

レンタルサーバーとの契約

まず自分のWEBサイトを置くためのサーバーを用意しなければなりません。自分でサーバーを作るには専門的な知識が必要なため、殆どの人はレンタルサーバーを利用します。

レンタルサーバーを選ぶ際は何を目的としたWEBサイトを作るのかを考えましょう。とりあえずテストだけでいいやと思うのでしたら、さくらインターネットが信用度があり安価です。

これからWEBデザインを勉強していってWEBデザイナーになる!アフィリエイトで稼ぐ!と思うならばエックスサーバーを利用すれば人気のウェブサイトに成長してアクセス過多でトラブルになることはないでしょう。

私はHTMLの表示速度や大量アクセスに備えてエックスサーバーを使用しています。10日間無料で使用でき、使わないならお金を振り込まなければ自動的にお試し期間終了になるので、初心者の方でも金銭に負担なくレンタルサーバーを試すことができます。

ここからはエックスサーバーを利用しての説明になりますが、他のサーバーでもやり方は一緒です。

レンタルサーバーにFTP接続できる情報が書いてある契約書を確認する

登録を進めていき、手続きが完了すると幾つかのメールが届きますので、チェックしましょう。
この3つが確認できれば専用のソフトを使用して制作したHTML・CSSをサーバーにアップロードすることができます。

FFFTPのインストール

Dreamweaverを使っている人もインストールしておきましょう。実際のWEB開発現場でたまーに使うことがあります。Windowsの32bitと64bitでインストールできるFFFTPが異なりますので注意が必要です。

http://forest.watch.impress.co.jp/library/software/ffftp/

FFFTPの設定

FFFTPの初期設定

まずは【新規ホスト】を選択しレンタルサーバーへの接続と、制作したWEBサイトが置いてあるフォルダをひも付けます。

ホストの設定

このように入力します。ホストの初期フォルダはレンタルサーバーによって様々ですが、エックスサーバーは【URL(http://は記載しない)/public_html】で固定されています。

暗号化状態の保存

環境によってはこのような画面が表示されサーバーに接続されないことがあります。【はい】を選択するとレンタルサーバーに接続することができるようになります。

FFFTPの操作画面

表示された左側の画面がローカル(PCの中のフォルダ)、右側がリモート(レンタルサーバー)の画面になります。ここでファイルをアップロードしたり、バックアップとしてレンタルサーバーからファイルをダウンロードしたりできます。

FFFTPからファイルをサーバーにアップロードする

手段は2通りあります。アップロードボタンを押す手法と、ドラッグアンドドロップを使用する方法。

ファイルを選択してアップロード

ファイルやフォルダを選択してアップロードをする方法です。既にサーバーに複数のファイルがアップ済みで幾つかのファイルのみを選んでアップロードする際よく使うアップ方法です。

ドラッグアンドドロップでアップロード

ファイルやフォルダを選択したら、そのままレンタルサーバーの画面にドロップすれば自動でアップロードが開始されます。逆にレンタルサーバーのファイルをローカルにドラッグアンドドロップするとファイルをダウンロードできます。

大量のファイルを一気にアップロードする際に使用すると便利な機能です。

FFFTPのアップロード完了

ファイルが右側の画面のサーバー画面に表示されればアップロード完了です。ブラウザを開いてURLを打ち込み確認しましょう。
サーバーのFTPアドレスが【/designersnavi.com/public/study】になっています。これをURLに直すと【http://designersnavi.com/study】になります。

index.htmlというファイルを【/designersnavi.com/public_html】にアップロードすれば、【http://designersnavi.com 】【http://designersnavi.com /index.html】の両方でアクセス可能です。ほぼすべてのレンタルサーバーでURL直下に置かれた【index.html】は省略しても表示されるように設定されています。

ローカルとリモートのフォルダを同時に移動させる

ローカル(WEBサイトがあるフォルダ)とリモート(レンタルサーバー)はフォルダの構成が全く同じになります。パソコンのデータをそのままコピーしているようなものです。ですのでわざわざローカルのフォルダを移動してから、リモートも同じフォルダに移動させるのは手間がかかります。その時は【フォルダ同時移動】の機能をしようします。

接続>ホストの接続>設定変更で画面に入ります。

FFFTPのフォルダ同時移動機能

この機能を使うと片方のフォルダを移動すると自動で、もう片方のフォルダも移動されます。直感的にローカルとリモートとでファイルのやり取りが可能です。

デスクトップからもファイルをアップロードできる

どこからでもアップロードできる

WEBデザイナーがおそらく最も使うやり方です。FFFTPはwindowsのデスクトップやエクスプロラーからリモートサーバーにドラッグアンドドロップすることで好きな場所にファイルをアップロードすることができます。

Dreamweaverのような高機能オーサリングソフトの場合はまずローカルとリモートのフォルダを同期させるため最初に設定したフォルダ以外からファイルをアップロードすることができません。ちょっとしたデータの退避や受け渡しに使うことがありますので、覚えておくと便利です。

まずは基本のFFFTPでレンタルサーバーを使ってみよう

例としてエックスサーバーをしました。これで10日はレンタルサーバーとアップロードソフトが無料で使える環境が手に入りますので、色々なファイルをアップロードしてどのURLになるのかなどを経験してください。

HTMLとCSSでWEBサイトを作りサーバーにアップロードすることは程度の差はあれどWEBデザイナーと同じ作業です。この先にあるのがブログを作って収益化したり、WEBデザイナーとして就職・アルバイトを目指すということです。一連の作業を身につけて目的を達成できるようなWEBサイトを運営できるようになりましょう。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST