ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/421/room ーーーーーーーーーーーーーーーーーーーーーーー

2. 1.ランディングページ
ランディングってなんだろ
普通のWebサイトとの違い
つまり何が大切なの？
2.デザインに迷わずに
すむ作業の順番
頭から作ると大変な理由
原稿が少ないものを見つける
デザインが決まったものから
!
3.簡単なデザイン
実はとってもシンプル
参考になるものは沢山
全体のトーンを決める
4.さいごに
素材がないときのコツ
前提を覆すには
質疑応答

3. まずはランディングページを知ろう
ラ ン ディ ン グペ ー ジ っ て 何 ？

4. ランディング
-landing!
① 飛行機の着陸。
② スキーのジャンプ
競技や体操競技など
の着地。

7. Web制作の
一大
ジャンル
スクリーンショットを
たくさん保管している
ギャラリーサイトも
ある

8. “インターネット広告や、検索エンジンの検索結果
からのリンク先となるウェブページ。広告を見る
人にとっては、広告（又は検索結果）をクリック
すると最初に表示されるページ。必ずしも自社サ
イトのトップページである必要はない。”
– インターネット広告用語辞典

9. ぱっと
見て
分かる
街中の広告と同様
つい共感したり、
メリットが
想像しやすくなるもの

10. LPはチラシと同じ
→つまりメッセージ性が高い
→つまり見た目で訴求しているものが多い
→つまり期間が限定されているものも多い

11. デザインで苦労しないために
“ 失 敗 し な い ” デ ザイ ン の 順 番

12. ページ上部は迷いやすい
印象づける「顔」となる部分は
いろんなアプローチがある

14. 情報が少ない
役割が分かりやすい
見せ方がある程度決まっててラク！

16. 色や質感が違うが、
共通部分が多い
見せ方がある程度決まっててラク！

17. 伝わりやすく
美しい
罫線
ひとつひとつを見ると
ソフトの最新機能を
使うような
複雑なものはない
公式から
配布
文字も
ベーシック
太い書体

18. 覚えやすく
見つけやすい
インターネットにあまり
触れていない人でも
「押せる」
「これはボタンだ」
と分かりやすい
現実を
模した
ボタン
遷移を
イメ ー ジ
できる
アイ コ ン
光で
凹凸を
表現
読みやすい
書体

20. 文字だけ、画像を
合わせてとさまざま
「見出し」よりは「メインイメージ」なものも

21. 細部を注視しよう！
作るときに見ることで、より実現しやすくなる

22. 工夫しだいでなんとかできる
素 材 が な く て もで き る こ と

23. 背景に
凝る
海外のチュートリアル
などでも
Photoshopの操作を
含めて丁寧に解説され
ている

24. 文字を
細かく
作る

25. 文字を
細かく
作る
ひとつの文章や
強調したい言葉単位で
デザインを行うと
見栄えが良くなる
吹き出し
強調を
赤く
野菜をイ
メージでき
る色
箇条書き
を丸く

26. わたしの
場合
作るのが
簡単な
ハート
ビ ジュ アル を
助ける
文章を追加
よくある
ボタン
写真素材やイラスト無し
原稿も一部弊社で補完

27. わたしの
場合
シ ン プル な 文
章 デ ザイ ン を
レイアウトに
よ って
特徴づける
見出しを
補足する
写真素材やイラスト無し
原稿も一部なので、弊社で保管
画像

28. わたしの
場合
見出しに画像を
つけて変化を
情報が少ないく
作りやすい
フッター
写真素材やイラスト無し
原稿も一部なので、弊社で保管

29. 1.ランディングページ
ランディングってなんだろ
普通のWebサイトとの違い
つまり何が大切なの？
2.デザインに迷わずに
すむ作業の順番
頭から作ると大変な理由
原稿が少ないものを見つける
デザインが決まったものから
!
3.簡単なデザイン
実はとってもシンプル
参考になるものは沢山
全体のトーンを決める
4.さいごに
素材がないときのコツ
前提を覆すには
質疑応答

30. さいごに
知っておくとよりデザインが良くなる秘訣

31. 絶賛発売中!