サイト模写

こんにちは。はるかです。
本を参考にサイト制作をしたことは前回のブログでも書いたのですが、
その中でデザインの知識を増やす必要性を感じました。

今までは見た目で良いなと思ったサイトを真似したりしていたんですが、フォントサイズや余白など基本ルールが曖昧なこと、一つ一つにそこまで深く理由を考えずに制作してしまっていたので、これじゃあダメだなあと。

模写を繰り返すことでデザインの基本ルールを知ってベースを作り、そこからデザインの知識を増やそうと思います。

さて、今回模写させていただいたのは下記のサイトです。

FLOWER｜ロスレスブーケ販売中！かわいいが届くお花便

グーグル先生に聞いたら、どなたかのブログに初心者にオススメで挙げられていたこと、LPでアニメーションも無かったのでこれなら再現しやすいかなと参考にさせて頂きました。ありがとうございます！

サイト概要
・「FROWER」というお花の定期便のアプリのダウンロード促進サイト
・ターゲット→1人暮らしの働いている20代女性/家に癒しを求めている/オシャレやトレンドに敏感でSNSが好き
（ターゲットは私なりに読み取りました）

では模写して学んだことを上から順に書いていきます！

①メインビジュアル
・ピンクの背景、雑貨が女性らしさ・可愛さを表現している。
・コントラストでいうとお花の赤色とボタンの黒が強いので目がいく。（左下の茶色い箱は左右のバランスの為にあるのか？）
・メインビジュアルにアプリをダウンロードする為のボタンがあるので、アプリの促進サイトだと分かる。
・余白は上が140pxで下が116px　グロナビが無い分、画面いっぱいにビジュアルを表現でき、余白がたっぷりあるので優雅、ゆったりな印象。

②アプリのシステムを説明するコンテンツ（ここからメインコンテンツだと思う）
・3つのボックス（左右真ん中をそれぞれボックスとして）の余白は全て左右が36pxで上が58px
・メインタイトル　フォントサイズ 24px  /  字間 7.2px  /  行間 1.7 /　下の余白 24px
　テキスト　フォントサイズ 15px  /  字間2px  /  行間 1.5
・均等なサイズのコンテンツが並んでいて三つの関係はそれぞれ対等で独立していると感じた。
・テキストは1/3程度で画像がメインなのでお花の美しさが伝わりやすく、印象的。
・文章で良いなと思ったワード
　”トレンド”　”プロがセレクト”　”いつもかわいく飾れる”

③アプリのシステムを説明をするコンテンツ（詳細）
・コンテンツの上下の余白は70px
・2つのボックスのサイズは　308 × 438　それぞれ水平に中央揃えられている
・左のボックス
　メインタイトル　フォントサイズ 20px  /  字間 6px  /  行間 1.6 /
　アイキャッチ　フォントサイズ 13px 
　お花と〜　フォントサイズ 14px  /  字間 4.8px  /  行間 ？ /　価格だけサイズが20px
　注釈　フォントサイズ 13px  /  字間 4.16px  /  行間 1.7 /
・右のボックス　
　メインタイトル　フォントサイズ 20px  /  字間 6px  /  行間 1.6 /
・近接の関係でいうと左のボックスはメインタイトルとアイキャッチと画像が一番近く、その次に商品名と値段でここまでがひとまとまりという印象。注釈は一番離れている。
・左右対称のコンテンツが並んでいて二つの関係はそれぞれ対等で独立していると感じた。
・文章で良いなと思ったワード
　”ワンコイン”　”初回お試し無料”　”丁度いいペース”

