chevron_left

Webサイトでよく使うビジュアルデザインの作り方

PREMIUM
第6回

【パーツ制作実践】パーツを組み立てる!ランディングページの作り方

2014年10月25日 90min

スライド資料

会員登録して、全てのスライドを見よう

1 / 27

授業の概要

サイトをマルッと任されるようになるまで、後もう一歩です。この授業では、パーツをどう組み立てたらよいのか、組み立て方を学びます。

「押せる感のあるボタン」「グローバルナビゲーション」「サイトトップ画像」など全てのパーツが作れるようになったデザイナーは、1ページをまかされるようになります。まずは、イベントページやキャンペーンページのようなイレギュラーなページで力量を試される事でしょう。

クラウドソーシングでWebパーツやロゴなどを受注しているフリーランスのデザイナーの方も、ランディングページ制作まで受注できるようにスキルアップしましょう。仕事の幅が広がります。

■受講にあたって準備するもの

・授業中先生が制作する画像素材

http://behomazn.com/schoo/lp_work.zip

・その他

Adobe Photoshop (ヴァージョンは問いません)

お持ちでない方は、下記のサイトに従って、30日間無料お試し版をダウンロー
ドしてください。
https://creative.adobe.com/ja/products/download/photoshop

WindowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入って
いる事が望ましいです。

初めてに触れる人は、以下のトレーニングサイトでチュートリアルやビデオを全て見て、Photoshopの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Photoshopではどんな事ができるか知っておきましょう。
https://helpx.adobe.com/jp/photoshop.html  

▼【パーツ制作実践】の全4回授業です。4回を通してWebサイト制作に必要な技術を身につけることができます。

押せる感のあるナビゲーションボタンの作り方
テイスト別ナビゲーションボタンの作り方
テイスト別サイトトップ画像の作り方
・パーツを組み立てる!ランディングページの作り方

こんな人にオススメ

個々のパーツ制作はできるが、組み立て方(LP制作)に自信がない方・仕事の幅を広げたい方

授業で使用する教材

※授業以外での使用は禁止します

チャプター

play_arrow
自己紹介&アジェンダ
01:44
play_arrow
ランディングページとは
02:00
play_arrow
ランディングページを見てみよう
11:01
play_arrow
ランディングページの構造について
01:57
play_arrow
スクーWebデザイナー学部を訴求してみよう
11:40
play_arrow
僻地在住者向けにランディングページを作ってみよう
04:30
play_arrow
2次元CGを描く趣味を持った層向けにランディングページを作ってみよう
05:22
play_arrow
既にWeb制作に携わっている層向けにランディングページを作ってみよう
05:23
play_arrow
Q:画面サイズはデバイスによっていろいろあると思いますが、ファーストビューのサイズ(横×縦 のピクセル数)はどのくらいで考えれば良いでしょうか?
03:39
play_arrow
前々回のレポート課題の添削
09:33
play_arrow
前々回のレポート課題の添削②
02:01
play_arrow
前々回のレポート課題の添削③
01:11
play_arrow
前々回のレポート課題の添削④
01:06
play_arrow
前々回のレポート課題の添削⑤
07:26
play_arrow
Q:スキルは当然必要ですが、年齢や過去の職歴は関係あると思いますか?
04:23
play_arrow
Q:ランディングページの文章の所はPhotoshopなどでJPGで作ってHTMLで貼り付けるのがいいのですか?
04:14
play_arrow
Q:ランディングページでキャッチコピーを考えるのに、おすすめなサイトや勉強の仕方などありますか?
03:35
play_arrow
Q:まったく会社に所属しないでフリーでという道は険しいのでしょうか?
02:40
play_arrow
Q:コンバージョンボタンをいくつも配置して行く間に、アクションを起こさせるための要素(「こんな特徴が」とか「こんないいことが」とか)を入れていく訳ですが、その要素の順番などを決めるコツはありますか?
03:04
play_arrow
レポート課題発表