未分類

【Web制作マスター】勉強方法総集編【初心者】

[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.22″][et_pb_row admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.9.10″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” hover_enabled=”0″ link_font=”||||on||||” sticky_enabled=”0″]

どうも、みやびです。

今回は、Web制作ができるようになるまでに、行なった勉強について、お話していきます。

この記事を読んでいただけますと、Bizseekクラウドワークスなどで10万円以下の仕事が受注できるようになると思います。

僕自身、ほぼ独学でやってきました。今では、30万〜50万円ほどの案件を受注できるようになりました。僕は独学ですが、誰かに教えてもらった方が上達は早いです。

※0円プログラミングスクール
TechAcademyの1週間無料体験で基礎基本を身につけるのもアリですね。何から勉強したらいいかわからない方は、おすすめです。
>>TechAcademy 無料体験

では早速まとめていきます。

Contents

全体像の理解

まずは、webサイトがどのようにできているのか、全体像を把握していきましょう。

何の勉強をしていいかわからない人はとりあえず、「HTML」と「CSS」から始めてください。

基本は、「HTML」と「CSS」さえ、理解できれば、ある程度は作れるようになるので、この二つを抑えていきましょう。

ドットインストール

>>HTML入門(全24回)- ドットインストール

>>CSS入門(全23回)- ドットインストール

Web制作やプログラミング学習で有名なドットインストールを使います。
一話あたり3〜4分でまとめてあるので、とても学びやすいです。
基礎基本を学ぶには十分でしょう。
海外にはたくさんのプログラミング学習サイトやプログラミング学習のためのYouTubeがあるのですが、日本には数少ないです。
その一つがドットインストールです。

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書[kindle版]

高橋 朋代  (著), 森 智佳子 (著) SBクリエイティブ (2013/12/13)

HTMLとCSSの基礎を理解するには、この1冊で十分です。これさえ読めば、webの構造理解をすることができます。

これさえとは言っていますが、一気に覚えるのは無理なので、あなたのペースで読み進めて、あなたのペースで習得していくことが近道と言えるでしょう。これだけは伝えておきます。

すべて覚えなくても大丈夫です。(笑)

デベロッパーツール/ページソースを利用する

僕はこれをかなり利用しました。
これなしにweb制作の上達はできなかったと思います。

デベロッパーツールとページソースはどんなものか、簡単に説明すると、『サイトの構造を表示させる機能』です。

例えば、自分がweb制作をする際に、「この表示ってどのようにやるのだろう」と他のサイトを見て思った時に、そこに使われているHTMLをみることができます。それをそのまま転用すればいだけですね。

表示のさせ方としては、知りたいページのところで右クリックをして、以下の写真のページソースを表示させるをクリックすると表示することができます。

気になる表示のさせ方がすべて丸見えなので、実は簡単にweb制作ができたりします。先程言った、全て覚える必要はないという理由の一つです。ぜひ活用してみてください。

Webサイトにアクセスを集める

webサイトの構造の理解ができたら、アクセスの集め方を学んでいきましょう。いくつかあるのですが、最低限学びたいものと再現性の高いものを紹介していきます。

SEO対策 検索上位サイトの法則52

SEO対策を知るには、この1冊で十分です。
SEO対策ができるだけで、受注できる仕事の幅が変わりますし、深みも変わってきます。web制作だけできる人とweb制作に加えてSEO対策ができる人では、大きく価値が変わります。

これからweb制作をやっていく人には、必読の1冊です。

SEO×SNS

>>【SEO×SNS】クロスチャネル

こちらでも軽く触れていますが、SNSと組み合わせることで、SEOで上位を取れなくても、アクセスはある程度見込めます。

Twitterのアカウントを複数作って、2週間ほどで1000PVを達成したこともあります。その時は、一切、SEOの知識がなかったですが、アクセスを獲得することができていたので、再現性があります。

数百個のアカウントを自動運用したい方はこちらで無料で説明を受け付けています。
>>無料でアカウントを数百個運用する

もちろん一つのアカウントを伸ばしてそこからアクセスを促すこともいいでしょう。ただ、即効性がないので、即効性を求めたい方は複数アカウント運用をお勧めします。
一つのアカウントが伸びることで、次に作るwebサイトにもアクセスを流せるので、半永続的にアクセスを流せます。
あなたの合う方を選んでやっていきましょう。

バズ部

バズ部

SEOの基礎が理解できたらバズ部の記事を見ることをお勧めします。web内ではかなり有名で、記事の質が非常に高いです。
あなたも知っているかもしれませんね。

Webサイト制作【WordPressを使う】

最近では、wix.comやStriking.lyなどの無料で簡単にwebサイトを制作できるようになりました。しかし、これらには弱点があります。細かな修正ができないということです。
つまり、webサイト制作でお金を稼いでいきたいのであれば、これらでは満足できないのです。

なので、使うのは、WordPressになります。
>>【ブログ】WordPressを使ったブログの始め方

難しいように聞こえますが、難易度はwix.comやStriking.lyなどと変わりません。慣れているか慣れていないかの差なので、あなたもできます。

具体的な勉強方法を書いていきます。

ビジネスサイトを作って学ぶWordPressの教科書

やはり、WordPressの勉強もこれ一冊で十分です。
この本を読みながら実践を繰り返せば問題ないでしょう。本当にWordPressは簡単で、慣れるだけなので、他の本は必要ありません。あとは、ググれば大抵出てきます。

個人ブログを作成して実践

ここまでくれば実際に、個人ブログは作成していくことができるので、トライしてみましょう。実践の中でわからないことが出てくれば、「ググる」、「本を読み返す」この二つで解決しますので、変にお金をかける必要はありません。
実践がいちばんの上達になると身をもって経験しています。どんどん実践して、わかないことを潰していきましょう。

個人ブログを書くことで、広告、いわゆるアフィリエイトを組むkとができるので、そちらも並行して行って、副収入を作ってみましょう。

個人ブログに掲載する広告は、「Googleアドセンス」「A8.net」「Amazonアソシエイト」などをお勧めします。

もっと自由にwebサイトを作成【PHP編】

ここまでできるようになると、十分満足いくwebサイトを作成することはできます。しかし、さらに勉強を進めることでより自由度の高い、満足感の得られwebサイトを作成することができます。
ここでは、初心者にもオススメな【PHP】について解説していきます。

よくわかるPHPの教科書 【PHP7対応版】 (教科書シリーズ) 

こちらもこの1冊で十分でしょう。
これを読めばPHPを使うことで何ができ、どんなことが可能になるのかが把握できると思います。

ドットインストール(PHP入門編)

>>ドットインストール(PHP入門編)

やはりドットインストールは優秀です。PHPの勉強は面白くないです。(笑)なので、本を読むのが苦手な方は、こちらをお勧めします。ただ、そこまで深く理解しなくても大丈夫です。PHPで何ができるのかを把握して、PHPを使いたいと思えたら、学びを深めていきましょう。

海外サイト/YouTube

PHPを勉強するのに、日本語対応しているところはほぼないので、英語で検索して見ると、たまに英語で解説してあるYouTubeがあるので、日本語訳を使って勉強をするのもありでしょう。

最後に

最後までご覧いただきありがとうございます。これらが僕が独学でwebサイト制作をできるまでの道のりと方法です。この方法が絶対ではないですが、成功者の真似をしてみてはいかがでしょうか?

また、できるだけで仕事が取れない人が多数いると思いますので、他の記事で解説しております。

>>【初めての副業】失敗しない仕事の取り方【初心者向け】

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]