株式会社デイトラ様│コーポレートサイト│コンセプトシート

オンラインスクールを運営する株式会社デイトラ様のコーポレートサイトのデザイン制作を担当いたしました。企業イメージを大切にしつつ、清楚感・信頼感もあるビジュアルを目指しました。

Transcript

1. 株式会社デイトラ 様 コーポレートサイト オンラインスクールを運営する株式会社デイトラ様のコーポレート サイトのデザイン制作を担当いたしました。 企業イメージを大切にしつつ、清楚感・信頼感もあるビジュアル を目指しました。 担当範囲 デザイン 制作期間 17日（60時間） URL https://daily-trial.co.jp/
3. 要件定義 ご依頼の背景 もともと東京フリーランスから事業が始まって会社案内も同サイトに掲載し ていた。株式会社デイトラに変わってからも掲載場所は変わらず情報もアッ プデートされていない状況。4周年というタイミングで独立した株式会社デ イトラとしてのサイトを作成して想いや沿革、メンバーなどを載せたサイト を作っていきたい。 事業における課題 Webスキル系のスクールを探しているユーザーが比較検討をする際に、「他 のスクールに比べてなんでこんなに安いんだろう、安すぎて逆に不安、カリ キュラムの質は大丈夫なのか」と心配に思われる傾向がある。 サイトで達成したいこと・目的 デイトラに不信感を持っている人に安心して欲しい 最終的にはデイトラの受講に繋げたい ターゲット 20代〜30代くらい 会社員、主婦、学生 デイトラの情報には触れている（顕在層） 与えたい印象・ユーザー体験 楽しそう / 親しみやすさ / 信頼感 / 安心感 デザインのご要望 フラットデザイン系のテイスト きちんと感もありつつポップに コーポレートカラーのパープルをベースに、カラフルに コーポレートキャラクターのデイトラちゃんを入れたい Page. 3
4. マーケティングファネルの確認 制作するサイトがファネルの中のどこに位置するのかを明確にし、 ユーザーに違和感を与えないように前後の流れも意識してビジュアルを制作します。 フ ァ ネ ル 認知 興味・関心 比較・検討 行動 手 段 SNS / メディア 口コミ / 自然検索 デイトラサービスサイト コーポレートサイト 今回制作するサイト デイトラサービスサイト Page. 4
5. 競合のデザインリサーチ 同業他社や異業種他社をリサーチし、その業界のサイトのデザイン傾向をチェックします。 リサーチ結果 Google検索で上位に出てくるものや、クライアント様からヒアリングしたスクールの運営会社は、スッキリとしていてビジネス寄りのテイストが多 かった。スクールのサービスサイトのイメージを踏襲しているものはほとんど無かった。 Page. 5
6. デザイン方針 ヒアリング内容、要件定義、市場調査をもとに、デザインの方向性を決定します。 企業として 信頼して欲しい ポップと清潔感の 両立 企業理念 ”挑戦する人々の夢を叶える” ポジティビティと 熱意を表現 SNSから生まれた スクール 拡散して 広がる様子 受講生ファーストの運営 仲間思いの受講生 コミュニティの 温かさを表現 受講生にインタビューしたところ、多くの人が運営 陣やメンターさんが親身に相談にのってくれるとこ ろがいいところだと回答。また受講生同士のつなが りも濃く、交流も多い。そういった”コミュニ ティ”の良さが伝わるようにする。 企業がアピールしたい「誰でも学べる環境づくり・ 楽しく学習継続できる仕組みづくりに力を入れてい る」という”明るさ”と、「受講生に本気で向き合 い、”夢を叶える”にコミットする」という”熱意”が 伝わるようにする。 クライアントのご要望も取り入れつつ、ユーザーが 他社と比較検討した際に企業として安心してもらえ るような清潔感もキープする。 Page. 6
7. 参考サイト デザイン方針に合いそうなサイトをギャラリーサイトから探します。 サイトの種類、テイストの特徴、業種、配色などのカテゴリーから80～140サイトほど閲覧し、参考にするデザインを絞ります。 今回ピックアップしたサイト Page. 7
8. デザインコンセプト コンセプト 親しみ感とクリーンなビジュアルを両立し、 ユーザーが前向きな気持ちになれるデザイン キーワード 楽しい 笑顔 温かい 弾ける 輪 広がる 挑戦 スッキリ 清潔 デザイン要素 丸みのあるシェイプ 彩度の高い色 笑顔の写真 ドット サークル ロゴで使用しているシェイプ カラー Base Main Accent 明るい印象と清潔感を出すために、背景にはホワイトを使用。メインカラーのパープル は、重たい印象にならないように彩度と明度を高く。テキストにロゴと同じパープルを アクセントとして使ってもコントラスト比が維持できる色合いに。アクセントカラーは コーポレートカラーのパープルを強調したい部分に使用。多用しすぎて目指すイメージ から離れないように気をつけました。 タイポグラフィー 日本語フォント LINE Seed Sans 英数字フォント LINE Seed Sans LINE Seed Sansは角の丸みが最大の特徴で、角ゴシック体よりも少しカジュアルで柔ら かい、親しみやすさが伝わる書体です。LINEがITサービス系なので、デイトラのデジタ ルな分野にも合うと思い選定しました。
9. キービジュアル ユーザーや会社の雰囲気を伝える 人物写真 ユーザーのイメージでもあり、デイト ラの駅広告でも使用されている女性の 写真を1枚目に。背景はPhotoshopの画 像生成でサイトに合った雰囲気に変 更。 2枚目以降は運営陣の笑顔の写真を見せ て、ユーザーに安心感を与えると同時 に、キャッチコピー（企業理念）との 関連性を持たせる。 あえてスッキリと シンプルにさせたキャッチコピー 装飾を施すとポップになりすぎてしま うため、クリーンな印象を保つために あえてシンプルに。 広がりや希望を感じるあしらい キラキラをイメージしたあしらい。星 ではなくドットにすることで、サイト のデザインに統一感を持たせる。 ロゴに使われている シェイプを利用して遊び心を Page. 9
10. トップページ メイン事業を目立たせて メリハリを デイトラのサムネを大きく見せた いというご要望。写真もテキスト も横幅いっぱいにすると圧迫感に つながり、文章が読みづらくなるデ メリットが。なので、それぞれの要 素の横幅を抑えつつ、ずらして配置 しすることでリズムを出す。 長い文章のテキストに 変化をつける フォントサイズや太さに変化をつ け、ユーザーが文章を読む際に飽き させないように工夫。 SNSから生まれた、をイメージ セクションの境目が無くても 違いがわかるように 背景がつながったようなデザイン にしたいとのご要望。各セクショ ンの背景色で区別をつける手法の 代わりに、情報の塊ごとにブロッ クにし、その背景にメインカラー を入れ、同じセクション内のブ ロックのデザインを揃えることで違 いがわかるように工夫。 ユーザービリティを考えた カルーセル 各カードの縦幅が長くなりすぎな いように注意し、送りボタンも含 めてデバイスの画面内に収まるよ うに調整して操作しやすいように。 Page. 10
11. メンバー詳細はモーダル表示 下層ページ 表現が違っても バラつきが出ないように 見出しとコピーのデザインを同じ にすることで、その他の表現が違っ ていても「企業理念」と「行動指 針」が類似のジャンル（企業の宣言 にあたるもの）としてつながりが感 じられるように。 文章をビジュアルとして可視化 中央から外へ広がっていくイメー ジ。紫のテキストから連想される実 際の受講生の写真も使うことで、よ りリアルで身近な存在に感じてもら う。自分もこの輪の一部になって夢 を叶えるというイメージを持っても らうように表現。 要素の反復で サイト全体に統一感を トップページでも使っている英字の 表現を下層ヘッダーにも取り入 れ、デザインの統一感を出す。 ポーズが違っても 統一感がでるように調整 頭の位置やサイズ感が同じぐらい になるように写真サイズを調整 し、体の向きによる左右の余白や 水平角度の違いを見ながら、俯瞰 で見た時の違和感がないように 個々にトリミングを行なった。 Page. 11
12. Thank You 最後までご覧いただきありがとうございました。 ビジネスの課題に合わせたマーケティング戦略と、事業の魅力を最大限に伝えるデザイン で、「届けたい人の目にとまるWebサイト」制作をサポートいたします。 お気軽にご相談ください。 CONTACT 公式LINE 問い合わせフォーム Xアカウント