はじめてのschoo!「Webデザインの基礎と実習」を受けてみた!

はじめてのschoo!「Webデザインの基礎と実習」を受けてみた!

横井研二

横井研二

はじめまして、LIGライターのよこいです。
LIGでライターになってみたはいいものの、Webのことが全然分からない!

そこで、

オンラインの動画でいろんな授業が受けられるschoo(スクー)で、初心者向けのWebデザインの授業を受けてみました!

schooってなに?

schoo(スクー)とは、生放送授業を無料で受講できるサービスです。YouTubeを見るような感じで、オンラインで授業を視聴できます。

オンラインスクールのスクー!

授業のジャンルは様々で、「サービスの成果に繋げるためのアクセス解析」という授業や、「なぜ工場を持たずにハードウェアを製造出来るのか?」「合コンで活躍する男は、ビジネスでも結果を出す」などなど多岐に渡っています。

教えてくれる先生は、大学の教授や専門学校の講師などではなく、各業界の第一線で活躍する人たちばかりです。面白法人カヤックの代表取締役の柳澤大輔氏や、BHB 代表取締役のシモダテツヤ氏、ビズリーチ代表取締役の南壮一郎氏などなど。
詳しくは過去に登壇した先生一覧をどうぞ。

「みんなで一緒に学ぶ」がコンセプトに、大学の講義のように、決まった時間に教室に集まって受講するスタイル。コメント機能があるので、同じように授業を受けている人たちのリアクションがコメント欄に流れてきたり、授業をしている講師の方に質問できたりするので、先生との対話や学生同士のコミュニケーションが楽しめます!

はじめてのschoo!さっそく授業を受けてみよう!

今回受けた授業は、「Webデザインの基礎と実習」

デザインやりたいと思っても、何から始めていいのかわからない人向けとあったので、自分にぴったりだ!と思い受けてみました。

 

授業開始!

どんな授業なんだろうか…

これが目次

スライドを見せながら説明してくれています。

これが目次ですね。今日はWebデザインの基礎、レイアウト、スケッチ、色、Adobe製品のお話をやると。

レイアウトの4原則

レイアウトの4原則!

急に聞き慣れない言葉がでてきてしまったー。
近接って何だ?

近接ってなんだろう?具体例で分かりやすい!

なるほど!関係のあるものは近づけて、関係のないものは離す。

そうすることによって視覚的に文字とオブジェクトの関連性が理解できると。

基礎的なところから説明してくれているので分かりやすいですね!具体例などを出しながらなので、聞き慣れない単語の意味などもイメージしやすいです。

やっぱデザイナーの方なので、スライドもきれいでわかりやすい。まったくのデザイン初心者僕でも、レイアウトの基礎を理解することができました!

そして一通りレイアウトの話が終わって…

今日のテーマはスケッチ!

スケッチが必要な理由

ここで今日のテーマ「スケッチしよう」とのこと。

初心者が急にフォトショップ開いてもなんもできないから、とりあえず手で書いてみて、Web特有のレイアウトを知ることから始めるといいそうです。

なのでまずは、自分がいい!と思ったウェブサイトのスケッチをして、

  • このサイトのどこがいいと思ったのか?
  • どこが見やすい、使いやすいと思ったのか?
  • よりよくできることはないか?

を考えるようにしてみましょう。

そしてここでスケッチの参考になりそうなサイトの紹介してくれました!

ikesai.com

ikesai.com

S5-Style

S5−Style

1/0 3000

I/O 3000

 

webデザイナーの人たちはこういうサイトを見てるんですね。これをスケッチしてみて、勉強していくと。

目標は一日一枚スケッチを書くことだそうなので、今日から実践してみましょう!

 

そして次に、おさえておきたい色相・配色の基礎の話がありました!

無彩色と有彩色の話色相の話

彩度の話明度の話

有彩色と無彩色、色相などなど、中学校の美術でやった記憶がありますが、すっかり忘れてる部分ですね。

そして、色の組み合わせを選ぶときには…

色のトーンのお話 失敗しない色の選び方!

なるほど!

初心者のうちは感覚で色を選ぶと、トーンや色相がバラバラになってしまって、結果的に見づらいデザインになってしまう。なので失敗しないようにするためには、

  • 同じトーンの中から異なる色相の色を選ぶ
  • 同じ色相の中から異なるトーンを選ぶ

このどちらかに従えば失敗しないと。

ちょっとした違いでも、こういった色選びで最終的な見栄えが大きく変わりますからね。

ちなみに配色を決めていくのに便利なこんなサイトの紹介もありました!

HUE/360

HUE/360

 

色を選択すると、次に選択する色の候補から、最初に選んだ色に合わない色を始めから消してくれます。

これがあれば色選びには失敗しませんね!

 

 

そして最後にフォトショやイラレなどのAdobe製品の役割の違いなどの説明もありました。

Dreamweaverの役割 fireworksの役割 illustratorの役割 Photoshopの役割

ここまでで基礎の授業は終了!

ここからはチャットに寄せられた質問を紹介しながらの質疑応答。

この質疑応答で、授業内容でわからないところや疑問に思ったところを聞いていけるんですね!いろんな質問が寄せられていて、授業終了後もコメント欄で回答してくれてました。

まとめ

はじめてスクーで授業を受けましたがかなり満足しました!無料でこんな風にデザイン講座が受けられるなんて!

今回受けた授業は「Webデザインの基礎と実習」の第一回の「Webデザインの流れと基礎を学ぶ」でした。

デザイン初心者の僕でもわかりやすい授業で、レイアウトや色の選び方について理解することができました。

今後の授業もぜひ受けてみようと思います!まずは一日一枚スケッチを書く!これが目標です!

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

ライターの横井です。神奈川県出身の中日ドラゴンズファンです。フリーでデザインなどをやったりしています。将来の夢はプロ野球選手です。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL