Facebook あずきな茶 WEBサイト(自主制作)
Logo

あずきな茶 WEBサイト(自主制作)

クレジット
Avatar
WEBデザイナー
あずきな茶 WEBサイト(自主制作)-1
シェア

あずきな茶 WEBサイト(自主制作)

■ サイト概要 サイト名: 猫カフェ「あずきな茶」Webサイト(架空サイト) ターゲット: 日々の疲れを癒やしたい20〜40代、猫好きの方 コンセプト: 個性豊かな3匹の猫とゆったり寛げる、アットホームで和やかな癒やしの空間 ■ デザインのこだわり・工夫したポイント トンマナ(世界観)の統一:カフェの温かみと猫のやわらかさを表現するため、やわらかいアイボリーとあずき色(深みのあるブラウン・赤みブラウン)を基調としたカラーリングで全体を統一しました。 フォントとビジュアルの連動:タイトルロゴやメインビジュアル内のキャッチコピー「いやされにきてにゃ」、各見出しに丸みのある手書き風フォントを採用。サイト全体でビジュアルと文字のトーン&マナーを揃え、一貫した世界観を作り出しています。 メニューページのレイアウト最適化:メニューページでは、商品画像・メニュー名・金額の視覚的バランスを重視して配置。一覧性と見やすさを両立させています。 ■ 実装・技術面の工夫 レスポンシブ対応(マルチデバイス対応):PC・スマートフォンなど異なる画面サイズでもレイアウトが崩れないようレスポンシブWebデザインを適用。特にメニューページの要素配置(画像・テキスト・価格)がスマホ表示でも美しく整うよう配慮しました。 ユーザー体験を高める装飾: ナビゲーションや見出しに肉球アイコンや猫の写真をアクセントとして使用し、視覚的にも親しみやすさを感じられる導線設計にしています。 ■ 制作概要 制作期間: 10日 担当範囲: 企画 / デザイン / コーディング 使用ツール・言語: HTML / CSS / (Figma / Canva)
クレジット
Avatar
WEBデザイナー
シェア
あみの他の作品
画像
作品を見る
Fammスクール案件バナー
画像
作品を見る
ゆめのつぼみ
画像
作品を見る
LPデザイン課題(ファーストビュー)
foriio

あなたのforiioを無料で作成

fori.io/
あずきな茶 WEBサイト(自主制作)-1

あずきな茶 WEBサイト(自主制作)

■ サイト概要 サイト名: 猫カフェ「あずきな茶」Webサイト(架空サイト) ターゲット: 日々の疲れを癒やしたい20〜40代、猫好きの方 コンセプト: 個性豊かな3匹の猫とゆったり寛げる、アットホームで和やかな癒やしの空間 ■ デザインのこだわり・工夫したポイント トンマナ(世界観)の統一:カフェの温かみと猫のやわらかさを表現するため、やわらかいアイボリーとあずき色(深みのあるブラウン・赤みブラウン)を基調としたカラーリングで全体を統一しました。 フォントとビジュアルの連動:タイトルロゴやメインビジュアル内のキャッチコピー「いやされにきてにゃ」、各見出しに丸みのある手書き風フォントを採用。サイト全体でビジュアルと文字のトーン&マナーを揃え、一貫した世界観を作り出しています。 メニューページのレイアウト最適化:メニューページでは、商品画像・メニュー名・金額の視覚的バランスを重視して配置。一覧性と見やすさを両立させています。 ■ 実装・技術面の工夫 レスポンシブ対応(マルチデバイス対応):PC・スマートフォンなど異なる画面サイズでもレイアウトが崩れないようレスポンシブWebデザインを適用。特にメニューページの要素配置(画像・テキスト・価格)がスマホ表示でも美しく整うよう配慮しました。 ユーザー体験を高める装飾: ナビゲーションや見出しに肉球アイコンや猫の写真をアクセントとして使用し、視覚的にも親しみやすさを感じられる導線設計にしています。 ■ 制作概要 制作期間: 10日 担当範囲: 企画 / デザイン / コーディング 使用ツール・言語: HTML / CSS / (Figma / Canva)
クレジット
Avatar
WEBデザイナー
シェア
あみの他の作品
画像
作品を見る
Fammスクール案件バナー
画像
作品を見る
ゆめのつぼみ
画像
作品を見る
LPデザイン課題(ファーストビュー)
foriio

あなたのforiioを無料で作成

fori.io/