サイトレビュー　No.13

株式会社フィールドプロテクト

■会社概要
企業の環境サポートや通信型の介護サービス、教育サポートの整った保育園の運営をする会社。

■ターゲット
会社の廃棄物の処理に課題を持つ企業。
介護サービスの利用を検討している高齢者の方やそのご家族。
運営している子ども園への入園を検討している保護者。

■ゴール
事業内容を知ってもらいお問い合わせや資料の請求につなげる。

■サイト構成
ホーム
私たちについて
事業紹介
会社概要
ブログ
採用情報
お問い合わせ

■ファーストビュー
・ロゴとローディングのアニメーションが最初に表示。
・メインビジュアルの右下から斜め左上にブルーの背景がアニメーションで横切るような動きの視線を集めインパクトがある。
・メインビジュアルの左側に斜めにブルーの背景色をかさねてその上に会社のメッセージを配置。写真の上にそのまま文字を載せるより可読性があり読みやすい。spはメインビジュアルの画像の下に表示。
・メインビジュアルは数枚の画像がじんわりと切り替わる。会社の事業内容がイメージされる画像。spは横にスライドされながらじんわり切り替わる。
・左側に会社ロゴ。右側にナビゲーション。お問い合わせのみボタンにしてはっきりと目立つようにしている。spはハンバーガーボタンでドロワーメニューにはお問い合わせの項目プラス電話番号も記載。押すと電話がかけれるようになっている。フェイスブックアイコンもあり。
・ナビはファーストビュではメインビジュアルの画像の上にそのまま文字が配置。ファーストビューをスクロールで過ぎると背景に白のカラーがつく。ナビのエリアの可読性が上がる。

■全体
・文字のカラーは紺色に近い黒で黒のようなきつい印象がなくスタイリッシュな印象を与える。
・ファーストビューの次ユーザーに特に見てもらいたい事業紹介・私たちたちについて・採用情報のページへのりんくのボタンを配置。
ボタンは写真を使用していている。左半分はグレーのカラーを使い写真との境目をグラデーションしていて違和感をなくしているし文字の可読性もよい。
・セクションのタイトルには右端がわのみに下線。タイトルに目がいく。
・事業紹介の各事業紹介にはアイコンを使い文字だけの堅苦しさを感じない。事業内容毎に文章と写真を反転させて配置することで視線の動きに配慮した配置となっっている。写真は角丸にして柔らかな印象に。
・写真に文字を重ねるときは左側に色を重ね写真との境目をグラデーションしているデザインで統一。
・実際に各事業部で働いている社員の方のインタビューを写真と共に掲載することで会社のイメージがより伝わる。
・フッターは左にロゴやアドレスをたてにまとめている。右にフッターロゴと電話番号フェイスブックアイコンがある。横長のものをまとめていてすっきりしている。トップに戻るボタンあり。

■フォントとカラー
ファーストビュー：source-han-serif-japanese
タイトル：adobe-garamond-pro
本文：Yu Gothic
カラー
ベースカラー：#fff
メインカラー：#1a3ea1,#141c36
アクセントカラー：#f2f5f7

■学び
写真の上に文字を重ねるときの文字の可読性を上げる方法。
見せたいページのリンクのボタンへは写真を使ってイメージを伝える。
タイトルの下線のあしらいはワンポイントにすることで目線が自然とタイトルに行くように目立たせている。
社員のかたのインタビューは実際に働いている人の雰囲気や社風がわかるので就職を希望している人には効果的だと思った。またサービスと利用しようとしている人にも安心感を与えられると思った。

#サイトレビュー #コーポレートサイト #デザインの貯金 #デザインの言語化