![見出し画像](https://assets.st-note.com/production/uploads/images/118175708/rectangle_large_type_2_60c5d4725ae5147b82d163637ff5b446.png?width=1200)
【制作実績】旅館ホームページ
ロゴデザインなども担当させていただいています「旅館なおみ」のホームページを制作しました!
![](https://assets.st-note.com/img/1696648986848-SIP80yUqxn.png?width=1200)
期間:2023年8~9月
担当:デザイン、実装、コピーライティング
使用ツール:Photoshop、WordPress
📝ご依頼内容
以前、ロゴ作成をした空き家をリフォームした旅館を正式にオープンするため、公式HPを制作して欲しい。TOPページに加えて、旅館のコンセプトや初めての方へのガイドを説明するページも欲しい。制作ツールはお任せします。
💡デザインの説明
![](https://assets.st-note.com/img/1696585485924-8O4kOTIkWV.jpg?width=1200)
ロゴに合わせて、黒と白をベースカラーにして、写真を活かしたデザインに。フォントは、高級感、和風感を演出する細めの筆文字風明朝体フォントです。ファーストビューの写真に青みを加えてシャープでスタイリッシュな印象に。予約ボタンは真ん中にわかりやすく設置しました。
⏳デザインプロセス
【1】ヒアリング
依頼者の森さんとは、実際に日本一周中に対面でお会いして、ホームページ制作のご相談を受けました。その際に、ドメインやサーバーについてもアドバイスさせていただきました。
![](https://assets.st-note.com/img/1696587344081-i1KhWaUlt5.jpg?width=1200)
【2】WordPress立ち上げ
実際に制作が開始できる段階になり、WordPressを立ち上げる上での設定などもお手伝いさせていただきました。
【3】ファーストビューデザイン提案
実装する前に、ファーストビューのイメージを3案作成して提案。
![](https://assets.st-note.com/img/1696587422096-HlGQF6mQ2F.jpg?width=1200)
ロゴに合わせて、黒と白をベースカラーにして、写真を活かしたデザインに。フォントは、高級感、和風感を演出する細めの筆文字風明朝体フォントです。
A:写真に青みを加えてシャープでスタイリッシュな印象に。予約ボタンは真ん中にわかりやすく設置
B:写真に暖色を加えて暖かい印象に。予約ボタンは右上に(いきなり予約というよりサイト全体的にみてから予約してもらう感じ)
C:写真を暗めにすることで文字を際立たせる。ボタンは詳細を見たい人と今すぐ予約したい人で2つ用意。
この中だとAがイメージに近いということで、Aのデザインにて進めました。
【4】TOPページデザイン確認
TOPページを実装し、全体のデザインを確認していただきました。
【5】下層ページ作成&コピー提案
TOPページのデザインのOKがでたあとに、下層ページ制作に移りました。ホームページに入れる文言についても、森さんはリピーターさんでこれまでに旅館に関わる制作物をすべて依頼していただいたおかげでスムーズに提案することができました。
【6】修正
ホームページアドレスを共有して全体デザインを確認いただいた後、数点の項目を修正し、完成しました。
【7】納品
🎉依頼者様のご感想
かっこよく見やすくデザインしていただきました。今回初めてホームページを依頼してみましたが、これも大変満足しました!
最後までお読みいただき、ありがとうございました!
デザインのご依頼は、TwitterのDM、InstagramのDMまたはメールchiiisan.biz@gmail.comにてお待ちしています。
Instagramでも作品を更新中!
この記事が気に入ったらサポートをしてみませんか?