はじめまして、クリエイターズファクトリー修了生のヤマシタです。
フリーランスでWeb制作を中心に様々な活動をさせていただいております。

今回、クリエイターズファクトリーの新しいサービスのLP制作のお手伝いをさせていただく機会をいただき、コーディングの担当として制作に携わりました。

どんな案件でも制作を進めていくと、デザイン通りにどうやって実装するのか分からなかったり、コードは合っているはずなのにエラーが出て上手くいかなかったりして躓くことは皆さん必ずあると思います。

制作に携わる以上、責任を持って最後までやり通す必要があるので、その「つまずき」にどう向き合うかが大切になってきますよね。

この記事では、今回のLPを制作するうえで、コーディングで躓いたことやそれに対しての私なりの打開策・マインド、学んだことを皆さんに共有します！

私について

プロフィール

簡単に自己紹介させていただきます！

・名前：ヤマシタ
・年齢：25歳
・出身地：鹿児島市
・職業：フリーランス（Web制作中心・その他色々）
・趣味：アニメ鑑賞・キックボクシング・美味しいものを食べる・旅行

CFでは2021年1月〜4月まで通学生として受講して、2021年11月頃からコーディングチェックバックのお手伝いをさせていただくことになり、2022年2月からは正式にアルバイトとしてCFの内部のサポートに参加するようになりました！

現在はCFのもとで色んなことを教えていただきながら、コーディング、デザインの制作や受講生のサポートなどマルチに活動させていただいています。

コーディングスキル

当時のコーディング歴は1年半で、CFを修了して以来コーディングを中心に勉強してきたので、それに対しての苦手意識はありませんでした。

・HTML・CSSはある程度できる
・JSはほぼ無知
・GitとSCSSは少し知識あり

今回のミッションについて

今回課せられたミッションは、CFの新たなサービス「WEBサイト特化型定額デザインサービス『よろでざ』」のLPコーディング。

※WEBサイト特化型定額デザインサービス『よろでざ』
　定額でWEBサイトの制作やDTPのデザインを提供するCFの新しいサービス

【案件概要】
・目的：新サービスの広告と認知
・サイトタイプ：ランディングページ（LP）
・納期：2ヶ月（可能であれば1ヶ月）
・必要なスキル：HTML・CSS（SCSS）・jQuery
・レスポンシブ対応（スマホ・タブレット）
・Git管理あり

先輩が制作したLPのデザインを初めて見た時、正直「え、すごっ。これ自分にできるか！？」という印象でした。
今の技量で乗り切れるのかという不安と、同時期に個人的に抱えているタスクが重なっていたので納期の部分の不安もありました。
しかし、その不安と同時に「これは自分をステップアップさせるいいチャンスが巡ってきた」とも思いました。「不安は一瞬だけど、完成までの過程で学べることやその先の自信・達成感は一生モノだ」と信じて制作を始めました。

今回はじめてチャレンジしたこと

今回のLPコーディングには、「GitとSCSSを使う」というミッションも付随していました。
CFのアルバイトを始めることになってこれらの勉強をしていましたが、実際の案件で使用したことはありませんでした。

使ってみての感想は、「 ”使いこなすことができれば” 最高に便利」ということです。

「実践が習得の1番の近道」

これをかなり痛感しました。

Git（ギット）

「Git」とは、分散型バージョン管理システムのことで、わかりやすく言うと、複数人のチームメンバーとひとつのプロジェクトの更新履歴などを共有できるシステムのことです。

Gitについては、CF内部でGit講座のイベントに関わることで、誰かに教える前提で一から勉強をして、何度もシミュレーションも重ねていたので大きな難所は感じませんでした。

SCSS（サス）

「SCSS」を簡単に言うと、CSSを効率よく書くことができる言語のことです。

SCSSはCF修了後に何度か勉強会などで勉強して、どんな使い方やメリットがあるのか、CSS設計やFLOCSSについてなどなんとなく理解はしていました。
しかし、実践で使ったことがなかったので、今回のコーディングを始めてSCSS導入の時点でかなり躓きました。完全に理解した「つもり」でした。
FLOCSSのファイルやディレクトリの構成、命名規則、コンパイルの成否などを勉強していたはずなのに、もう一度ひとつずつ調べて確認して試すの繰り返しでした。初学者の方にとっては難しい言葉のオンパレードだと思いますので、後ほど軽めの説明を入れながらお伝えします。

つまずいたこと

今回の案件で躓いたところは大きく分けて2つあります。
先ほども触れた「SCSS」と最大の難所だった「jQuery」です。

