ILLUSTRATORとPHOTOSHOPでつくるランディングページ(LP)制作講座
IllustratorとPhotoshopを使った、本格的なランディングページのデザインを学ぶことができます。ランディングページ(LP)の構成やよく使われるパーツの役割から、デザインに関わるソフト操作までを総合的に習得可能なカリキュラムです。
レベル
ビギナー
21レッスン
0日間
短期間でランディングページデザインの基礎スキルとコツを習得！
～未経験OK! Illustrator&Photoshopを使ったランディングページ(LP)デザイン～
フリーランスとしてWebデザインのお仕事を探したとき、多く見かけるのがランディングページの案件。商品やサービスを販売する商業的なWebサイトにとって、ランディングページは必要不可欠なページの一つとも言えます。
LPデザインのお仕事受託、
未経験からではハードルが高いと感じていませんか？
デザインって言われても
何から手を付ければ良いか…
センスに自信がないので
仕事として出来るか不安
フォトショやイラレなど
ソフトの操作に自信がない
グラフィックソフト操作から、即実践可能なランディングページのデザイン方法まで総合的にお教えします
ランディングページで重視されるのは、アーティスティックでグラフィカルな表現ではなく、結果を出せるということです。どれだけ格好くても、ユーザーが素通りしてしまっては意味がありません。
ほんとうに良いランディングページとはなにかを知り、実務の際に役立つ理論を学びましょう。
デザイン制作に必要なIllustratorとPhotoshopの操作もミニマムに習得可能。
講座と一緒にランディングページデザインを作成しながら学び、最終課題ではお仕事形式で自由に1ページのデザインを作成していただきます。お仕事案件チャレンジへの自信もつき、様々な応用もできるようになりますよ。
見本トレース→自由課題で、未経験からでも取り組みやすい
短期間で「使える」デザインスキルを習得する独自メソッド
多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。デザイン未経験の方を対象に、ランディングページ制作の知識とグラフィックソフトの操作方法を厳選しました。講座と一緒に手を動かして頂くことで、短期間でお仕事レベルのWebデザイン制作が習得可能な内容となっています。
ランディングページの定番構成や、成果を出す考え方を学ぶ
ランディングページ(LP)で最も重要視されるのがコンバージョンと呼ばれる、設定した目標の達成率です。商品を販売したり、お申し込みをして頂いたり、などユーザーに動いてもらう部分です。
デザイン時には掲載する情報の役割を意識して、ユーザーが読み進めてくれるような流れを作る必要があります。講座ではLPの構成や役割を、実例も紹介しながら解説していきます。解説と実例を確認していくことで、自然にデザインの引き出しも増えていきますよ。
デザインの引き出しを増やし、今日から使える仕事術を知る
デザイン制作時に、全てをゼロから自分の頭で考えようとすると行き詰まってしまいます。典型的なレイアウトパターンを知る、参考になりそうなデザインを探すなど、必要な情報を集めて活用することも必要です。
本講座ではただ作るだけではなく、デザインのひきだしを増やしたり、効率よくアイディア探しを行う方法も伝授。世界中の素晴らしいデザインを教科書として活用しましょう。
Photoshopを使った画像合成でデザインの自由度UP
Webページに使用する画像は、クライアント提供やストックフォトを使用します。が、使いたいサイズと縦横比が合わなかったり、背景が邪魔だったり、色味が違ったりと、最初から100点満点の画像はそうそうありません。
そこで必要なのが、photohopでの補正や合成スキルです。本講座では背景画像の合成や、色味の調整方法を解説。 Photoshopの操作からやさしく説明していますので、初心者の方でも「解説通りにできない」なんて心配は不要です！
絵心不問！Illustratorでオリジナル画像も作成可能
Illustratorを使って、デザインテイストを問わずにアレンジできるアイコンや画像の作成方法を習得します。図形の組み合わせで作っていくので絵が苦手…という方も、シンプルで綺麗な画像を作成することができますよ。
解説は文章での解説と、制作画面の両方をセットで掲載しています。ハンドルって何?という初心者の方でも、解説を見ながら一緒に操作していただくことで作りたい形を表現できるようになります。
実務レベルのランディングページデザインを完成させる
本講座は実務形式で、クライアントの要件確認からWebデザインの考え方・制作までを通して行っていきます。最初は一緒にデザインを行うことで、グラフィックソフトの操作に慣れていきましょう。
講座の最後には、原稿を元にイチからデザインする課題をご用意。見本のトレース、オリジナルデザインの２つを完成させることで、実際にお仕事を受けられる実力を身につけることができます。制作時間短縮のコツも掴めますよ。
本講座を終えると、できるようになること
- ランディングページの構成・役割を理解し、CV率の向上を考えられる
- クライアントの要件を理解したデザインができるようになる
- Illustrator, Photoshopを使ってWebデザインができるようになる
- 情報にあったアイコンやインフォグラフを自作することができる
- Lancersなどクラウドソーシングサービスで、LP制作を受注できるスキルが身につく
レッスン内容
-
1
最初にランディングページ(LP)とは何か、大きな区分や構成について知りましょう。
-
2
ランディングページ（LP）制作におけるオーソドックスな順序、Webデザイナーが受け持つ範囲を解説します。実務で役立つデザイン参考の探し方も紹介。
-
3
ページを開いたユーザーが真っ先に目にする、ページトップ部分をファーストビューと呼びます。ファーストビューの役割やデザイン時に意識したいことを、実際のLPを見ながら学びましょう。
-
4
ボディはユーザーをコンバージョン（購入・問い合わせなど）に導く役割があります。ユーザーの購入意欲と信頼感を高めるために掲載されている、情報の種類を解説します。
-
5
ユーザーが抱えている問題を示し、問題が解決した明るい未来を想像してもらいましょう。短時間で「私にあった商品/サービスだ」とユーザーが感じられるようなデザインが必要です。
-
6
実証パーツは商品やサービスが、なぜユーザーの問題を解決できるかを示します。情報量が多いため、読み手を飽きさせず期待を高められる構成とデザインを行いましょう。
-
7
コンバージョンとなる行動をユーザーに起こしてもらうためには、信用や安心感を高める必要があります。その為に使われているパーツについて知り、実際にリリースされているLPのデザインを見てみましょう、
-
8
ランディングページには、よくある質問や提供プロセスなど、ユーザーの安心感を更に高めたり、疑問を解決できる情報もありますね。よく使われるパーツや、制作時のポイントを解説します。
-
9
商品やサービスについての説明の後は、ユーザーが行動を起こすためのクロージングを用意します。ユーザー行動を促すオファーと、デザインのポイントを解説します。
-
10
実践編は、実際のお仕事とおなじ手順でランディングページのデザインを制作していきます。見本・解説を見ながら一緒に手を動かして、1ページ分のLPデザインを完成させましょう。
-
11
デザイン制作を円滑に進めるための下準備を行いましょう。Illustratorを使ってWebデザインを行うときの設定やガイドの作成方法、デザインで悩まないための配置決めについても解説します。
-
12
Adobe Photoshopを使ってランディングページの顔となるファーストビューの画像を作ります。短時間で、切り抜いた人の写真に違和感なく背景を合成する方法も解説しています。
-
13
Adobe Illustratorを使って、Photoshopで作った画像の上にランディングページ掲載情報を配置していきましょう。ブレンドツールやドロップシャドウの設定方法も解説、初心者の方でも実践できます。
-
14
ファーストビューに続く、問題提起と結果パーツのデザイン実演です。ポイントとなるIllustrator操作を解説していますので、一緒に手を動かしてデザイントレースを行って下さい。
-
15
実証パーツとお客様の声をデザインします。縦長になりすぎないよう、情報をコンパクトにまとめていきましょう。ポイントとなるIllustrator操作を解説していますので、一緒に手を動かしてデザイントレースを行って下さい。
-
16
実証パーツとよくある質問のデザインを行います。ポイントとなるIllustrator操作を解説していますので、一緒に手を動かしてデザイントレースを行って下さい。
-
17
料金表やお問い合わせフォームのデザインを作っていきます。表の作成方法などポイントとなるIllustrator操作を解説していますので、一緒に手を動かしてデザイントレースを行って下さい。
-
18
情報を視覚的に、分かりやすく伝えるための説明画像（インフォグラフィック）について解説します。インフォグラフィックはLPでも、それ以外のWebページや紙媒体でもたくさん使われています。
-
19
制作したLPデザインに使用する、アイコン風の画像をイチから作っていきましょう。制作手順を図解たっぷりで解説。これが出来れば、Webデザインに使うアイコンも自作できるようになりますよ。
-
20
ピクトグラムに使える人型を作成しながら、パスの操作方法を習得できます。完全自作する方法・素材を組み合わせてより短時間で仕上げる方法、両方の画像制作方法を解説しています。
-
21
スマートフォン表示用のデザイン制作手順を紹介します。
もっと見る
ILLUSTRATORとPHOTOSHOPでつくるランディングページ(LP)制作講座
IllustratorとPhotoshopを使った、本格的なランディングページのデザインを学ぶことができます。ランディングページ(LP)の構成やよく使われるパーツの役割から、デザインに関わるソフト操作までを総合的に習得可能なカリキュラムです。
| 講座名 | ILLUSTRATORとPHOTOSHOPでつくるランディングページ(LP)制作講座 |
|---|---|
| 料金 |
109,780 円（税込） |
| サポート期間 | 30日間 |
| マンツーマンサポート | 2回 |
| レッスン数 | 22 |
| 質問回数 | 無制限 |
有料20講座ウケ放題！お得なプレミアムサービス
無料申し込み期限
12月8日まで
募集
人数
7名 （残りわずか）
