SHElikes会員がWebデザイン入門コースを徹底解説します

ミキ

SHElikes(シーライクス)のWebデザインコースでどんなことを学ぶの？
未経験でもWebデザイナーになれる？」
SHElikes会員の口コミを聞きたい！

こんな悩みを解決できる記事を用意しました！

ユマ

2021年8月にSHElikesに入会しています！

現SHElikes会員のわたしが、3大人気コースの1つである『Webデザインコース』を受講しました！

SHElikesのWebデザインコース

Webデザイン入門コース
Webデザインコース

上記のように、Webデザインのコースは2つありますが、本記事では『Webデザイン入門コース』の内容をレビューしていきます。

SHElikesのWebデザインコースの内容が気になる方や、未経験からWebデザイナーを目指したい方はぜひご覧くださいね！

3万円以上お得にAdobeを契約する方法も解説しています！すぐに知りたい方は『Adobeを安く買う方法』でチェックしてください。

＼初月月謝無料＆入会金1万円オフ／

SHElikesの無料体験レッスンの予約はこちら

※無料で体験レッスンを受講することができます。

それではまいります。

入会金1万円オフ＆初月受講料無料キャンペーン開催中

SHElikes(シーライクス)で入会キャンペーン実施中です！

入会金162,800円 → 152,800円(-1万円オフ)
初月月謝16,280円 → 0円(初月無料)

ユマ

無料体験レッスンに参加するとお得になるよ！

キャンペーンの適用方法など、詳しくは「【最新】SHElikesキャンペーン情報」で解説しています。

: 【1月最新】SHElikes新春キャペーンでお得に入会！
続きを見る

SHElikes(シーライクス)Webデザイン入門コース

学習内容	デザイン基礎 / Photoshop / Webサイト制作の工程 / CSS / HTML /
受講場所	オンライン
レッスン回数	5レッスン
サポート	添削サポートあり

講師はSHEの社長！

SHE株式会社代表取締役社長をつとめる福田恵里さんです。

出典：https://recruit.she-inc.co.jp/interview/eri-fukuda/

ユマ

SHEの社長が講師だなんてすごい〜!!

»福田恵里さんのTwitterはこちら

カリキュラムは5ステップ

SHElikesのWebデザイン入門コースはDAY5で構成されています。

デザイナーの働き方、デザインとは？
デザインの基本原則、配色やフォントの知識
Photoshopの基本操作
デザイン制作のフロー、バナー制作
HTMLやCSSのコーディング

全動画の試聴時間は約5時間半で、実際にphotoshopを触ったりしながら進めていきます。

わたしがSHElikesのWebデザイン入門コースを受けた理由

Webデザインが自分に合う職業か考えたい
ブログのアイキャッチをオシャレに作りたい！
Webデザインの基礎知識を学びたい
独学でコーディングに挫折しているので学び直したい

Webデザインのコースを受けて、「Webデザイナーという職業が自分に合うか考えたい」と思ったのが1番の理由です！

SHElikes(シーライクス)Webデザイン入門コースのゴール

Webデザインの基礎知識を楽しくわかりやすく学ぶ

入門コースでは、まずは楽しく理解することに焦点が当てられています。

わたしのゴール

Webデザイン入門コースの受講前にゴールを考えました。

デザインの基礎知識を学んで，Instagramに活かす
デザイン制作のフローで、仕事の進め方をイメージする
HTMLのコーディングを思い出す
Webデザイナーの働き方が自分に合っているか考える
ブログでわかりやすくレビューする

コース受講後、わたしのゴールがどのくらい達成できたかは、『SHElikesのWebデザイン入門コースの感想』で解説しています。

SHElikes(シーライクス)Webデザイン入門コースで準備するもの

Webデザイン入門コースを受講する際、下記2点を準備する必要があります。

Photoshop
Atom

順に解説していきます。

Photoshop

Photoshopとは、Adobe社が提供する写真を編集するソフトです。

