当サイトは、アフィリエイト広告を利用しています

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万円オフ&初月受講料無料キャンペーン開催中

【2021年最新】SHElikes(シーライクス)入会キャンペーン情報

 

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

 

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

 

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

 

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

 

【お得】2月最新シーライクス入会金割引キャンペーン&クーポンを徹底解説!
【4/30まで限定3,8280円オフ】シーライクスキャンペーン&最新クーポンを徹底解説!

続きを見る

 

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

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

 

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

 

講師はSHEの社長!

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

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』がオススメです。

 

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

 

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

 

悩んでる人
ちょっと高すぎるなあ…

 

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

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

 

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

 

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

 

 

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

 

Atom

Atom

出典:https://atom.io/

 

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

 

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

 

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

 

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

 

DAY1:Webデザインとは( 約20分 )

DAY1:Webデザインとは( 約20分 )

 

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

 

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

 

DAY2:デザインの基礎知識( 約35分 )

DAY2:デザインの基礎知識( 約35分 )

 

  1. デザイン基本原則
  2. 配色
  3. レイアウト
  4. タイポグラフィ
  5. 写真

 

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

 

デザインの基本原則

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

 

 

DAY3:Photoshopの基本操作( 約120分+ワーク )

DAY3:Photoshopの基本操作( 約120分+ワーク )

 

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

 

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

 

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

 

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

 

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

 

学ぶこと

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

 

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

 

STEP3:Photoshop演習

 

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

 

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

 

DAY3:Photoshopの基本操作( 約120分+ワーク )

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

 

学ぶこと

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

 

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

 

DAY4:バナー制作をしてみよう( 約60分+ワーク )

DAY4:バナー制作をしてみよう( 約60分+ワーク )

 

  1. デザインのステップ
  2. よく使うテクニック
  3. どちらが適切なデザイン?
  4. バナートレース
  5. 宿題:バナー制作

 

 

STEP1:デザインのステップ

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

DAY4:バナー制作をしてみよう( 約60分+ワーク )

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

 

 

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

 

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

 

STEP4:バナートレース

 

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

 

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

 

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

 

DAY4:バナー制作をしてみよう( 約60分+ワーク )

 

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

 

STEP5:【宿題】バナー制作

 

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

 

STEP5:【宿題】バナー制作

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

 

バナー制作作品例

 

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

 

DAY5:コーディングとは ( 約90分+ワーク )

DAY5:コーディングとは ( 約90分+ワーク )

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

 

 

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

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円で体験してみてくださいね〜!

 

\初月月謝無料&入会金1万円オフ/

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

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

 

本記事が参考になりましたら幸いです。

-Webデザインスクール
-