Webサイト制作A

Design

SHElikes PROデザイナーコース 課題④は、コワーキングスペースのWebサイトを制作しました。

工夫した点

クライアント様のヒアリングより要件定義をまとめるところから始めました。
クライアント様からお聞きしたコンセプトを意識しながら、まずは配色とフォントを決めました。

配色はビジネスのイメージから落ち着いた紺や青系とカフェのような温かくて居心地の良いイメージとしてナチュラル系の茶色・オレンジ・黄色にしました。

ベースカラー:   白 (#FFFFFF)
メインカラー:   紺 (#18242F)・青 (#265783)
アクセントカラー: 茶色 (#321307)・オレンジ (#EB3744B)・
         黄色 (#FBC98C)

フォントの欧文はゴシック体に近いものにし、和文は少しさ優しく見えるものにしました。

欧文: Helvetica Neue
和文: DNP 秀英角ゴシック金 Std

各セクションの順番は、クライアント様の世界観を大切にということでファーストビューで施設の雰囲気が伝わるようにし、コンセプトで世界観がより伝わるようにと考えました。その次に
①施設や設備は何があるのか?
②利用するには?
③利用プランは?
④営業日やイベントのお知らせ
この順番で確認していただき、利用したいと考えた方に申し込みや見学予約をしていただけるようにと考えました。

● ヘッダー 
ヘッダーは固定することで、各セクションに移動できるようにし、CTAボタンから申込や予約ができるように配置いたしました。

● ファーストビュー 
写真をコワーキングスペースの雰囲気が伝わるように窓が大きく明るい雰囲気の中に植物もあるものにいたしました。

● コンセプト 
「オフィスでもカフェでもないけど、居心地がいい場所」ということを表現するために四角の枠の中にも温かさが伝わる配色にいたしました。

● 施設・設備 
写真をメインにすることで施設内の設備をわかりやすくいたしました。

● ご利用方法 
ステップ方式にし、利用する際の手順をわかりやすくし、イメージしやすいようにアイコンも配置いたしました。

● ご利用プラン 
各プランが比較しやすいように横並びにし、利用できるものはアイコンでわかるようにいたしました。
また、プランごとにどのような方におすすめかを吹き出しにすることでユーザーがどれに当てはまるのかがわかりやすくイメージできるように強調いたしました。

● お知らせ 
定休日なしとなっていたので、営業日やイベントの日程が確認できればとお知らせのセクションを追加いたしました。
また、イベントに関しては過去に開催したものをSNSで確認していただけるとユーザーも利用しやすくなるかと考えました。

● CTA 
ここまでのセクションを確認して利用申し込みや見学予約につながればとCTAボタンを配置いたしました。

● よくある質問 & アクセス 
ここで、よくある質問やコワーキングスペースの場所をMapなどで確認していただいた後に、最後にCTAボタンを再度配置いたしました。