menu

ど素人が独学でサイトを公開するまでにした失敗と成功

独学でwebサイトを作成して公開するのって何から手をつけたらいいかわからないですよね。私も全くの素人でHTMLやCSSを学校で勉強した経験もなく、書店に並んでいる本を参考にwebサイトを作ろうとしましたが、なかなかうまくいきませんでした。それでサイト公開までに多くの時間を費やしてしまった経験がありました。

このような私と同じような経験をせずに、これから独学でwebサイトを作ろうとする人に活かしてほしいので、私の体験を紹介したいと思います。

読んで得られるメリット

  • 遠回りせず、webサイトを公開できる。
  • webサイト作成から公開の道すじがわかる。
  • 挫折しない。

webサイトを公開するまでの経緯

 webサイトを作成し公開しようとした理由

仕事の一環で定期的に、講習会を行っていたのですが、受講者も数年に1度しか受講しないので、内容を忘れてしまい、復習する必要があるなと感じていました。webと全く関係ない仕事をしていて、HTMLやCSSを聞いたこともない私でしたが、いつでも復習できるwebサイトを作っておこうと思いました。

Fotolia_98299439_Subscription_Monthly_M

当時の私は周りから全く評価されず、パッとしなくていつも悶々としていた時で、私の本心は、ここで一矢報いたいという思いもあったのが私の正直な気持ちなんですが、(今思えば、自分勝手な承認欲でしたが…)

もし、サイトを作れれば、受講者にも役立つことだし、会員制サイトなんか作って仕事のノウハウを共有できれば、効率化も図れるなと考えwebサイトを作成することにしました。

 参考書を購入する

まず、私は、書店に行きHTML、CSSの参考書を買いに行きました。全くwebに関する知識がないので、一番わかりやすい本を選び、読んでみることにしました。読み出して2週間程経つとこれで本当にwebサイトが作れるのか?という不安が襲ってきてましたが、まだ、諦めるのは早いと思い読み続けましたが、案の定、一ヶ月で挫折しました。

Fotolia_38942205_XS

それから、数冊購入したのですが、同じように途中で投げ出ししてしまいました。なにがいけなかったかというと、実際にサイトを作る工程がなかったことでした。

 Dreamweaverを使う

次にコーディングソフトを使ってみることにしました。どのようなソフトがあるのか調べてみるとホームページビルダーとDreamweaverがあることがわかり、参考書を読んで知識がついたつもりになってたので、HTMLとCSSの知識が必要なDreamweaverを使うことにしました。
だからといって、すぐに使うことができませんでしたので、Dreamweaverの参考書を買いサイトを作ってみることにしました。その時購入した参考書は下のとおりです。

Dreamweaverレッスンブック CC対応

この本の良いところは、画像素材をダウンロードして解説どおりにDreamweaverを操作すると実際にサイトを作ることができることでした。
書いたコードが反映されるので、参考書で学んだHTMLとCSSの知識をサイトが構築されていくので体感することができました。
しかし、課題点が浮き彫りになりました。

  • 作ったサイトをどのようにアップロードしていくのか?
  • 画像素材をどうやって作るのか?

せっかく参考書のとおりにサイトを作成したので、アップロードすることにしました。

 アップロードについて

いきなり有料のレンタルサーバーを借りるのは、気が引けるなと思い、無料サーバーを提供しているFC2のサーバーを使用しました。

結局は有料のレンタルサーバーを借りることになったのですが…でも、練習でアップロードできるので、使用してみてはいかがでしょうか?

yuichi kotaniさんが動画でFC2のサーバーを使ったアップロードの仕方について解説していますので、参考にしていただけたらと思います。

サイトをアップロードすることはできたのですが、思いどおりのサイトを作るには、画像素材を作らないといけないなと思い、探しているとphotoshopやIllustratorを使って作成する必要があることがわかりました。

正直そのようなソフトはプロが使うので、自分なんかには使えないだろうなという思いはあったのですが、やってみないとわからないと自分を信じ込ませ、とにかくGoogle検索して使い方について勉強しました。

 photoshopやIllustratorの勉強法

いろいろ検索していった中で、私はあるサイトに出会いました。それは、「Webクリチップス」というサイトでした。そのサイトはyoutube動画で、photoshopやIllustrator、HTML、CSSを学べる講座が提供されているものでした。

何が素晴らしかったかというと無料でphotoshopやIllustratorの基本を学べたことで私でもプロが使用するソフトが使えるんだという自信を持たせてくれたことでした。

できるという自信を持つことはやはり初めて取り組む人にとっての1歩目のハードルなんじゃないかなと思います。

