制作したもの
Works
制作期間
コンテンツ設計：5日
デザイン：14日
コーディング：6日
使用ツール / 言語
Photoshop / Figma / VSCode
HTML / CSS / jQuery
概要
オフィスデザイン会社のコーポレートサイトのリニューアル
最終目的
- 契約につながるお問い合わせ＆資料請求の件数を増加させる
01
現状課題
- 企業ならではの強みがお客様に伝わっていない
- お問い合わせがあっても最終的に契約に繋がる件数が少なく、その分やりとりに無駄なコストがかっている
02
改善策
- 企業の強みを明確に伝える
→ワンストップ体制＆ヒアリング力が強みの企業なのでその点をアピールする - サイト内のコンテンツを充実させ、お問い合わせの前にお客様が具体的なイメージを持てるようにする
→やりとりが始まってからのミスマッチを防ぐ
03
ターゲット
- オフィスの新設や移転を考えている企業の担当者
- 上記担当者の上司（最終決定の権限がある立場の方）
上記を踏まえて、サイトのコンセプトを次のように決定しました
04
コンセプト
- お客様に寄り添った空間提案
コンセプトに沿って、最終目的を達成するために次のような設計にしました
05
コンテンツ設計
企業の強みをアピールしつつ、サイトを閲覧するお客様の悩みをクリアにできるような設計を意識しました。お客様は「本来の業務に加えて、不慣れなオフィス移転などを任されていて不安・多忙」という状況が多いのではないかと考えながらコンテンツの内容や記載順を決定しました。多忙な中でもストレスなく情報を得ることができ、なおかつ安心して相談できるイメージを持っていただけるサイトを目指しました。
各ページの詳細を見る
トップページにはメッセージ、強み、施工事例、インタビュー、企業理念を記載
- お客様に寄り添うスタイルが伝わるよう、キャッチコピーに「相談相手」というワードを採用しました
- 強みを把握したうえで施工事例を見ることで、「この会社だからこのようなオフィスが出来上がるのか」とイメージしていただく
- インタビュー（お客様の声）を掲載し、担当者の不安を払拭し相談しやすい導線を図りました
下層ページはService、Works、Company、Contact
- 「Service」ページでは強みをより詳細に、そして詳しいサービス内容や利用方法について記載
- 「Works」ページでは施工事例の一覧を最低限の情報量で記載（画像がメイン）
- 「Company」ページでは企業情報だけでなく、企業理念をメッセージ的に記載
- 「Contact」ページでは冒頭に「よくあるご質問」へのボタンを設置し、お問い合わせの質を向上
06
意匠設計
ホワイトとネイビーを基調としたシンプルな配色にし、誠実な印象を与えつつ施工事例の画像を際立たせています。シンプルであるがゆえに冷たく事務的な印象を持たれないよう、全体的に余白とアニメーションを取り入れ、人と人との会話が生まれるようなイメージを表現しました。画像は右上の大きな角丸だけでなく、全箇所に若干の角丸を入れて柔らかい印象にしています。
各ページの詳細を見る
トップページ
- 「強み」は簡単な図を添えることで、視覚的にも印象付けています
- 「Works」セクション上部に事例一覧ページへのボタンを配置することで、お客様が最も気になるであろう施工事例にスムーズにアクセス可能
「Service」ページ
- コンテンツ量が多いページなので、冗長にならないようタブ切り替えやアコーディオンを導入しています
「Works」ページ
- スムーズに事例を見ていただけるようカードタイプにし、主張したい事例についてはサイズを大きく掲載しました
その他
- フォントは英字は太めに設定し、日本語にビジネスゴシックを使用して信頼感を与えつつ可読性の高さを実現しています。
作品一覧に戻る