④メインとなる商品の紹介コンテンツ（お花）
・コンテンツの余白は上が172px 下が129px
・左右のボックスは603 × 454　で二つは水平に中央揃え
・右のテキストのボックスは垂直に中央揃え
　メインタイトル　フォントサイズ 26px  /  字間 13px  /　下の余白 60px
　サブタイトル　フォントサイズ 22px  /  字間 11px  /　下の余白20px
　テキスト　フォントサイズ 15px  /  字間 10.5px  /  行間1.6  /  下の余白35px
・ページ内で字間がもっとも広く取られていて、文字だけでなく全体的に余白がたっぷりあり、ゆったりと優雅な印象。
・メインコンテンツとなるので高さ730pxと全体の二番目に高く取られていた。
・文章で良いなと思ったワード
　”おしゃれ”　”トレンド”　”新鮮”　”元気”　”直送”　”そのまま飾れる”

④メインとなる商品の紹介コンテンツ（花器）
・コンテンツの余白は上が72px 下が99px
・メインタイトル　フォントサイズ 26px  /  字間 13px  /  行間1.7  /  下の余白 24px
　アイキャッチ　フォントサイズ 14px  /  字間 2.8px  /   行間1.6  /  下の余白35px
　テキスト　フォントサイズ 15px  /  字間 10.5px  /  行間1.6  /  下の余白 35px
　アイキャッチ　フォントサイズ 14px  /  字間 2.8px  /   行間1.7  
　価格　フォントサイズ 14px  /  字間 2.8px  /   行間1.7  /  下の余白 20px
　注釈　フォントサイズ 13px  /  字間 4.16px  
・テキストのコンテンツがやや上と左気味にあり理由は
　(1)上のコンテンツからの動線
　(2)右の画像を引き立たせる為に余白いっぱいに見せたかった
のかなあと予想しました。
・メインテキストとアイキャッチがセットでそこ二つがタイトル、その下のテキストと画像と価格は均等に配置されていたのでもひとまとまりと分かりました。
・先ほどと同じくメインコンテンツとなるので高さ791pxと一番高く取られていた。

⑥アプリの簡易さや保証制度の説明するコンテンツ
・コンテンツの上下の余白は 80px　左右は 105px
・メインタイトル　フォントサイズ 24px  /  字間 24px  /  行間1.7  /  下の余白 45px
　サブタイトル　フォントサイズ 20px  /  字間 24px  /  下の余白 20px 
　テキスト　フォントサイズ 15px  /  字間 6px  /  行間1.6  / 
・テキストとアイコンはワンセットで余白も均等になっている。
・アイコンと文章で分かりやすいと感じた。やはりアプリなどシステムの説明にはアイコンが使われることが多いと感じた。

⑦画像
・余白は上が 57px
ロゴとスマホの画像なので、さあ、始めようという意味の画像かなと思いました。
この画像が無かったら、急にサイトが終わった気がするのでこのあった方がいいと思います。

⑧フッター 
・コンテンツの余白は 上が52px 下が122px
・テキスト　フォントサイズ 14px  /  字間 px  / 
・テキスト間の余白は86px
・下の余白が多く取られていて、サイトがゆったりした印象なので最後も広く余白をとった？
・インスタグラムのアイコンは少し上め上から28pxのところにあるので目につきやすい

【まとめ】
・コンテンツ余白を150px以上とるとゆったり優雅な印象になる
・コンテンツの重要度に応じて高さを変える。余白もたっぷりとるのか、最低限にするのか。
・画面いっぱいの高さは600px以上で画像をメインに伝えたい時は特に有効に使えるが、次への動線として次のコンテンツのテキストの位置を変えたり、ラインを引いたりする必要がある。
・フォントがサンセリフだと画像を邪魔せず、シンプルに情報を伝えやすい
・フォントサイズは基本、メインタイトルが24px サブが20px テキスト15px アイキャッチが14pxと統一されていた。しかし、そのサイトのメインコンテンツは2px大きく設定されていた。注釈の13pxは読めるフォントのギリギリのサイズな気がする。
・優雅な印象のサイトはメインは特に字間の余白を多くとってもいいかもしれない。最大でフォントサイズと同じ分余白をとっても読める（文章が一行なのであれば）
・行間もそれぞれが1.5〜1.7に統一されていた。1.7だと結構ゆったりな印象
・全体のカラーのトーンは統一する。