WEBデザイン部

部活トップ画像

フロントエンドエンジニアをする上でも、副業でWEB制作や開発を請ける上でもデザイン能力はとても大切な能力の一つです!
プロのWEBデザイナーほどのデザイン能力はなくても、「そこそのWEBデザイン」を身に着けることが、現場の出来るエンジニア、副業での仕事獲得のポイントになります。
実際に「ランサーズでランキング1位」を獲得したこともある講師と一緒にHPやバナーなどのデザインをしながら、デザイン能力を高めていきましょう!

この部活で作るもの

まだ投稿されていません

WEBデザイン部の練習メニュー

レッスン一覧はレッスンを進めていくごとにゲームのように解放されていきます!

無料で受講してみる

次の練習へ進む ボタンで解除

Lesson01「デザインツールの特性」

まずは、PhotoShopやXDといったデザインツールの特徴を学びましょう!

次の練習へ進む ボタンで解除

Lesson02「PhotoShopの使い方を学ぼう!〜色補正〜」

PhotoShopを使って、色補正について学んでいきましょう!

次の練習へ進む ボタンで解除

Lesson03「PhotoShopの使い方を学ぼう!〜人物の切り抜き〜」

PhotoShopを使って人物を切り抜きしてみましょう!

次の練習へ進む ボタンで解除

Lesson04「PhotoShopの使い方を学ぼう!〜クリッピングマスク〜」

クリッピングマスクと呼ばれる機能を使ってみましょう!

次の練習へ進む ボタンで解除

Lesson05「PhotoShopの使い方を学ぼう!〜アイコン〜」

アイコン機能を学んでいきましょう!

次の練習へ進む ボタンで解除

Lesson06「PhotoShopの使い方を学ぼう!〜リピートグリッド〜

リピートグリッドを使ってみましょう!

次の練習へ進む ボタンで解除

Lesson07「画像を合成してみよう!」

画像の合成は実は結構簡単に出来ちゃうんです

次の練習へ進む ボタンで解除

Lesson08「バナー広告を作ってみよう!〜バナー広告とは?〜」

バナー広告の基礎知識を学びましょう!

次の練習へ進む ボタンで解除

Lesson09「バナー広告を作ってみよう!〜写真素材の選び方〜」

バナーは写真でかなり左右されます。写真選びのコツを学びましょう!

次の練習へ進む ボタンで解除

Lesson10「バナー広告を作ってみよう!〜PhotoShopでの制作〜」

実際にPhotoShopを使ってバナーを作っていきましょう!

次の練習へ進む ボタンで解除

Lesson11「バナー広告を作ってみよう!〜リサイズ〜」

バナーには色々なサイズの種類があり、それに沿ってまたデザインをしていく必要がありますのでリサイズしたデザイン方法を学びましょう!

次の練習へ進む ボタンで解除

Lesson12「バナー広告を作ってみよう!〜0から作ってみよう〜」

実際に0から要件を元にバナーを作ってみましょう!

次の練習へ進む ボタンで解除

Lesson13「WEBサイトのワイヤーを作成しよう!〜要件の整理〜」

ワイヤーフレーム(通称:ワイヤー)はデザインカンプとも呼ばれ、デザインを作る前段階の「構成」を練るためによく使われます!

次の練習へ進む ボタンで解除

Lesson14「WEBサイトのワイヤーを作成しよう!〜XDでワイヤーの作成〜」

ワイヤーフレーム作成にはXDを使っていきましょう!

次の練習へ進む ボタンで解除

Lesson15「サイトリニューアル時のワイヤーを作成しよう!」

サイトリニューアルを想定したワイヤーを作成してみましょう!

次の練習へ進む ボタンで解除

Lesson16「PCのWEBサイトをデザインしよう!〜メインビジュアル〜」

WEBサイトのメインビジュアル部分をデザインしていきましょう!

次の練習へ進む ボタンで解除

Lesson17「PCのWEBサイトをデザインしよう!〜ヘッダー〜」

ヘッダー部分を作っていきましょう!

次の練習へ進む ボタンで解除

Lesson18「PCのWEBサイトをデザインしよう!〜導入部〜」

次に導入部分を作っていきましょう!

次の練習へ進む ボタンで解除

Lesson19「PCのWEBサイトをデザインしよう!〜お知らせ〜」

サイトでよく見る「お知らせ」はどこのHPでもほぼ必須です!

次の練習へ進む ボタンで解除

Lesson20「PCのWEBサイトをデザインしよう!〜下層ページへのリンク〜」

下層ページと呼ばれるそのほかのページ部分の作り方を学びましょう!

次の練習へ進む ボタンで解除

Lesson21「PCのWEBサイトをデザインしよう!〜フッター〜」

最後にフッターを作って終わりです!

次の練習へ進む ボタンで解除

Lesson22「サイトリニューアル時のデザインを作成しよう!」

サイトリニューアルを想定して、また1からデザインしてみましょう!

次の練習へ進む ボタンで解除

Lesson23「PCデザインからスマホデザインを作ろう!〜ヘッダー〜」

今度は、スマホデザインを作りましょう! スマホデザインでは実際の開発側が開発しやすいデザインにすることもとても大事です。

次の練習へ進む ボタンで解除

Lesson24「PCデザインからスマホデザインを作ろう!〜メインビジュアル〜」

スマホ用のメインビジュアルを作りましょう!

次の練習へ進む ボタンで解除

Lesson25「PCデザインからスマホデザインを作ろう!〜メインコンテンツ〜」

次にメインコンテンツを作成しましょう!

次の練習へ進む ボタンで解除

Lesson26「PCデザインからスマホデザインを作ろう!〜フッター〜」

最後にフッターを作成して完成です!

次の練習へ進む ボタンで解除

Lesson27「別パターンのスマホデザインを作ってみよう!」

同じく別パターンのスマホデザインを自分で作ってみましょう!

次の練習へ進む ボタンで解除

Lesson28「WEBデザイナーとしての実績の作り方」

WEBデザインの仕事の獲得方法を学びましょう!

次の練習へ進む ボタンで解除

Lesson29「実績の出せるポートフォリオの作り方」

仕事を獲得する上で欠かせないポートフォリオの作り方を学びましょう!

次の練習へ進む ボタンで解除

Lesson30「WEBデザイナーの見積もり方法と営業方法」

仕事を請ける上で大事な「見積もり」の方法と実際に実績の出している方から営業方法を学んでいきましょう!