見出し画像

#Webデザインお題　TOPをデザインしよう

こばやす｜Webデザイナー

こんにちは、こばやす（@kobayas_s）です。
前回、「構成からWebデザインする」でがっつり数ページのお題を出してみましたが、なかなか苦戦している方がいたので、今回は1ページもののWebデザインお題を作成してみました。

もっと #Webデザインお題 を広めて欲しいので、今回のお題は無料公開にしています。
未経験からWebデザイナーを目指す人から、プロだけど非公開案件が多くて実績が載せられないのでサンプルとして作りたいという方までふるってご参加頂ければ嬉しいです。

なお、このnoteでデザインカンプの制作方法は割愛しているので、初めてWebデザインをする方は下記の記事を参照してください。


0. Webデザインお題 参加方法

❶このnote後半にあるお題の内容を読む
❷お題を元にWebサイトをデザインする
❸作ったデザインを自分のブログやtwitterなどの投稿用画像に落とし込む
❹ #Webデザインお題 をつけてデザインを投稿

※ハッシュタグは#の前とタグの終わりに半角の空白を入れて、色付きのリンクになった事を確認してから投稿してください。
※お題の投稿期限は特に設けていませんので、自分のペースで進めてくださいね。
※こばやす からデザインのアドバイスが欲しい場合は下記からお申し込みください。（お題内容の質問に関してはこのnote記事にコメントをください）

注意事項

お題内容の著作権は こばやす にあります。ブログやtwitter、ポートフォリオに掲載する際は下記の内容を添えて頂くようお願いします。

・このお題のURL
・ユーザー名、twitterリンク（こばやす @kobayas_s）

※twitterでの公開に限り、  #Webデザインお題 の表記のみでOKとします。（仕様上、文字数に限界があるので）

作ったサイトをコーディングしてネットに公開する時は、ダミーサイトだという事を分かるようにしてください。
検索に上がってきてしまうと、本当に存在するサイトだと勘違いしてしまう人もいます。

【勘違いされないために出来る事】
・個別のドメインを取得して公開しない（自分のポートフォリオサイトのドメイン内で完結させる）
・noindexを入れて検索に上がらないようにする（具体的な表記方法）
・タイトルタグに「架空サイト」と入れる
・ファーストビューに架空である事を明記する
・お問い合わせフォームを付ける場合は送信させない（ダミーサイトの注意表記を入れる）
・住所、電話番号は使える番号に書き換えない
・Googleマップはダミー画像にする

1. お題内容

1-1.基本情報

小林県にある美容室のWebサイトを作るお題です。
デザインの方向性を確認したいので、初めにTOPページのデザインを見せるため作り込みをする、という設定。

◆サイトを作る経緯
今まで口コミとリピート客だけで成り立っていたが、客層の高齢化や転勤などによる環境の顧客離れが顕著になってきた。
新規顧客を開拓するために、ネットを使った集客を視野に入れて活動を始めた段階。

◆悩み
Instagramで投稿を始めたが、予約の導線がDM、美容室専門のWebマガジン予約フォームからのみのため、下記の不便さを感じている。

・Webマガジンサイトからの集客だと業者へ支払う中間マージンが高く、手元に入る売上が少ない
・DMで予約希望のお問合せが来るが、内容に不足が多いので何とかしたい
・Instagramでは載せられる情報に限界を感じているので、もっと見やすく自分のサロン情報を載せていきたい。

上記の悩みから、Webサイトでは直接予約が受け付けられ、かつ必要な情報を入力できるメールフォームを取り付ける事にした。
特にお問合せが多い料金に関してはTOPページである程度見られるように情報を掲載する。

◆美容室名
Hair salon Kobayas（ヘアーサロン コバヤス）
※ロゴは特にないので、サイトの雰囲気に合わせて作成してください。

◆ターゲット
20代～40代
どちらかというと女性に来てもらいたいが、ターゲットの家族（旦那さんなど）にも来てもらいたい。
近隣に根付いて住んでいる人。

◆イメージカラー
清潔感があり、温もりを感じる色合いにして欲しい。顧客の希望は下記の色。

#f6f6f1　ベージュ
#b8dae6　水色

◆店内のコンセプトや雰囲気
自然派のシャンプーやトリートメントを取り扱っている。
観葉植物やフェイクグリーンで店内を飾っていて、床や柱などに木目を使用した温もりある店内。
無印良品のようなリラックス出来るような空間を意識している。

◆参考イメージ
手書き文字の雰囲気や全体的にシンプルな雰囲気を参考にしてください。

◆対応デバイズ
レスポンシブ（スマホでも見やすく表示出来るように）

◆写真について
架空のお題のため、フリー素材を使用してください。
※素材選びに時間がかかる方は下記の方法でデザインを作りながら探すと解消するかもしれません。

例はバナーですが、下記のように置き換えて考えてみましょう。

❶Webサイトで入れなければいけない情報を入れる（写真のアタリも）
❷全体の情報量を見ながら、入りそうな画像を探す
❸写真を配置した後、色を入れていく

色を先に入れてしまうと、写真と調子が合わなくなってしまいやすいので、最後に入れるのがコツです。

1-2.入れて欲しい情報

❶グローバルメニュー
下記の内容を入れたい。ネーミングは分かりやすければ変更可。

・ヘアメニュー
・スタイリストの紹介
・過去のお知らせ
・ご予約フォーム

❶ファーストビュー
お店の雰囲気や、カットしている状態が分かるようにスライダーで表示して欲しい。（下記は動きの参考です）

❷コンセプト
「ナチュラルな美しさを引き出し、新しい自分に気付くきっかけをご提供します」
常に新しい美の発見をお客様に感じて貰うため、Hair salon Kobayas ではお一人おひとりに合わせたスタイルをご提案致します。
髪だけでなく地肌も美しく健康になれるよう、技術を尽くしご対応させて頂きますのでお気軽にご相談ください。
日々の疲れを癒す空間を整え、みなさまをお待ちしております。

❺Instagram
普段投稿しているのはカットモデルのイメージが多いです。

❸News
現在表示して欲しいお知らせは下記の通りです。

2021.02.01　2月の営業日のお知らせ
2021.02.10　新メニューが出来ました
2021.02.15　卒業式・パーティーのヘアメイクご予約について


❹メニュー（税込）
下記メニューは一部なので、全てのメニュー見られるよう「ヘアメニュー」ページにリンクを貼ってください。

カット
一般　4,500円
学生　4,000円
キッズ（小学生まで）　3,000円

カラー　6,600円～
パーマ　8,800円～
縮毛矯正　17,000円～
ヘッドスパ　3,600円

※学生の方は学生証をご提示頂きます。

❻ご予約
予約フォームのリンクを貼ってください。
休みの日が分かるようにカレンダーを差し込み、表示して欲しいです。

営業日⇀平日10：00～20：00、土日祝10：00～18：00
定休日⇀月曜、第二・第三 火曜

❼アクセス
グーグルマップを埋め込んでください。

〒123-4560　小林県小林市芋町南154-20
TEL：0000-5678-1234

2.ワイヤーフレーム

kobayasヘアサロンワイヤーフレーム

※このワイヤーフレームは情報の導線イメージです。
デザインをする時はお題内容に合わせて最適なレイアウトをするようにしてください。

以上がお題の内容になります。
1ページものなので、下層ページまで作りたいよ！という方は下記のお題に挑戦してみて下さいね。


記事制作のエネルギーにします！