こんにちは、びび(＠vivilog_)です。
プログラミングってそもそも何？という状態からいきなり丸腰でプログラミングの世界に飛び込んで、早3ヶ月が経ちました。
何も分からないところからのスタート、そして慣れない海外生活、いろんな人との出会い。
全てが新鮮で初めてのことだらけで、大変でしたが、振り返ってみると3ヵ月前には想像もしていなかったことばかりでした。
そんな私ですが、今回は少し時間も経ったことですし、初心を忘れないために今まで学習してきたことや、私がプログラミング学習について日頃から意識していること、また海外で生活するにあたってのあれこれなどを備忘録として残せたらいいなと思い書きます。
これからプログラミングを始めようと思っている方、同じような初心者の方、セブ島に興味がある方、IT留学に興味のある方などに少しでも有益な情報になればと思います、よければ最後までお付き合いください。
目次
未経験でプログラミングを始めたアラサー
私のことを少しだけお話しすると、私は今年27歳の立派なアラサーです。
学生の頃から北新地でホステスをしていて、大学卒業後は心理系の大学院に進学するも教育現場のあまりの壮絶さに1年で中退しました。
その後細々とカフェのアルバイトとホステスを掛け持ちしつつもこのままじゃやばいと思い、人材系企業へ入社しました。
そこでは主にゼネコンやサブコン、制作会社などコンストラクション系企業へ派遣や人材紹介、IT系外国人人材を紹介する営業や、労働者として登録に来られた方のキャリアコンサルタントとして働いておりました。
こう書くと割とすごそうに思えますが、要はただの人材サービス業の営業です。
働き始めの頃は毎日150件の電話営業、ビルに入っている企業へ上から全て飛び込みで営業など、とにかくなんでもやらされやりました。
幸い同期の中では上位の成績を出すことができたり、企業担当者や社内の人間と良い関係を築けたりしてそれなりに社会人として充実はしていましたが、ある日突然『このままなんの面白みもない人生歩むの嫌だな』と思って、次の日には上司に辞めたい旨を話していました。
そして退職したあと、特にやりたいこともなく、転職しようにもエージェントからは同業種ばかり紹介されてもう耐えきれなかったので、なにかスキルをつけたい！と思いプログラミングを学ぶことを決心しました。
どうしてプログラミングだったのかというと、もともと海外旅行が大好きで、とにかくいろんな国に行ってみたい・住んでみたいという思いが強かったのもあり、いろんな国で住むなら身体1つで稼げるスキルを身につけないといけないなと思い、そこからプログラミングに結論づけました。
ネットで色々調べたところ、WORKROOMという面白そうなITシェアハウスの投稿を見つけて、そこからMacbook proを知り合い経由で格安で譲ってもらい（しかも2012年モデルというめっちゃ重いやつ😂）、一人でセブ島に渡り、今に至ります。
関連記事：WORKROOM inセブ島でIT留学してきました
2019年の8月からセブ島にいるので、3ヶ月経ったことになります。
タイトルには2ヶ月って書いてあるじゃん！って思いますが、実はその間の1ヶ月はまったくパソコンすら触ってなかったんですよね。
というのも、8月は丸々セブ島に滞在し、9月は日本に帰り、日本にいると全く勉強しなくなったのでこれはやばいなと思って10月から再びセブ島へ戻って来ました。
これが今日までの私の説明です。では、次からどのように勉強しているのか紹介したいと思います。
初心者の私が選んだプログラミングの勉強スタイル
前述した通り、私はセブ島に渡り、その間IT留学シェアハウスをコンセプトとしたWORKROOMに滞在しています。
WORKROOMは独学を主体としたIT学習者が集まるシェアハウスのことで、入居者はSTARTOUTというプログラミング学習教材を無料で使用することができます。
基本はこの教材をベースに、自分で学習を進めていくのですが、シェアメイトも同じようなプログラミング初学者ばかりなので、お互い助け合えたり切磋琢磨できるのが推しポイントです。
詳しくは【体験記】WORKROOM in セブ島でシェアハウスしてきましたを参考にしてみてください！
そして私がこの2ヶ月間の間に勉強したインプット系は、こちらです。
①ProgateでHTML/CSS、JavaScript、jQueryを2周
②STARTOUTでWeb制作講座を修了
③Udemyのwebデザイナーコース受講（未修了）
④株式会社ベイジ様が配布しているデザインワークブックを読む
ネット上に散らばっている有益な記事を読んだりもしましたが、それ以外の時間は実際にサイトを制作する時間に費やしていました。
サイト制作したのは以下です。
①カフェ紹介サイト（未WordPress化）
②自身のポートフォリオサイト（WordPress化済）
③既存企業のリニューアルサイト（制作予定）
上記は全てデザインからコーディングまで全て担当しました。
それとは別に、サイトデザインのみを2つ、サイト模写コーディングを1つ終えています。
正直圧倒的に数が足りていないので、これからもっと増やしていかなければいけません。
それでは以下でその学習の具体的な内容を詳しく説明していきたいと思います。
インプット学習編
インプット学習①：Progate
初めてProgateを知った時は衝撃でした。なぜなら、それまでの私はプログラミング学習をするなら、はちゃめちゃに分厚い参考書を片手にパソコンと向き合わなくてはいけないからと思っていたからです。
オンラインで、しかもデザインも可愛くてゲーム感覚で学習できるので、その偏見はすぐになくなり、学習が全く苦になりませんでした。
にんじゃわんこ、かわいい。
まず、セブ島に渡る前に2週間かけてHTML/CSS講座を2周ほどしました。
やり方としては、自分で軽くノートをまとめながら進めていく感じで、個人的に手を動かした方が頭に入るので、ゆっくりと自分のペースで進めました。
道場編は初級はクリアできたのですが、中級からはほんとにさっぱりできなかったので諦めましたね。笑
道場編すっ飛ばしてもなんとかなったので、わからなければ飛ばして、切り替えて別の学習に回すのがいいと思います！
そしてJavaScriptとjQueryは2ヶ月目に学習し始めました。
今までのHTML/CSSが可愛く見えるくらい、ほんとにわけがわからなかったのでこちらもノートにまとめながら2週間弱かけて2周ずつしました。
Sassも1周だけ軽くしたのですが、もう全く使い方を覚えていないので、また復習しないとですね・・・
これをトータル2ヶ月契約したので、2000円の出費です。
公式サイト：Progate
インプット学習②：STARTOUT
こちらは年間7,400円のWeb制作×事業デザインが本格的に学べる教材です。
WORKROOM入居者なら無料で利用できるのがありがたかったです。
基本的にテキストや動画ベースの教材なので、色々見たり手を動かしたりしながらweb制作のスキルを段階的に身につけていけるものになっています。
web制作をするにはどんなことが必要で、どう進めていくのかが体系的に理解できました。
例えばデザインのおこし方、サイト設計の仕方、デザインを実際にPhotoshopを使って書いてみる、コーディング環境を整えるためには、Wordpress化するには、などなどです。
特に私のようなコーディングだけじゃなくて、デザインやWordpress化など、web制作全般をきちんと身につけたい方にはお勧めできるのではと思います。
一番初めに自分で1から作ったカフェサイトは、このSTARTOUTをベースに進めていきました。
私はまだweb制作の部分しか学習していないのですが、せっかくなので事業デザインも後々学習したいと思っています。
公式サイト：STARTOUT
インプット学習③：Udemyのデザイナーコース
これはたまたまツイッターでみかけて、見てみるとよさそうだったので購入しました。
完全オンラインの動画で学習できるいろんな分野を取り揃えているサイトで、ちょうどセールしていたので1200円で購入できました。
私は『未経験からプロのwebデザイナーになる』という講座を購入しましたが、1本4～10分程度の動画が400本もある講座だったので、まだ全て見終えてないのが現状です😅
これは時間があるときに、サイト巡りをしているときとかに横で流すくらいがいいかな〜と考えていたのですが、Photoshopの操作方法など、かなり痒いところに手が届くレベルで詳しく説明してくれているので、デザインするときなどに参考に見たりしています。
STARTOUTだけでは網羅できなかったPhotoshopやillustratorの使い方や、後半になるとコーディングに関する動画もあったので、0から10まで丁寧に説明してくれる動画だなあと思いました。
よくセールになっているので、興味がある方は1度見てみるのをお勧めします！
公式サイト：Udemy
インプット学習④：株式会社ベイジの無料配布デザインワークブック
これは正直感動しました。
ツイッターである方がつぶやいていて見つけたのですが、東京のデザイン会社が運営しているメディアで、『未経験の方向け、即戦力レベルの知識がつくデザインドリル』というワークブックを無料で公開してくださっていました。
中身をみると、デザインに関するあれやこれやが総勢140ページにわたって綴られていました。これ、本当に無料でいいんですか・・・？
内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSDもドリルに含まれています。（XD版は現在制作中）
身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を絞った学習の手助けになるでしょう。
ベイジ株式会社様の担当者が記事に書いていた文章を引用しました。
上記の通り、未経験でwebデザイナーやデザインを学んでいる人には必ず見て欲しいくらい内容が盛りだくさんに詰め込まれています。
こんな素敵な資料が無料で手に入る素敵な配慮に頭が上がりません。 本当にありがとうございます。
内容は本当にデザインに関するベーシックな知識です。
私は色彩検定を所持しているのですが、そのテキストに書かれている配色の知識はもちろん、webに関する知識までたくさん書かれています。
pdfでダウンロードできちゃうので、この機会にぜひ手に取ってみてください！
参考サイト：未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開
サイト制作編
サイト制作編①：カフェサイト
セブ島に来てすぐに、WORKROOMのメンターの方から『なにか作りたいものを考えてみましょう』と言われて、私はすごく困惑してしまいました。
もちろん勉強するつもりでセブに来ていましたが、そんないきなりサイトを作るなんて考えもしなかったからです。
何にも考えてなかったので、他の人はどんなものを作っているのかを聞いたりして、『セブ島のカフェを紹介するサイト』を作ることにしました。
進め方は、サイトのコンセプトを決定してからサイトマップの作成、デザインなど、前述したSTARTOUTのweb制作講座をベースに進めていく感じです。
当時は1ヶ月のみの滞在予定だったので、最終目標を1ヶ月後にサイトコーディング完了に設定し、そこから逆算してコーディングは2週間、デザインは1週間でなど、細かく期限を設定して取り組みました。
その経過を、めちゃくちゃ恥ずかしいのですが公開してみようと思います。
一番はじめに自分でPhotoshopを使ってデザインしたものです。
ダサい！！！！！！！！！！！！！！！！！！！！！！
こんなデザインでも丸2日くらいかけて作りました、今見るともう恥ずかしすぎて見てられれません・・・もうザ・ど素人って感じが出て目も当てられないくらいひどいです😂
そして少し修正を加えた第2のデザイン案がこちら。
少しだけ、まとまった感がでました。本当にすこしだけ笑
そしてメンターにがっつり指導してもらったのがこちら。
全体のフォントやカラーがまとまってそれっぽくなってきました。
しかしロゴが全くしっくりこず、そもそもヘッダーが全然気に入らなかったのでヘッダーに手こずること約半日・・・
出来上がったのがこれです！
トップページのメインコンテンツは変わらずヘッダーのみ大きく変えたので、下層ページのデザインを載せてみました。
変更点はロゴのフォントを変え、ヘッダーのメニューに使っていたアイコンをなくしました。
あと地味にインスタグラムのアイコンの色をグラデーションにしてこ洒落させました。
遺伝子レベルからやっと生まれる前の卵になったようなレベルですが、一番初期のデザインと比べるとかなりすっきりして見やすくなったように思います。
こんな感じで全6ページ分、Photoshopでデザインして、ついにデザイン案決定です！
そしてコーディングし、完成したのがこちら。
コーディングは本当に苦労しました。こんなにできないものなのかと、毎日凹んで、タグの閉じ忘れとか小さなミスで1日悩むときもありました。
いろんな人に助けてもらいながら進めましたが、最後レスポンシブデザインのハンバーガーメニューだけがうまく実装できなくて、泣く泣く帰国。
その後日本にいる間にハンバーガーメニューを作り、無事完成しました。
プロの方や上級者の方から見ると、私のこの作品なんてみじんこみたいなもので、期間も3日あれば終わらせちゃうとは思うのですが、私にとってはこのサイトが初めて1から全て自分で作ったものなので、とても意味のある作品になりました。
基本独学で進めて来ましたが、本当にわからないことが多すぎて、セブ島にいる間たくさんの人に教えてもらったりアドバイスしていただきました。本当に感謝しかないです。
サイト制作編②：自身のポートフォリオサイト
2度目のセブに来たあと、模写をしようと思っていたのですがやっぱりデザインもやりたくて、これから作品数を増やしていくためにも先に自身のポートフォリオサイトを作ってみることにしました。
デザイン案がこちら。
メインビジュアルのパイナップルが鮮やかでとても気に入っています。
1ページのみのLP型で、問い合わせページもこのブログ内の問い合わせページにリンクするように設計しています。
前回はHTML/CSSのみで作成しましたが、今回はjQueryも使用し、少し動きを出すようにしています。
全体的にシンプルすぎる気がするので、もしこうした方がよくなるんじゃない？などありましたら遠慮なく言っていただけると嬉しいです！
そしてコーディングし、完成したものがこちら。
前回苦しみまくったコーディングも案外すんなりとできたのがすごく成長を感じました。
こちらは11月中に公開予定です！
公開したらなんでもいいのでぜひ感想やアドバイスいただけるととっても嬉しいです、よろしくお願いします！
コーディングの際に意識したことが、コードを綺麗に書くことと、無駄な要素を作らないことです。
特にコードを綺麗に書くことは、いろんな諸先輩方から口すっぱく言っていただいたので、階層を意識してTabを使いながら綺麗にかくことを意識したら、タグの閉じ忘れや書き間違いなど、ミスが目に見えて減りました。
そして、以前は<div>ばっかりで構成していたものを、<section>や<figure>などをうまく使うことで視覚的にわかりやすく、またミスしたときも検証ツールでわかりやすいのでカバーがしやすくなりました。
普段からサイト模写や、サイト巡りの時に検証ツールを使って構成を把握したり、色々いじって試してみたりしていたので、それで力が少し身についたのかなと思っています。
サイト制作編③：その他、一番大切なことは手を動かすこと
私はどちらかというとデザインが好きなので、普段からよくサイトを見て研究したり、良いな・素敵だなと思った色の組み合わせやデザインはPrinterestに保存して後から見返したりしているのですが、デザインしかり、プログラミングしかり、手を動かしてみることが本当に大事だなと思いました。
このデザイン素敵だな、真似してみたいなと思っても、実際に作ってみないとわからないことがあまりにも多すぎるからです。
特にコーディングは、サムネイル表示っぽいところには<img>じゃなくて<figure>を使った方がいいとか、floatじゃなくてFlex boxを使う理由とか、実際にコーディングするまで疑問に思わなかったし、なぜそれを使うのか分かりませんでした。
そして実際に作ってみて形に残ってみると、自分に自信が湧きます。
私の母はグラフィックデザイナーなので、デザインができると毎回ラインで感想をもらうのですが、感想がもらえるとやる気はさらに上がります。笑
厳しい家庭なので、いつも『まあまあやな』『可もなく不可もなく』『色が見にくい』『なにがしたいかよくわからんデザイン』など、散々な感想しかもらえませんが、それでも見てくれる人がいるのは嬉しいものです。
諸先輩方が口を揃えて『インプットよりアウトプット』と言う意味を、身をもって知ることができました。
あとはモチベーションの維持の仕方として、個人的にはたまに自分の好きなことを思いっきりしたり、遊びと学習の線引きをきちんとして、切り替えて取り組めるようにしています。
何にもしない日もたまーに作ったり、大好きなアイスクリームをたらふく食べる日を作ったり・・・
あとはコーディングだけすると途中からだれてくるので、自分が好きなデザインを合間に休憩がてら挟んでみたりして、いろんな方法でモチベーションを保っています。
今の1番の悩みは、毎日パソコンに向かっていると視線がどんどん悪くなって太ってくるので、運動か筋トレをしないとなあと考えているところです。
運動は持病の膝のこともあり、小学生からまともにやっていないので、プールくらいから始めてみようと思います😱
セブにいる方、よければ一緒にプールに行ってください笑
海外で生活をするということ
ここからはセブ島での暮らしの話をしていこうかと思います。
旅行が好きで、特に東南アジアはいろんなところを回っていましたが、フィリピンに訪れるのは今回が初めてでした。
フィリピンのセブ島と聞くと、ほとんどの人はリゾート地思い浮かべると思いますが、旅行ではなく滞在するとなると、全くそんなことはありません。
セブ島の中心地であるセブシティと言われるところは、海から少し（といっても車で3〜40分ほどですが）離れているので、めちゃくちゃ遊びたい！と思わなければ頻繁に行くことがあまりありません。
私は滞在して2ヶ月経ってようやく初めて海にいったくらいです😂
気候は日中はとても暑く、1年を通して暖かいので快適です。
雨季でなければ雨もそんなに降りませんし、降ったとしても1〜2時間で止むこともしばしばです。
個人的には花粉がないのと、寒いの嫌いなのでこの気候はとても肌に合っています。
フィリピンの人たちはみんな穏やかで温かい人が多いです。
店員さんや街中の人もみんな笑顔で温かく対応してくれます。
ただ楽観的で少しゆるいので、めちゃくちゃきっちり仕事をしてくれるわけでもないので、日本のサービスに慣れている人ははじめは驚くかも知れません。
また、南国のフルーツ類（オレンジ、パイナップル、マンゴー、バナナ、スイカ、キウイなど）が安く手に入るのも嬉しいです。
毎日食べても金銭的負担が少ないので、個人的にはとてもありがたいですね。
食事は、基本的に自炊をするようにしています。
といっても、パスタや炒め物、たまに煮物くらいしかできないんですが・・・
手軽で簡単に作れるレシピなども今後ブログでシェアしていこうかなと思っています！
また、外食をしても平均200〜400ペソ前後（400〜800円くらい）で済むので、お得感があります。
下の記事ではおいしくてコスパが良いと思ったレストランを紹介しています。
また英語も、初めはあまり慣れませんでしたが、個人で英会話レッスンをお願いしたり、現地でランゲージエクスチェンジの交流会などに積極的に顔を出して参加したりして友達を作ったりして、少しずつ勉強していきました。
まだまだですが、来た当初に比べて聞き取り能力や会話できる能力は上がったように思います。
何より、自分は海外で生きていけるんだという自信を得られたのが大きいです。
これから何かあったとしても、自分が海外でもなんなく生活できたという大きな経験は、今後大きな糧になると思っています。
そう思えたことが1番の収穫なのではないかなと個人的には思います。
今後の展望
今はWORKROOMのサイトを模写コーディングしています。
これが終わったら次は『既存企業サイトをリニューアルするなら』というテーマで1から企画してみようかなと思っています。
相変わらず学習内容ばかりですが、仕事につなげるために多方面にアピールしていこうと思い、少しずつ行動しているところです。
来年の1月まではセブ島にいる予定なので、それまでの残り2ヶ月半は学習と就活、人脈作り、案件獲得を目指してやっていきたいなと言う感じです。
・・・という建前のようなことは置いて、包み隠さず本音を言うと、webデザイナーとして食べいきたいのは事実ですが、日本で就職をするのにまだ少しだけ抵抗があります。
実務未経験なので、就職してスキルを伸ばさなければいけないことは百も承知なのですが、やはり海外の色々な国にいきたいので、フリーランスになりたいとも思っています。要は葛藤しています。
ですが、今はまだ自信を成長させるための時間だと思っているのでわがままは言いません。
もしいいお話があれば前向きに検討するつもりでいます！
そして、web制作、デザイン、コーディング、なんでもやりますのでお仕事ください！よろしくお願いします！
