【サンプルサイト】コワーキングスペース

使用スキル

WordPress / HTML / CSS

制作概要

・ロゴ・写真・文章はすべて提供された素材を使用し、構成とデザインは自ら企画・制作しました。店舗型ビジネスの「集客」を意識した設計を心がけています。

・使用テーマは、WordPressのクラシックテーマである「Lightning」です。日本製のテーマとして信頼性が高く、コーポレートサイトや店舗サイトなど実際のビジネス現場でも多く採用されています。

トップページ

・トップページに、店舗の特徴が一目で伝わるビジュアルとキャッチコピーを配置。

・ロゴのピンク色を際立たせるため、全体の配色はあえて抑えめにし、ロゴが視覚的なアクセントとなるようなデザインに。

・初めてこのカフェを訪れる方でも迷わず情報にたどり着けるよう、シンプルでわかりやすい導線設計を意識しました。

・あたたかみとビジネス感を両立したデザインに。カフェのあたたかみのある雰囲気に合わせて、見出しやアクセントには茶色を使用しました。一方で、コワーキングスペースとしてのビジネスっぽさも大切にし、本文には濃いグレーの文字色を採用しています。

・空間の広がりを演出する写真配置。設備やサービスの写真は、横に3枚並べて全幅で表示し、ゆったりとした空間を視覚的に表現しました。

・お問い合わせや予約につながりやすいよう、ページ内に複数の案内ボタンを配置。行動につながる導線設計を意識しました。

・どんな方がこのお店を利用しているのかをイメージしやすいよう、メンバーの集合写真を取り入れました。お店のあたたかい雰囲気が伝わるよう工夫しています。 

レスポンシブ対応

・スマートフォンからの閲覧を意識したレスポンシブ対応です。スマートフォンでの閲覧時にも読みやすさを保つため、文章が自然な位置で改行されるよう、HTMLとCSSで調整を行いました。

設備・サービスページ

・設備・サービスのページは、各設備の紹介が単調にならないように、画像とテキストの配置を左右交互に入れ替えることで、視覚的にリズムが出るようにしました。
説明文を自然に読み進められるように、余白や行間にも配慮しています。

※表示の都合により、キャプチャ画像にはフッター部分が含まれていません。実際のサイトでは、ページ下部に通常通りフッターが表示されます。 

投稿ページ

・複数の記事が並ぶ投稿ページでは、読みやすさと整理された印象を重視しました。
記事タイトル・日付・概要・アイキャッチ画像が自然に視線を誘導するようにレイアウトしています。
・右側に目次（INDEX）を設けることで、訪問者が気になる記事へすぐにアクセスできるように工夫しました。

※表示の都合により、キャプチャ画像にはフッター部分が含まれていません。実際のサイトでは、ページ下部に通常通りフッターが表示されます。