LPデザイン模写

昨日サイトレビューしたデザインを模写しました。
所有時間：３時間　　AdobeXDを使用
想像以上にボリュームが多く、時間がかかった。
制作するサイトに必要だろうと思われる箇所を抜粋しました。文章欄には、気づいたことなど自分のメモ書きとして残し、忠実に模写はしていません。
XDだとカーニングができなくて、困りました。やっぱり細かい調整はPhotoshopでするに限る。
今回の気づきをもとに、ワイヤーフレームを作成し、デザインを起こしていこうと思います。

【公式】トライズ - 「1年で英語が話せる」コーチング英会話スクール

気づき
・キャッチコピーやちょっと文字サイズが大きい箇所は游明朝。説明やボタン内、文字が比較的小さい箇所は、游ゴシックを使用。
游明朝を使用しているのは、サイトの雰囲気をエレガントにしたいから？(ビジネス英会話なので)　游ゴシックは可読性を高くするため。
最後に参考したサイトの画像と重ね合わせてみたら、ピッタリ一致したときはとても気持ちがよかった！

・ロゴの黄色をもとに配色をしている印象。紺色は黄色と補色関係にある。ところどころアクセントでピンクを使っている。
・サブタイトルの作りを統一している。コーディングがしやすようだ。
項目や装飾に英語を使っている。read moreとか。英会話スクールだからだろうか。
・naviと一番下にある無料体験ボタンは作りが同じで、ユーザーが認識しやすいようになっている。
・お客様の声には、職業をのせている。経歴が同じ人がいれば、ユーザーも親近感をわいてくれるだろうから。
・金額の記載のところは参考になる！ボックスやボーダー、文字の大きさに変化をつけることで、シンプルだけど分かりやすくレイアウトされている。

・アニメーションは特に見られない。hoverアクションもシンプルで、動きは最小限。

昨日のレビューと似通っている気はするが、細かい余白やフォントのサイズ感が把握できたので、無駄ではなかったと思う。明日からは、ワイヤーフレームとデザインを進めていくとしよう。