架空アニマルCafé開店

初めてライティングページ作りました。
ワークフレームから実装までやりきりましたね。

実装になると正直、装飾フェーズでは出せない自分の思い描いているものが織り込まれるので、
かなり違うものになってる気がします。（いい意味でね）
正解がこれなのか？？と悩みましたが、

装飾だから裸に色付けただけ。
実装はきちんと服着た感じ。

そんな風に思って納得してみてます

ご依頼内容

1. サービス概要

店名： アニマルCafe mofu mofu（モフモフ）
特徴： ハリネズミを中心とした、動物と触れ合える癒やしのカフェ。
コンセプト： 「今日、がんばった自分に、小さなモフモフを。」仕事帰りの女性が、動物たちの自由な姿を見て優しさを取り戻せる場所。

2. ターゲット層

20代〜30代の働く女性。
都心在住・在勤で、日常的に癒やしを求めている。
ペット不可のマンションに住んでいるなど、動物が好きだが家では飼えない環境の人。

3. LPの主な目的

「安心感」の提供： 初めての人でも料金や接し方に迷わないようにする。
「予約」の獲得： サイトを見て「今すぐ行きたい」と思ってもらい、予約ボタン（CTA）へ誘導する。

4. 必須掲載項目

メインビジュアル： ハリネズミの可愛さが一目で伝わる写真。

料金表：

基本利用料金：1,650円（税込）/ 60分（ワンドリンク付）

平日限定フリータイム：2,750円（税込）（ワンドリンク付き）

追加ドリンク：330円（税込）

延長料金：550円（税込）/ 30分

Q&A・接し方： 動物たちにどう接すればいいか、優しさが伝わる解説。

アクセス・店舗情報： 予約ボタン（当日予約と通常予約の2種）。

こんな感じでスタートしました。

ワイヤーフレーム

このモノクロのつまらんものが、
ワイヤーフレームなんです。
設計図という感じ。
文字や配置図形は置くけど、色や写真は
置きません。
私は慣れていないので、なんとなくで置いて
います。
これじゃダメなんだけどね。

ここで追加ドリンクは、一律550円に設定しました。
その代わり動物さんにあげるおやつを

基本料金は一回330円
平日限定プランは一回110円

にしました。楽しんでほしいからね。

実際の案件だと提案になるのかな？？

そうそう、動物好きなアタシのこだわりで
制作コンセプトに

私自身の制作コンセプト

個のLPはただ「人間が癒される」だけではなく、

「人間と動物が、お互いに心地よい関係を気づく場所」

であることをデザインの核として制作しました。

1. 「良心」を刺激するインターフェース

設計： ユーザーを「消費する客」としてではなく、「動物のパートナー」として扱いました。
理由： Q&Aや接し方の説明を丁寧に配置することで、ユーザーの「怖がらせたくない、大切にしたい」という良心を引き出します。この「心の準備」こそが、来店時の最高の体験（癒やし）に繋がると考えました。

2. 「生命感」を宿すための不完全性（わざとの崩し）

設計： 完璧な整列（グリッド）からあえて逸脱した、リズムのある配置。
理由： デジタルな画面の中に、動物たちの予測不能な動きや、スタッフの手作り感を吹き込みました。計算された「不完全さ」が、サイトに体温を与え、親しみやすさを生んでいます。

3. 「不安」を取り除くための誠実な視覚化

設計： 料金表の情報を極限まで整理し、一目で総額がわかる「安心の設計」。
理由： お金の不安を解消して初めて、ユーザーはハリネズミの可愛さに没入できます。「隠しごとのない誠実さ」をデザインで表現しました。

アタシという人間がもろに出ている（笑）
そんな、コンセプトです。

これでもおさえてるのよ。もっと突き詰めると経営できなくなっちゃうよね。

装飾フェーズ

色と写真を入れることで
命が吹き込まれました。
静の作品状態なんで、
正直イメージに近づける感じ。

架空の店舗なんで、
素材はアタシが厳選できるのが

楽しい✨

写真の加工はAffinityで
行いました。

ロゴもちゃちゃっとレイアウトで使っているFigmaで作成。

あ！気づきましたか？？
配置や動物の紹介文・あいさつ文変えました。（笑）
色と写真が入るとさらに良くしたいって
脳がフル回転するんですね。
見てくれる人が安心して、動物好きを優しさに変えるように
作りこみました。

実装フェーズ

HTML/CSSでLPに動きを

このフェーズは更にエネルギーを注ぎ込む段階ね。
今はcordで色々なことができるようになってるの。

この段階は完成ではなく。
本番前の予行練習みたいな感じね…語彙力ないな💦

これがHTML/CSSってやつです。
HTMLで骨組み作って、CSSで装飾する感じね。

コードを打ち込む場所は
VisualstudioCord
利用してます。

この段階はアタシみたいな駆け出しには
どんなコードがあるのかわからないので、
Gemini
にサポートしてもらいました。

ホントに色々なことができるし、あたしのワガママやこだわりに
良く付き合ってくれたよ。

この段階での注意！！
ある程度、HTML/CSSを知らないと難しいと思います。
AIに丸投げでも作れますが、
ホントにプロンプト（AIへの指示文）を作りこまないと
人間らしさのある作品は作れないと思います。
本気でwebデザインを目指しているなら、
頑張って基礎の基礎は勉強してください。

ROCOのこだわり

カラーパレット

ベース：薄緑（＃a3c9a8）とパステルイエロー（＃fffde6）
アクセント：テラコッタオレンジ（＃d35400）

タイポグラフィ

日本語：しっぽり明朝
アルファベット：CormorantGaramond
それ以外：NotoSensJP

Web公開準備

色々悩んだ結果・・・
WEB公開はGitHubにしました。
サーバーを使わないで、無料で使える。
WEBデザイナーとして格が上がる。（自論）

GitHubの使い方が本当にわからんかったです。（笑）
なので、忘れないようにざっくりですが、記録で残しておきます。

STEP 1：ファイルを「確定」させて保存する

GitHubのリポジトリ画面（グレーの点線枠がある画面）にファイルを放り込んだ後の操作です。

ファイルをドロップ： index.html、style.css、画像フォルダをまとめて枠内に入れます。
確定のハンコを押す： 画面を一番下までスクロールし、緑色の [Commit changes（変更をコミット）] をクリックします。
- これで、GitHub上の「箱」にあなたの作品が正式に保存されました。