WEB制作の基本からマスターするのが収入を得るための一番の近道

このサイトでは最終的にウエブマーケティングの手法をマスターして
収入を得られるようになりたい方のために。

その最も基本的なところからきちんと学んでいくことを目的としています。

この基本というのが一見とっつきにくいですし。

「アフィリエイトをして手っ取り早く儲けよう」という教材の大方のノウハウでは
基本はすっ飛ばしてある型にはまったやり方を推奨している場合が多いです。
素人でも大丈夫ですよ、なんてな甘言を弄して
ともかく言われたとおりやってみれば素晴らしい成果が得られるとかなんとか。

しかしそういったノウハウは寿命も短く。

簡単に儲かりまっせええええええ!と煽るから思わず買ってしまったら中身はスカスカだったなんてのがほとんどです。

はっきり言ってそういうものに振り回されるのは時間の浪費です。
仮にそういうノウハウに取り組むにしても。
Web制作の基本を学んでから取り組むほうがより理解が深まりますから効果が出やすいと考えます。

そして最終的にはWEB マーケティングの手法を学んで確実な収入を得ていく。
ここを目標としてサイトを作っていこうと考えています。

WEB制作マスターのために

まずHTML/CSSから学び、Web制作をし、それをサーバーにアップすることから学んでいきましょう。

それによってWebサイトの仕組みと基礎を理解する事ができます。

HTML/CSSの学習について

HTML/CSSの学習についてはドットインストールを活用すると動画でプログラミングの勉強ができます。
海外にはたくさんの学習サイトがあるのですが。
日本では数が少ないため、ドットインストールがおすすめ。

またそれを学習することが可能な書籍もたくさん出ていますが。
苦手な方にとっては頭が痛い(自分のことですが・・)ものですので、挫折する可能性もあります。

動画であればそのあたりの負荷を減らしてくれる可能性があります。

大雑把に把握することができただけでも次の理解が進みます。

HTML基礎文法入門 (全30回)

CSS基礎文法入門 (全37回)

ドットインストールがおすすめなのは順番にスキルアップが出来るところです。

ただ動画であるとはいえ、ただ勉強をしてても飽きるとか(これも私のことですが)、そういう場合もあると思います。
これは書籍による学習も同じで。
勉強のための勉強になってしまっては時間の無駄になってしまいます。

HTML/CSSを使ったWEB制作に小心者から取り組める最短ホームページテンプレート

そういう場合にはおすすめのテンプレート教材があります。
ただのテンプレートではなくて作り方まで詳細に解説してくれる動画がついておりますので。
実際にサイトを作りながらHTMLやCSSを学んでいくことができます。

【スマホ用テンプレート付き】自分で更新できる最短ホームページテンプレート+次世代の動画作成完全マニュアルのセット

詳しくは別記事にしますが。
この最短ホームページテンプレートをマスターすることができればそのスキルを使って様々なサイトが作れることになり。
最低の基礎が確実に身につきます。

この簡単ホームページテンプレートが素晴らしいのは
パソコン操作自体が苦手な人でも、安心してホームページ作成ができるように、
必要な作業コンテンツごとに5分程度の動画でまとめられていて
教材化されていることです。

しかも・・・
ホームページ作成の前に初心者にとって障害となるパソコンの使い方までサポートで対応してくれますので。
本当の初心者でも安心して取り組むことができます。

かつ実際に作りたいホームページを作るわけですからモチベーションを維持しながら学習に取り組めます。

単なるマニュアルじゃなくて、作業をしながらホームページの作成方法を学ぶというスタンスです。
そして最終的にはホームページというものが何であるのか、全体的に把握できるというすぐれものです。

そして何よりも重要なことは他のホームページ作成ソフトが
編集エディター上に文章を書き込むのに対して、
このテンプレートは直接HTML画面に、文章を記述していくという特徴があります。
本物のProがHTML/CSSを駆使してWEB制作をやっているようなことを初心者でもできるということです。

