この記事を読むのに必要な時間は約 12 分です。

 

本記事では、デザインとコーディングの応用学習の方法についてまとめました。

 

 

応用学習（デザインとコーディングの実践練習）

 

 

 

私のデザイン・コーディングの応用に関する学習工程を大きく分けると、次のようになります。

 

 

2023年

<5月下旬>
複雑な形のハンバーガーメニュー実装

 

<6月上旬>
一部オリジナルデザインの動きのあるサイト模写開始/LP（ランディングページ）画像のデザイン学習・作成開始

 

<6月中旬>
LP（ランディングページ）のコーディング開始

 

<6月下旬>
画像やテキストのフェードイン実装/画像遅延読み込み「lazysizes」実装/動画挿入

 

<7月上旬>
別商品のLPデザイン作成開始

 

<7月中旬>
「slick」を用いたスライドショー実装

 

<8月下旬>
「続きを読む・もっと見る」ドロップダウン機能の実装

 

<9月下旬>
LP申し込みフォーム作成（入力内容エラーチェック）/選択肢によって表示内容が変わるプルダウン実装

 

 

学習方法は以下の通りです。

 

 

<5月下旬>
複雑な形のハンバーガーメニュー実装

 

5月下旬には、複雑な形のハンバーガーメニューの実装を行いました。

具体的には、下のような形のハンバーガーメニューを実装しました。

 

 

実装コード

 

 

 

参考：複雑な形のハンバーガーメニュー実装コード

 

 

 

<感想>

参考サイトの実装コードを、私のハンバーガーメニュー実装コードとどのように組み合わせたら理想の形に持っていけるのか考えるのに苦戦しました。

 

 

 

<6月上旬>
一部オリジナルデザインの動きのあるサイト模写とLP（ランディングページ）デザイン学習・画像作成開始

 

6月上旬から行ったことは以下の通りです。

 

• 一部オリジナルデザインの動きのあるサイト模写開始
• LP（ランディングページ）画像作成開始

 

 

一部オリジナルデザインの動きのあるサイト模写開始

 

基本的に、サイト内の構造やコンテンツ内容は参考サイトと同じような作りにしましたが、オリジナルデザインを考える練習として、デザイン面に関しては一部オリジナル要素（背景をグラデーションにするなど）を足して制作していきました。

 

例：トップページ

 

 

 

また、今回からサイト内に動きの要素を多く取り入れるようにしました（6月下旬から動きの実装開始）。

 

参考：模写サイト

 

 

 

LP（ランディングページ）画像作成開始

 

実際のLPやPinterestなどで、LPに使われている画像がどのようなデザインで作られているのか学習し、それらを参考にphotoshop CCでLP画像を作成していきました。

 

 

 

 

 

専門講師の方から「LP画像内の人物はターゲットと同じ人種・性別・年齢層にした方がよい（今回であれば日本人・女性・20～30代）」、「一番伝えたい情報（アイキャッチ部分）をどういう配置にするのが適切なのか」、「LP画像内の余白はなるべく無くした方がよい」などの助言をいただいたので、その点を意識して修正しました。

 

参考：LPデザイン

 

 

 

<感想>

LP画像作成の際もバナー作成の時と同じく気を付けなければならない点が多々あり、それらの点について今回も専門講師の方に色々教えていただけてとても勉強になりました。

 

 

 

<6月中旬>
LP（ランディングページ）のコーディング開始

 

6月中旬からは、photoshop CCでLP画像を作成していきつつ、すでに出来上がったLP画像を用いてLPの作成を開始しました。

主に行ったことは以下の通りです。

 

• 作成済みLP画像を用いてLPのコーディング開始
• 動く購入ボタンの作成と実装

 

 

作成済みLP画像を用いてLPのコーディング開始

 

以下のようなコードを記述し、LPのコーディングを進めていきました。

 

 

 

 

動く購入ボタンの作成と実装

 

購入ボタン画像を参考サイトをもとにphotoshop CCで作成し、ゆっくりと拡大・縮小を繰り返す動きの実装を行いました。

 

 

 

 

 

上記のコードにより、購入ボタンが拡大・縮小を繰り返すようになります。

 

参考：拡大縮小を繰り返す購入ボタンのデザイン

参考：拡大縮小を繰り返す購入ボタンの実装方法

 

 

 

<感想>

LPは主に画像で構成されているため画像を制作するのは大変ですが、その分HTMLやCSSなどのコードをあまり書く必要がなかったのが新鮮でした。

 

 

 

<6月下旬>
フェードインと画像遅延読み込み「lazysizes」実装/動画挿入

 

6月下旬から行ったことは以下の通りです。

 

• 画像やテキストのフェードイン実装
• 画像遅延読み込み「lazysizes」実装
• LP内に好きな形に切り抜いて動画挿入

 

 

画像やテキストのフェードイン実装

 

以下のコードにより、画像やテキストのフェードインが可能です。

 

 

 

 

 

 

画像遅延読み込み「lazysizes」実装

 

「lazysizes」は画像などを遅延読み込みするための「JavaScript製プラグイン」です。

通常、Webサイトを表示する際、画面の表示領域外を含めたすべての画像を一気に読み込むため、Webサイトに画像を多く使用している場合はその分読み込み処理に負担がかかり、結果としてWebサイトの表示速度が遅くなってしまいます。

 

