CodeCamp（コードキャンプ）デザインマスターコースレビュー・感想｜６日目

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

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

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

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

引用：CodeCamp（コードキャンプ）

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

引用：CodeCamp（コードキャンプ）

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

引用：CodeCamp（コードキャンプ）

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

デザインマスターコース6日目｜CodeCamp（コードキャンプ）

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

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

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

引用：CodeCamp（コードキャンプ）

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

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

中村先生、本日はよろしくお願いします。早速なんですが、Photoshopの最終課題を作成したので、チェックしていただきたいです。

わかりました。早速見てみましょう。

Photoshop最終課題の提出物

いいですね。

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

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

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

わかりました。

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

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

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

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

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

それは便利そうですね。どうやればいいんですか？

まず、保存したい各パーツの名前の後に「.png」をつけてあげます。

レイヤーパネル　変更前

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

レイヤーパネル　変更後

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

保存された各パーツ

本当ですね。

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

そういうことです。

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

2.Illustratorについて

ありがとうございます。

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

せっかくなのでこのままIllustratorに入っていきましょう。

Illustratorですね。楽しみです！よろしくお願いします。

それでは、まずはPhotoshopとIllustratorの違いから説明していきます。

Illustrator教科書の一部

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

Illustrator教科書の一部

Illustratorではベクター画像と言われ、座標（点）とセグメント（点から点までの線）の情報を計算して表現します。

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

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

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

デザインマスターコース6日目の成果と課題｜CodeCamp（コードキャンプ）

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

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

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

デザインマスターコース6日目の感想｜CodeCamp（コードキャンプ）

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

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

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

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

CodeCampの無料体験を申し込む

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

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

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

引用：CodeCamp（コードキャンプ）

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

CodeCampの無料体験を申し込む