HTML/CSS

ホームページを作成して売上をあげるために知っておきたい事

ホームページを作りたい人
ホームページをつくって稼げるらしいんだけど、どこから始めたらいいかよくわからないんだよなぁ・・

今回の記事ではこんな悩みにお答えします。

Sponsored link

ホームページって稼げるの?

はい。ズバリ、稼げます。

金額はというと、はっきりと相場は決まっていないのですが、

5万〜10万くらいなら、1件ホームページを受注すれば達成できます。

クラウドワークスなら、

案件や規模にもよりますが、5万〜20万くらいで毎日のように案件が見つかります。


こんな案件がたくさん。

まずは月1〜2件受注して月10万円〜くらい稼ぎつつ少しずつスキルアップしていく、というのが現実的かなと思います。

たった月10万?

と思うかもしれませんが、仕事で月10万増やすというのはなかなかしんどいと思うので、

スキルアップしながら稼ぐというのは結構アリかなと個人的には思ったりします。

また、まるまるホームページがつくれなくても、

今あるホームページを部分的に修正したり、画像を差し替えたり、

といった案件も結構見つかるので、

ホームページがわかるようになるとちょっとした小銭稼ぎもできるかなと思います。

ホームページを作れるようになるために

ホームページを作れるようになるためには、いくつかのスキルが必要になります。

必須
・HTML (エイチティーエムエル)
・CSS (シーエスエス)

追加で覚えたいスキル
・jQuery (ジェイクエリー)
・Javascript (ジャバスクリプト)
・PHP (ピーエイチピー)
・Bootstrap(ブートストラップ)

まずはHTML(エイチティーエムエル)の説明から。

ホームページをつくるなら必須のHTML

HTMLというのはHyper Text Markup Language (ハイパーテキストマークアップランゲージ)の略なんですが、簡単にいうと、

ホームページのここにメニューを置きますよー
ここに見出しを置きますよー
ここに画像を置きますよー

といった内容を決めるために使われます。

ほぼすべてのホームページが、HTMLで作られていると思っていてOKです。

で、具体的にHTMLを見たい、と思ったら、

どこかのホームページを見ている状態で、マウスの右クリックを押して、

「ソースを表示」という箇所をクリックすると、こんな文字がずらりと表示されると思います。

ずらずらとやけに長いですね。

一見ややこしそうに見えますが、実はそんなに難しくはありません。

上の文字をよーーーくみると、

div とか、

p とか、

img とか、

a href といった文字が目にはいると思います。

それらを くの字のかっこで、 ”

<

div>” みたいな感じで囲っているのがわかるかと思います。

それが、タグと呼ばれているもので、

HTMLはいろいろなタグ を使って、ホームページを表現しています。

ホームページつくってみたい人
なんか難しそう・・

ですよね、僕も最初はそう感じました。

けれど大丈夫。

実際によく使うタグはせいぜい15個〜20個くらいで、

あとは必要になった時に調べればいいので、

ちょっとだけ最初頑張れば、意外にすんなりつくれるようになります。

次はCSS。

ホームページのデザインに欠かせないCSS

CSS(シーエスエス)は、Cascade Style Sheet (カスケードスタイルシート)の略でして、

ホームページのデザインを担当します。

HTMLで骨組みをつくって、CSSで実際にデザインをするという感じです。

CSSは、例えば、

ここの文字を赤色にしてー
この四角に色をつけてボタンにしてー
これとこれの隙間をちょっとだけ開けてー

など、

色、サイズ、配置など、デザインに関わるいろんな設定を変える事ができます。

CSSもまた、最初は覚えるのがちょっとしんどいのですが、

小さいところから徐々に慣れていけばいいかなと思います。

他のjQueryやPHPについてはいずれ書きたいと思います。

ホームページを作れるようになる方法 その1 まずはこのサイト

本業でホームページをつくる必要に迫られ、
いろんなサイトを探した中でいきついたのがこれ。

ドットインストール

プログラム書く人なら誰もが知っているような有名なサイトです。

このサイトの何がいいかというと、

・動画で説明されていること
・1つの動画が3分くらいでまとまっていること
・やや早口なのでテンポがいいこと

かなと思います。

ドットインストールではたくさんの講座があるのですが、その中でも、

1. HTML入門
2. CSS入門
3. CSSレイアウト入門
4. 実践!ウェブサイトを作ろう

の4つは全て目を通しておいたほうがいいです。

例えばHTML入門の内容を見ると、

imgタグ
headタグ
bodyタグ
ulタグ
sectionタグ
navタグ
footerタグ

といったタグの説明があり、一般的なホームページの構成がわかるようになっていますし、

CSS入門だと、

font-family
background-color
margin
class
border-radius
div
float
opacity

といった内容を覚える事ができます。

1回で覚えなくても大丈夫。

動画は何度でも見る事ができるので、

最初は流して見て、2回目からちょっとメモをとったり、3回目からは実際にメモ帳を開いてコマンドを入力してみる、といった流れでいいと思います。

7回勉強法という本もありますしね。

created by Rinker
¥691 (2019/07/17 23:28:38時点 Amazon調べ-詳細)

