サイトの全体設計

スマホ画面では基本的に縦並びのレイアウトを採用しました。
アニメーションなどは、なるべく少なくし、テキストなどを読みやすくデザインしました。

リニューアルをするにあたって

事業の成長に伴い、事業概要の更新や現在の運営店舗を掲載したい

元々自社のホームページはお持ちでしたが、会社が成長し、事業の数や運営している飲食店の数も増えてきたことから、リニューアルをさせていただくこととなりました。

以前のホームページよりもページ数を増やし、お問い合わせフォームをつけることで、採用や売上の向上などの施策も行いやすくなり、サイトの検索順位も上位を取りやすくなるように、ブログの更新機能などもつけさせていただきました。

理念やビジョンをメインに打ち出したい

初回のヒアリングの際から、理念やビジョンを色濃く打ち出したいというご要望をいただいておりましたので、ファーストビューにテキストアニメーションを実装し、初見でインパクトを与えられるよう工夫しました。

またトップページの上部や企業理念を伝えるページも固定ページとして個別に作成し、ヘッダーメニューに実装しました。

問い合わせフォームはあえて深い位置に

求職者との連絡手段としてお問い合わせフォームを使いたい、でも営業や迷惑メールなどの対応に時間を使いたくないというご要望をお伺いしておりましたので、お問い合わせフォームをサイトの深い位置に設置し、志望度の高い求職者、および重要な連絡のみが届くようなサイト設計にしました。

またクライアントさまのご要望で、これまでの採用業務のご経験からフランクに会食などを重ねた上でのコミュニケーションを取る方法が入社に至る確率が高かったとお伺いしており、お問い合わせフォームの名前は、「ちょっと話しだけ聞いてみる」という名前にしており、フランクに話したいというメッセージが伝わるようにしています。

サイト内の回遊率が高まるように

フォームからの問い合わせをゴールと考え、サイト内の回遊率が高まるようにボタンの配置やカラーデザインは意識しました。
また直接のご要望としていただいたわけではありませんが、店舗のホットペッパーのリンクも設置しました。

レスポンシブ対応

また下記の画像は一例ですが、レスポンシブ対応(スマホ対応)にも注力しました。
PC画面で表示するボタン、スマホ画面で表示するボタンを分けてコードを記述しました。
詳しくは、ページ下部にあるURLからサイトをご覧ください。

WordPressを入れて、カスタムフィールドを実装

納品後もクライアントさまご自身で運用ができるよう、WordPressを入れました。
またサイト内のテキストなどもご自身で変更できるようテキスト部分は全てカスタムフィールドを実装させていただきました。
管理画面も項目ごとにわけ、わかりやすいようまとめさせていただきました。

ターゲット

・20代〜30代
・求職者、社会貢献意欲の高い方
・飲食業、営業職に関心がある方

制作の概要

制作期間

2ヶ月ほど

実施業務

◾️提案書作成〜ヒアリング
◾️デザインのご提案
◾️コーディング
◾️WordPressオリジナルテーマ組み込みに関するプログラミング
◾️メール送受信設定
◾️レスポンシブ対応

サイトURL

株式会社M’Hさま：https://mh-2020.com