つまりホームページを作る作業をしながら同時にHTML/CSSを学ぶことができるという奇跡的な教材です。

ということはこれを学んでいくと最終的にはカスタマイズが自由自在にでき、制約がないということになります。
これってすごいことだと私は思います。

私は様々な教材を買ったりコンサルについたりしましたが。
それで数十万円も溝に捨ててしまいました。
しかも全体のことがわかるようにはなりませんでした。

最初から最短ホームページテンプレートに取り組んでいれば・・・・・と後悔しきりです。
実際その存在に気がついて調べてみたらこの最短テンプレートを使って学習をし、
短期間で外部からのホームページ作成依頼を受ける仕事をする方もいるということです。

その反省も踏まえ、右も左もわからない方はぜひに、とおすすめをしておきます。

それとこの最短ホームページテンプレートはただ練習でホームページが作れるようになるだけでなく。
SEO対策もしっかりしているテンプレートです。

もちろんデザイナーを志す方などはもっと根本的なところから勉強をしたほうが良いとは思いますが。

ただそのテンプレートだけ使っていると若干古くさい、似たようなサイトが出来上がってしまうわけですが。
集客を目的としたサイトはブログではありませんから、最初はこれで十分です。

また実際にサイト構築をしていきますので。
単なる勉強に終わることがありません。

飽きずに学べて同時にサイトも創ることが出来るというところがすごいです。

まずはこれだけでも良いんですが。

力がついてきたらディベロッパーツールとフレームワークがお勧め!

サイト構築がよりフレキシブルにできるようになります。
できたら最初から取り組んだほうがより効果的だと思います。

ディべロッパーツール

Chrome DevTools。日本語ではデベロッパーツールと呼ばれています。
Webサイトの構成やCSSの検証が手軽にできるすぐれものですが。
Chromeにデフォルトでついている機能なので無料です。

マウスを右クリックして下にある「検証」をクリックするか
キーボードの「F12」を押すか.
ショートカットで(Macは Shift + ⌘ + C、Windowsは Ctrl + Shift + C)起動できます。

起動すると右側(または下)にデベロッパーツールが表れます。

最初に使うのは主にHTMLとCSSの部分です。

一番上の2つのイコンの意味と使い方

パネルの左上にある四角と矢印のアイコンにマウスを合わせると以下のような表示が出てきます。

 

select an element in the page to inspect in it
(ページ内の要素を選択して検査する)

そのアイコンをクリックしてから検証したい箇所をクリックすると、
その要素のHTMLと、適応されているCSSが表示されます。
ここを編集すると自分なりのデザインを創ることができます。

つまりディベロッパーツールは誰かが作ったデザインのソースを拝借することが可能なツールということです。

toggle device toolbar
(デバイスツールバーを切り替える)

図の右側の四角を2つ合わせたようなアイコンにマウスを合わせると以下のような表示が出てきます。

つまりアイコンをクリックすると別のデバイス例えばスマートフォンではどのように見えるか表示してくれます。
なおそのサイズは切り替えが可能です。

パネルの右側にある3つドットをクリックすると

以下のように表示されますので一番上のDock sideで切り替えを行います。

詳しい編集方法については別記事にしますが。
気に入ったデザインを見つけたらそれを模倣し、自分のデザインに変えることができます。
ぜひとも活用したいツールです。

フレームワークの活用

最短ホームページテンプレートがフレームワークの塊のようなものでしたが。
このように一から作らずに済むように
Webサイト制作で使える部品を先に塊で用意してくれているのが
フレームワークです。

とはいえ同じフレームワークを使うと似たようなものが出来るというデメリットもあります。
しかし初心者にとってはWEBデザイナーになるわけでもないわけですから。
全体の仕組みを把握するためにだいたいのことを知っておけばよいでしょう。

簡単に学べるのがドットインストールの

Bootstrap 4入門 (全22回)

