- SHElikes(シーライクス)
のWebデザインコースでどんなことを学ぶの？ - 未経験でもWebデザイナーになれる？」
- SHElikes会員の口コミを聞きたい！
こんな悩みを解決できる記事を用意しました！
現SHElikes会員のわたしが、3大人気コースの1つである『Webデザインコース』を受講しました！
SHElikesのWebデザインコース
- Webデザイン入門コース
- Webデザインコース
上記のように、Webデザインのコースは2つありますが、本記事では『Webデザイン入門コース』の内容をレビューしていきます。
SHElikesのWebデザインコースの内容が気になる方や、未経験からWebデザイナーを目指したい方はぜひご覧くださいね！
3万円以上お得にAdobeを契約する方法も解説しています！すぐに知りたい方は『Adobeを安く買う方法』でチェックしてください。
＼初月月謝無料＆入会金1万円オフ／
※無料で体験レッスンを受講することができます。
それではまいります。
目次
- 入会金1万円オフ＆初月受講料無料キャンペーン開催中
- SHElikes(シーライクス)Webデザイン入門コース
- わたしがSHElikesのWebデザイン入門コースを受けた理由
- SHElikes(シーライクス)Webデザイン入門コースのゴール
- SHElikes(シーライクス)Webデザイン入門コースで準備するもの
- DAY1：Webデザインとは（ 約20分 ）
- DAY2：デザインの基礎知識（ 約35分 ）
- DAY3：Photoshopの基本操作（ 約120分＋ワーク ）
- DAY4：バナー制作をしてみよう（ 約60分＋ワーク ）
- DAY5：コーディングとは （ 約90分＋ワーク ）
- SHElikes(シーライクス)のWebデザイン入門コースの感想
- まとめ
入会金1万円オフ＆初月受講料無料キャンペーン開催中
SHElikes(シーライクス)で入会キャンペーン実施中です！
- 入会金162,800円 → 152,800円(-1万円オフ)
- 初月月謝16,280円 → 0円(初月無料)
キャンペーンの適用方法など、詳しくは「【最新】SHElikesキャンペーン情報」で解説しています。
-
【まだ間に合う！】10月最新シーライクス入会金割引キャンペーン＆クーポンを徹底解説！
続きを見る
SHElikes(シーライクス)Webデザイン入門コース
| 学習内容 | デザイン基礎 / Photoshop / Webサイト制作の工程 / CSS / HTML / |
| 受講場所 | オンライン |
| レッスン回数 | 5レッスン |
| サポート | 添削サポートあり |
講師はSHEの社長！
SHE株式会社代表取締役社長をつとめる福田恵里さんです。
出典：https://recruit.she-inc.co.jp/interview/eri-fukuda/
カリキュラムは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
Atomはコーディングをするための無料アプリです。
SHElikesのWebデザイン入門コース内でも、インストール方法が動画解説されています。
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デザイナーの働き方が自分に合っているか考える
✔︎ブログでわかりやすくレビューする
入門コースなので、基礎をまんべんなく学んだイメージです。
というのが正直な感想です。
SHElikesのWebデザインコースは続きのコースがあるので、新しいコースを受けつつ考えたいと思います！
良かったところ
- デザイン初心者でもわかりやすく知識が身につけられる
- Photoshopが使ったことがなくても安心して始められる
未経験の方向けにかなり丁寧に解説されており、あまりパソコン使ったことがない方や、Adobeソフト初めて使う方でもできるようにカリキュラムが組まれています。
わたし自身、デザイン未経験でしたが楽しく勉強ができました♩
悪かったところ
- DAY4の「どちらが適切なデザイン？」の問題は簡単すぎた！→もっと難しい問題がいい
- Photoshopの講座は少ないので、深めるには自分でやっていくしかない→自分で調べながら勉強できない人に難しい
SHElikesのコースは初心者向けに作られているところがあるため、「簡単すぎるんじゃないの？」と思うことも所々ありました。
また、SHElikesでは基礎は学べますが、より深めるためには自分で勉強するスタイルです。
自分で調べるのが苦手な方はつまづくこともありそうですね。
しかしSHElikesでは、誰も挫折しないようもくもく会やSlackなど質問できる場が多く設けられています。
1人で勉強するのが苦手な方でも勉強できる環境が整っています。
まとめ
いかがでしたか？
本記事では、 SHElikes(シーライクス)の『Webデザイン入門コース』を徹底的にレビューしました！最後にポイントをおさらいしますね！
Webデザイン入門コースで学べること
- Webサイトができるまでの工程
- Photoshopの基礎操作
- デザインの基礎知識
- バナーの制作方法
- コーディングの基礎
初心者だけどWebデザイナーになりたい方や、Photoshop触ったことないけどやってみたい方は、SHElikesのWebデザイン入門コースはアリですね。
未経験からでもできるよう丁寧に解説されているので、気軽にトライできますよ！
どんなことをするのか体験してみたい方は、SHElikesの無料体験レッスンで叶います！
Webデザインコースの無料体験もできるので、ぜひ0円で体験してみてくださいね〜！
本記事が参考になりましたら幸いです。