>> 目的別おすすめプログラミングスクールはこちら!

初心者がコーディングを学び始めて10日でwebページ作った話。おすすめ勉強サイト紹介

Life

 

こんにちは。

タイトルの通りなのですが、僕は現在コーディングを勉強中です。

そして…

webページ1枚完成させたぞ!!!

そんなわけで今回は、バリバリの文系大学生である僕がコーディングを勉強して、webページを自分自身で作るに至ったまでの手順をお伝えします。ちょっとでも興味持ってる人は是非参考にしてみてください。

また、「コーディング?プログラミング?ナニソレオイシイノ?」って人も僕の頑張りを眺めていってください。

 

スポンサーリンク

コーディングとは?プログラミングと何が違うの?

ではまず、そもそも「コーディング」と「プログラミング」との違いは何でしょう。

どちらも「プログラム」を打つ作業という点では同じです。細かいニュアンスの違いはあるようなのですが、

・コーディング…プログラムを書くこと、もしくは、文字や画像、音声などのデータを特定のコードに置き換える(符号化する)こと。

・プログラミング…コンピューターに処理を行わせるためのプログラムを、プログラミング言語を用いて作成すること。

(出典:https://kotobank.jp/dictionary/ascii/48/

よくわからないですね(笑)

ざっくりと言ってしまうと、webサイト制作やデザインなどをするのが「コーディング」、システムやアプリの開発をするのが「プログラミング」だと考えれば大丈夫です。

そして、今回僕が学んでいたのは「コーディング」で、やっていることは「webサイト制作」です。

 

初心者が勉強を始めて10日間での成果

ポートフォリオサイトを完成させました

ポートフォリオサイトを作りました。(サンプル用)

f:id:mockenbird1010:20180821205204p:plain

f:id:mockenbird1010:20180821205211p:plain

f:id:mockenbird1010:20180821205216p:plain

f:id:mockenbird1010:20180821205222p:plain

Atsuki Satake のポートフォリオ

※サイト内で使った画像は全てフリー素材です

これが作成したwebサイトのトップページです。いかがですか?

「へぇ?だから何?」って思う人や、反対に興味を持って「すごい!どうやって作るの?」って思う人がいることでしょう。今回は、興味を持ってくれる人のために記事を書きました。人がどう思うにせよ、僕自身はこれを自分自身の力で作り上げたということに非常に感動していますし、すごいと思っています

下の方で、このwebページを作った方法もご紹介します。

 

どうやって作ったか?

f:id:mockenbird1010:20180821205200p:plain
かつて僕がアレルギーだった黒い画面と細かい文字列

これがいわゆるコーディングというやつです。テキストエディタのソフトをパソコンに入れて、HTMLとCSSと呼ばれるコードを書いていきます。簡単にいうとコンピューターの言語です。

それを覚えながら、やりたいことを命令していくことで、最終的にwebサイトを作っています。(例えば、ここの文字は赤色にして!とか)

とは言っても、外国語を覚えるほど難しくはありません。よく見ると基本的には英語で意味のある文字列ですし、覚えることも人間の言語ほど複雑ではありません。(少なくともこのレベルでは)

かつては見るだけで目を背けたくなったこの黒い画面を、自分が使いこなしていると思うと、なんとも感慨深いです…。成長だ…。

 

コーディングができると何がいいの?

では、何故コーディングができるとどんなメリットがあるのでしょうか。

1. 自分のwebサイトを立ち上げられる

「だから何?」って言われそうですが、これはこれからのネット社会を生きていく上で非常に重要なことになります。自分自身を発信する場所があるというのは、つまりインターネット上に家を持っていることに相当します。持っていない人はある意味、インターネット上ではホームレスになっているようなものと言えますよ。

2. ブログなどのカスタマイズができる

そんなのブログのいいじゃないですか〜

なるほど。確かにはてなブログやAmebaブログを使えば、デザインテンプレートが用意されているので、コーディングができなくても簡単なカスタマイズはできます。

しかし、もしコーディングのスキルがあれば、自分のブログのデザインをもっと自在にいじれるようになります。せっかくブログを運営しているなら、出来るだけ好きなデザインにした方がいいですよね。

 

3. 仕事(お金)になる

そして何よりも大切なのはこれです。コーディングのスキルだけで、お仕事が貰え、終われば当然給料が払われます。

もう一度言います。コーディングを学べば仕事を受けて、お金を稼ぐことが可能です

具体的にどうするかというと、仕事を受注したい人と、仕事を頼みたい人をマッチングする「クラウドソーシング」と呼ばれるサービスがあり、それに登録することでお仕事を受けられます。(登録は無料です)

CrowdWorks

最大手のクラウドソーシングサービス

② Bizseek

少し規模が小さめのサイトのため、仕事の競争率が低い

 

いわゆる「フリーランス」や「フリーエンジニア」と言った人たちは、主にこれらのサイトを使ってお仕事を受け、報酬を受け取って 、生計を立てています。

学生でも、働いている社会人でも、副業やお小遣い稼ぎとして登録して仕事を受けられます。しかもライティングとは違って、webサイト制作は一度できるようになれば、お仕事の単価が一件につき5万円〜10万円とかなり高額です。スキルさえ身に付けてしまえば稼ぎやすいんですね。だから、僕もまさに今勉強中です。

登録は無料で簡単なので興味があれば、是非どんなお仕事があるのか調べてみてください。

 

初心者がwebページを作るまでにやった5つのこと

それでは、全く未経験だった僕が、上記のようなwebページを作成するまでに至った経緯をご紹介します。あくまで僕自身の体験談なので、進度には個人差があることをご了承ください。

1. webサイト制作に興味を持つ (8月10日)

まず当たり前なのですが、興味を持ったからはじめました。でも案外これがいちばん大切だったりします。

コーディングを学習している際には失敗と試行錯誤の連続です。興味がないと続けられないでしょう。反対にやる気がすごいあれば、短期間で成果をあげることも可能です。

 

2. プログラミング学習サイト「ドットインストール」で基礎を学ぶ (8月10日〜)

無料で各種プログラミングが学べる「ドットインストール」というサイトがあります。(一部有料)

コンセプトとしては初心者向けにゼロから、3分以内の短い動画でプログラミング言語の基礎を教えてくれるというもので、この解説がめちゃわかりやすいです。初心者が自分でコーディングを学びはじめたいなら、まずはこのサイトで勉強することをおすすめします。

⇒ Dotinstall

ちなみに僕は「HTML/CSSの学習環境を整えよう」「HTML入門」「CSS入門」「HTML基礎文法」「CSS基礎文法」「実践!ウェブサイトを作ろう」という講座のみやりました。これだけで基礎の基礎は十分学べます。

一番初めは出来るだけ飽きずに、継続できることが大切です。ちなみに教えてくれるコードを写しているだけで、サイトが完成していくので、かなり出来たような気分になるのもポイントです。

 

3. 田舎フリーランス養成講座に参加(8月13日〜)

そのタイミングで丁度、「田舎フリーランス養成講座」、通称「いなフリ」に参加しました。いなフリとはフリーランスとして働くことに興味がある人向けの、スキルアップのための1ヶ月間の合宿です。フリーランス志望の他の受講生と共に学びながら、現役でフリーランスとして活躍している人たちが講師となり、技術面はもちろん様々なサポートをしてくれます。

ここで講師の方々に質問をしながら、ドットインストールでの学習を続けました。

▼いなフリに興味がある方はこちら

田舎フリーランス養成講座 | 地方独立を支援する移住型体験プログラム「田舎フリーランス養成講座」の公式サイトです。

 

4. webサイトの模写をする (8月15日〜)

そして、なんといきなり実際にインターネット上にあるwebサイトを見ながら、そのデザインになるようにコードを書いていきます。(講師の方にオススメされました。)基礎の基礎を齧った状況で、いきなりの実践です。当然、訳が分かりません。今までは、動画で解説してくれた先生の真似をしていただけだったので、自分でコードを書けなんて言われて出来ないのは当たり前です。

だからと言って投げ出すわけにも行かないので、一つ一つ時間をかけながら、いちいち動画を見直したり、Google先生に聞いたりしながら作っていました。

…そして少し慣れてきて半分くらい進んだ時に、悲劇が起こりました。間違えて他のファイルを上書き保存してしまったため、これまでずっと書いてきたデータが消えてしまいました

f:id:mockenbird1010:20180822224616p:plain
流石にショックでしたが、貴重な時間を無駄に費やす訳にもいかないので一通り落ち込んだ後に、初めから一つ一つ書き直していきました。そこで気付きました。

あれ、前回作った時よりも明らかに早く同じところまで戻れた…

一度やっているのだから当然といえば当然なのですが、それにしても明らかに「わからない→解決」までのプロセスが早くなっていったのを確信しました。

「実践でコードを書きながら、わからないことを学んだ方が絶対に早い…」

そんな感じで、苦戦はしながらも徐々に制作スピードも上がり、無事に完成しました。

 

5. 写真と文章を差し替えて完成! (8月20日)

f:id:mockenbird1010:20180821205204p:plain

最後にデザインは維持したままに写真と文章(Sampleと入れただけですが)を差し替えて、ポートフォリオサイトの大元が完成です。

今後なのですが、もう早速出来そうなお仕事を受けながら、わからない部分を勉強していくつもりです。勉強した分、稼ぎます。

 

コーディングを学ぶなら環境を整えよう

あれ?これだけ?と思う方もいるかもしれません。そうです。実質やっていたのはこれだけなんです。ただ周囲にコーディングのことを質問できる環境があったのが、大きな要因です。一人だったら流石にこんなに早くは出来ませんし、途中で折れてしまいます。

これを見て興味を持った人や、「自分にも出来そう!」と思った方は、是非今すぐにでも始めてみてください。お金になるだけじゃなくて、案外、コーディングって楽しいです。

何よりも出来上がった時の達成感がすごい

 

コーディングの勉強にオススメのサイト4選

初心者の方は、まずオンライン学習から始めてみましょう。今すぐ始めたい人のために、おすすめのコーディング学習サイトをご紹介します。

ドットインストール

f:id:mockenbird1010:20180821223606j:plain

恐らく一番初級者向けで、なんの知識もない初心者が始めるに当たって一番おすすめなサイト。3分間の動画がいくつもあり、丁寧な動画での説明で学んで行く。飽きずに基礎的な知識を教われるのでかなり優秀です。ほとんどのレッスンが無料で使用可能。ただ実践的な練習は少ない。

⇒ Dotinstall

 

Progate

f:id:mockenbird1010:20180821223559j:plain

ドットインストールと双璧をなすプログラミング初心者用の学習サイト。クリエイティブな画面とゲーム感覚で一つ一つ学べるのが特徴。基本的にはスライドによる説明があり、それに沿って実際にコードを自分で書いて学んで行きます。しかし、機能制限が多く、ちゃんと学ぶには有料会員(980円/月)に登録する必要があります。

⇒ プログラミングの入門なら基礎から学べるProgate[プロゲート]

 

Codeprep

f:id:mockenbird1010:20180821223554p:plain

上二つに比べるともう少し実践的な内容を学べるサイトです。その分詳しく丁寧に説明がないので、少しだけ基礎は学んでからやった方が良いでしょう。ピンポイントで使えるコードがそれぞれ独立した「ブック」として10分で終わるように作られているので、必要なスキルをピンポイントで学ぶのに向いています。なお、「ディスカッション」機能により、わからない点は他のユーザーや公式アカウントに聞くこともできます。

⇒ CODEPREP | プログラムを書いて動かしながら学ぶ実践型のプログラミング学習サービス

 

Udemy

f:id:mockenbird1010:20180821223602j:plain

こちらは他とは少し毛色が違っていて、世界最大のオンライン学習プラットフォームであり、プログラミング専門の学習サイトではありません。プログラミングに限らず、写真やデザインなど様々なジャンルの授業があります。世界最大なだけあり、様々な授業から自分にあったものを選んで学べます。ただ、こちらは無料では使えず、それぞれの講座の購入制となっています。

⇒ 世界最大のオンライン学習サイトUdemy

 

本当に学びたいならプログラミングスクールに行く一択

ここまで独学で学べそうなサイトをご紹介しましたが、本気でコーディングやプログラミングを学びたいなら、お金を払ってでもスクールに通うことが最短で最善の選択肢です。実際に僕が出会った現役のWebデザイナーもそういう方が圧倒的に多いです。

その大きな理由は2つあります。

・絶対にやらざるを得ない状況に置かれるから

・わからない状況で人に聞くことができるから

知識の習得も勉強そのものも一人でもできますが、コーディング・プログラミングの勉強の場合はこれを継続していくことが一番難しく、一番大切になります。

なので、以下ではおすすめのプログラミングスクールを紹介しておきます。

 

1. Pro Engeneer

あなたがもしwebデザイナーやエンジニアとして、働くことに興味があるなら圧倒的におすすめなスクールはこちら。何と言ってもこのスクール、講座が完全無料なのです。就職への斡旋まで完璧にサポートしてくれる、エンジニアとしてのキャリアが欲しい方向けのスクールとなっています。手に職が欲しい人、エンジニアとして働くことに興味がある人は是非とも申し込んで欲しいプログラムとなっています。

まずは無料でカウンセリングしてみましょう!

⇒ 【完全無料プログラミング研修&就活塾】

 

2. Tech Boost

Branding Engineerが運営する大手のプログラミングスクール。

全くの初心者からの学習を想定しているので、安心してイチから学習できます。オンラインシステムにより、どこでも学習できて、週1のメンタリングや現役エンジニアにオンラインでいつでもどこでも質問できるため、学習のモチベーション維持などにも有効です。卒業後の就職や転職サポートもかなり手厚く受けられます。学生は受講料の大幅な割引があります。相場から見ても、比較的お得な料金で学べるのも特徴です。

今なら最大で受講料が33%offで、無料でカウンセリングが受けれるのでまずはカウンセリングをして見て相談してみるといいかもしれません。

Tech Boost

 

3. TECH::EXPERT

株式会社divが運営しているプログラミングスクール

未経験からのエンジニアとしての転職に主眼を置いたスクールですが、その転職成功率は驚きの97%。600時間のプログラムで、エンジニアのプロとして仕事ができるスキルを身に付けることが可能です。「転職コース」「フリーランスコース」「新卒コース」と、自分あったキャリアスタイルで学べます。本気でプロのスキルを学びたいならここでしょう。

なお、こちらもカウンセリングは無料で受けれ、転職ができなければ全額返済というサポートシステムがあります。

TECH::EXPERT

 

4. Tech Academy

Webデザインから様々なプログラミング言語まで、目的に合わせてコースが選べます。こちらは転職向けというよりも、単純に自分の会得したいスキルを学ぶのに特化しています。週4から学べるので比較的手軽ですし、また、複数のコースをセットで学ぶコースもあり、自分の学びたい言語や、やりたいことがはっきりしている方におすすめです。

何よりもすごいのは、プログラミング学習の無料体験があります。実際にどんなことをやっているのかカリキュラムを見れて、メンターのサポート体制やプログラミングの学習そのものを体験できます。

なんと無料で。あまりにもお得なので、これだけでも参加する価値があると思えます。

TechAcademy [テックアカデミー]

 

5. Web Camp

集中して1ヶ月で学ぶことをコンセプトにしているので、転職メインで考えていたり、3ヶ月単位で考えている上記のスクールよりもお手軽かもしれません。時間がある1ヶ月でダレる前に集中的に学んでしまうのは、プログラミングの学習の上ではかなり効率的だと言えます。しかもマンツーマンでサポートがつくのでわからないことなどは事細かに聞くことができます。また、教室の解放をしており、基本的にオンラインベースな他のスクールと違って、校舎に通いつめて学ぶ状況を作り出すことができます

こちらも説明会が無料で、現在無料体験会も実施しています。説明会に不満だった場合Amazonギフト券1000円分くれたり、どんな理由であれ、講座に満足できなかった場合受講料全額返金保証など、かなり強気な設定です。

【WebCamp】

 

どのスクールも無料でカウンセリングや体験講座を行なっているので、ぜひまずは参加してみてください。 多くの人は初心者からスクールに通いエンジニアになっているので、「自分なんかが…」と悩む必要は全くありません。

まず、独学でなんとなくやって「よくわからないし、つまんない…」ってならずに、最初から良い環境を選び、先人たちに聞きながら、プログラミングは案外楽しいということを知ってほしいです。

 

 

まとめ

全くのズブの素人だった僕が、サイトでの勉強と、プロのwebデザイナーのサポートにより、初めて自分自身のwebページをコーディングした経験談をご紹介しました。過去の僕しかりなのですが、文系の人や、あまりパソコンや技術に強くない人は、プログラミングやコーディングのことを「なんか大変そうで、めんどくさそう」とみなしがちです。

そうじゃない。実際には、コーディングは学べば学ぶだけ成果が出るし、仕事にも繋がる。そして何よりも自分でコードを完成させた時の達成感は、何にも変え難いものです。少しでも興味を持っている人がいたら是非今この瞬間からチャレンジしてみませんか?

Lifeプログラミング
スポンサーリンク
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
あつきをフォローする
ぽんでらいふ

コメント

  1. […] 初心者がコーディングを学&#12… […]