気がつけば月10万円ほどのペースで稼げるようになりました。仕事をやってみて思ったことフリーランスはフリーランスと仕事したほうが幸せになれる目的が明確でない場合、プロジェクトは迷走する仕事を通して得ようと思っていることが同じ人と一緒に仕事すべきさいごにどうしてサイト制作をはじめたのかお金に困ってはじめました。「裸足ブロガーになる!」と言ってはみたものの、4ヶ月たっても月に1000円さえ稼げなかったんですよ。2才の娘も専業主婦の奥さんもいるから貯金はあっという間になくなっていったんですよね。「でももうアプリ開発はやりたくない!」という消極的な理由からサイト制作をはじめたのです。してアプリ開発をやらなかったのか?1年ちょっと前にも同じようなことがあったんですよね。渋谷の会社で4ヶ月働いたら100万円ほど貯金できたので、その手をもう一度使えばよかったのかもしれないんですが、やりませんでした。?もうアプリ開発はお腹いっぱいだったんです。挫折も多かったから疲れちゃったんだと思います。関連:【アプリ開発5年の物語】現状を嘆く必要はない。現金化できそうな自分のスキルをお金にするしかありません。アプリ開発はしたくなかったので、マジメに考えました。現金化できそうなスキル・英語が読める、しゃべれる・絵を描くのが得意このくらいしかありませんでした。絵の方は思いついたのです。coconalaでイラスト販売やーーー!出品サイトはこちら最初は無料お試しで☆やレビューを稼いで、ある程度☆やレビューが溜まったら有料化というよくあるパターンを狙いました。無料なら「アイコン作って!」って言ってくれるけど、500円にしたら注文激減。1000円にしたらさらに減少。「これは生活費を稼げるようにはならないな...」と思ってやめました。・・・なーんてことをやっているうちにますます貯金は減っていく...「どうしたらいいんだろう??」その頃僕はコワーキンススペースまるもというところで普段作業していました。このスペースは僕がブログを始めるきっかけを作ってくれた場所なのですが、ブロガーだけでなく、webメディア向けの記事を書くライターさんや、サイト制作をしている人が多かったのです。結果的には良い判断だったと思います。サイト制作ができるようになったことで声をかけていただき、作るだけでなく、教えることも仕事になりましたもしお金に困って、自分のスキルを「早く」現金化しなきゃいけない時には、こういう条件でやることを探してみるといいかもしれませんね。・今までの仕事経験が活かせそう・周りに同じ仕事をしている人がいる・自分でもできそうな気がするどんな風に勉強してきたか僕が作業をしていたコワーキングスペースまるもでは田舎フリーランス養成講座という「フリーランスを目指すための1ヶ月の合宿コース」が年に6回ほど開催されているのですが、(僕がサイト制作講師をやらせてもらったコースです)そこでサイト制作を学ぼうとする人達にオススメしてきた鉄板の学習書籍があるんです。RinkerAmazon楽天市場Yahooショッピング5年経っても色あせない、いわゆる名著っていうやつですね。僕もHTML/CSSのことはよく分からなかったので素直にオススメされていたこの本をやりました。四苦八苦しながらアプリ開発を学んできた僕だから感じたんだと思うんですが、こう思ったんですよね。「分かったような気になるけど、使えるまで定着しない気がする・・・」そんな風に思いながら勉強していた時、こんなツイートを発見しました。黒本に疑問を持っていたので、さっそくやってみました。結果、、、これが大当たりだったのです!HTML/CSSを学び始めるならProgateがオススメ!いくら紹介しても一文にもならないのに、ずっとこの半年オススメし続けてます。書籍とか動画ではなく、ブラウザやスマホで学べちゃうwebサービス。CSSコースをやるといいです。課題をクリアするたびに褒めてくれる!本当によくできたシステムだと思います。以下の3点が本当にすばらしいからなのです。必要以上に教えすぎない!書籍って内容が薄いと買う気しませんよね?ペラペラの技術書とか買いたくないじゃないですか。書籍って本を分厚くするために余計な情報がたっぷり盛り込まれてるんです。最初の段階では必要のないこともいきなり教えてしまう。作る力を伸ばそうと思ったらあれこれ教えちゃだめなんですよね。「作るために必要な最低限の知識だけを与える」これが大事。教えすぎなければ情報過多で混乱することなく、作ることに集中できるんです。Progateはそういう意味で思い切り情報を削っています。「作る力を育てること」にフォーカスしているのがスゴイのです。作る力を少しずつ少しずつ伸ばしてくれるHTML&CSSコースの内容を見てほしいんですけど、コース内が初級・中級・上級に分かれているんですよ。初級コースでは本当ぉ〜にミニマムなサイトを作ります。「こんなにシンプルでいいの!?」ってくらい。最初はそれでもけっこうタイヘンなんです。これができると「おぉ!案外できるじゃん!」って自信がつきます。中級コースでは初級コースより少しだけ複雑なものを作ります。ほんのちょっとだけ新しい知識が注入される。知識を「段階的に」「分類しながら」覚えていくことができるんです。初級コースよりほんのちょっと複雑になっただけなので、ハードルの高さも感じません。結果、完成したときにさらなる自信をつけることができるのです。「あ、俺やれる!サイト作れるじゃん!」と。こいつがProgateを最強のチュートリアルサイトにしているポイントだと思います。学んだ知識が完全には定着していません。脳内からすぐに消えそうなフラフラした状態です。それを完全に定着させるのがこの道場コースなのです。こぼれ落ちそうになった記憶を絶妙なタイミングで拾ってくれる!これは本当に感動するレベル。設計図を見ても書き方が分からない時に資料をすぐに見られるようになっているのもニクい!!「あれ?背景の色を変える時ってどうやるんだったっけ?」という時にもすぐに前の資料を見られます。前に戻って消えそうになった知識を何度も引き戻す↓ガッチリ定着これが道場コースのスゴさなのです。Progateやってる人で先を急ぐあまり、この道場コースをやっていない人がいたりするんですが、もったいないのでマジで飛ばすのはやめたほうがいいです!絶対やりましょう!!サイト制作をやるならこのコースをやるべし!まずやるべき3つのコースと、できればやったほうがいい2つのコースがあるので紹介しますね。絶対やったほうがいいです。GitとSassはコーディングを楽しくする!特にGitは、サイト制作だけでなく、ほかのプログラミングをやる時にも使える技術なのでやったほうがいいでしょう。「どうやって元に戻したら良いんだ〜!!」となったとき、ポンっ!とワンタッチでファイルを元に戻してくれるのです。すごくないですか!?Gitを使うとコーディングとの向き合い方が劇的に変わります。壊れることを心配しないで安心して作れるのです。RinkerAmazon楽天市場YahooショッピングSass(サス)はごちゃごちゃとしがちなCSSファイルをスッキリさせてくれるツールです。プログラミングをやってきた僕は、はじめてCSSファイルを見た時、愕然としました。同じことを何度も何度も書かなきゃいけないのです。その結果、コードがめちゃくちゃ見づらくなる。「なんでこんなに同じこと何度も何度も書かなきゃいけないんだ〜!」と発狂しそうになっていた時、コワーキングスペースの知り合いにSassの存在を教えてもらったのです。「てかコレなしでCSS書くのは考えられない!」そのくらいSassは素晴らしかったのです。Sassを使うメリットをわかりやすく説明するためにこんなシンプルなサイトを作ってみました。このサイトはこんな構造になっています。ボディの中にヘッダーがあって、その中に画像とタイトルが入ってます。これをSassで書くとこうなるのです。カッコの中に新しい要素が入っているのが分かると思います。これを入れ子構造といいます。Sassを使わずにCSSを書くとこうなるのです。初心者が書くともっと読みづらくなります。Sassのメリット:入れ子構造でCSSを読みやすく書けるSassにはまだまだメリットがあります。このサイトでは画像のたてよこの長さとタイトルの高さが同じなのですが、Sassを使わずにCSSを書くとこうなります。Sassを使うと同じ数字を何度も入力する必要がなくなるのです。100px;の1か所を$length:120px;にするだけで100pxにしていた3か所が自動で更新されます。時間が経つと忘れてしまいます。同じ値になるすべての場所を覚えておくのは困難なので、バグを生む原因にもなるのです。まとめるとSassのメリットはこういうことですね。僕はSassを使わないでいられないのです。・ミスが多い人Sassは使っておきましょう!ProgateではSassの基本を教えてくれます。それだけでも十分なのですが、Sassのメリットを全部受け取りたいならこの書籍がオススメです。長くなってくると飽きちゃう人もいると思います。学習スピードは人それぞれ。自分に合った進め方をしたほうがいいと思います。僕がオススメしたいのは、Progateの「HTML&CSSコース」が終わったら書籍をやってみるルート。書籍がスラスラ理解できて楽しいから。「おぉ!分かる!分かるぞぉー!!」って感じです。先ほど紹介した通称・黒本をやったんですが、あまりにスラスラ本が進むので楽しくて仕方がありませんでした。今だったらこの本が良さそうですね。RinkerAmazon楽天市場Yahooショッピングベストセラーが大改訂!累計4万部突破の前作が、5年ぶりの大改訂!小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版!第2版ではPCだけでなくスマホやタブレットにも対応したサイトが完成します。古い本なのでスマホ対応の方法が載ってないのがネックなんです。技術書って新しいやつはどんどんわかりやすくなっていくんですよ。名著を参考にして作られる新しい本はもっといい場合が多いです。スマホ対応をラクにするために覚えておきたいBootstrapProgateのコースにはないんだけど、ぜひとも使えるようになったほうがいいツールがあります。それがBootstrap。どんなツールなのか、簡単に説明するとこんな感じ。画面幅が変わると自動的にスマホ対応できる便利なパーツが用意されているひと言でいえばラクするためのツール。みんなラクな方がいいでしょ?プログラマーの美徳というものがあります。「怠け者であることが美徳!?」そう思ったと思いますが、真実なのです。ただの怠け者ではダメ。「怠けるために努力できる人」これが本当のプログラマーの美徳。学ぶのにコストかかりますが、ラクするためにぜひ学んでみてください!Bootstrapの概要を知りたいならこのサイトがわかりやすかったです。RinkerAmazon楽天市場Yahooショッピングあと、もし英語の聞き取りができるのであれば、めちゃくちゃオススメな動画チュートリアルがあります。Udemyという世界的な動画チュートリアルサイトのこれ。Projects教え方が神!めちゃくちゃ分かりやすい!しかも値段は1200円でした。英語ができるとUdemyはマジでコスパいいのでぜひチェックしてみてください。仕事を取るための4つのルートここまではサイト制作の学習面の話をしてきましたが、ここからは仕事面の話をしていきたいと思います!フリーランスのサイト制作者が仕事を手に入れるルートは4つあると思います。ようなクラウドソーシングサービスでゲット!自分で営業をかけてゲット!twitterやブログで発信してゲット!知り合いからゲット!下に行けば行くほど人間関係が濃くなっていますね。・お客さんの顔を見ながら仕事したいのか・ネットだけで完結したいのか・自分のことをよく知っている人と仕事をしたいのか仕事の取り方は、自分の仕事のスタイルを決める上で非常に重要な要素です。結論から言うと僕は4番の「知り合いからゲット!」だけでやってきました。皆さんは他のやり方も知っておきたい人もいると思うので、それぞれのアプローチを紹介したいと思います。クラウドソーシングでゲット!コネなどがなくてもネットを通じて手っ取り早く仕事を獲得できる方法です。・案件内容の熟読です。案件内容を熟読しないとこっちの本気度がバレてしまうので発注者を口説き落とせないのです。ポートフォリオは実際に仕事として受けたものじゃなくても大丈夫。template」などでググるとイケてるデザインのサイトのサンプルが沢山出てくるので、それを模倣して自分でコーディングしてみるといいと思います。(見本そっくりのものを作ることを通称「写経」といいます。仏教の経典を丸写しすることを写経と言いますが、そこから来てるみたい)ポートフォリオが手に入るだけでなく、サイト制作のリアルな感覚がつかめるのでオススメです。このテンプレート集なんかかなりいい感じですね!https://colorlib.com/wp/templates/クラウドソーシングでの仕事獲得方法の良いところは・たくさんの仕事の中から自分の好きなものを見つけて応募できる・連絡のやり取りから納品までネットだけで完結できる・人と合わなくていいです。反対に良くないところは・手数料をけっこう取られる・クライアントがどんな人なのかよく分からない・クライアントからすれば条件が合っていれば誰でもいいので、自分である必要がないといった感じ。「まずはやってみる」という姿勢で取り組んでみるのもアリだと思います。自分で営業をかけてゲット!日頃の生活の中で仕事のタネを見つけることが大切な方法です。普段から情報感度を高めておく必要があります。「この人と一緒に仕事したい!」と思えるような魅力も必要になってくるので、コミュニケーション能力の高さも大切ですね。この方法の良いところは・相手の要望をしっかりと聞ける・顔の見える関係なので次の仕事にもつながりやすい・人との出会いを楽しめる良くないところは・ネットだけで完結できない・仕事を探す手間がかかるといったところでしょう。資料やポートフォリオはいつでも見せられるように準備しておきましょう。twitterやブログで発信してゲット!twitterやブログの読者さんから仕事依頼や問い合わせをもらう手法です。この方法を知った時は目からウロコが落ちました。「こんな方法があるのか!」と。コワーキングスペース仲間の櫻田翔大くんが非常に上手なので参考として紹介させていただきます。彼の仕事獲得術の中心はブログです。・問い合わせフォーム・ツイッター/facebookのリンクなどを発信。・サイト制作で稼いだ額の推移などをつぶやき、ブログとの相乗効果が出るようにしています。本当に参考になるのでぜひ一度彼のブログをごらんください。感心すること間違いなし!この方法の良いところ・自分のことをよく知っている人からの仕事を受けられる・人と会った時にブログを見せれば自分の仕事を簡単に紹介できる・ガツガツ営業する必要がない良くないところ・顔出ししないと信用を獲得しづらい知り合いからゲット!すでにある人間関係から仕事を得る方法です。「仕事があれば紹介して欲しい」と伝えておく必要があります。意外とデメリットも多い手法だと思います。仕事でお金が絡んだ途端に別の一面を見せるというのはよくある話。この方法を取る場合には・相手のことをよく理解しているか・信頼関係が強固かどうかがとても大切です。サイト制作の仕事に取り組んだ5ヶ月のことここからは僕のサイト制作の仕事体験談になります。3ヶ月勉強したのち、どんな風に仕事してきたんでしょうね?どんな風に仕事をもらったか最初の仕事はブログ経由でもらいました。6年前、職業訓練でアプリ開発を勉強していたころに知り合った人からでした。彼もフリーランスのサイト制作者。連絡をくれた理由にも驚きました。僕のツイッターやブログを見ていてくれていたのです。僕の経済的な窮状もサイト制作の勉強をしていることも知っていました。「この仕事をやってお金作れ。裸足で旅に出ろ!」この最初の仕事は大手出版社のサイトリニューアルのお仕事でした。かかった期間、5ヶ月。想像以上に大規模で終わりが見えませんでした。サイト制作の仕事だったので、何をやっても勉強になります。取り組んでいたんですが、5月の引越し後、貯金が底をつきました。「すぐにお金になる仕事をしないと家賃が払えない!」そこでこんなツイートをしたのです。2018年5月3日このツイートに反応してくれたのは、4年前アプリ開発をしていた時の知り合い。彼がくれた仕事、それが2件目の仕事でした。起業したばかりの彼の新規サービスを紹介する1枚の長いページの制作。通称・ランディングページ(LP)と言われるPRサイトを作るお仕事です。かかった期間、1ヶ月。この仕事は本当に金銭的に助かりました。前金で半額いただき、おかげで家賃を払うことができました。残りのお金も終了前なのにも関わらず翌月いただきました。この頃は精神的に病んでましたね。・お金がない・仕事が忙しすぎる・家族の時間が取れない・引越し先に馴染めない奥さんがこわい「お金も時間も余裕もない」というのは本当に恐ろしいことだと思いました。関連:【家庭と仕事と金】絶望的にうまくいかなかった引越し後の2ヶ月のこと3件目の仕事は、1件目の仕事をくれた人からの紹介でした。「知り合いが困ってる。お願いしていた仕事が全然上がってこないらしい。依頼者に時間がなかったので、わざわざ僕の住む町まで東京湾を渡ってきてくれました。内容は店舗で使うタブレット端末に表示する画面の作成。