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

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

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

この記事では、CodeCamp(コードキャンプ)のデザインマスターコースを実際に受講した様子を紹介しています。今回は2018年11月20日に受けた第20回目の学習内容です。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ヶ月のスケジュールで学習を進めていきます。

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

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

本日の講師:田子森 聰先生

こんにちは。講師の田子森と申します。 エンジニアとしてのキャリアは
 ・PHP,HTML,CSS,SQL10年
 ・JavaScript7年、 
 ・Ruby5年
程度になります。
大学では地質学、仕事は半導体開発や営業など、気の向くままに転職しておりましたが、そのなかで社内IT化の遅い会社にやきもきして、独学で習得しました。 その後、ITベンチャーで5年ほど修練を積ませていただいた上で現在フリーランスとして活動中です。プログラミングの指導経験は社内の後輩や関連会社社員に対して3年ほど、基礎から(hello worldから)の指導経験がございます。また、塾講師業、家庭教師業もしており、教育関係の会社の運営にも携わっておりますので、基礎から教えるのは得意です。

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

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

1.WordPressの設定

2.表の作成方法

1.WordPressの設定

永尾圭
田子森先生、本日はよろしくお願いします。今回は私の実際の業務内容について相談させていただきたいのですが、よろしいでしょうか?

大丈夫ですよ。どんな内容でしょうか?」

永尾圭
田子森先生はWordPressって詳しいですか?

田子森 聰
もちろん内容にもよりますが、大体のことはお答えできるかと思います。」

永尾圭
実は、現在ワードプレスで作成しているページ内のリンクに以下のような「onclick」タグを設置したいのですが

onclickタグ

永尾圭
onclickタグを設置しても、テキストモードからビジュアルモードに切り替えるとタグが消滅してしまいます。

ビジュアルモード

テキストモード

田子森 聰
なるほど、WordPressの仕様で一部のタグが自動消去されるようになっているんですね。」

永尾圭
そうなんです。実は昔、個人で作成しているサイトで同じ問題に直面したことがあり、その際は以下のタグを「function.php」内に挿入すれば解決できたんです。

onclickを保存するコード

永尾圭
ただ、このコードの意味をちゃんと理解しているわけではないので、これをそのまま会社のサイトに適用していいのか自信がありません。先生はこのコードの意味を解読できますか?

田子森 聰
そういうことなんですね。確かに企業サイトのfunction.php内に変更を加えるのには抵抗がありますよね。

今回のコードを完璧に理解するにはかなり時間がかかるかと思います。例えば8行目の「valid_elements」が急に書かれても僕では何を指しているのか今すぐにはわかりません。

おそらく、WordPressでデフォルトで指定されているコードなのですが、これは一からWordPressを構築するような人でないと把握していないでしょう。

永尾圭
そうなんですね。パッと見てこのコードを挿入しても問題なさそうですかね?

田子森 聰
僕の方からはなんとも言えないですね。セキュリティが弱くなる可能性なども考え出したらキリがないので。このコードが与える影響を全て検証しようとしたら100万円単位の費用かかかることもあります。

ただ、実際に成功したことがあるのなら、僕でしたら社長に事情を説明し、思い切ってコードを入れちゃいますね。一度話してみたらどうですか?

永尾圭
わかりました!一度検討してみようかと思います!

表の作成方法

永尾圭
次の相談です。今サイト内で利用する表を作っているのですが

作成中の表

永尾圭
他のサイトを見ていて参考にしたいデザインがあった場合、先生ならどのような手順でそのサイトのデザインを既存のサイトに反映していきますか?

検証画面を見ながらコードを真似していくのかとは思うのですが実際に作業しているところを見せていただきたいです。

田子森 聰
僕の場合だと、表くらいなら検証画面は見ずに自分で作ってしまいますね。

人によってコードを書くクセみたいなのがあるので、下手に参考にしようとしてもコードがいまいち理解できないことがあるんです。

ただ、確かに昔は他のコードを参考にして自分のコードを作っていたこともありましたし、作り終えた時は実力がついたような実感がありました。

作り方に正解はないので、参考にしたいサイトがあればとりあえず自分なりに真似をしてみれ流のもいいかもしれませんね。」

永尾圭
わかりました。まずは一回自分で作ってみます!

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

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

  • WordPressの設定

  • 表の作成方法

今回は実際に業務で疑問に思っていることを先生に質問しました。

具体的な解決策は見つかりませんでしたが、アドバイスはいただけました。

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

デザインマスターコースの最終日である20日目が終了しました。

学習した期間は合計で2ヶ月間ありましたが、その間でPhotoshopやIllustratorの使用方法を初め多くのことを学習できました。

中でも実際の業務について疑問に思っていることを講師に質問できたことが大きかったかなと思います。講師の方達はWEB業界の先輩と言える人ばかりなので、業務上の悩みに的確に回答いただけたのが非常に助かりました。

このデザインマスターコースえ学習したスキルを今後の業務により一層生かしていきたいです。