SCSS・CSS設計編

CSS設計（FLOCSS）に迷う

CSS設計を簡単に説明すると、コードの作業効率化やメンテナンスがしやすいようにクラス名やファイル・ディレクトリなどにルールを設けて管理する設計のことです。
今回の案件では、CSS設計の中でも比較的わかりやすいとされている「FLOCSS」を用いて管理していきました。
私はまずこのFLOCSSに躓くことになります。

なんせCSSと比べてファイルが多くてわからん！！

と言う感じで、SCSSを使うメリットを全く実感できず。笑

「理解できないのが悔しい！」と負けず嫌いモードの私は、校長に教えていただいた参考サイトや自分で見つけたサイトをたくさん読み漁って、「なぜ使った方が良いのか」「どのフォルダにどのファイルを入れるのか」「使いやすい関数はなんだろ？」などを自分に落とし込んでいきました。

コンパイルできない

なんとかFLOCSSを理解して、ファイルやディレクトリの準備ができたところで、次の問題に直面します。

なんでコンパイルできないん！？

「コンパイル」をわかりやすく言うと、SCSSで書いたコードをCSSに翻訳させることです。

コンパイル確認のためにテストでSCSSに簡単なコードを書いても、一向にCSSに反映されない。
Prepros（コンパイルさせるためのツール）もちゃんと動いてるのに。

これもたくさんのサイトでの解決策を試してみるも、完全敗北しました。

校長に泣く泣く相談すると、「準備していたファイル・ディレクトリが沢山だから最小限の構成にして、分かりやすくしてからもう一度やってみて！」とアドバイスしていただきました。
ちゃんと理解が追いついていないのに、複雑なファイルの環境下でコンパイルを試みても、うまくいきませんよね。
ファイルを減らしてシンプルな状況でコンパイルのテストをしたら、なんとかうまくいきました。

jQuery編

この案件で最大の難関は、SCSSではなくjQueryでした。

今まで制作してきた中でjQueryを使う場面は何度かありましたが、ハンバーガーメニューでちょっと使う程度のことだったので、今回ガッツリ使うと判明してかなり焦りました。

CF修了して1年ほど経っていましたが、恥ずかしながらjQueryは難しいからと後回しにして避けていました。
今回は、逃げる言い訳ができない環境に身を置けて逆に良かったと思っています。

jQueryの基礎知識が曖昧で参考サイトを読んでもなかなか理解できない状況だったので、まずはじめにしたことは、CF受講期間中のjQueryのアーカイブや、torikumuのjQueryのページを見て、基礎をたたき直すことでした。

今回の案件でjQueryを使う場面は、ハンバーガーメニューと料金案内（上記画像参照）の2ヶ所。

ハンバーガーメニューは毎回のことなので、少し苦手かもと感じながら実装成功。

問題は料金案内の実装。
ここで3週間くらいは実装できずに泣きべそかいていました。笑

とにかくトライアンドエラーで試しまくる。

粘り強く何度も試しました。
その過程で書いているコードが読み解けるようになってきて、「こう書けば、こう動くかも！」と予測しながら記述することもできるようになっていきました。

ゾーンに入ったと自分でも感じた時に、やっと実装できて、達成感で叫びました。笑
この達成感のためにコーディングをやってると言っても過言ではないです。

この経験はかなり自分の中で大きくて、自信がつくいい機会になりました。

私の打開策

私のつまずいた時の打開策は、

とにかく調べまくって、ひたすらトライアンドエラーで手を動かしまくる。

これ一択です。
相談して教えてもらうのは、この打開策でどうしても解決しなかった時。

しらみ潰しで試していく過程で、その時抱えている問題が解決しなくても「こんなコードあるんだ」「こんな方法あるんだ」と勉強になることが多いので、この方法で制作しています。

まとめ

次に生かしたいこと

この案件を通して、「実践に繋がる勉強を常にしてシミュレーションを重ねて準備しておくこと」を次に活かしたいと思いました。

今回、GItが大きな壁にならずに済んだのは、これができていたからだと思っています。
SCSSとjQueryはこれが全くできておらず、苦戦しました。

誰かに教えるつもりで勉強して、練習しておく。

今後はこれを徹底していこうと思います。

感想

今回の案件は約2ヶ月で完成することができました。
他のタスクと重なっていたこともあり、かなり時間がかかってしまったと感じています。
ただ、学ぶことがたくさんあり、とても有意義な経験となりました。

公開されたLPはこちらです。
https://yorodeza.startkit.jp/

皆さんの参考になれば嬉しいです！