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

WEBデザインを学びたいと考えていても、「Photoshopの機能が多すぎて使いこなせない」「プログラミングが自分にできるかわからない」など、自分で学習を進めることに不安を持つ人は多いはず。

そんな悩みを持つ方は、オンラインでWEBデザインに関するレッスンが受けられるCodeCamp(コードキャンプ)のデザインマスターコースの受講を検討してみてください。

この記事では、CodeCamp(コードキャンプ)のデザインマスターコースを実際に受講した様子を紹介しています。今回は2018年11月12日に受けた第17回目の学習内容です。WEBデザインについて学びたいと考えている方は参考にしてください。

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

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

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

CodeCamp(コードキャンプ)のデザインマスターコースは、未経験の方がwebデザイン・制作スキルを身につけることを目的としたコースです。プログラミング初心者を対象としているため、写真加工・画像作成ツールによる素材作成から、webサイトのデザインやレイアウトを調整し、魅力的に表現するスキルまで、1つのwebサイトを様々な大きさの画面で綺麗に見せるための「レスポンシブデザイン」を学びます。

また、HTML &CSSを用いたコーディングのスキルも身につけられるため、スキルアップしたいデザイナーの方にもおすすめです。

デザインマスターコースの時間・料金プランは以下の通りです。

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

今回は2ヶ月のスケジュールで学習を進めていきます。

それでは、17日目の様子をお伝えします。

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

本日の講師:永田 アミ先生

3DCG、印刷、Webデザインなどの仕事をしていました。 そのためデザイン全般のことは何でも聞いて下さい! PremiereやAftereffectなどの 動画制作についての質問もお答えできると思います。 朝方も入れますのでお気軽にご相談ください。

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

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

・要素の整列方法

・ロゴの作り方

1.要素の整列方法

永尾圭
永田先生、本日はよろしくお願いします。現在Illustratorの最終課題を取り組んでいるのですが、いくつかお聞きしたいことがあり、そちらについて解説いただけたらと思います。

永田アミ
わかりました。よろしくお願いします。最終課題のどこで困ってますか?

永尾圭
はい!まずは今の最終課題の状況を見てください。

作成中の選択課題

永尾圭
今選択している四角形が集まった部分を画面の中央に寄せたいのですが、その方法ががよくわかりません。

永田アミ
わかりました。実はこれは結構悩みやすいところなんです。よく使う機能でもあるのでこの機会に覚えておきましょう。

まずは四角形全てを選択した状態で、オブジェクトメニュー→グループを選びます。

自動選択ツールを使用

永田アミ
その状態で今度は、shiftキーを押しながら背景の灰色の部分をクリックしてください。

背景部分を選択

永尾圭
こんな感じでよろしいでしょうか?

永田アミ
い、大丈夫です。今回はこの背景部分に対して要素を中心にもっていきたいわけですよね。なので、背景部分は動かさないようにしなければなりません。

そのためには、今度はshiftも何も押さずに背景部分をクリックしてください。

背景部分を再度選択

永尾圭
背景部分の選択枠が太くなりました。

永田アミ
そうなんです。これで背景部分が固定され、要素が中心に並んでくれるはずです。それでは選択ツールから整列のコマンドを使って中心に寄せてみましょう。

要素を中心に整列

永尾圭
中央に配置できました。

永田アミ
完璧です。整列機能はサイトのワイヤー作成においても必須の機能ですが迷いやすいところでもあります。しっかり使い方を理解しておきましょう。

2. ロゴの作り方

永尾圭
では次の質問です。最終課題のサンプル画像ですが、奈良のロゴがあるかと思います。

最終課題 サンプル画像のロゴ

永尾圭
いざ、同じようなロゴを作れと言われてもどのように進めればいいのかイメージできません。

一度先生の方でどのようにロゴ作るか解説いただけませんか?先生のロゴの作り方を見れば、他のロゴ作りにも役立つと思うので。

永田アミ
わかりました。それでは一度私の方で作ってみますね。

基本的には、ロゴ作りはまず初めに紙で書くことが多いです。紙で見本を書いてロゴのイメージを固めた上でそ、れをIllustratorで移します。5章で勉強したトレースですね。

今回はPhotoshopで簡単に作成したものを見本に用います。

ロゴの見本

永田アミ
本当はもっと綺麗に見本を作りますが、今回は時間がないのでラフな見本を使っていきます。

あとは、これをなぞるだけなのですが、例えば文字なんかは既存のフォントを使ってもいいと思います。

フォントを追加

永尾圭
文字以外の、鹿や花びらは自分で書けばいいのですか?。

永田アミ
そうですね。今までIllustratorのレッスンで学んできたことを活かせば作れるるはずです。

例えば花びらは、4章のパスファインダーを使います。

パスファインダーによる花びらの作成

永尾圭
そういえばそんな機能ありましたね!忘れていました。

永田アミ
永尾さんの場合だと短い期間で一気にIllustratorを学習しているようなので、知識の漏れがどうしてもあるかと思います。あとで教科書を読み直してみるといいかもですね。

後は鹿の部分をペンツールでうまくトレースすれば完成です。

選択とマスクを使った選択範囲

永尾圭
すごい、めちゃくちゃ作業が早いですね。

永田アミ
私なんてまだまだです。早い人はもうびっくりするくらい早く書くことができます。永尾さんもIllustratorを何度も使って早く作業ができるようになってくださいね。

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

第17回のレッスンで学んだ内容を整理します。

  • 要素の整列方法
  • ロゴの作り方

今回はIllustratorの、整列の仕方とロゴの作り方についての解説をいただきました。

次回以降はBootstrapについて解説いただく予定です。

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

Illustratorのレッスンでした。今回講師の方に実際にロゴを作っていただいたのですが、その手際の良さに驚きました。

自分はまだまだ操作に時間がかかるため、徐々に機能を覚えながら少しづつ作業を早くしていきたいです。

いつかは自分のオリジナルロゴを作る予定です。