架空サイトの店舗一覧ページをデザインとコーディング!感想と反省まとめました。

今回は架空サイトの店舗一覧ページをデザインとコーディングしました。

私の模写が確認できるURL→(http://igarashi-web.com/shop-list/shopList.html)
BASIC認証を掛けています。
ID・Passwordともに[shoplist]です。

ここから先はプログラミング学習中の皆さんに向けて
「店舗一覧ページをデザインとコーディングして得たこと」を書きます。

この記事を読み終わるころには、あなたも店舗一覧ページに挑戦したくなっていることでしょう(笑)

架空の店舗一覧ページを制作した理由

これは長くなりそうなので、後日別記事にてまとめます。
「インターネットで仕事を受けたい方」には役立つ記事になると思います。
失敗半分、成功半分の私の記録です。

今回は2つほど思い当たったので紹介します。

私は今まで店舗一覧ページを作るという経験をしたことがありませんでした。
ですがこの制作を通して、

これくらいのmenuとtableで構成された物を作るとき私は2時間でできるんだな

というのが分かりました。

私はどれくらいのものをどれくらいで作れるかをしっかり把握することがインターネットで仕事を得るには大切だと思っています。

お仕事を提案するとき、納期や報酬を提示する必要がありますよね。その際に自分の制作目安を把握していないと、納期に遅れが出たり、時給が破格になったり……と困ったことが起きてしまうと思うんです。

ですので自分の制作目安を把握するためにも、経験したことのない構成には挑戦していったほうが良いと思っています。

あと、個人的には今回は5時間くらいかかるかなと思っていたので「お、結構成長してるじゃん」と自己肯定感が上がったのも良かったです。

今回の店舗一覧ページは非常にシンプルなものを作りました。シンプルにしたのには理由があります。

実は

次回同じようなお仕事に巡り合えた際にこのコードを使いまわそう

という目論見がありました(笑)

私は今回このコードを書き上げるのに2時間かかりましたが、次はこのコードを書かずに済みますので、その2時間を短縮することができます。

フリーランスは成果報酬でお仕事を貰うことが多いと思います。
時間を短縮することで、時給単価が上がりますし、より多くのお仕事を受けることができます。コードをストックして、ササっと良い仕事をできる人になれるよう日々積み上げていきましょう！

今まで目にしていた店舗一覧のページ。
確かによく見ると、表だなって思いました(笑)
新しい発想を手に入れました。

「tableの中で箇条書きになっている部分にulやliを使っても良い」という発想が私の中にありませんでした。こういうのって、たくさん経験つまないと気づかないよね。どんどん、挑戦していこうと思います。

idを取得してそこまで移動するJavaScriptのおかげでページスクロールはすぐに実装できました。JavaScriptってやっぱり便利。使いこなせるようにこちらの勉強もしっかりしていきます。

いかがだったでしょうか？この記事をまとめるとこんな感じです。

制作するメリット
→制作時間の目安がわかり納期や報酬の提案時に役立つ
→コードがストック出来て使いまわせる

制作して学んだこと
→店舗一覧ってtableなんだという発想
→tableの中にliを入れてもいい
→JavaScriptの存在はありがたい

まだ「店舗一覧ページ」を作ったことがない人はぜひ挑戦してみてね。
ここまで読んでくださり、ありがとうございました。