全取材あり! | エンジニアになれるプログラミングスクールおすすめ5社まとめ

こんにちは、DAIです。現在、CodeCampでWebデザインを学んでみます。この記事では、実際にWebデザインコースを学んだ体験をもとに、

  • CodeCampのデザインマスターコースについて
  • CodeCampの実際のデザインマスターコースの中身について
  • CodeCampのデザインマスターコースを受講した感想と評価

について、書いていきたいと思います。

CodeCamp デザインマスターコースの公式ホームページを見てみる

CodeCampのデザインマスターコースを受講しようと思った理由

CodeCampを受講しようと思った理由です。僕自身は、どちらかというとサーバーサイドエンジニアのスキルと、Webディレクションよりのスキルが高いのですが、Webデザインに関しては何もわからないんですよね。そこで、Webデザインを学びたいと思い、受講してみました。

CodeCampのWebデザインコースについて

CodeCampのWebデザインコースについては、

  • HTML
  • CSS
  • JavaScript
  • jQuery
  • PhotoShop
  • Illustrator
  • Bootstrap

が学べます。これらのスキルをつけると、

  • 未経験からwebデザイン・サイト制作を学び、手に職をつける
  • 在宅・副業・フリーランスなど自由な働き方を目指せる
  • Webデザインーであれば、コーディングスキルを付けてキャリアアップできる

ようになることができます。

CodeCampのデザインマスターコースの料金としては、

  • 2カ月プラン:¥148,000
  • 4カ月プラン:¥248,000
  • 6カ月プラン:¥298,000

となっています。

 

CodeCampの実際のWebデザインコースの中身について

ではでは、実際に受講してみて、コースの中身を見てみたいと思います。

HTML・CSS

HTML・CSSの最終課題では、実際にWebサイトのデザインをゼロから作ります。

 

Bootstrap

Bootstrapでは

最終課題では、Bootstrapを利用したレスポンシブデザインのWebページを作成します。 

課題の内容としては、以下のようになっています。

ResponsiveCookCampを作成しよう
これまで当カリキュラムで勉強してきたことを存分に使って、PC・タブレット・スマートフォンに対応したレスポンジブなWebサイトを制作しましょう。ご自身で調べたり、講師に相談したりしながら指定された要件を満たしてください。まずはできるところまで自力で制作し、楽しみながら自身の力量を測ってみましょう。その上でつまづいた点があればレッスンを受けて講師に相談してください。
課題の進め方として、以下の要件を満たすよう作成していき、1つできるごとに講師に確認をすることを推奨します。
課題を制作後は、要件が満たされているかの自己チェック、および講師による要件やソースコードの確認が終わってから課題の提出を行ってください。
以下のURLから見本ページを閲覧することができます。
見本ページにてブラウザ幅を広げたり狭めたりし、コンテンツの並び順や間隔をよく確認し、最終課題に取り組んでください。
CSSの記述に関しては、Bootstrapのスタイルを直接編集するか、新たなCSSを作成してスタイルを上書きして作成してください。
なお、CodeCampが提供する素材画像を使用することは必須ではありません。

見本ページ:http://codecamp.lesson.codecamp.jp/sample/bootstrap-cookcamp/

ResponsiveCookCamp要件
合格ライン : 指定要件 30/32 以上​を満たす
制作で使用するブラウザ:Chrome ブラウザ
提出方法:課題提出ページより、制作したURLを入力してご提出ください。またコメント欄に「制作に使用したOS」をご記入ください(例、Windows10やMac OSなど)
提出の流れ:要件が満たされているかの自己チェック、および講師による要件やソースコードの確認が終わってから課題の提出を行ってください
注意1) レイアウトは原則見本に沿って作ってください。文字色・背景色・画像は自由に設定していただいて結構です。
注意2) 見本で使用している画像を利用する場合、次のリンクよりダウンロードできます。 素材画像は数が多いため、ファイルアップロード時はFileZilla等のツールの利用が便利です。

素材画像はこちら

全体

ブラウザの横幅を広げたり狭めたりした際に、明らかなレイアウト崩れがないこと。
ロゴとナビゲーション

ロゴはナビゲーションの中央に配置すること。
ナビゲーションは、スマートフォン時には右側にハンバーガーアイコンを配置し、タップ時にアコーディオンメニューを出すこと。
スマートフォン時にはロゴとハンバーガーアイコンは一行で表示されていること。
ナビゲーションメニューにドロップダウンメニューが配置されていること。
PC画面幅の際はテキスト同士の間が実線で区切られていること。
テキストがそれぞれリンクであること。
ナビゲーション下部のカルーセル

カルーセルの横幅は常に100%であること。
カルーセルの左右をクリックした際に、前後に画像送りできること。
カルーセル下部のインジケーターを画像数と同じになるように配置し、クリック時に画像送りできること。
自動で定期的に画像送りすること。(間隔は問わない)
カルーセル下部のフォーム

フォーム部は、PC画面幅の際は左寄せ、それ以下の画面幅の場合は横幅100%とすること。
入力部とボタンがグルーピングされていること。
左サイドメニュー

見出し部にアイコンと下線が表示されていること。
レシピの一覧の各アイテムの間に点線が指定されていること。
PC画面幅以外での表示の際は、料理別レシピではなく、ジャンル別レシピとなっていること。
ジャンル別レシピでは、各アイテムがリスト形式の表示ではなく、ボタン形式の表示となっていること。
新着レシピ

4つのレシピ同士の間隔や画像の大きさは常に均等になっていること。
4つのレシピをマウスオーバーすると、ツールチップが表示されること。(表示位置や表示内容は問わない)
各レシピをクリックすると、モーダルが表示されること。
各レシピのモーダルには、画像・詳細情報・閉じるボタンが表示されていること。
モーダル外側の黒がかっている部分をクリックすると、モーダルが閉じること。
今だからこそ見直したい「和食」

