制作で大切にしたこと

01

PCだけでなく、スマートフォンからの閲覧でも快適に利用できるよう、画面幅に応じてレイアウトを調整しました。

• PC・タブレット・スマートフォンに対応
• SPではドロワーメニューを採用
• 文字サイズや余白を画面幅に合わせて調整

02

ASHITABA様が持つ自然で落ち着いた雰囲気をWebサイトでも感じてもらえるよう、ロゴやカラー、写真の見せ方を意識しました。

• ロゴのカラーを基調とした配色
• 店舗写真を効果的に配置
• 余白を活かしたレイアウト

03

サイトを見て終わりではなく、気になった方がスムーズに予約や問い合わせへ進めることを意識しました。

• 予約への導線を分かりやすく配置
• 電話・予約ボタンを設置
• アクセス情報を確認しやすく設計

04

店舗の雰囲気を伝えるために写真を活用しつつ、画像サイズを最適化することで、ページの表示速度の改善を行いました。

• 画像をWebP形式に最適化
• 画像サイズを見直し
• PageSpeed Insightsで確認

05

ユーザーだけでなく、検索エンジンにもサイトの内容が伝わりやすくなるよう、HTMLの構造やメタ情報を意識しました。

• title・descriptionを設定
• 見出し構造を整理
• OGPを設定

06

公開して終わりではなく、今後の修正や更新も考え、保守しやすいコードを意識してコーディングしました。

• SCSSを使用
• ファイルを役割ごとに分割
• クラス名を規則的に命名