まずPhotoshopだけ使いたい方は、『フォトプラン』がオススメ！

ただし、 SHElikesにはIllustratorやPremiere Pro、After Effectsなどが必要なコースもあるので全コース受講予定の方は、『Adobe CC』がオススメです。

フォトプランと単体プランの違いはクラウドストレージの容量です。
フォトプラン：20GB
単体プラン：100GB

悩んでる人

ちょっと高すぎるなあ…

と感じる方もいるかと思います。

『Adobe CCプラン』を約3万円安く契約する方法があります。

Adobe CCプラン　~~72,336 円/年~~ → 39,980円/年

詳しくは『Adobe CCを3万円安くする方法』で解説しています。

SHElikesの講座内では、安くする方法は紹介されていないので、必ずチェック記事をチェックしてくださいね！

Atom

出典：https://atom.io/

Atomはコーディングをするための無料アプリです。

ユマ

コーディングはMacのテキストエディタとかでもできるらしいんだけど、コーディング用アプリだと、色変などもあってわかりやすいみたい！

SHElikesのWebデザイン入門コース内でも、インストール方法が動画解説されています。

»Atomの公式ホームページはこちら

DAY1：Webデザインとは（約20分）

デザインとは
Webサイトができるまで
Webデザイナーになるために必要なスキル
Webデザイナーの働き方
Webデザインと著作権

DAY1では、Webサイトができるまでの工程やWebデザイナーになるためにはどんなスキルが必要か学びます。

DAY2：デザインの基礎知識（約35分）

デザイン基本原則
配色
レイアウト
タイポグラフィ
写真

デザインの基本4原則や配色をはじめとするデザインの基礎知識を学び、しっかりと身につけることを目指します。

デザインの基本原則

まとめる
そろえる
くりかえす
メリハリ

DAY3：Photoshopの基本操作（約120分＋ワーク）

使用するデザインツールの種類
Photoshop基礎
Photoshop演習

STEP1~2：デザインツール・Photoshop基礎

主に使われているデザインツールはPhotoshopとIllustratorの2つです。

2つはどんな違いがあるのか学びます。

STEP2ではPhotoshopの画面を見ながら、操作を学びます。

学ぶこと

ファイルの新規作成と画面構成
パネルの表示
レイヤー構造とレイヤー操作
良く使う基本操作
ファイルの保存
その他良く使う機能

操作の名前や場所から丁寧に教えてくれるので、Photoshopを使ったことがなくても大丈夫◎

STEP3：Photoshop演習

STEP3では、先生と一緒に実際にバナーを作成します。

こんなバナーが作れるようになります。

DAY3バナー練習　わたしが作りました！

学ぶこと

文字を曲線に沿って配置
グラデーション
シャドウ
波線
タグの作成

バナーを作りながらショートカットキーも教えてくれるので、忘れないようにメモは必須！

DAY4：バナー制作をしてみよう（約60分＋ワーク）

デザインのステップ
よく使うテクニック
どちらが適切なデザイン？
バナートレース
宿題：バナー制作

STEP1：デザインのステップ

デザイン制作の流れを学んでいきます。

要件定義
情報設計
ビジュアルデザイン

実際のヒアリングを想定して、クライアントに何を聞けばいいのか学べます。

DAY2~3：よく使うテクニック / 適切なデザイン

デザインにはよく使うテクニックがあります。

今回は6つの使えるテクニックを学びます。

覚えたテクニックを考えながら、2択問題でさらに身体に覚えさせていきます。

DAY3 どちらが適切なデザイン？一部モザイクをかけています。

ユマ

いいデザインのイメージがどんどん理解できてきた！

「このデザインはどうしていいのか」理由を言語化できる力は必要です。DAY3では、悪い例・いい例を見比べることによって、デザイン感度をあげていきます。

STEP4：バナートレース

バナーの分析方法や、トレース方法を学びます。

ターゲットや目的、配色、デザインの目的を考えて言語化します。

わたしはこんな感じで分析してみました！

ユマ

