CodeCamp(コードキャンプ)デザインマスターコースレビュー・感想|6日目

無料でプログラミングを体験できます

下のリンクよりお申し込み頂けます。お申し込みから受講までオンラインで完結。開発環境は必要無し。パソコンとネット環境があればお試し可能です。

エンジニアと1対1のライブ講義を体験する 

1週間カリキュラムを体験する 

こんにちは。コードキャンプ株式会社が運営するプログラミングスクール「CodeCamp(コードキャンプ)」でプログラミングを学習している永尾です。

永尾圭
初めまして。永尾圭と申します。

オンラインでプログラミングのレッスンが受けられるコードキャンプでは、現在7種類の講義を扱っています。おしゃれなWEBサイトを作ってみたいと思っていた私は、7種の講義の中でも、PhotoshopやIllutrator、HTML &CSS、さらにはJavaScriptまで学習できる「デザインマスターコース」を受講することにしました。

私が受けているコースは「デザインマスターコース」です。HTML/CSSなどWebデザインを行う上では欠かせないコーディングの知識に加えて、PhotoshopやIllustratorの使い方までマスターできる内容です。

受講回数は2ヶ月(20回)、4ヶ月(40回)、6ヶ月(60回)の3つから選べます(今回は2ヶ月間受講します)。

さらに、CodeCamp(コードキャンプ)の「デザインマスターコース」には厚生労働省の「教育訓練給付制度」が適用されるため、最大6万円のキャッシュバックが受けられる可能性もあり、非常にお得です!!

それでは、2018年10月14日に受講した、Codecamp(コードキャンプ)「デザインマスターコース」第6回目の学習内容をレビューします

デザインマスターコース6日目|CodeCamp(コードキャンプ)

本日の講師:中村淑子先生

講師業を始めてから20年以上。ウェブデザインの初級・中級科の職業訓練指導員を主に行いながら、商工会のパソコン教室・各セミナーなどを多数担当してまいりました。本業は、マーケティングやSEO対策なども含めたWebディレクター兼Webデザイナーです。HTML/CSS/bootstrap を使ったコーディング。JavaScript/jQuery/PHPプログラムを使った。トータルでのサイト作成を行なっています。

制作実績は主にクライアント様のご要望の多いWordpressでの構築を合わせて大小50サイト以上の実績があります。プラグインやテーマも自作で作ります。

引用:CodeCamp(コードキャンプ)

第6回目のレッスンで学んだことは以下の内容です。

CodeCamp(コードキャンプ)デザインマスターコース第6回目のレッスン内容

  1. 最終課題のチェック

  2. Illustratorについて

1.最終課題(WEBページの作成)のチェック

永尾圭
中村先生、本日はよろしくお願いします。早速なんですが、Photoshopの最終課題を作成したので、チェックしていただきたいです。
中村淑子先生
わかりました。早速見てみましょう。

Photoshop最終課題の提出物

中村淑子先生
いいですね。

統一感もちゃんと出せていてよく出来ていると思います。諸々の要件はちゃんと満たせていますか?

永尾圭
それについて、いくつか聞きたいことがあります。

まず要件に『カフェサイト(パーツごと)をスライスまたはアセット機能で書きだしをしたpng、jpgデータを提出』とありますが、どのようにすれば各パーツのpng、jpgデータを掻き出せますか?

中村淑子先生
わかりました。

パーツの書き出しについては簡単にできる方法があるので紹介します。一つの方法は、レイヤーパネル内の書き出したい要素を右クリックして、『書き出し』をクリックすることです。

保存したいパーツの書き出し

中村淑子先生
ただし、大規模のサイトを作った場合、一つひとつパーツの書き出しを行うのはかなり手間がかかります。

そんなとき便利なのがアセット機能です。

アセット機能だと作成中のpsdデータを上書き保存しただけで指定のパーツが全てpngデータで保存してくれるんです。

永尾圭
それは便利そうですね。どうやればいいんですか?
中村淑子先生
まず、保存したい各パーツの名前の後に「.png」をつけてあげます。

レイヤーパネル 変更前

中村淑子先生
「キービジュアル」や「フッター」などのカタカナはアセット機能で読み込まないので、名前は全てアルファベットにしてください。