PC画面幅の際は、2カラム構成になっており、画像部と詳細情報部に分かれていること。
PC画面幅の際は、「続きを読む」ボタンは横幅100%ではなく、詳細情報下の中央部に約80%幅ほどで表示されていること。
スマートフォン画面幅の場合は、1カラム構成になっており、画像・詳細情報・ボタンが縦並びになっていること。
スマートフォン画面幅の場合は、「続きを読む」ボタンは横幅100%であること。
簡単!おすすめレシピ

PC画面幅の際は、2カラム構成になっており「画像・詳細情報・ボタン」が縦並びになっていること。
スマートフォン画面幅の場合は、1カラム構成になっていること。
フッターナビゲーション

PC画面幅の際はテキスト同士の間が実線で区切られていること。
テキストがそれぞれリンクであること。
フッターに上線がついており、幅はブラウザの幅100%になっていること。
スマートフォンでの表示時はテキストが縦並びになっていること。

Photoshop

最終課題では、実際にホームページのコンセプト設計からワイヤーフレーム設計まで行い、WebデザインをPhotoshopを利用して行います。以下、実際のカリキュラムをCodeCampから引用しました。

1.Webサイトのコンセプトを立てる

以下の図のコンセプトシートを元にコンセプトを立てていきます。そのサイトでユーザーにどんな行動をしてほしいのか、サイトの目的を明確にすることはとても大切です。デザインをしていく時の指示書として使います。

2.ワイヤーフレームを書く

ワイヤーフレームとはいわゆる「デザインの下書き」です。公開するデザインの元となるもので、Webページ作成時はデザインに入る前に準備します。Webページをデザインする過程で、画面上にどこに何を配置するのかを指定し、本番用のデザインの設計図として利用します。

3.本番用のデザインを作成する

コンセプトシートとワイヤーフレームを元にデザインの清書をします。ここでコンセプトと相違がないかチェックしながら作成すると進めていきやすいです。

4.スライスの作成、アセットの生成(PhotoshopCC以降)

Web用に保存したいオブジェクトの領域を選択し、スライス作成、またはアセットの生成を実行します。

5.Web用に保存

スライス結果、または生成したアセットのオブジェクトをWeb用に保存します。

Illustrator

Ilustratorも、Photoshopコースと同様に、Webサイトのデザインをゼロから作っていきます。

最終課題は、以下のようになっています。

課題

今まで習ったことを活用し、観光のWebページをデザインしてみましょう。作成する地域は自由です。コンセプトシートを作成することからはじめてください。また、カリキュラムに書かれていなかった技術も積極的に使用してみましょう。

以下の要件を確認し、満たすよう作成してください。すべての要件を満たすことが、合格の最低条件となります。不明点があれば講師に相談、確認しましょう。課題を制作後は、要件が満たされているかの自己チェック、および講師による要件やデザインの確認が終わってから課題の提出を行ってください。

  • 合格ライン:すべての要件を満たすことが最低条件
  • 提出方法:上部提出ボタンより、提出物(以下参照)をご提出ください。

【提出物】

  • コンセプトシートのAIデータ
  • 観光サイトのAIデータ
  • 観光サイト(パーツごと)をスライス機能で書き出したpng、jpgデータ

ファイルの容量は提出物すべてを含め100MB以下で提出してください
超えてしまう場合は画像の解像度を調整してください。
※提出する課題の容量によって提出完了までに時間がかかる場合があります

【要件】

  • コンセプトシートを完成させてください
  • 10-4②のワイヤーフレームを使用してください(レイアウトは変更せずにデザインだけ起こしてください)
  • サイズはai-practice-sample.pngと同じ1280px × 1620pxで作成してください
  • デザインに使う写真画像、画像の切り抜きの形、ボタンの形、配色などはコンセプトに合わせて変えてください
  • ai-practice-sample.pngにあるボタンやカレンダー、地図などの要素はすべてデザインし、配置してください
  • ロゴ、アイコン、地図、カレンダーなどはすべてパスで作成し、ラスタイズしないでください
  • 文字はすべてアウトライン化してください
  • 画像はすべて埋め込みを行ってください

【参考】

オススメの写真画像ダウンロードサイト

※写真画像は解像度を高いものを使用するようにしましょう

 

 

≫CodeCamp デザインマスターコースの公式ホームページを見てみる

 

CodeCampのデザインマスターコースを受講した感想と評価

CodeCampのデザインマスターコースを受講していて、普通にいいなぁと思いました。

というのも、実際にWeb制作の案件を請け負うためには、ここで学ぶスキルが最低限必要なんですよね。試しにクラウドソーシングのWebサイト「クラウドワークス」の案件を見てみましょう。

こちら、エンタープライズ向け新サービスのLP制作ですが、

  • 単価:¥108,000
  • 必要スキル:HTML/CSS, jQuery, Photoshop

となっています。

また、自身で作ったLP案をもとに提案するので、Webデザイン案をPhotoshopやIllustratorで作れて、その後HTML、CSSでコーディングまで行える必要がありますね。

逆に言うと、CodeCampで実際にこのコースを完了させるころには、実際にポートフォリオとして自分のWebページが公開できるわけですね。

さらに、CodeCampでは現役エンジニアがいるので、学習が早ければ受講中に案件獲得することも不可能ではありません。

≫CodeCamp デザインマスターコースの公式ホームページを見てみる

最後に

ということで、CodeCampのデザインマスターコースを受講してみて、思ったことなどを書いてみました。

≫CodeCamp デザインマスターコースの公式ホームページを見てみる