コーディングの練習

4、シリーズ物などの長いLPではスムーススクロールを付ける

第四弾、LPが長い時の実装方法

まずはデータをダウンロードしてコーディングして下さい。

デザインカンプに指示がありますのでそれに従って下さい。


コーディングの練習(4回目) (14 ダウンロード)

 

ヒーローイメージについて

私のデザインカンプではヒーローイメージの画像をそのまま使えばいいので画像の調節はしなくていいですが実務では大きな画像をもらって自分で調節しないといけないことがよくあるはずです。

私が実務を始めたばかりの頃はヒーローイメージを画面内におさめるのが苦手で苦労しましたが画像をトリミングするcssプロパティのobject-fitプロパティを使うとやりやすいと思います。

↓で解説しています。

実務経験21日目、コーディングで画像サイズをいい感じにしたい時
ヒーローイメージにobject-fitを使って画像の最適化object-fit:coverについて 例えば↓の画像の大きさを変えようとしたとします。 縦横の幅を指定すると縦横比が...

 

リンクの間を開ける

リンクで「詳しくはこちら」と「ご購入はこちらから」の部分があります、↓の赤枠です。

「詳しくはこちら」と「ご購入はこちらから」の間が近すぎるとサイト閲覧者が間違ってクリックする可能性があるのである程度の間を開けましょう。

 

購入ボタンの色について

これが難しいと思います、私はデザイナーではないので色使いが分からないのですが実務をしている会社で↓の本を教えてもらってそれを使っています。

これのいい所はこういう並べ方をした方がいい、こういう色の組み合わせをした方がいいなどこんなパターンはこうすると図付きで具体的に説明があります。

実務をまだしていない(し始めた)人に絶対にオススメの本です。

エンジニアの人で本当はおすすめではないのにオススメする人がいます(過去に私は騙されたことがあります)が私は本当にオススメの物以外は勧めません。

↓はリンクになっています。

 

font-sizeを揃える

まだ説明していませんでしたが見出しの部分のfont-sizeや説明文のfont-sizeなど同じ部分のfont-sizeは必ず揃えましょう。

そうしないと見た目が悪くなります。

 

スムーススクロールの実装

LPがすごく長い場合サイト閲覧者が見たい物を見つけることができずページから離脱するかもしれません。

そういう場合はページの最初の方に「商品一覧」みたいな感じで全部の商品を並べてサイト閲覧者が見たい所に飛ぶことができるようにします。

これをスムーススクロールで実装しますが実装方法が分からない場合は↓を見てください。

実務経験17日目、長いLPではスムーススクロールを付けた方がいい
長いLPではスムーススクロールを付けてサイト閲覧者を逃がさない↓みたいな長いLPの場合はずっとスクロールするのが大変です。 ここからLPのページに飛ぶ だから見たい所に飛んで貰うページ内...

 

画面を横にスライドする方法

シリーズ物のLPを作る時に画面の中で横に並べてスライドして見ることができるようにしないといけない時があります。

↓の部分です。

実装方法は↓で解説しています。

実務経験43日目、画面の横スクロールを実装するのは超簡単
コーディングで画面の横スクロールを実装するのは超簡単 画面の横スクロールの実装方法を解説 例えば↓みたいな1000px以上の横長の画像を並べる時にスマホで横に並べるのは不可能です。 ...

 

最後に一言

今回のコーディングの内容ですがネットにある情報のサイトのトップページの模写より遥かに簡単だと思います。

私が働いている企業(他の企業も似ていると思いますが)ではこのコーディングができれば十分に通用します。

なぜかというと今回のデザインカンプの内容は私が実務をしている会社のLPのレイアウトをベースにしていますから。

本当に難しいのはもらった画像をいかに画面に合わせた大きさにして表示するかだと思います。

だから今回のコーディングが大変じゃないと感じたらadobeのXDやphotoshopやillustratorも練習した方がいいです。

illustratorやXDなら「書き出し」、photoshopなら「スライス」ができるようになりましょう。(すぐできるようになります)