「サイトトレースまでしなくても、じっくり見て分析すればそれで充分でしょ！」
いままではそう思っていたんですが、 今回サイトトレースをやってみていままで見えていなかった細かな部分での発見が多かったです…！
毎回トレースまでやるのは時間的に厳しいかもしれませんが、一度やってみると「こういうところにこういう技が効いてるのね！！！」となるので分析だけ行う際にもきっと役立つはず。
実は、サイト分析についてきちんとブログ記事にするのははじめてなのですが、自分の気づきを言語化して発信するという過程も大事だと思うので勉強の一環として頑張って続けていきたいと思います！！
ちなみに、サイトトレースの方法については一番最後に書いています。
今回トレースさせていただいたのはこちらのコーポレートサイト。
株式会社ホットリンク
会社概要：ホットリンクは、アーンドメディアに特化したデータドリヴン型のデジタルマーケティングファームです。ソーシャルビッグデータとデータ解析技術にもとづく、売上アップに貢献するSNSマーケティングコンサルティングやSaaSツールを提供しています。
なぜこのサイトを選んだかというと、Twitterなどで積極的に発信されているbaigieさんの記事をいろいろと拝見して「こんなに緻密に戦略を練って制作されたbaigieさんのサイトをトレースしてみたら学びが多いのでは！？」と考え、実績のいちばんうえにあったサイトを選ばさせていただきました。
ちなみにサイト分析を始めてから知ったのですが、ホットリンクさんのサイト制作にあたりどのように戦略を立てたかの記事もあるようです…！先入観をなくすため（？）に私はまだ読んでいないのですが、この記事を書き終えたらしっかりと読んでみたいと思います！
今回は主にトップページについて分析させていただきました。
サイトの目的とターゲット
新規顧客を主目的として、サービスに対する自信が伝わるサイト
SNSマーケティング支援事業の新規顧客獲得、投資家への情報提供を目的としている。 「ソーシャルメディアマーケティングにスタンダードを創る」のコピーにはSNSという比較的新しい媒体において、リーディングカンパニーとして今までになかった価値を生み出すという意志が感じられる。
サービスの内容や独自のメソッド・ノウハウについて図版つきで丁寧かつ詳細に説明、積極的にイベントやセミナーなどで発信していることがアピールされており、トレンドであるSNSでの集客に興味があるがまだ着手できていない企業経営者や、このサービスを利用することで本当に成果がでるのかと少し懐疑的なターゲット層に安心感を与えるサイト構成・コンテンツとなっている。
デザイン分析
コーポレートカラーを基調としたメリハリのある配色
ベースカラーを白、コーポレートカラーの鮮やかで親しみのあるオレンジをアクセントカラーとして黒と組み合わせ、視認性の高いぱきっとした配色となっている。
また、ボタンは黒とオレンジを組み合わせて誘目性を高めており、ファーストビューでは補色に近い#5DACDCを背景色として使用することでよりコンバージョンボタンが目立つ設計がされている。
<a>のホバー時もフォントカラーがオレンジになり、クリックできる個所がわかりやすい。
フォントと文字間
フォントはYakuHanJP, “Noto Sans”, “Noto Sans CJK JP”を使用。
YakuHanJPをfont-familyの最初に指定して約物（「」や『』など）を半角にして表示させ、アルファベットはNoto Sans、日本語は視認性の高いNoto Sans CJK JPを指定。Webフォントのためどのデバイスでも同様に表示ができる。
私の勉強不足で恥ずかしいのですが、いままでNoto SansとNoto Sans CJK JPのアルファベットは同じものだと思っていました…。
比べてみるとけっこう違いがあります。
個人的にはNoto Sansのアルファベットはbdpqの丸の形が調整されていたり、ftのエッジがゆるやかになっている部分があったりとより「デザイン性の高い」フォントであると感じます。
また、一部（h2）の文字間はCSSのfonts-feature-settingsを用いてWeb上でも文字詰めを行っている。見た目の美しさだけでなく見出しやボタン内などある程度幅が決まっている箇所で文字量が多くなってしまったときにも使えるCSSプロパティ。
CSSのfonts-feature-settingsについては初見だったのでこちらの記事を参考にしました。
ジャンプ率はh2:本文=1.625rem:1rem。
情報量が多くても読みやすく、単調にならないレイアウト
メインカラーである#FBF3ECを背景に敷くことで明確にグルーピングがされており、またその敷き方に変化をつけ、文字を左寄せ・中央寄せの交互に配置して単調にならないレイアウトとなっている。Z型の視線誘導をおこなう構成。
さらに、グループ内では文字色よりも薄い#CCCCCCのラインを用いてコンテンツを区切ることで文字量が多くとも読みやすく、整理された印象を与えている。
ドロップシャドウの使い方
ボタンと図版や表などの目立たせたい部分にドロップシャドウ（0, 3, 5, 25%）を使用。ヘッダーにもシャドウが用いられているが、濃さが異なり（0, 3, 5, 16%）。ヘッダーが一番上のレイヤーにあるようなイメージかつ、ヘッダーは固定のため目立ちすぎないようにシャドウが薄めになっているのでは。
画像の比率はogp画像としても使える16:9
イベントやセミナー、記事のアイキャッチとしての画像でもあるのでSNSでシェアしたときにogpとして使用できるように16:9のアスペクト比となっている。トリミングされることがないので画像の見え方を気にせずにogp画像と同じものをサイトに使用でき、クライアントの手間が減る。
レスポンシブの際は要素の重要性に応じてサイズ変更
自分だったら単にカラムを縦に並べ替えるだけにしてしまいそうだが、ここでのイラストは補助的に使われているものなので、SP版ではできるだけ小さく、レイアウトを変更してSP版でスクロールが増えてしまうことを防いでいる。ブレイクポイントは767px。
SNSコラムの部分ではスマホから閲覧するユーザーはより直感的にアイキャッチでコラムへの興味を引くことができるようにレイアウトを変更、画像を大きく配置。
サイトトレース
使用したツールとプラグイン
今回は下記のような流れでサイトトレースを行いました。
- Googleの拡張機能GoFullPageでページ全体のスクリーンショットを撮る
- XDにお手本としてスクリーンショットを貼る
- XDのプラグインmimicで画像やフォント情報、カラーを取得
- 不透明度を下げた図形や文字をお手本の上に重ねていく
- 作ったものを別のアートボードに切り取って貼り付け
左がトレースで、右がお手本です。
気付きと反省点
現在、デジLIGで卒業制作中なのですが、このトレースから得たものを反映させているところがいくつもあります。今後も何かを制作しながらその制作物に近いサイトのトレースも並行してやっていくと相乗効果が生まれそう…。
またトレースするにあたりXDのプラグインをはじめてつかったのですが、「え、めっちゃ便利…！」となりました。使えるものはどんどん使っていくことが大事ですね。
反省点としては記事作成に時間をかけすぎてしまったところです。じっくりやるのも大事だけど数をこなしていきたい気持ちもあるので…！ただ、こういう言語化の練習はやらないと上達しない部分ではあると思うので楽しみながら今後もやっていきたいです。
最後までお読みいただきありがとうございました！
コメント