サイトレビュー 01 - Teachme Biz -
こんにちは。
独学からWEBデザインをしているなべたです。
今日から本格的にサイト分析をしていこうと思います。
目的としてはデザインの知識や言語化、見る目を養うことです。
初めてこういった記事を書くので文章がおかしい時もあるかと思いますが、温かい目で見てやってください（笑）
1回目はTeachmeさんの「Teachme Biz」
SaaS系のLPです。
Saasとは？
「Software as a Service」の略で、「サービスとしてのソフトウェア」を意味します。クラウドサーバーにあるソフトウェアを、インターネットを経由して利用できるサービスで、パソコンにソフトウェアをインストールする必要はありません。インターネット上へのデータ保存、マルチデバイスに対応、複数人のユーザーで利用が可能といった点がSaaSの特徴として挙げられます。
引用：DIGITAL SHIFT TIMES
「SaaSとはどんなサービス？代表的なサービスを一覧で紹介」
https://digital-shift.jp/flash_news/s_210518_4
サイトを選んだ理由
SaaS系のLPなどを見ることが多くなったので、
コンテンツの構成と各サイズ感の把握をする。
目的・ターゲット
目的：
自社のマニュアル作成・運用アプリケーションを導入してもらう。
まずはサービスの資料をダウンロードをしてもらい知ってもらう。
ターゲット：
マニュアルを作成する時間がない、作成したもののうまく伝わらないことが多く結局マニュアルを見てもらえず、いまいち業務効率化が図れていない組織。
カラー
カラー
白色・橙色・青色
橙色のイメージ
元気、温かみ、幸福感、明るい
青色のイメージ
誠実さ、信頼、知性
ロゴから橙色と青色をサイトに採用しているのかな。
読んで欲しいタイトルやボタンを橙色で、テキストは青（どちらかというネイビー）。補色関係なのでトーンが整っていてとても読みやすい。
フォント
ベース：Noto Sans JP, sans-serif
欧文：Overpass, sans-serif
Overpassは米国の高速道路でも使用されている高速道路ゴシックだそう。
高速道路で使用されているとのことなので、とても読みやすいですね。
フォントサイズ
header：14px
FV：150px, 50px, 36px, 14px
各セクション： 42px, 30px, 26px, 18px, 16px, 12px
CTA： 28px, 26px, 16px, 12px
footer： 20px, 16px, 14px, 13px, 12px, 10px
※PC時のみ
コンテンツ分析
FV
FVでは動画を採用し、実際にアプリケーションを取り入れ使用している現場を映している。動画にすることで静止画よりもサービスをイメージしやすく視覚化ができる。動画に出てくる人は、日本の方だけではなくアジアの方も出てきます。そうすることでどの方にも使用して頂きやすいマニュアル作成システムといったところを強調しているのかも。
また画像だと分かりにくいのですが、動画全体にうっすらとドット柄が敷かれていて、より柔らかさ？見やすさ？を表現しているのかなと思いました。
ABOUT〜
【全体の構成】
サービスについて → お悩み → ベネフィット → お客様の声 → CTA → 会社概要 → FAQ → クロージング
コンテンツはLPでよく使用されている構成で作られています。
所々イラストが使われており、イラストはフラットでシンプルです。イラストも全体的なトーンに合わせて作られているので調和していますね。
また、デバイス画像を用いてアプリケーションであることを表しています。
【特徴部分】
デバイス画像と現場の画像が用いられており「現場感」が伝わりやすいです。デバイスの画像も静止画ではなく、実際の使用している画面を流しているのでより伝わってきやすいです。
【導入部分】
画像部分では横スクロールされてしまっていますが、右矢印のみ最初は表示されていて左側には余白、右側はコメント部分が画面に対してくっつくようになっているので、読みたくなるような仕様になっています。
実際に導入されている企業の方の画像を載せると信頼性が高まりますね。
【CTA】
資料をダウンロードしてもらうために、ボタンは大きく配置。
「５分でわかる」といった文言を添えることで「手軽に読める」感を出し、ダウンロードをしやすくしていますね。
それでもまだ資料をダウンロードすることに躊躇っている方に対して、「マニュアルで生産革命って本当にできるの？」といったより詳しく記載されているコンテンツを配置することで、サービスについて訴求しています。
【クロージング】
人物画像の上に少し暗い橙色を敷いてトーンに合わせ、文字を配置。
文字色は白ですがとても読みやすいです。
人の顔があるとないとではサービスに対する感じ方が変わりますね。
Footer
余白が広めですが、
どこに何があるか分かり易いため、みやすいサイトマップ。
全体のフォントサイズよりフッターは1px小さめ。
まとめ
基本的なLPで使われている構成で作られていましたが、イラストをフラットデザインにして流行りを取り入れたり、全体の色が優しい色でできているので「伝える」「伝わる」といった部分をうまく表現しているなあと思いました。優しい色合いはとても読みやすいですね。
今回初めてサイト分析してみましたが、文字として伝えるのってすごく難しいと感じました。（すごく時間がかかりました）
自分が感じていること、伝えたいことを表現するようにできるともっとデザインが好きになると思いました！
文章を書くのがそもそも苦手なので少しずつ続けていこうと思います。