です。

コンテンツ管理システム (CMS)の活用

それらの基本を学んだ後にワードプレスなどのコンテンツ管理システム (CMS)に取り組んでもよいと思いますが。
最初からCMSを利用しようとすると。

CMS自体がほぼHTMLのソースを理解せずに作成できますので。
それに反比例してデザインの自由度が制限されます
あくまでもその使い方の習得が主になってしまい、
それだけでは本質的なネットコンテンツの作り方を学ぶことができないというデメリットがあります。

またウエブ上での編集になりますので。
いちいちコンテンツをアップロードしなくても良い半面
手元にデータを残しておくことができません

HTML/CSSを使ったWEB制作は自分でホームページ作成とそれにまつわるシステムを自分で構築します。
そして作成作業がオフラインですので。
ホームページ作成では、ドメイン、レンタルサーバーやテンプレートなど複数のシステムが組み合わさって成り立っているわけですが。
HTML/CSSを使ったWEB制作ではそれぞれを自分で決めることができます。

しかしCMSの場合はドメイン、サーバーを含めた、システム全体を一括で借りる形になるのです。
作成作業がオンラインで行われますので制作したコンテンツのファイルデータも手元に置いておくことができません。

そしてCMSではこれらのシステムすべてを同じ会社に依存する事になります。
つまり。
万が一CMSを運営している会社が無くなれば、ホームページの運営を存続する事はできなくなる可能性が高いのです。

そんなことはないと思われるかもしれませんが、ネット業界ではいつ何時何が起こるかわかりません。
そのような危険と隣り合わせであるという事実は認識しておく必要があるでしょう。

さらには多くのCMSは運用コストが高いという欠点があります。
自分で制作するホームページに年間十数万円を支払う価値があるのか、といえば
多くの方は二の足を踏むでしょう。

CMSを使うとほぼHTMLのソースを理解せずに作成できるので知識がなくても見栄えがするサイトを作れます。
またデザイン性に優れたテンプレートがたくさん要してありますから。
それを選べば差別化も可能です。
企業が多くCMSを採用するメリットとしては複数の人間で管理、更新することができるという点が見逃せません。

このような圧倒的なメリットが有るにもかかわらず、
実際には時代遅れとみなされることも多いHTML/CSSで作ったWEBが全世界のサイトの半分を占めているという事実。
それは先に示したような大きなデメリットがあるから。

このことを認識する必要があります。

結局は本当に自分の望むサイトを作ろうと思えばHTML/CSSの知識は欠かせません。

ワードプレスがなぜお勧めなのか

CMSは便利ではありますが、様々な危険を抱えており。
無条件におすすめできるものではありませんが。

しかしそんな中でも多くの方に支持されているCMSがワードプレスです。

これはまずオープンソースなので世界中の多くの方が開発や修正に関わっているため。
消滅する可能性が低いという重要な長所を持っています。
かつ無料ですから気軽に導入することができます。
CMSであってもコストが掛かりません。

その上ワードプレスはGoogleが推奨するCMSで、SEO対策にも効果的であると言います。

更に導入にはそれなりの知識が必要なのですが。
ワードプレスが多くの方に支持されているために。
多くのレンタルサーバーがワードプレスをクリックひとつで導入する仕組みを導入してくれていますので。
そのようなサーバーを選べば非常に簡単に取り入れることが可能です。

その反面企業が運営するCMSのように至れり尽くせりということはありません。
わからないことは自分で調べる必要があります。

しかし、ワードプレスは広く普及しています。
世界中のCMSの6割程度がワードプレスという圧倒的なシェア!!を占めています。

多くの方がワードプレスの利用方法に関して詳しい解説記事を書いてくれているために。
調べやすい環境が整ってきています。
わからないことでも簡単に調べられ、問題を解決することができます。

ということでみんなが寄ってたかって使いやすくしているのがワードプレスです。
ちなみにこのサイトもワードプレスを使って作っています。