なので、このことから起こり得る問題として

• ユーザーの離脱
• クローラー対策

などが考えられます。

 

「lazysizes」を実装することにより、画面の表示領域に入った画像だけを読み込むようになるので、Webサイトに画像を多く使用している場合であっても表示速度が遅くなるのを防ぐことができ、その結果、ユーザーの離脱やSEO対策（クローラー対策）として検索順位への影響を回避することができます（当サイトにも実装済み）。

 

 

以下のコードで実装が可能です。

 

 

 

 

参考：「lazysizes」実装方法１

参考：「lazysizes」実装方法２

 

 

 

LP内に好きな形に切り抜いて動画挿入

 

下記のコードで動画を好きな形に切り抜いて挿入することができます（使用動画ファイルはmp4形式です）。

 

例：丸い形に動画を切り抜いて挿入する

 

 

 

参考：HTMLに動画埋め込みする方法

参考：CSSでvideoタグを切り抜いて好きな形に表示する方法

 

 

 

<感想>

画像遅延読み込みに関しては専門講師の方から詳しく教えて頂きました。

UX・SEOの点で重要となるページ表示速度の改善方法について知ることができてよかったです。

 

 

 

<7月上旬>
別商品のLPデザイン作成開始

 

7月上旬からは、別商品のLP画像をphotoshop CCで作成していきつつ、出来上がったLP画像からLPのコーディングを行っていきました。

 

 

専門講師の方から「小さい画面表示にしても、左上のアイキャッチ部分が目立つようにさせた方がよい」との助言をいただいたので、その点を意識して修正しました。

 

参考：LPデザイン

 

 

 

<感想>

LP全体のベースは6月から作り始めたLPとほぼ同じで、オリジナルデザイン要素は少し足しただけだったのですが、色などを少し変えただけでも全体の雰囲気としてはものすごく変わるんだなと思いました。

 

 

 

<7月中旬>
「slick」を用いたスライドショー実装

 

7月中旬には、スライダープラグイン「slick」を用いたフェードインで切り替わるスライドショーの実装を行いました。

以下のコードで実装が可能です。

 

 

 

• 
• 
• 

 

参考：「slick」を用いたスライドショー実装方法

 

 

 

<感想>

今回の学習前までは、スライドショーの実装にはきっとたくさんのややこしいコードを書かないといけないんだろうなと思っていたのですが、「slick」を使用すれば分かりやすいシンプルなコードで実装が可能なのでとても楽でした。

 

 

 

<8月下旬>
「続きを読む・もっとみる」ドロップダウン機能の実装

 

8月下旬には、「続きを読む・もっとみる」ドロップダウン機能の実装を行いました。

具体的には、下のような形のドロップダウンを実装しました。

 

「もっとみる」ボタンを押すと

 

 

続きのコンテンツ内容が表示される

 

 

 

以下のコードで実装が可能です。

 

 

参考：「続きを読む・もっとみる」ドロップダウン機能実装方法

 

 

 

<感想>

このような形のドロップダウンはいろんなホームページ内でよく使用されているのを見かけていたので、今回実装できるようになれてよかったです。

 

 

 

<9月下旬>
LP申し込みフォーム作成（入力内容エラーチェック）と選択肢によって表示内容が変わるプルダウン実装

 

9月下旬から行ったことは以下の通りです。

 

• LP申し込みフォーム作成（入力内容エラーチェック）
• 選択肢によって表示内容が変わるプルダウン実装

 

 

LP申し込みフォーム作成（入力内容エラーチェック）

 

LPの申し込みフォーム作成と同時に入力内容エラーチェックの実装も行っていきました。

入力内容エラーチェックでは、required属性を使ってHTMLだけで入力フォームに必須項目を作り、pattern属性などで入力可能文字の制限を行いました。

 

実装コードは以下の通りです。

 

例：パスワード入力欄

 

 

上記のコードにより、フォーム内に必要な情報が入力されていないとエラーが表示されるようになりました。

 

空欄のまま送信すると入力必須を知らせるエラーメッセージ

 

 

必要な文字数に達していないと以下のエラーメッセージ

 

 

参考：生年月日入力フォームの作り方

参考：required属性を使って入力フォームに必須項目を作る方法

参考：パスワード入力欄作成と入力文字の制限方法

参考：pattern属性で電話番号・郵便番号・フリガナ・空白などを判別する方法

 

 

 

選択肢によって表示内容が変わるプルダウン実装

 

LPの申し込みフォーム内に以下のようなプルダウンを実装しました。

 

セレクトメニューの選択肢によって下に表示される内容が切り替わる

 

 

以下のコードで実装が可能です。

 

 

参考：選択肢によって表示内容が変わるプルダウン実装方法

 

 

 

<感想>

申し込みフォームの入力内容エラーチェックに関して、設定をどこまで細かく行うべきなのか悩みました。

 

 

 

まとめ

今回は、デザインとコーディングの応用学習の方法についてまとめてみました。

この学習期間中にそれまでと比べて、より複雑なデザイン・コーディングができるようになったので、作れるホームページの幅が広がりました。

最後まで読んでいただき、ありがとうございました。