デザインカンプを参考に作ったお花屋さんのサイトをGithubに公開しました。

先日、長期休暇を活用してこちらのデザインカンプを参考に、お花屋さんの簡単なLPを作成しました。

制作したサイトをGithubに公開するところまでできたので、ここに残しておきます。

下記が制作したサイトになります。

HTML・CSS・jQueryを使ったお花屋さんのサンプルサイト

HTML・CSSのスキルチェック

ベースのHTML構造はnoteを見ながら８割がた写した感じですが、今の自力がどの程度なのか測るためにそれ以外のCSSは自力でやってみました。（ベースのHTML構築から自力でやれって感じですが…）

デザインカンプを参考に文章や画像、デザインを変更しつつオリジナリティのあるサイトにしています。

WordPressを使ったサイト制作案件がほとんどでデザインカンプをもとにベースから作るサイト制作の経験が乏しかったので、よい経験となりました。

特に、WordPress案件では構築済のレイアウトやwrapperの構成などWordPressでブロックエディターを使っていると忘れがちなところを制作できたことで、全体のバランスや構造、コンポーネントの理解を深めることができました。

ただ、OGP設定でブログカード用の画像がうまく表示できなかったのでそこは今後改善してく予定です。
（画像リンクにhttp://が付いてしまう現象）

コピペ制作者から創れる制作者になるためにjQueryを理解

このサンプルサイト制作の最も大きな目的が、コピペ制作者から創れる制作者になるというところです。

今まで実装したい内容をググってコピペして編集という方法で制作してきましたが、より幅広いニーズに対応し、自力を高めていくためには、創れるようになることが必須だと思いました。

ググって何とかすることが悪いとは言いませんが、本質を理解せず実装し、あとから見てなんのコード化わからないでは保守面でも良くないと思います。

あと純粋に、創れた方が楽しい。

以上のような思いから、jQueryを理解するところからサイトに取り入れるところまで学習しました。

今回このお花屋さんのサイトで実装した内容は下記４つです。

• ローディングアニメーション
• ヘッダーの固定設定・色変化
• スクロールダウン促しアニメーション
• ハンバーガーメニューボタン
• ブロックのフェードイン、時間差フェードイン

簡単なアニメーションですが、jQueryの基礎を理解するには最適だったと思います。

iPhoneのsafariとChromeにて、ファーストビューのスクロールダウン促しアニメーションがうまく動いてくれない現象が発生しているのが謎で、今のところ、safariやChrome側のバグではないかと思っています。

制作したサイトをGithubに公開

制作したサイトをGithubに公開しました。

恥ずかしながら、Web制作に手を付け始めて1年半、まったくGithubを触ったことがありませんでした。

なので、Githubとは何ぞやというところから、PCへのGitのインストール、VScodeとの連携、コミットやプッシュなど０から学びました。

そんなこんなで何とか、VScodeで作成したコードをローカルリポジトリからGithubのリモートリポジトリにプッシュすることができ公開まで行うことができました。

先日、Githubに某企業のコードが公開されたことが問題となっていたので、そのあたりも調べつつ注意しつつ、活用していこうと思います。

終わりに

今回は、デザインカンプを参考にHTML・CSS・jQueryを使ったサイト制作を行い、Githubに公開するところまでを紹介しました。

それぞれの方法いつか備忘録的に紹介する予定です。

未経験からフリーランスを目指す方が増えていますが、長期的な視点で本当にクライアントのことを考えた実装をしているのか疑問をもつことがあります。

稼ぐに特化した学習方法、営業、マインドなど発信される方、それを参考に学習、営業する方がおられますが、クライアントのことを考えると、要望に応じた制作を行い、必要に応じて提案し、納品後の保守管理をしやすい実装をすることを意識すべきではないかと思っているところです。

あくまで僕個人の考えですが…

少しぼやきつつも、デザインカンプを参考に作ったお花屋さんのサイトを制作し、Githubに公開しました。