ちなみに、僕も覚えた当初はメモ帳に書いてたりしましたし、

今でもたまに読み返したりしてます。

こんな感じ。

アオキ
字が汚いのはご愛嬌 (てへぺろ

今でこそ、オンラインのプログラムスクールはたくさんあるのですが、

その先駆けとも言えるドットインストールをつくった人は本当にすごいなと思います。

で、

1. HTML入門
2. CSS入門
3. CSSレイアウト入門
4. 実践!ウェブサイトを作ろう

これらを何度か繰り返して学習して、ホームページのつくりかたがなんとなくイメージできるようになったら、1冊でいいので本を購入して学んでみることをお勧めします。

ホームページを作れるようになる方法 その2 おすすめの本

近くの本屋にいって、ホームページ関連の本をかたっぱしから開いて見比べてみました。

僕の場合は飽き性ということもあり、細かい理論ばかりだと退屈してしまうので、

実際にホームページが完成するような本を選びました。

この本のいいところは、

スタンダードなページもさる事ながら、

今流行りの『シングルページレイアウト』も作れる事にあります。

※シングルページレイアウト・・パソコンで見てもスマホで見ても同じように見えるホームページ

とりあえず本にかいてあるコードをそのままなぞればホームページが完成するし、

完成版のホームページのコードも実際に入手できるので、

ホームページを触りつつ、その解説を見つつ、少しずつ身になってくるので、ホームページ初心者の方にはとってもお勧めです。

僕の場合はここまでで2ヶ月くらいだったと思います。

Sponsored link

ホームページを作れるようになる方法 その3

ここまでくればかなりホームページの知識はついているので、

クラウドワークス
などの案件に応募してもいいと思います。

もちろんもっとスキルを高めるために、

例えば自分が気に入ったホームページのソースコードを見つつ、

自分でホームページを作ってみるというのもアリです。

ホームページを作る過程で何回もタグを入力する事になり、結果的に手が覚えてくるので。

最初はとにかく数稽古ですね。

ホームページを作れるようになる方法 番外編

ホームページを作ろうと思うと、どうやっても時間が限られてしまうので、

できるだけ効率的な作り方を覚えておくといいです。

例えばこの本なんかお勧めです。

この本でいいなと思ったのは、

HTMLの構成のパターン化とか、クラスのつけ方とか、

とにかくパターン化してスピードを上げようという方法を知れた事ですね。

何度かホームページを作っていると、

アオキ
あれ、これ前にもやったなぁ

と思ったりする事がしょっちゅうでてくるので、
パターン化して徐々にスピードアップをしていきたいですね。

まとめ ホームページを作って稼げるようになりましょう

初心者がホームページを作れるようになるための方法をまとめてみました。

効率的に学習して、徐々にスピードアップして、

月10万〜くらいを稼げるようになりたいですね。

ホームページが作れたら他のスキルも掛け合わせる事でより案件も増えてくるし、
なんなら転職も視野に入ってくると思うので、

まずは本業を続けながら徐々にホームページのスキルを高めていってはいかがでしょうか。

アオキ
さくっとホームページ作れるようになるといいよねぇー

ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m
アオキのツイッターアカウント

『web初心者』の方へ、こんな記事も読まれています。

1. 【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】

2. ホームページを作成して売上をあげるために知っておきたい事

3. プログラミング入門おすすめの言語はJavaScriptで決まり〜分かりやすさ第一で説明してみる〜

4. 【無料】パソコンのキーボード練習の4つのステップ【これだけでOK】

5. 【初心者向け】パソコンでホームページをつくる5つの方法とサーバー4種類をまとめてみました

関連記事

  1. HTML/CSS

    TCDテンプレート『MAG』の見出し(h1,h2)の設定は変更しよう〜SEO重視するなら変更必須〜

    TCDといえばホームページ業者やブロガーならほとんど知っているんじゃな…

  2. HTML/CSS

    楽天トラベルのカスタマイズページをできるだけ簡単に手早くつくる方法をまとめてみた

    楽天トラベルのカスタマイズページを作ってみたいと思ってはいるんだけど、…

  3. HTML/CSS

    パソコンでホームページをつくる5つの方法とサーバー4種類をまとめてみました【初心者向け】

    子供向け無料プログラミング寺子屋『CoderDojo熊本』第1回のアン…

  4. HTML/CSS

    レスポンシブサイトの作り方をめっちゃわかりやすく書いてみた【Bootstrap4】【初心者向け】

    そもそも『レスポンシブサイト』って何?『レスポンシブサ…

  5. HTML/CSS

    【Sass】の書き方をアップデートすべくbulmaフレームワークを読み解いてみる【初心者向け】

    ホームページなりWebサービスを作ろうと思ったらもれなく『HTML…

  6. HTML/CSS

    【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムに使いたい(3)【P5.j…

    遊ぶようにプログラミングができる『クリエイティブコーディング』はもちろ…

Sponsored link

最近の記事

  1. クリエイティブコーディング

    三角関数の使い方〜わかりやすさ重視でまとめてみた【動画あり】
  2. HTML/CSS

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  3. リベラルアーツ

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  4. P5.js (Processing)

    【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめの…
  5. Laravel

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
PAGE TOP