全国5万人が受講している「サイタ」

ホームページ作成・作り方講座

ホームページ作成・作り方講座を選ぶ

初回60分無料体験OK

まずは60分の体験レッスンからスタート。
無料で実際のレッスンを体感できます。

月々4,900円〜の低料金

先生ひとりじめの個人レッスンを、この価格でご提供。レッスンは全てプライベート形式の60分間です。

通わない月は0円

曜日と時間を選べるので、
無理なくマイペースに通えます。

詳しくはこちら

Web・デザインスクールホームページ作成講座神奈川 キムラホームページ作成教室 スクールブログ ホームページを...

ホームページを作るには

ホームページを作りたい!

と一言に言っても、いったいどうすればいいの?となると思います。とりあえずホームページ作成ツールを使っていろいろ試行錯誤して、結果わからなくなってあきらめる、というパターンも多くみられるのではないでしょうか。

・・ふふ、安心してください。実は僕もそのクチでした。(笑)


ではどうすれば挫折しないホームページ作りが出来るのか。

最終的には、構造と手順を知ることだと思います。ウェブ制作に携わりたい方は是非お読み下さい。きっと避けて通れない道です(笑)


僕が初めてホームページを作成した時は、知り合いのホームページを依頼されたのがきっかけでした。「できます?」って言われて、興味もあったしなんとなく出来る気もしていた(過信)ので「出来ると思いますよ!(推定)」と安請け合いしてしまいました。

それからDreamweaver(ドリームウィーバーと読みます。ウェブ制作ソフトです。)とにらめっこする日々が始まりました。ほかにもウェブ制作ツールはありますが、ドラッグ&ドロップで割と手軽にhtmlが出来る!と聞きまして。

しかしこれが大変に苦戦しまして、htmlは見ずに(わからないから)画像などをドラッグ&ドロップするだけで・・むずかしくないよ・・ほうら、こうすれば僕でも簡単に・・・


って、全然できないじゃん!


思ったよりもうまく進みません。
ある程度形になってきても、全くかっこ良くないし思ったように出来ませんでした。これは、自分が何をしていて何をこれからしなければならないのかがわからなかったからです。また、用語が全然わからなかったことも理解を遅くさせました。用語がわからなければ要点を衝いたHP制作は出来ません。

さーばー?ろーかるほすと?なんですか、それは食べれるんでしょうか?
じぶんのパソコンでは出来たけど、公開ってなに?ユーアールエル?美味しいんですか?

こんな状態でした。
用語に関しては、わからない単語はすぐに調べましょう。仕事を請けてからも知らない単語がたまに出てきましたが、その都度調べました。もちろん知らない単語を知っているフリをして恥をかいたこともありました・・(笑)

http://e-words.jp
↑こういったサイトで用語の検索が出来ますので、どんどん調べましょう。



さて、それではここで簡単にウェブ制作の手順をご説明したいと思います。


【1】骨組みを作る
これはワイヤーフレームと言われます。横文字だとわかりにくいですが、要するに紙とペンをまず用意します。そして作ろうとしてるサイトのメニュー構成をざっとかきます。そして各ページのだいたいの配置をさくっと書きます。(細かくはレッスンにて。)


【2】デザインを作る
作った骨組み(ワイヤーフレーム)を元にデザインを作成します。制作の現場では主にphotoshopやFireworksで作られます。そうして作った完成予定図のことを「デザインカンプ」と言います。


【3】htmlを書く
作ったデザインに即した構造で、htmlを書き下ろしていきます。この構造をしっかり押さえたhtmlを書くことが重要です。


【4】cssを書く
書いたhtmlの構造を元に、それぞれの領域や文字についての装飾をすべてここで設定します。


【5】アップロードする
そのフォルダ構成のまま、サーバーにアップロード。
サーバーというのはインターネット上に公開された(インターネットを介してどこからも中身を見ることが出来る)コンピューターのことです。あなたの使われているパソコンも、サーバーとして公開すればあなたのファイルが世界中どこからでも見ることが出来ます。

サーバーを構築するとなるとかなりの専門知識が必要ですので、ここでは基本的にはレンタルサーバーを借りることにします。サーバーを借りて、そこにアップロードします。そうすると借りたときに割り当てられたURL(インターネット上の住所)があなたのホームページのURLになります。

※ちなみにサーバーにアップロードするときにFTPソフト、FTPソフトと言われますが、このftpとは通信方式のことで、ファイルをサーバーと直接やり取りする形式の一つです。一般的にはftp方式を使ってアクセスします。その通信が出来るソフトのことをFTPソフト、もしくはFTPクライアントと言います。

※さらにちなみに、ftp通信というとわかりにくいですが、別の通信方法は皆さんもいつも行っています。それは「http通信」です。見たことあるでしょ?そうです、ブラウザからアクセスする際、URLには必ず頭に「http://」って付くと思います。これは、「http通信としてファイルを受信させてくれー」とサーバーに要求している訳なんです。そしてそれが出来るHTTPソフト・HTTPクライアントというのが皆さんが使っている「ブラウザ」というもの。WindowsではInternet Explorer、Mac OSではSafariが代表ですね。どちらも共通であるのがFirefox、Google Chromeなど。



これが大雑把に書いた手順です。

さあ、ここまで見てみると鋭い方はお分かりなんじゃないかと思います。

「デザインなんて出来ないんだけど」

そうなんです、まともにホームページとしての体裁を整えようとするとデザインは必須。しかもPhotoshopは8、9万もする高級なプロユースのソフト。無料のツールもありますが、いずれにせよデザインは通らなければならない・・どうしたものか、と。


実際業界には「デザイナー」と「コーダー」と別にいます。コーダーとは、html / cssをコーディングする方です。業界でそういった形で役割分担も分けられてるのに、いきなりこれら両者をやるなんて、敷居が高かったのもうなづけます。

ですので、ご自分はデザイン寄りなのか、コーダー寄りなのかを考えてみて頂き、より取っ付きやすい方からやってみてください。僕のレッスンでは、コーディングからやりたいという方のために、サンプルのデザインを使用してその画像を使用して頂くようにしています。


まずは、ご自分がどの範囲の知識から身につけたいのか、考えてみるのも上達の近道だと思います^^


それでは!

 

(2013年1月13日(日) 18:25)

前の記事

この記事を書いたコーチ

苦手意識を克服し、ウェブ製作および開発の他、基金訓練校で講師も

キムラホームページ作成教室
木村偉宣 (ホームページ作成)

藤沢・平塚・新宿・池袋・登戸・町田・海老名・相模大野・本厚木・伊勢原

ブログ記事 ページ先頭へ