WEBデザイン部(24時間入部限定特典)
この部活で作るもの
まだ投稿されていません
WEBデザイン部(24時間入部限定特典)の練習メニュー
レッスン一覧はレッスンを進めていくごとにゲームのように解放されていきます!
無料で受講してみる次の練習へ進む ボタンで解除
Lesson 01「デザインツールの特性」
まずは、PhotoShopやXDといったデザインツールの特徴を学びましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 02「PhotoShopの使い方を学ぼう!〜色補正〜」
PhotoShopを使って、色補正について学んでいきましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 03「PhotoShopの使い方を学ぼう!〜人物の切り抜き〜」
PhotoShopを使って人物を切り抜きしてみましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 04「PhotoShopの使い方を学ぼう!〜クリッピングマスク〜」
クリッピングマスクと呼ばれる機能を使ってみましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 05「PhotoShopの使い方を学ぼう!〜アイコン〜」
アイコン機能を学んでいきましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 06「PhotoShopの使い方を学ぼう!〜リピートグリッド〜
リピートグリッドを使ってみましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 07「画像を合成してみよう!」
画像の合成は実は結構簡単に出来ちゃうんです
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 08「バナー広告を作ってみよう!〜バナー広告とは?〜」
バナー広告の基礎知識を学びましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 09「バナー広告を作ってみよう!〜写真素材の選び方〜」
バナーは写真でかなり左右されます。写真選びのコツを学びましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 10「バナー広告を作ってみよう!〜PhotoShopでの制作〜」
実際にPhotoShopを使ってバナーを作っていきましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 11「バナー広告を作ってみよう!〜リサイズ〜」
バナーには色々なサイズの種類があり、それに沿ってまたデザインをしていく必要がありますのでリサイズしたデザイン方法を学びましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 12「バナー広告を作ってみよう!〜0から作ってみよう〜」
実際に0から要件を元にバナーを作ってみましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 13「WEBサイトのワイヤーを作成しよう!〜要件の整理〜」
ワイヤーフレーム(通称:ワイヤー)はデザインカンプとも呼ばれ、デザインを作る前段階の「構成」を練るためによく使われます!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 14「WEBサイトのワイヤーを作成しよう!〜XDでワイヤーの作成〜」
ワイヤーフレーム作成にはXDを使っていきましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 15「サイトリニューアル時のワイヤーを作成しよう!」
サイトリニューアルを想定したワイヤーを作成してみましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 16「PCのWEBサイトをデザインしよう!〜メインビジュアル〜」
WEBサイトのメインビジュアル部分をデザインしていきましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 17「PCのWEBサイトをデザインしよう!〜ヘッダー〜」
ヘッダー部分を作っていきましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 18「PCのWEBサイトをデザインしよう!〜導入部〜」
次に導入部分を作っていきましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 19「PCのWEBサイトをデザインしよう!〜お知らせ〜」
サイトでよく見る「お知らせ」はどこのHPでもほぼ必須です!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 20「PCのWEBサイトをデザインしよう!〜下層ページへのリンク〜」
下層ページと呼ばれるそのほかのページ部分の作り方を学びましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 21「PCのWEBサイトをデザインしよう!〜フッター〜」
最後にフッターを作って終わりです!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 22「サイトリニューアル時のデザインを作成しよう!」
サイトリニューアルを想定して、また1からデザインしてみましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 23「PCデザインからスマホデザインを作ろう!〜ヘッダー〜」
今度は、スマホデザインを作りましょう! スマホデザインでは実際の開発側が開発しやすいデザインにすることもとても大事です。
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 24「PCデザインからスマホデザインを作ろう!〜メインビジュアル〜」
スマホ用のメインビジュアルを作りましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 25「PCデザインからスマホデザインを作ろう!〜メインコンテンツ〜」
次にメインコンテンツを作成しましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 26「PCデザインからスマホデザインを作ろう!〜フッター〜」
最後にフッターを作成して完成です!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 27「別パターンのスマホデザインを作ってみよう!」
同じく別パターンのスマホデザインを自分で作ってみましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 28「WEBデザイナーとしての実績の作り方」
WEBデザインの仕事の獲得方法を学びましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 29「実績の出せるポートフォリオの作り方」
仕事を獲得する上で欠かせないポートフォリオの作り方を学びましょう!
![](http://i.ytimg.com/vi/0.jpg)
次の練習へ進む ボタンで解除
Lesson 30「WEBデザイナーの見積もり方法と営業方法」
仕事を請ける上で大事な「見積もり」の方法と実際に実績の出している方から営業方法を学んでいきましょう!
![](http://i.ytimg.com/vi/0.jpg)
フロントエンドエンジニアをする上でも、副業でWEB制作や開発を請ける上でもデザイン能力はとても大切な能力の一つです!
プロのWEBデザイナーほどのデザイン能力はなくても、「そこそのWEBデザイン」を身に着けることが、現場の出来るエンジニア、副業での仕事獲得のポイントになります。
実際に「ランサーズでランキング1位」を獲得したこともある講師と一緒にHPやバナーなどのデザインをしながら、デザイン能力を高めていきましょう!