目次
第四弾、LPが長い時の実装方法
まずはデータをダウンロードしてコーディングして下さい。
デザインカンプに指示がありますのでそれに従って下さい。
ヒーローイメージについて
私のデザインカンプではヒーローイメージの画像をそのまま使えばいいので画像の調節はしなくていいですが実務では大きな画像をもらって自分で調節しないといけないことがよくあるはずです。
私が実務を始めたばかりの頃はヒーローイメージを画面内におさめるのが苦手で苦労しましたが画像をトリミングするcssプロパティのobject-fitプロパティを使うとやりやすいと思います。
↓で解説しています。
リンクの間を開ける
リンクで「詳しくはこちら」と「ご購入はこちらから」の部分があります、↓の赤枠です。
「詳しくはこちら」と「ご購入はこちらから」の間が近すぎるとサイト閲覧者が間違ってクリックする可能性があるのである程度の間を開けましょう。
購入ボタンの色について
これが難しいと思います、私はデザイナーではないので色使いが分からないのですが実務をしている会社で↓の本を教えてもらってそれを使っています。
これのいい所はこういう並べ方をした方がいい、こういう色の組み合わせをした方がいいなどこんなパターンはこうすると図付きで具体的に説明があります。
実務をまだしていない(し始めた)人に絶対にオススメの本です。
エンジニアの人で本当はおすすめではないのにオススメする人がいます(過去に私は騙されたことがあります)が私は本当にオススメの物以外は勧めません。
↓はリンクになっています。
font-sizeを揃える
まだ説明していませんでしたが見出しの部分のfont-sizeや説明文のfont-sizeなど同じ部分のfont-sizeは必ず揃えましょう。
そうしないと見た目が悪くなります。
スムーススクロールの実装
LPがすごく長い場合サイト閲覧者が見たい物を見つけることができずページから離脱するかもしれません。
そういう場合はページの最初の方に「商品一覧」みたいな感じで全部の商品を並べてサイト閲覧者が見たい所に飛ぶことができるようにします。
これをスムーススクロールで実装しますが実装方法が分からない場合は↓を見てください。
画面を横にスライドする方法
シリーズ物のLPを作る時に画面の中で横に並べてスライドして見ることができるようにしないといけない時があります。
↓の部分です。
実装方法は↓で解説しています。
最後に一言
今回のコーディングの内容ですがネットにある情報のサイトのトップページの模写より遥かに簡単だと思います。
私が働いている企業(他の企業も似ていると思いますが)ではこのコーディングができれば十分に通用します。
なぜかというと今回のデザインカンプの内容は私が実務をしている会社のLPのレイアウトをベースにしていますから。
本当に難しいのはもらった画像をいかに画面に合わせた大きさにして表示するかだと思います。
だから今回のコーディングが大変じゃないと感じたらadobeのXDやphotoshopやillustratorも練習した方がいいです。
illustratorやXDなら「書き出し」、photoshopなら「スライス」ができるようになりましょう。(すぐできるようになります)
