SHElikesのWebデザイン入門コース徹底解剖！

SHElikesの数あるコースの中でも特に人気、かつSHElikesでも力を入れている（と思われる）Webデザインコース。

現役シーメイト（SHElikes会員）である私、ちのこがWebデザイン入門コースを受講完了したので、
レッスン内容やどんなことができるようになるかなど、
実際に私が作成したものも載せて詳しくお伝えします！

SHElikesのWebデザインコースは

と、3つありますが、今回はWebデザイン入門コースについてレビューします。

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

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

デザインを学ぶならまずはここから！SHElikesの定番コースです。
Webデザインの教養レベルの基礎知識を習得していきます。
Webデザインを基礎から学びたいと考えている方におすすめのコースです。

• 受講に必要なツール

・Adobe Photoshop
・Visual Studio Code（無料）

• ここがポイント

・Webデザインのことを何も知らなくても大丈夫
・デザインやプログラミングの基礎が学べる
・短期間で効率的にWebデザインについて学べる

• こんな人におすすめ

・転職/副業/フリーランスの為に、スキルを身に付けたい方
・デザインやプログラミングの基本を理解し、仕事に活かしたい方

講師はSHEの社長

講師はSHE株式会社代表取締役社長の福田恵里さんです。

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

DAY1では、これから学ぶ全体像を掴むこと、そしてWebデザイナーの働き方や役割を学びます。

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

DAY2では、デザインの基礎知識やテクニックを身に付けます。

DAY3　Photoshopの基本操作（約120分＋課題）

DAY3から、いよいよPhotoshopを使います！

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

先生の言ったことを見よう見真似でここまでできました！

【学んだこと】

・画像の挿入・色味の調整
・白抜き文字（境界線）
・ドロップシャドウ
・カーブ文字
・カラーオーバーレイ
・波線
・図形のグラデーション
・アンカーの追加

DAY４.バナー制作をしてみよう（約60分＋課題）

01. デザインのステップ

02. よく使うテクニック

03. どちらが適切なデザイン？

04. バナートレース

05. 宿題：オリジナルバナーを制作してみよう

06. SHEデザインドリルに挑戦してみよう！

07. SHE｜SNSクリエイティブコンペに参加してみよう！

DAY4ではデザイン制作の手順を理解し、一人でバナー制作に取り組めるようになることが目標です！

01. デザインのステップ

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

また、バナーの制作要件から、グルーピングをしたり、優先度を付けたりすることで、
伝わるバナーを順を追って学びます。

02.よく使うテクニック 

デザインでよく使う6つのテクニックを学びます！
覚えたテクニックを踏まえて、NG例とOK例を見て、知識を深めます。

03.どちらが適切なデザイン？

02で学んだテクニックを考えながら、2択問題で更に知識を定着させます。

04. バナートレース

　バナートレース = 既存のバナーを模写すること✍

• 既存のバナーを真似ることで、効率よくデザインツールの使い方を習得する
• 既存のバナーを観察・分析することで、デザインを見る目を養う

つまり、バナートレースはデザインの基礎力を身に付けるために最適な練習ということです！

そして私が行ったバナートレース＆分析がこちら！

こんな感じでまとめておけば、ポートフォリオに載せることもできます◎

05. 宿題：オリジナルバナーを制作してみよう

そして初めての宿題！

こんな感じで制作要件が出されるので、それに合うように作ります。

そして私が作成したのがこちらです！

課題を提出すると、TA（ティーチング・アシスタント）の方からフィードバックがいただけます。

それを元にブラッシュアップしたものがこちら！

うん、当たり前ですがこちらの方がより見やすく、わかりやすくなりました

06. SHEデザインドリルに挑戦してみよう！

ここまで学習お疲れ様でした！

バナートレース／バナー制作をもっと練習したい方は、
SHEデザインドリルを使ってPhotoshopを使用した演習問題に挑戦できます。

SHEデザインドリルとは
お題に沿って実際に手を動かし、制作物の完成を目指す演習型コンテンツです。

分かりづらいポイントや、応用テクニックは解説動画があるので、安心して取り組めます◎

DAY5.コーディングとは （約90分＋課題）

DAY5ではwebサイトがどのように作られているかを知り、HTML/CSS文法の基礎を身に付けるのが目標です！

コーディングという言葉自体、初めて聞くという方も多いかもしれません。
私もそうでした。

HTML	CSS	Javascript
情報を配置する	装飾する	動きをつける
テキストにタグを付けて 各部分の意味を表す	色や大きさを変えるなど 見た目の部分を装飾する	アニメーションなど 動きの部分をつける

ここからは、Visual Studio Codeを使用して実際にコードを書いていきます。

　　　　　

全ての講義を終えると筆記試験があり、それに合格すると修了証がもらえます！

SHElikesのWebデザイン入門コースの感想

入門コースなので、満遍なく基礎を学んだ感じです。
特に私はコーディングは完全なる未経験から始めたのですが、
自分の指示通りにホームページが出来上がっていく様はとても快感でした。

私は最終的にはホームページが作れるようになりたいので、
更に具体的なWeb制作の手順やスキルが身につくWebデザインコースも受講してみようと思います！

良かったところ

デザイン初心者でもわかりやすいように丁寧に解説されており、
楽しく知識が身につけられる

Photoshopを使ったことがなくても安心して始められる

総じて未経験の方向けにとても丁寧に解説されているので、
パソコンに慣れていない方や、Photoshopを初めて触る方でも安心して学べるようになっています。

悪かったところ

・Photoshopの講座は少ししかないので、実践的な技術を習得するには自分でやっていくしかない
　⇨自分で調べながら勉強できない人には難しい

・コーディングは最初に大枠のテキストが用意されているので、実際に自分で一からコードが書けるか不安
⇨数をこなして慣れるしかない！

良かったところでもお伝えした通り、Webデザイン入門コースは初心者向けに作られているので、
Webデザインの勉強をしたことがある方には簡単すぎるかもしれません。

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

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

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

Webデザインのもくもく会はほぼ毎日開催！

まとめ

いかがでしたでしょうか？

この記事では、 SHElikesの『Webデザイン入門コース』を徹底的にレビューしました！

最後にポイントのおさらいです！

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

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

SHElikesのWebデザイン入門コースについてもっと詳しく知りたい方は、
ぜひ無料体験をお試しください！

実際のWebデザイン入門コースの講義の体験もできるので、
どんな雰囲気で進めていくか、詳しくわかりますよ。

無料体験のレポもありますので、こちらもぜひご覧ください！