制作の背景と目的
２０２６年4月で事業所が閉鎖したため、翌5月から就労移行支援のキャリスタ梅田さんでお世話になることに。こちらではPCスペックの兼ね合いや、自宅に動画編集を行う環境がない理由からWeb制作の学習の再開を選択し職探しを行うことに決めました。
直近では動画編集を行っていたこともあり、Web制作はブランクもあったので制作の目的はリハビリとしました。
制作サイト情報
※ドメインを契約していないため、画像でのみ閲覧可能です。もし閲覧ご希望でしたら当方PCに作成データがございますので、そちらをお送りすることは可能です。
今回カンプの題材に選んだのはコーディング練習用のデザイン~お花屋さんのLP編~のサイトで取り扱ってらっしゃった「Shiro」というお花屋さんのサイトです。なお、完成見本サンプルページはこちらです。
すっきりした素敵なデザインで、アレンジのし甲斐もありリハビリにはぴったりだと感じたので選ばさせていただきました。
元々のデザインはあかねさん(@omsss22)という方が作ったものみたいです。他の作品も見たかったのですが、2026年7月現在アカウントがないのかアクセスすることができなかったのは残念でした…。
意識した点
メニューの視認性向上
完成見本ではPCでもスマホ画面でもハンバーガーメニューでしたが、制作したものでは視認性向上のためPC画面では横並びで表示させました。
ページトップボタンの導入
今回は縦長のサイトということもあり、右下にページトップボタンも導入してみました。最初は非表示で一定以上スクロールすると表示される仕組みです。
また細かいこだわりとして背景が黒の部分(今回の場合フッター部分が該当)はボタン部分背景を白にし、こちらも視認性を高めてみました。
横スクロール誘導表示の導入
完成見本同様スマホ表示時のみ、一部のコンテンツは横スクロールで閲覧する仕組みです。これをユーザーに分かってもらい易くするため、横のスクロールアニメーションを実装しました。
また機能はしておらずデザインだけの表示にはなりますが、支援員さんからのアドバイスもありコンタクトフォームも導入してみました。