しかし、photoshopやIllustratorの基本が分かっても、それをどうサイト制作に活かすの?となったとき、立ち止まって考えたところ、今まで学んできたHTML、CSS、Dreamweaver、photoshop、Illustratorについて習得してきたものがつながっていなかったことに気付きました。

 Webデザインオンライン講座

その状態を解決してくれたのも「Webクリチップス」でした。WebクリチップスのWebデザインオンライン講座の紹介文ですが、

Illustrator・Photoshop・HTML・CSSそれぞれのカリキュラムをこなして、スキルを身につけますが、それは、まだ「点」の状態。「点」の状態のまま、グルグル回ってしまって その先になかなかステップアップできない。インプット(=学習)ばかりで、アウトプット(=制作)をどのようにやっていけばいいかわからない。

私はまさにこのような状態でした。ここまで来るにも相当な時間を要していましたし、なんとか自分のサイトを完成させたいという思いが強かったので、Webデザインオンライン講座を受講することに決めました。この講座の何が良かったかというと、

  • 講師の対応が親切丁寧であり、サポートが充実していること。
  • 自分が作ったサイトを添削してもらえること。
  • 講師を含め受講者のグループでサポートし合えること。

私はこの講座のおかげで自分の思いどおりのサイトを作ることができました。実際に作ったサイトを紹介したいのですが、私の会社から作ったサイトを公開することを許可してもらえず削除するように言われたので、紹介できませんが、一定の人には理解してもらえたサイトを作れました。しかし、サイトを一から作った経験があったおかげで、こうやってブログを書けているので、会社には認めてもらえなくても結果的には良かったと思っています。

まとめ

全くの素人の私が独学でwebサイトを公開するまでの話をしましたが、公開するまでにいくつもの壁がありました。

タイトルに失敗と成功と書いてましたが、今思えば、初めに参考書を読んで挫折はしましたが、読んで学んだ知識は後からあとから線として結ばれたので、失敗ではなかったのです。その時に諦めていたら、失敗になってたかもしれません。

会社から作ったサイトを削除するように言われましたが、結果的には失敗ですが、サイトを作った経験のおかげで、現在こうやってブログを書けていることですし、私が体験したことはどれも私の中で失敗ではありませんでした

人生の中で頑張ったけど、うまくいかなかったということも案外そうでもないかもしれないですね。

これから、独学でサイト制作に取り組もうと考えている方に少しでも参考にしていただけたら、幸いです。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでshare lifeをフォローしよう!

After EffectsでCMのグラブル風オープニングを作成してみよう。After EffectsでCMのグラブル風オープニングを作成してみよう。

かっこいいfacebook用プロフィール動画の作り方(after effects)かっこいいfacebook用プロフィール動画の作り方(after effects)

関連記事

  1. あっという間!写真編集加工に最適なBeFunkyの使い方

    あっという間!写真編集加工に最適なBeFunkyの使い方

    ソーシャルメディアやブログに写真を投稿する際、編集加工したい時ってありますよね。photos…

  2. 28818787 - businessman protect cloud lock symbol with hands

    さくらインターネットでwordpressを完全SSL化する方法

    最近サイトをSSL化にしなければという話を聞き、個人情報やクレジットを取り扱うわけではないですが、今…

  3. 高さを揃える

    レスポンシブでも横並びの段組の高さを揃えられるjQuery「ma…

    前回、紹介したレスポンシブwebデザイン講座 で、レスポンシブサイトを作ったのですが、幅を変更すると…

  4. 絶対できる年賀状作成!無料のプリントマジックの使い方

    絶対できる年賀状作成!無料のプリントマジックの使い方

    普段あまりパソコンを使わないので年賀状を作ろうとしたら、わからなくて何をどう始めたらいいのだ…

  5. gigafile

    メールで大容量ファイルを送信できないことはない!GigaFile…

    メールで大容量の写真や動画を渡したい時ってありますよね。実際にメールでスムーズに送れる容量は…

  6. 簡単!photoshopを使ったトイカメラ風写真の作り方

    簡単!photoshopを使ったトイカメラ風写真の作り方

    今や簡単にInstagramで写真を加工できるようになりましたが、自分の好きな色彩で微妙な調…

  7. menu2

    簡単!レスポンシブメニューをjQueryでドロップダウンできるよ…

    スマホ用のレスポンシブwebサイトを作る時に、のハンバーガーメニューからドロップダウンするメニューを…

  8. カフェロゴアイキャッチ

    チョーク風素材の使い方でこんなに印象が変わるの?!(photos…

    チョーク風のデザイン素材を使いたいけど、どのように使えば良いかわからずに悩みますよね。私も…

PAGE TOP