言語化するのって難しいけど、意識してバナーを見てみると勉強になることがいっぱい！

STEP5：【宿題】バナー制作

実際に設定された要件を元にバナーを制作します。

バナー制作の要件　一部モザイクかけています。

バナー制作作品例

もくもく会に参加して、入門コースのバナー完成しました(提出済み)
フィードバックが楽しみです☺️#シーライクス #WEBデザイン入門 pic.twitter.com/GQAjwQFht2
— |SHElikes (@chihiro_0215) April 18, 2021

ユマ

未経験からでもここまでできるようになるんだ！すごい〜！

DAY5：コーディングとは（約90分＋ワーク）

コーディングとは
Webページの構成要素
コーディングに使う言語・ツール
HTMLの書き方
CSSの書き方
レスポンシブデザイン

STEP1~3：コーディングとは・Webページの構成要素

コーディングとは、イメージしたWebデザインをWebサイト上で見れるようにするためにCSSやHTMLなどで記述することです。

Webサイトの構成や、CSS・HTMLとは何か学んでいきます。

ここから、準備するものの2つ目にあったAtomを使っていきます。

STEP4~6：HTML/CSSの書き方・レスポンシブデザイン

HTML・CSSの書き方をAtomで実際にコードを書きながら学んでいきます。

SHElikes(シーライクス)のWebデザイン入門コースの感想

△デザインの基礎知識を学んで，Instagramに活かす

✔︎デザイン制作のフローで、仕事の進め方をイメージする

✔︎HTMLのコーディングを思い出す

△Webデザイナーの働き方が自分に合っているか考える

✔︎ブログでわかりやすくレビューする

入門コースなので、基礎をまんべんなく学んだイメージです。

ユマ

ちょっとやってみだだじゃ『Webデザイナーの仕事』が自分に合うかわからない！

というのが正直な感想です。

SHElikesのWebデザインコースは続きのコースがあるので、新しいコースを受けつつ考えたいと思います！

良かったところ

デザイン初心者でもわかりやすく知識が身につけられる
Photoshopが使ったことがなくても安心して始められる

未経験の方向けにかなり丁寧に解説されており、あまりパソコン使ったことがない方や、Adobeソフト初めて使う方でもできるようにカリキュラムが組まれています。

わたし自身、デザイン未経験でしたが楽しく勉強ができました♩

悪かったところ

DAY4の「どちらが適切なデザイン？」の問題は簡単すぎた！→もっと難しい問題がいい
Photoshopの講座は少ないので、深めるには自分でやっていくしかない→自分で調べながら勉強できない人に難しい

SHElikesのコースは初心者向けに作られているところがあるため、「簡単すぎるんじゃないの？」と思うことも所々ありました。

ユマ

経験がある方にはSHElikesのWebデザイン入門コースは初歩的すぎるかもしれません。

また、SHElikesでは基礎は学べますが、より深めるためには自分で勉強するスタイルです。

自分で調べるのが苦手な方はつまづくこともありそうですね。

しかしSHElikesでは、誰も挫折しないようもくもく会やSlackなど質問できる場が多く設けられています。

1人で勉強するのが苦手な方でも勉強できる環境が整っています。

まとめ

いかがでしたか？

本記事では、 SHElikes(シーライクス)の『Webデザイン入門コース』を徹底的にレビューしました！最後にポイントをおさらいしますね！

Webデザイン入門コースで学べること

Webサイトができるまでの工程
Photoshopの基礎操作
デザインの基礎知識
バナーの制作方法
コーディングの基礎

初心者だけどWebデザイナーになりたい方や、Photoshop触ったことないけどやってみたい方は、SHElikesのWebデザイン入門コースはアリですね。

未経験からでもできるよう丁寧に解説されているので、気軽にトライできますよ！

どんなことをするのか体験してみたい方は、SHElikesの無料体験レッスンで叶います！

Webデザインコースの無料体験もできるので、ぜひ0円で体験してみてくださいね〜！