津軽ジョナ農園｜架空の農園サイト

サイト情報

※架空サイトのためベーシック認証をかけております。

　お手数ですが下記ＵＲＬからユーザー名・パスワードをご入力ください。

ＵＲＬ　　：https://wp824966.wpx.jp/jona-farm

ユーザー名：jona-farm

パスワード：jona-farm111

制作概要

制作内容　：デザインカンプ（中級課題）からのコーディングをしたのち、

　　　　　　そのデザインを元に題材等を考えて変え半オリジナル化。

制作時間　：コーディング　２２時間

　　　　　　半オリジナル化　１０時間

ページ数　：２ページ

サイト構成：トップページ・サンクスページ

使用スキル：HTML・CSS・jQuery・Sass・Swiper

使用ツール：VScode・Figma

実装内容

・レスポンシブ対応

・ローディング画面はCSSアニメーションで実装し、ローディングが全て終わらなくても

　３秒後に画面が切り替わるようにjQueryを用いて実装 

・jQueryを用いてハンバーガーメニュー、ドロワーメニュー、スムーススクロールを実装

・メールフォームをGoogleFormを用いて実装

・メールフォームでjQueryを用いてバリデーションを実装

・スライダーをSwiperを用いて実装

・アコーディオン実装

・GoogleMap埋め込み

・サンクスページ

気を付けた点

デザインカンプからのコーディング

・品質チェックをしっかり行い、修正の手間を省く

　→その結果修正無しで提出することができた

・画面幅が変わっても表示崩れをしないよう意識

・BEMを使用し、修正・管理しやすいコーディングを意識

半オリジナル化

・元のデザインに合うような題材

・題材に合うような画像や色の選択

半オリジナル化について

元々のサイトが農園ということもあり、

・似たような業種にしたかった

・身近にあるものの方がイメージしやすくオリジナル化しやすかった

以上の点からりんご農家のサイトにしました。

サイトを閲覧しながらりんごをイメージしていただけるよう

背景色に黄系の色を

ワンポイントに赤系の色を使用しました。

ＰＣ表示

ＳＰ表示

サンクスページ

ご覧いただきありがとうございます。