初めてLPを作ったときの記録
こんにちは！SHElikesで勉強を始めて早２ヶ月経ちます😁
今までの比にならないくらいにできることが増えて
充実しています。
さらに、2019年11月の優秀SHEちゃんに選んでいただきました😍
先生方やSHEメイトの優しいお言葉に、モチベーションアップしまくり
です✨
ありがとうございます❣️
実は、架空のお花屋さんのLPを作ったので、混乱を防ぐため、制作物をまとめたサイトにまとめてアップしようかと考えています。
なので、卒業制作含め練習で作ったものと、実際に依頼を受けて作ったものをまとめてサーバにアップしようと考えているため、
今のところLPはまだアップできていません🙇♀️
そのため、こちらに写真で載せてみることにしました！
（これでいいものかと悩んではいますが。。。笑）
※追記。
2020/02/06現在はサーバアップしてます。
興味ある方はこちらから飛んでみてください。👇
卒業制作として作ったものと、あやかん大先生👏に頂いたFBを元に
訂正して発表会で発表したものを比較で振り返りたいと思います。
💙before
このサイトのコンセプトは「花のある暮らしを想像してもらう」です。
花を通じて笑顔になる人々の写真を載せることでリンクさせ、
写真多めの設定に。
以前にnoteに投稿したAdobe Colorでメインビジュアルから色を抽出することで、全体に統一感が生まれました。
スマホ、タブレットのレスポンシブ対応。
ただ、想像力が足らず、内容がひじょ〜に、薄い。😂
ヘッダーは、スマホ版でハンバーガーメニューになります。
正直、お花屋さんに詳しければリンク飛ばしたかったのですが。。。
こちらはホバーアクションのみ。
ギャラリーはslick引用で作ったjQueryのスライドです。オートプレイです。
コンセプトにリンクさせるためにブログリンクも。
こちらもホバーのみですが、SEO的にも定期的に更新があるといいですよね。
WEBの勉強をする前、迂闊に更新して大変なことになった経験がありますが😅
🧡after
訂正は、二日ほどかけて行いました。
訂正だけでも新しいことが学べました♪
ハンバーガーメニューとグローバルナビゲーションにホバーを付けました。
ホバーすると字が白くなります。
どちらもホバーをつけるにはどうしたら良いのか模索しました。
今ある知識のなかで、自分で発見できたときの達成感はものづくりの醍醐味だと感じました。
一目見たときにサイトの内容が分かりにくかったようなので、
説明文を少し入れました。ちょっとは”らしく”なったかな？？
３行目のAccessはホバーして連絡先情報へ飛びます。
就活風に言うと、これも接客業で培ったホスピタリティーというやつでしょうか🤣
参考サイトでこういう作りのスライドがあったので一塩。
よりコンセプトに近づいたと思います。
スマホでみるとこうなります👇
スライドをレスポンシブ 化させるためにslickをカスタマイズしました。
サイトの概要
長くなります。
卒業制作を控えている方など、参考にしたい方はご覧ください☺️
＜サイトの内容を決めた経緯＞
花などの植物や自然が好きで、
もし花屋になるとしたらこんなサービスを提供したいなと考え、作りました。
＜サイトの目的、内容＞
目的
企業側
・HPを開設することで、花屋に訪れる人を2倍に増やす。
・ブライダルのサービスも始めるためその宣伝。
→1年後売上目標は、現在の1.5倍❗️
ユーザ側
・プレゼントや自宅用、結婚式用の花が欲しい。
・どのようなアレンジメントを依頼したら良いのか参考にする。
・近所の花屋を探す。
→写真が映えるようなデザインに。
→地図も載せる。
内容
コンセプト・主なサービス内容(WORK)・ギャラリー
・スタッフブログバナー・アクセス・SNSリンク
＜ターゲット＞
主に20～40代女性。(花をプレゼントしたい男性にも。)
インテリアや暮らしの質に拘っている。
お祝い事で花をプレゼントしたいと考えている。
結婚式の予定がある。
＜こだわりポイント、工夫したポイント＞
・ヘッダーはレスポンシブでハンバーガーメニュー(他サイト参照)に
なるようにしました。
アクセスでは、ユーザーがお問い合わせしやすいように電話とメールが
直接できるようにリンクさせました。
・カラーは、メインイメージの画像から色を抽出してみました。
(どのくらい色幅を持たせて良いのか悩みました💦
・写真は、必要に応じて画像の色調や明るさを調整しました。
・ウェブデザインのトレンド「フラットデザイン」を取り入れてみました。
・OGPで、Facebook用の画像を読み込ませました。
ハンバーガーメニュー を最後に入れた為か、レイアウトが崩れてコーディングに手間がかかってしまいました。しかし、試行錯誤を繰り返しているうちにコーディングやツールの知識が身につきました。
次回からは効率よく作成できるように努力したいと思います。
講評
＜良かった点＞
・余白の取り方🙆♀️
・使用写真に統一感
・大事なリンクにhover(カーソルを当てたときの変化)がついていて良い
＜改善点＞
・ヘッダーやフッターのSNSボタンにもhoverつけるとなおよし！
・メインの写真が荒い？
・OGPの画像名がpngにするところをpsdになっている
・ハンバーガーメニューがリンクをクリックしたら自動で閉じると親切
・見出しにGoogleFontなどを使用して、デザイン性UPさせる
・GALLERYをレスポンシブさせると余白が広すぎる
スライダーが小さくなる。
計８０点（１発合格🎉）
実際はこんなぶっきらぼうな感じではなく、優しいフィードバックを
いただきました😂💕
初めて作ったので、技術的にもデザイン的にも改善すべき点が多々あると思いますが、これが原点だと思って頑張ります。
最後まで読んでいただき、ありがとうございました！
この記事が気に入ったらサポートをしてみませんか？