本日のアジェンダ
1限目
実技 ランディングページコーディング実習①
レイヤーパネルについて
2限目
実技 ランディングページコーディング実習①
カンバスサイズの変更 について
3限目
実技 ランディングページコーディング実習①
画像解像度 について
4限目
実技 ランディングページコーディング実習①
Web用に保存（従来）について
5限目
実技 ランディングページコーディング実習①
本日のまとめ
本日のポイント
Webサイト用素材の見極め方と作り方
ランディングページとは？
ランディングページ（landing page）とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。
ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
参考サイト
- ランディングページ（LP）とは何か？-メリットをわかりやすく
- 【ランディングページとは 10分で理解できるLPの基本】 – LISKUL
- ランディングページとは何か、これで分かる！ | Web集客の開花塾
Web用に保存（従来）を理解しましょう。
Web用素材の「jpg,gif,png」の書き出し方法と注意点は、正確なサイズ（px）で保存する事、その為に必要な操作を理解していきましょう。
Photoshopのキーワード
- レイヤーパネルについて
- カンバスサイズの変更「イメージ→カンバスサイズの変更」
- 画像解像度「イメージ→画像解像度」
- Web用に保存（従来）「ファイル→書き出し→Web用に保存（従来）」
レイヤーパネル
Photoshop のレイヤーは、積み重ねられた透明フィルムのようなものです。レイヤーの透明部分では、下のレイヤーが透けて見えます。レイヤーは、透明フィルムをスライドさせるように動かして、レイヤーのコンテンツを希望の位置に配置することができます。また、レイヤーの不透明度を変更して、コンテンツを部分的に透明にすることもできます。
参考サイト
- Photoshop のレイヤーの基本に関する学習 – Adobe Help Center
- Photoshopのレイヤーとは？初心者でも分かる使い方 – サルワカ
- レイヤーパネル | レイヤー | 初心者のためのフォトショップ講座
カンバスサイズ
画像を編集するのではなく、新規でファイルを作成する場合、任意のサイズのカンバスを作成することになりますが、これは後から変更することもできます。
参考サイト
- Photoshopのカンバスサイズを変更する方法【初心者向け】
- Photoshopのカンバスサイズの変更方法：1番簡単なのはコレ！
- Photoshop：カンバスサイズを素早く変更する方法 / 切り抜きツール
画像解像度
ピクセル寸法は、画像の幅と高さのピクセル総数を示します。解像度はビットマップ画像の細かさで、1 インチあたりのピクセル数（ppi）で示されます。1 インチあたりのピクセル数が増加すると、解像度は高くなります。一般的に、画像の解像度が高いほど、プリントした画像の品質が高くなります。
参考サイト
保存とその注意点
Illustrator ドキュメントを保存すると、アートワークデータはファイルに書き出されます。 データの構造は、選択したファイル形式によって異なります。アートワークを保存できる基本的なファイル形式には、AI、PDF、EPS、FXG および SVG の 5 種類があります。
またWEBサイト用の画像「jpg、gif、png」に保存することもできます。
あと、もう一つ専用ソフトが無い方にも見てもらえるように「pdf」への保存も可能です。
- 保存：「Ctrl」＋「S」
- 別名で保存 ：「Shift」「Ctrl」＋「S」
- Web用に保存（従来）： 「Alt」「Shift」「Ctrl」＋「S」