Title TBD

中途未経験からエンジニアを目指してエンジニアになりました。学んだことなど中心に書いていきます。最近はもっぱらnoteで書いてます。https://note.com/toshi65811

サイト作りはつらいよ

こんにちは、Toshiです。3月になって1行もPHP書いていませんが、PHPエンジニアを目指しています。

さて、12月からQuelcodeというプログラミングスクールに通い始めて早4ヶ月が経とうとしています。1ヶ月くらい前の計画では「Wordpressの勉強もしたし、アウトプットのために友人のカフェのサイトをWordpressを用いて作ろう!」という希望を抱いていました。

これまでHTMLとか勉強してきてサイト模写も勉強したし余裕でしょ。とかなり甘く見ていました。

ところがどっこい。カフェサイト完成せず、先週のスクール授業ではずっとノンデザイナーズ・デザインブックを読んで過ごしていました。

何が起きたのか。なぜこんな状況になったのか。この1ヶ月の経緯を自戒を込めて一緒に確認してみましょうではありませんか。

 

目次です。

最初の失敗

友人のカフェには以前からよく通っていました。

このカフェは食べログの情報しかなくWebサイトを持っていなかったので、Quelcodeに通ってサイトを作ってあげたら何かの役に立てるかも。そう考えていましたし、実際友人にも「カフェのサイト作るよ!」と宣言していました。

これまで順調にHTMLやWordpressを学んできて、いよいよサイト作りに取り掛かる準備は出来たと感じていました。

以前からサイトについて話していた時に彼が「お客さんは若い人が多いのでスマホから見れるようにしたい。」と話していました。

ですが僕はといえば、レスポンシブ対応のやり方知らんな🤔状態でした。

レスポンシブといえばBootstrap。チュートリアルといえばUdemy。ということでまずは無料のチュートリアルビデオを少し進めてみました。
(このチュートリアルはBootstrapのバージョンが古く、上手くいかない箇所があり自分で色々調べないといけなかったりするので、あまりオススメではありません。)

 

少し学んだらあとは作りながら足りないところ学んでけばいいっしょ!という圧倒的に軽薄なノリのみで「もうサイト作れる!ちょっと打ち合わせしよう!」と友人に連絡をして打ち合わせをすることに。

振り返ってみると圧倒的なバカさ加減。。。

 

はじめての簡単な打ち合わせ

友人からこんな内容入れれたらなー、というのは以前からうっすら聞いてはいましたが、実際に打ち合わせをしてみてそこで出てきた内容としては

  • 食べログでは出来ないことをWebサイトでやりたい
  • 貸し切りのお客さんを増やしたい
  • レスポンシブ対応にしてほしい
  • 店内に焙煎機があるので、それを押し出したい

他にもありますが大まかにはこんな感じです。今思うと、ここで何を聞けばいいか。何を確定させないとサイト作りは進まないかが全く理解できていませんでした...

 

打ち合わせを終えた翌日。善は急げとばかりに、先日のBootstrapチュートリアルで作ったサイトに友人から言われた内容をはめ込んで見ました。

なんか見た目それっぽくね!レスポンシブにもなってるし!とほくほくな僕。

細かい部分は後で直していこう。と思い、とりあえずサーバーに上げて友人にリンクを送り「これからもっと良くしていくよ!」と完全に敗北しているのに勝者の気分な僕。

これが2月末のお話です。ここから結構苦しみました。

 

チュートリアル改変、そこから進めない

アウトラインは出来ているので、あとは適当に必要なコンテンツをいれるコンテナを追加していけば出来るっしょ。と思っていましたが、全然進めない…

何をしてもサイトがダサく見えるし、どんなサイトにするか。のデザインなんてないので、ちょっと手を入れてはあーでもないこーでもないを繰り返す。

ここで気づいたのは「あ、この無料のチュートリアルで作ったサイトだと駄目なんだ。もっと思い通りのサイト作り出来るようにBootstrapをもうちょいやろう!」でした。

 

いや、その方向性は違うぞおれ。

 

無料だから駄目だったんだね!ということでセールになったタイミングでUdemyでBootstrapのビデオを購入。ダラダラと時間をかけてチュートリアルを一通り終えました。

 

 

チュートリアルを終えて再度勝者の気分に。はいきた。完全にBootstrap理解した。

しかもいい感じのサイトをチュートリアルでも作ったし、これを元にサイト作れば余裕でしょ。というまたしても蜂蜜よりもスイートな考え。

このへんで花粉症や全然進めないイライラなどで2週間位かかってます。

続きます。