私の場合最初からワードプレスを使ってサイトを作り始めましたので。
ずっと知識の深まりがないまま様々なノウハウを試したりしました。

ただテンプレートを変えれば違ったデザインのサイトが作れると言っても。
その都度購入しなくてはなりませんし。
仮に無料であってもその使い方を覚えるだけなので。
私は縛られている不自由さを感じました。

それでHTML/CSSの勉強をやり直したんですが。

今にしてみれば最初にHTML/CSSを使ったサイトを作るべきであったと。
そうすれば階段を一段一段登るようにスキルアップができたんじゃないか。
と、完璧な情弱であった私は後悔をしています。

おそらくは私のようにアフィリエイトに取り組むその手前で
全くネットに対する感覚がない人の場合には
そういう積み重ねが必要なのですが。

そんなことは必要がないと思われる方も多いと思います。
そうであればワードプレスは簡単ですから、すぐに始めても問題はありません。

ワードプレスを使いながら様々なカスタマイズをするためにHTML/CSSを学ぶというやり方もありです。

勉強として手軽なのはやはりドットインストールの

WordPress入門 (全23回)

です。

ワードプレスのカスタマイズはHTML/CSSのスキルが有れば簡単にカスタマイズができます。
自分だけのサイトを構築するためにもHTML/CSSは必須習得スキルです。

他に習得すべきもの

HTML/CSSのスキルが身につき。
ある程度使いこなせるようになったら
サイトをもっと見やすくしたりサイトに動きをつけてみることに挑戦をしてみましょう。

そこで必要となる知識がJavaScriptなんですが。
これは難しいので、先にJavaScriptをより簡単に扱うためのライブラリであるjQueryについて学習しておきましょう。

jQuery入門 (全20回)

またさらにより自由度の高いWebサイト/Webサービスを作りたくなったら。
PHPを勉強していきましょう。

PHP入門 (全30回)

様々な本もあって勉強しようと思えば様々な方法がありますが。

これに関してはまた別途記事にしていくつもりです。

まとめ

できるだけ楽にサイトを作って収入の確保をしたいというのはどんな方でも普通に考えることだと思います。
しかし。
基礎力がないのに儲かる?ノウハウにハマってしまうとそれで多少の利益が得られたとしても。
そのうちそのノウハウが効果がなくなったときには収入は失われてしまいます。

かく言う私は様々なノウハウに乗っかって収入を得ては失うという過程を何回か繰り返してしまいました。
それでそんなことをやっているうちに断片的な知識は身についたものの。
スキルを身につけるのにだいぶ時間を食ってしまいました。

結局サイトが自由自在に作れるようになれば。
それだけ様々なノウハウにも取り組みやすくなりますし。
コンサルもきっちりできるようになります。

「急がば回れ」ということわざもあります。
これは

急ぐときには、危険な近道より、遠くても安全な本道を通るほうが結局早い。安全で、着実な方法をとれといういましめ。

でありまして。
今はCMSなどもあってHTML/CSS後騎士がなくてもサイトを作ることは可能ですので、
だれでもアフィリエイトの参加できますよ、といった教材が氾濫していますが。
そういうものはすべて詐欺まがい商品であって。

全くパソコンに触ったことがなかった私のような人間は少数かと思いますが。

知識があり、感覚もある方であれば上記のステップを踏んだほうがより早く目的を達することが可能だと思います。

 

2階に飛び上がってたどり着くことができる方は少ないですが。
階段を登れば足さえ丈夫であれば誰でも2階にたどり着くことができるのです。

学校の勉強でも学力不足の場合、まずはその手前、
例えば高校生であれば中学校の勉強をおさらいしなさいというアドバイスをする教師もいると思います。
言われたほうが結構屈辱的なんですが、
しかしそれは正しいんです。

本質を見極めるためにも初歩から固めていきたいものです。

 

PAGE TOP