And・Rise様（コーポレートサイト）｜Web制作実績 スマートフォン対応｜ネオインデックス名古屋

さくらオンライン塾の運営や、マネーフォワードクラウドを中心としたインサイドセールスなどの事業を展開している「And・Rise様」のコーポレートサイトを新規制作いたしました。

モバイルサイトでは、「オンラインスクールの責任者」や「転職活動中の塾の先生」など、個人ユーザーや求職者がメインターゲットとなるため、スマートフォンとPCの使用比率を8：2と想定し、モバイルファーストで設計しております。

今回、主要な目的として「お問い合わせを増やしたい」というご要望をいただきました。そのため、ユーザーがコンテンツに共感・納得をした際に、どのページを閲覧していてもスムーズにお問い合わせページにたどり着けるよう、ヘッダーに導線ボタンを固定表示いたしました。モバイルサイトではお問い合わせボタンのデザインは、お客様のご要望であるスタイリッシュなデザインを崩さないよう、あえて「お問い合わせ」といった文字を記載せずに、ロゴカラーのブルーを使用したメールのアイコンのみにすることで、シンプルでユーザビリティの高いデザインに仕上げております。

モバイルサイトでは、ユーザーが知りたい情報にスムーズにたどり着けるよう、ハンバーガーメニューを工夫しました。サービスページの導線バナーの下に、「さくらオンライン塾」「サービス請負業務」「インサイドセールス」という3つのサービスへのページ内リンクを設置しております。そうすることにより、事業内容ごとに異なるターゲットがそれぞれ必要な情報にアクセスしやすくなるため、ユーザビリティの高いホームページに仕上げています。

また、PCサイトに比べて画面の狭いモバイルサイトでも見やすいよう、「サービス」ページのFLOWコンテンツではデザインの一部を工夫しました。具体的には、PCサイトでは説明文の左側に「STEP1」と大きく表示していたレイアウトを、モバイルサイトでは説明文の左上に小さくデザインし、アクセントカラーであるイエローを陰のように入れることで立体感を演出しました。画面が狭いモバイルサイトでも説明文の表示幅が狭くならずに見やすさを維持しながら、スタイリッシュなデザインのホームページに仕上げています。

システム面では、オンライン塾などのサービスを実際に利用された方の事例を紹介することのできる「導入事例」を、オリジナルCMSで自社開発しました。ユーザーに視覚的にも分かりやすく事例を伝えることのできるよう、ただ文字を入力できるだけではなく、文字の色や大きさ、背景の色なども簡単に変更できる仕様に仕上げています。

デザイン面では、お客様の企業ロゴを印象づけるため、ロゴデザインに使用されているカーブと同様に、丸みのあるデザインを多く使用いたしました。特にフッターはユーザーにお客様の企業名やロゴを強く印象づけることができる場所であるため、他のフッターメニューと同一に掲載するのではなく、ホワイトの半円で企業名とロゴ、企業情報を囲い目立たせることにより、ユーザーの目に留まりやすいような工夫をしています。