Project Overview
大阪・梅田エリアのシティホテル「Harmony Hotel OSAKA」を想定した、Webサイト・ロゴリニューアルの架空案件です。
「館内リニューアルに伴うWebサイト刷新」というクライアント設定のもと、要件整理からデザイン、コーディング、多言語対応、クライアント向け提案資料の作成までを一貫して担当しました。
見た目を整えるだけでなく、「なぜこの設計にしたのか」をターゲット層や販促の観点から説明できる提案づくりを意識しています。
Target
・20〜30代の男女、海外旅行客(サイトの主要ターゲット)
・シニア世代60代以降の団体客(今後取り込みたい層)
・大阪観光客、結婚式場を探している方、特別な一日を求める方
Role
要件整理 / 情報設計 / ワイヤーフレーム・デザインカンプ作成 / UIデザイン / コーディング / レスポンシブ対応 / 多言語対応 / クライアント向け提案資料作成
Duration
制作期間：50時間
Challenge
旧サイトはCSSにレスポンシブ指定が一切なく、スマートフォン・タブレットでの閲覧に大きな課題がありました。
加えて、宿泊だけでなく結婚式場やシニア層の団体利用など幅広い客層に対応する必要があり、「都会的な洗練さ」と「誰にでも使いやすい分かりやすさ」を両立させることが最大の課題でした。
Thinking Process
表面的なビジュアル刷新だけでなく、「なぜこの配色や配置にしたのか」をターゲット層や導線設計の観点から言語化することを意識しました。
まずFigmaでデザインカンプを作成し、レイアウトや配色、情報の優先順位を固めたうえで、Claudeを活用しながらコーディングを進めるという制作フローを取りました。
実装を進める中で、客室ページに付帯サービスをまとめた「BENEFITS」セクションを新たに追加するなど、作りながら気づいた改善点をその都度反映しています。
またウェディングページだけ配色をゴールド×紺から白×イエローに切り替えるなど、サイト全体の一貫性を保ちながらページごとの目的に応じたトーン設計を行いました。
クライアントへの提案時には、旧サイトの具体的な課題(レスポンシブ未対応、仮テキストのまま残っていた紹介文など)を根拠として示すことで、説得力のある提案になるよう心がけました。
Idea & Design
ゴールドと紺を基調に、都会的な高級感とエレガンスを表現しました。
一方で情報設計自体はできる限りシンプルに保ち、スマートフォン操作に不慣れなシニア層でも迷わず使える設計を意識しています。
ナビゲーションはスクロール方向に応じて表示・非表示が切り替わるようにし、モバイルでは画面下部に予約ボタンを固定するなど、実際の利用シーンを想定したUIを心がけました。
What I Learned
今回はFigmaでデザインカンプを作成したうえで、Claudeを活用してコーディングを行うという制作フローに初めて取り組みました。
デザインを画面上で固めてから実装に移すことで、レイアウトの意図を見失わずにコーディングを進められることを実感しました。
また、Claudeとのやり取りを通じて、実装の細かい調整だけでなく、「なぜこの設計にしたか」を言語化する作業自体もスムーズに進められることに気づきました。
デザインを「なぜそうしたか」まで言語化して伝えることの重要性も、今回の大きな学びです。
単なる見た目の提案ではなく、旧サイトの具体的な課題を根拠にすることで、提案の説得力が大きく変わることを実感しました。
レスポンシブ対応や多言語対応(日本語・英語・中国語・韓国語)、アクセシビリティ(タップ領域やキーボード操作への配慮)など、実際の運用を見据えた設計を一つひとつ積み重ねる経験を通して、新しいツールを取り入れながら制作フロー自体を改善していく姿勢の大切さを学びました。