レイヤーパネル 変更後

中村淑子先生
この状態で上書き保存をしてあげるだけで、自動的にphotoshopのフォルダに保存されます。

保存された各パーツ

永尾圭
本当ですね。

自動的に保存さてています。ということはつまり画像を作成の段階から、書き出したいパーツは名前に「.png」をつければいいんですね。

中村淑子先生
そういうことです。

たまに「.png」をつけても保存されない場合があるので、その際は初めに説明した個別に書き出す方法を使うと良いでしょう。

2.Illustratorについて

永尾圭
ありがとうございます。

これで最終課題を提出できそうです。レッスン時間が10分余っているのですがどうしましょう。

中村淑子先生
せっかくなのでこのままIllustratorに入っていきましょう。
永尾圭
Illustratorですね。楽しみです!よろしくお願いします。
中村淑子先生
それでは、まずはPhotoshopとIllustratorの違いから説明していきます。

Illustrator教科書の一部

中村淑子先生
Photoshopのレッスンでも簡単に説明しましたが、PhotoshopとIllustratorの一番の違いは扱う画像形式です。

Illustrator教科書の一部

中村淑子先生
Illustratorではベクター画像と言われ、座標(点)とセグメント(点から点までの線)の情報を計算して表現します。

だから、拡大してもキレイな線のままなんです。そのためよく拡大縮小されるロゴやイラストを作成する際にIllustratorは使われます。

逆にグラデーションなど、色を使った複雑な表現がIllustratorは苦手だったりしますね。曖昧だけど複雑に表現するものはPhotoshop、単純だけどはっきりと表現したいものはIllustratorと覚えておくと良いでしょう

永尾圭
わかりました。次回のIllustratorのレッスンまでに軽く操作しておきます。

デザインマスターコース6日目の成果と課題|CodeCamp(コードキャンプ)

第6回を受講して学んだことと、次回に向けた課題について整理します。

  • 最終課題のチェック
  • Illustratorについて

今回は、Photoshopの最終課題のチェックを主にしてもらえました。ミスしやすい場所のアドバイスもいただけたので、参考にしながら修正を反映させます。

Illustratorについては、現在進行中のJavaScriptのレッスンが終了すれば始める予定です。そのため次回のレッスンではJavaScriptの学習をする予定です。

デザインマスターコース6日目の感想|CodeCamp(コードキャンプ)

ついにPhotoshopの最終課題を終えることができました。全ての講義を終えての感想は「意外とあっさりしていたな」というのが正直ところです。

しかし、Photoshopの機能は一通り使えるようになりましたし、何より講師の方の実践に基づいたアドバイスが聞けたのは非常に有意義たっだと思います。

Photoshopは使えば使うほど新しい発見があるツールです。そのため、作りたいものがあったらどんどんPhotoshopを活用していきたいです。

次回からまたJavaScriptの学習を頑張ります。

CodeCamp(コードキャンプ)の「デザインマスターコース」とは

CodeCamp(コードキャンプ)の「デザインマスターコース」は、Webデザイナーになるために必要な知識を基礎から実践まで学べるコースです。

>>無料体験レッスン受講で10,000円OFFクーポンプレゼントキャンペーン実施中

CodeCamp(コードキャンプ)「デザインマスターコース」の料金

2ヶ月
  • 料金:148,000円(税抜)
  • レッスン回数:20回
  • 受講期間:60日間
  • 週の学習時間目安:20〜25時間
4ヶ月
  • 料金:248,000円(税抜)
  • レッスン回数:40回
  • 受講期間:120日間
  • 週の学習時間目安:10〜15時間
6ヶ月
  • 料金:298,000円(税抜)
  • レッスン回数:60回
  • 受講期間:180日間
  • 週の学習時間目安:5〜10時間

LINE@無料相談

無料で相談する

編集部がプログラミングスクール選びのアドバイスをさせて頂きます。「スクールがたくさんあり過ぎてどれを選べば良いのか分からない」「どの言語を勉強すれば良い?」「転職に有利なスクールはどこ?」など、どんな質問でもOKです!気軽にご連絡ください★