Webの最新トピックを配信中!

【無料】デザインカンプからのコーディング練習教材

この教材はこちらに移動しました。

 

 

 

 

 

 

コラム①:Webデザイナーを強くオススメする理由

エンジニアになるのは本当に難しいです。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。

でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。

ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。
どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『プログラマカレッジ』に行きましょう。プログラマカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。
無料のプログラミング学校はもう一つ、『GEEK JOB』があります。就職率97.8%と驚異的な数字を出しています!よりエンジニア色の強いカリキュラムを受けたい場合はこちらを受講します。
2校ともオススメです。無料見学をしてみて自分に合いそうな雰囲気の学校を選びましょう。
この2つの学校のどちらかに通って、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。

参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

無料のプログラミング学校『プログラマカレッジ』の詳細を読む
コラム②:正社員のWebデザイナーを強くオススメする理由

このサイトでは、
本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社すること
を強くオススメしています。

Webの最先端に触れられるWeb制作会社に入社し、スキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。

未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強いWebistです。 ※現在はコロナの影響でWebistですら未経験OKの求人が少ない状況です。ただ、少しでも選択肢を増やすために、また今後状況が改善されてきた時のために登録しておきましょう。

『Webist』公式サイトへ
コラム③:WordPressでポートフォリオサイトを作ろう!
ポートフォリオ用WordPressテーマ PORTFOLIOベーシック
テーマ制作者の顔

ねこポン
(テーマ制作者)

「手軽に自分らしいポートフォリオサイトが作れたらなぁ」という想いでこのWordPressのテーマを作りました。格安の1980円で提供しています!

ぜひ、このテーマをテンプレートとして自分らしいポートフォリオを作ってみてください♪WordPressの学習にも最適です。

“【無料】デザインカンプからのコーディング練習教材” への19件のフィードバック

  1. emi より:

    ねこぽんさん初めまして!Emiと申します。
    昨年からWebサイト制作の学習をしており、いつも楽しく読ませてもらってます!

    【無料配布】コーディング練習用デザインと完成版コーディングデータ
    のページを見て質問があり連絡させていただきました。

    コーディングデータを見せていただき、勉強させてもらってます。
    ちょうどSassを使用し始めていましたが、
    サイト1つ分のコードを公開されている方がなかなかいなかったのですごく助かります!

    コーディング時のの使用方法について質問があります。

    例えば、index.html内のタグ直下に
    がありますが、
    このタグはどのような役割のためにあるのでしょうか?

    .wrapperには特にスタイルなどは設定されていないと思うのですが、
    メンテナンス性が高くなるなどの理由があるのでしょうか?

    上記と同様にindex.html内NEWSセクション内にある
    についても、
    このdivはなくてもデザインは再現されるかと思うのですが、
    付けておいた方が良い理由などありますでしょうか?

    独学でコーディングの学習をしておりまして、
    さらに知識を深めていきたいので教えていただけたら嬉しいです!
    よろしくお願いします。

    • ねこポン より:

      emiさん、はじめまして!
      コーディングデータを使っていただきありがとうございます^^
      たしかにまるっとダウンロードOKなコーディング教材みたいなの少ないかもですね。

      どうやらコメント欄ではセキュリティの関係でHTMLのタグは消えてしまうようです…すみません。推測しながら回答していきますね。

      >例えば、index.html内のタグ直下にがありますが、このタグはどのような役割のためにあるのでしょうか?

      これはwrapperクラスのことですかね。僕はほぼ必ず全体をwrapperで囲みます。おっしゃるとおりメンテナンス性が高いと考えています。下記が理由です。

      ・ページ全体に適用したいCSS(例えばbackground-color)があるが、独自のCMSなどを使っていて仕様によってはbodyタグにclassを当てられない場合があるためwrapperクラスを用意しそれにCSSを適用する
      ・主にスマホで原因不明の横スクロールが発生した場合に、wrapperにoverflow-x:hiddenを当てて一時的に横スクロールを防ぐ(後で根本的な原因を突き止めるまでの緊急対応として)
      ・スクロール時にヘッダーを上部にposition:fixedで固定した際にwrapperにpadding-top:70px(ヘッダーの高さの例)を指定することがある

      >上記と同様にindex.html内NEWSセクション内にあるについても、このdivはなくてもデザインは再現されるかと思うのですが、付けておいた方が良い理由などありますでしょうか?

      これは何だろう…news__headingのことですかね。。
      見出しは単純にh2だけでもいいのですが、見出しっていろいろ拡張したりしますよね。右側に「もっと見る」ボタンを置いたり、見出しの下にちょっと一言を入れたり。そうなると事前にh2を見出しエリアとしてのdivで囲っておいてそこにmargin-bottomなどを適用するのが自然な気がします。「もっと見る」ボタンを作る際にはそのdivの中にサッと作れます。
      とはいえ小規模なサイトならh2だけでも全然いいと思います。無駄なタグが増えると見通しが悪くなりますもんね。今まで事業会社で働いてきて改修改修ばかりしてきたので、、h2とか見出しのタグがむき出しだと怖い病気にかかってしまっているのです。。

      ご指摘の点は上記で間違っていないでしょうか?間違ってたら教えてください。なんとかHTMLタグ抜きで書いてください笑
      コーディング学習、がんばってください^^

      • emi より:

        ねこぽんさん
        早速ありがとうございます!
        HTMLは使えないのですね。

        ご説明いただいた通りの場所です!
        詳しく説明いただきありがとございます。すごく勉強になりました!
        勉強頑張ります^ ^

  2. まっちゃん より:

    ねこぽんさん初めまして!現役でWEB制作フリーランスをさせていただいているものです。
    素晴らしいデザインカンプを拝見させていただきました。

    ご相談がありまして、コーディング勉強中の方向けにコーディングノウハウ、ないしはコードレビューをサービスとして提供しようと思っており、こちらのデザインカンプを受講希望者に提示させて頂きたく思いコメント致しました。
    ご返信頂けますと幸いです。よろしくお願い致します。

    • ねこポン より:

      まっちゃんさん、はじめまして!

      デザインカンプを活用していただけるのは嬉しいです!
      カンプの制作者をサイト上で示した上でぜひ使ってください。下記のような感じで、クレジット表記とリンクをしていただければご自由にお使いいただけます。

      —————————————–
      このデザインカンプは「未経験からWebデザイナーへ!」による制作です。
      https://webdesigner-go.com/
      —————————————–
      クレジット表記とリンクがあればテキストはおまかせいたします。

      コーディングレビューのサービス、応援しております。ぜひ初学者の方が気軽に楽しくコーディングスキルを伸ばせる仕組みをつくっていただきたいです^^

      よろしくお願いいたします。

      • まっちゃん より:

        ねこポンさん、早速のお返事ありがとうございます!
        活用させて頂けるとのことで嬉しく思います!

        サービス展開がんばります!

  3. 井上 有里菜 より:

    質問です!現在、デザインカンプからのコーディング練習教材の完成版コーディングデータを見ながら学習しているのですが、ヘッダーのリンクタグで、「WORKS」から「NEWS」など飛ぶことができるのですが、「WORKS」から「HOME」。「NEWS」から「HOME」など、
    「HOME」ボタンを押すとインデックスファイルが表示されてしまいます。また、ロゴの画像を
    押しても同じように表示します。すみませんが解決方法があれば教えていただきたいです。

    • ねこポン より:

      井上さん、はじめまして!
      コーディング練習教材を使ってくれてありがとうございます。

      インデックスファイルが表示されましたか。環境によって表示のされ方が異なるのかもですね。
      以下ではHTMLはコメント欄で自動で消えてしまうので、<>の括弧を省いて解説しますね。

      HOMEへのリンクは、例えばロゴであれば
      a href=”.”
      と書いていますよね。
      今はhrefで飛び先は「.」になっていて、「.」はカレント(現在の)ディレクトリを指すので、
      井上さんの今のURLの構造がコーディング例と異なっているとアクセスできなくなってしまいます。

      なので、このhrefの飛び先を、
      a href=”/”
      と「/」にしてルート(一番上のディレクトリ)を指定してみたり、あるいは
      a href=”https://xxxxx.com”
      と直接URLを指定したりしてみてください。

      また不明点があればコメントをください。

  4. 田中 より:

    ねこぽんさん、初めまして。
    Web制作について勉強中の田中と申します。

    素晴らしいデザインカンプを無料で公開いただきありがとうございます。
    大変勉強になります。

    さて、自分でも制作を始めてみましたが、細かいところで、デザインカンプと、コーディング例で若干異なるところがあり混乱していました。

    例としては以下のようなところです。
    +デザインカンプでは、heroの文字色は「#E8E8E8」となっていますが、コーディング例だと「#ffffff」となっている
    +headerのメニューボタンのライン(3本線)の横幅が、デザインカンプでは31px、コーディング例だと30px

    このあたりの細かいところは、気にせず、進めて問題ないでしょうか?
    実務ではどのようにするのか、教えていただけると幸いです。
    以上、よろしくお願いします。

    • ねこポン より:

      田中さん、はじめまして!
      コーディング教材を使っていただいて嬉しいです。ありがとうございます!

      >デザインカンプでは、heroの文字色は「#E8E8E8」となっていますが、コーディング例だと「#ffffff」となっている
      いまカンプを確認してみましたが、ヒーロー内の文字色は「#FFFFFF」となっていました。heroの文字色というのは具体的にどのテキストの箇所か教えていただけますでしょうか?

      >headerのメニューボタンのライン(3本線)の横幅が、デザインカンプでは31px、コーディング例だと30px
      こちらは30pxが正しいですね。。31pxはミスです。ご指摘ありがとうございます!

      >このあたりの細かいところは、気にせず、進めて問題ないでしょうか?
      はい、メニューボタンに関しては30pxで進めちゃってください。実務でもテキトーなデザインカンプと出会うことはどうしても何度もあります。明らかに不自然な箇所はデザイナーに都度確認する必要はありますが、1px程度の差異であれば誤差としてコーダー側で対処することになります。田中さんはコーダーとしてとても優秀な目と意識をお持ちです。こういう箇所を軽くスルーして全くカンプと異なるコーディングをしてしまう人がかなり多いです。コーディングに対すて意識が低くて目の解像度が低いコーダーが本当に多いです。これからも今回のご指摘のように細かくデザインをチェックしてコーディングしていただけると優秀なWeb制作者になれるはずです。

  5. あきえ より:

    ねこポンさんの教材で練習しております。あきえです。
    CSSで、どうしてもわからない箇所があります。
    初歩的な質問で恐縮ですが、お手すきの際に、ご教示いただければ幸いです。

    どうやってY軸のスクロールバーを半透明に設定しているのでしょうか。画面の上にかぶせているように見えますが、元コード見てもどうやって記述しているのかわかりませんでした。
    また、スクロールバーの分を抜いた1920px横幅いっぱいに表示されており、コードをのぞきましたが、100vwもしくはoverflow:hideen;の記述が該当しそうなところに見当たりませんでした。
    よろしくお願いいたします。

    • ねこポン より:

      あきえさん、はじめまして。
      Twitterで投稿してくださっていましたね!取り組んでいただいて嬉しいです。ありがとうございます。

      >どうやってY軸のスクロールバーを半透明に設定しているのでしょうか。
      …すみません、この「Y軸のスクロールバー」とはどの部分でしょうか??具体的に教えていただけますと助かります。

      • あきえ より:

        失礼いたしました。y軸のスクロールバーとは、画面右側に表示される縦のスクロールバーのことでしたが、検証しているうちに、いろいろいじっているうちに消えてしまい、半透明になったようです。
        横幅が1920pxになっていたのもその影響です。申し訳ありません。検証や画面の状態に気をつけて質問していきます。

  6. あきえ より:

    このコーディングにお世話になっております、あきえです。
    前回はありがとうございました。
    今回は質問が長くなります。お手すきの際に、よろしくお願いいたします。

    デザインが2つで違う場合、カンプ優先にするかコーディング優先にするか、お伺いしたくてコメントいたしました。
    全体的にはカンプ優先にしましたが(そもそもカンプをベースにしてよろしいでしょうか。ただし、background-colorなど、過去のを見てカンプの方が間違っていそうな場合はコーディングの方を参照しています)、
    カンプとコーディング、どちらが正なのかわからない部分があったため、質問させていただきます。
    厳密なコーディングをしようと思ったきっかけは、
    「コーディングに対して意識が低くて目の解像度が低いコーダーが本当に多いです。」の過去のコメントを見てどきっとしたからです。(今までカンプをもとにしたコーディングについて、そこまで厳密な人が周りにいなかったのです)
    そこで自分のコーディングに対し、厳しい目を持ってやろうと思いました。

    header
    1.グローバルナビのfont-sizeがカンプでは15pxなのが、コーディングでは14pxで設定されております。letter-spacingがカンプではカーニングが60(0.06em)相当→コーディングでは0.1emで設定されております。
    2.headerのガイドによるとpadding-bottomが40pxに設定されているみたいですが、コーディングでは30pxで設定されております。
    3ヒーローヘッダー右下のscrollに関しまして、
    カンプにはカーニング(lettar-spacing)がありませんでしたが、コーディング上では0.06emのletter-spacingで設定されております。

    news
    1.日付のletter-spacingはカンプでは1emでしたが、コーディング上では設定されておりません。

    footer
    padding-bottomがカンプでは60pxですが、コーディングでは30pxで設定されております。

    タブレット/スマホ
    ・タブレット時の画面全体(あるいはセクションごとにかかっている)paddingはカンプの20px、コーディングの15px、どちらの方がよろしいでしょうか。

    切り出し時についても質問します。
    XDの画像ですがカンプから切り出し時、サイズが小さい画像を切り出すため、
    タブレットで画像がwidth100%時に解像度が低い場合がございます。
    実務だとデザイナーに中に入っている画像を解像度の高い画像に変更するよう、お願いする形にすると思いますが
    (イラレだと張り付けた画像の解像度が高かった場合、サイズが小さくても元の解像度で出力できますが、XDだとできないみたいです)、
    もし今回の条件で切り出しについてオススメの方法があったら教えてください。

    何卒よろしくお願いいたします。

    • ねこポン より:

      あきえさん、こんにちは。
      かなりちゃんとコーディング教材に取り組んでいただいていて嬉しいです。
      目の解像度の話も参考なったのなら良かったです!

      >デザインが2つで違う場合、カンプ優先にするかコーディング優先にするか、お伺いしたくてコメントいたしました。
      デザインが見本であり最優先です。コーディング例はあくまで例なので、わからない箇所があれば参考程度にしておいてください。
      ただ、グローバルナビのフォントサイズなどがデザインカンプと違っており混乱させてしまってすみません。。デザインカンプ上の15pxが正しいです。僕の場合、どうしてもコーディングし始めてみて、あ、1px小さい方がいいわとなって調整してしまうことがあります。letter-spacingについても同様です。これはデザイナーとコーダーが同一人物ならかろうじて許されるかもしれませんが、原則、デザインカンプにすべてを合わせてください。

      >2.headerのガイドによるとpadding-bottomが40pxに設定されているみたいですが、コーディングでは30pxで設定されております。
      これは具体的にどこの箇所かわかりませんが、XD特有のline-heightの問題があり関連しているかもしれません。下記の記事を参考にしてください。

      -Adobe XDのstack機能を使ってline-heightを考慮したデザインを作る
      https://www.mitsue.co.jp/knowledge/blog/frontend/202012/17_0900.html

      XDの行間とCSSのline-heightがちょっと違うんですよね。なので、XD上でmarginやpaddingが30pxだとしても、特に複数行や大きな文字のmargin-bottomなどは20pxなど値を小さくしたりしてカンプに近づけるようにしています。これは地味に大事なので↑の記事をぜひ読んでみてください。デザイン作成の際にプラグインを使ったりこの記事のようにスタックを使ったりしていますね。

      その他もいくつかご指摘いただいてますが、コーディング上での調整以上に、いまコーディング例を見てみるとちょっとカンプと開きがある部分が多いですね笑。それは単純に僕のミスの部分も多いので、いまコーディング教材をリニューアル中なので、これを機会にカンプもコーディング例も修正しておきます。ご指摘、助かりました。

      >切り出し時についても質問します。
      理想はデザイナーが事前に高解像度の画像をXD上で用意したり書き出しておいてくれるのですが、なかなかそんな優しいデザイナーはいませんし、忙しくて画像を用意できなかったりします。なので、コーダー側でwidth100%状態でも表示が荒れないくらい大きな画像にして、それから書き出しておくのが一番ラクだと思います。具体的には、XD上で対象の画像をバウンディングボックス?を引っ張って単純に大きくして書き出すのでいいかと思います。ただあまり大きな画像を一個だけ使い回しすぎてもサイトが重くなるので、必要に応じてpicture要素でレスポンシブで画像を切り替えたりして調整したりします。

      -レスポンシブイメージはpicture要素で!
      https://www.internetacademy.jp/blog/ja/2016/04/20160417-hiroki.html

      今回の話でいうと、「タブレットで画像がwidth100%時に解像度が低い場合がございます。」ということなら、タブレット(768px)で荒れないくらい大きな画像つまり2倍の横幅1536pxの画像(中途半端なのでいっそのこと1600pxでもOK)をコーダー側で用意して反映しておけばいいと思います。

      回答がご質問の意図とずれていたらすみません。またご質問があればいつでもコメントをください。

      • 昭恵 より:

        お礼遅くなってすみません、ありがとうございます。
        色々丁寧に教えてくれて、本当にありがとうございます!
        カンプ最優先にすること、承知しました!

        ・すみません、headerのpapping-bottomが40pxについてなんですが、カンプではlogoを基準に数えてみてガイド線までの距離が40pxだったのです(内側のpappingということになります)グローバルナビ下も確認しようと思います。
        line-height時のスタック機能、勉強になりました。カンプ作りのとき、地味に困っていたところでもあります。
        カンプ作る時にやってみようと思います。

        ・もし低解像度のままだと荒れてしまう場合、切り出す時はバウンディングボックスで引き伸ばして、荒れないようするといいのですね。300pxのまま書き出し時にx3にしても、荒いまま書き出されて困っていたところでした。
        picture要素については知らなかったので、使ってみようと思います。

  7. ノクトン より:

    以前質問させていただいたノクトンと申します。

    ポートフォリオサイトの制作でねこポンさんのデザインカンプを使用させていただきました。
    もしよろしければポートフォリオサイトのURLをサイトの部分に入れましたので見て頂ければと思っております。
    見ていただいてデザインカンプの使用が問題ないといいのですが

    • ねこポン より:

      ノクトンさん、こんにちは。
      ポートフォリオサイトを拝見しました!掲載の仕方はまったく問題ざいません。そして、カンプに正確でとても綺麗にコーディングしていただいているのでバッチリです!デザインカンプを使ってくださって嬉しいです。

ご質問や感想など、お気軽にどうぞ!

みなさまからのコメントを元に記事を作成することありますので、あらかじめご了承ください。
メールアドレスが公開されることはありません。
こちらで承認後にコメントは表示されます。
* が付いている欄は必須項目です。

  • 管理人(ねこポン)について

    週3日だけ会社で働く30代前半ウェブデザイナーです!
    インテリ風&仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
    現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。

    ★ 僕の20代まるごと黒歴史ストーリー

    最近ちょこっと『月曜から夜ふかし』に出演しました↓

    ★ 『月曜から夜ふかし』にちょこっと出演したら『BizSPA!』さんにインタビューしてもらいました!

    お問い合わせはこちら

  • なんでもWebの質問受け付け中 (^o^) /♪

  • 無料コーディング練習所 デザインカンプ・コーディングデータ付いてます。
    ポートフォリオ用WordPressテーマ作りました!PORTFOLIOベーシック
    スクール23校をまとめました!Webデザインスクール一覧

    おすすめのWebデザインスクール一覧

    おすすめのWebデザイン&プログラミングスクールを一部紹介!主要なスクール23校は『Webデザインスクールの一覧』でチェックしましょう。

    スクール名 料金 授業形式 ジャンル 就職支援

    求職者支援訓練
    ハロートレーニング
    無料
    (教材費のみ)
    通学
    (約6ヶ月/週4〜5日)
    Webデザイン ハローワークによるサポート
    プロによる総評

    一番おすすめのスクールは国の運営する求職者支援訓練(ハロートレーニング)です。授業料が無料!しかも約6ヶ月という期間がWebデザインの基礎スキルを習得するのに十分な長さです。僕自身も求職者支援訓練を経てWebデザイナーになりました。
    東京にはWebデザイナー系の訓練校は6校ほどあり、各地域にも1〜3校ほどは見つかるため、どんな人も通いやすいのもおすすめのポイントです。
    ふだん税金を払っているので、このようなスクールはしっかり活用させてもらいましょう笑。


    失業保険が受給できる方は職業訓練がおすすめです。期間が約3ヶ月と短くやや理解が浅くなる点は不安ですが、復習や独学で補えれば問題ありません。最近は数は2校ほどで少ないですが6ヶ月コースも登場しました!
    スクール名 料金 授業形式 ジャンル 就職支援

    LIG
    有料
    (¥450,000 〜)
    通学
    (6ヶ月)
    Webデザイン 転職セミナーあり/LIGへの採用実績もあり
    プロによる総評

    金銭的に余裕があればLIGを検討しましょう。超有名Web制作会社LIGによるWebデザインスクールです。現役のプロデザイナーが講師で、Mac&デュアルディスプレイという最新設備で学べます!LIG運営のコワーキングスペースも無料で使い放題。生徒のレベルによってはLIGへの就職も可能です。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    デイトラ
    有料
    (¥89,800〜)
    オンライン
    (90日間/質問期間は1年)
    Webデザイン なし
    プロによる総評

    『デイトラ』はかなりコスパの高いオンライン完結型のWeb制作スクールです。格安ながらもデザインとコーディングのレビュー(添削)が受けられます。人気急上昇中でTwitterで受講生のツイートを見ない日はありません。「課題 + 課題のレビューあり + 質問し放題」というサービスを提供しています。

    デザイン力とコーディングスキルはレビューをしてもらってこそ急速に成長するため、かなりオススメのスクールです。というか今のところ低価格で他にデイトラのようなスクールが存在しないんですよね...。通学式のスクールに40、50万円も払う余裕はないけど、デザインやコーディングのレビューはしてほしい!という方はデイトラを受講しましょう。

    Twitter内にはデイトラの受講生がかなり多くいるので、一緒に学習を頑張る仲間も見つけられます。

    デザインを重点的に学びたい方は「Webデザインコース」、コーディングスキルを高めたい方は「Web制作コース」を受講しましょう。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    Famm
    有料
    (¥162,800)
    オンライン
    (1ヶ月)
    Webデザイン なし(案件獲得サポートあり)
    プロによる総評

    ママさん専用Webデザインスクールです。現在はコロナでライブ配信授業が中心です。なんと授業中は自宅にシッターを手配してくれるのでしっかり集中できます。受講期間は1ヶ月で5日間という超短期間なので、忙しいママさんでも時間を確保しやすいです。生徒はママさんだけなので、ママさん同士の交流も楽しめます。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    CodeCamp
    デザインマスターコース
    有料
    (¥148,000 〜)
    オンライン
    (2ヶ月〜)
    Webデザイン キャリア支援あり
    (就職エージェントの紹介)
    プロによる総評

    CodeCampはオンラインのWebデザインスクールです。低価格ながら講師から直接指導とフィードバックを受けられるのが最大の特長です!おすすめのコースは「デザインマスターコース」。コスパ重視で講師と対話しながら学びたい人に最適なスクールです。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    プログラマカレッジ
    無料 通学 プログラミング あり
    プロによる総評

    『プログラマカレッジ』は20代限定の通学式で完全無料のプログラミングスクールです。無料なのでエンジニアになりたい方はぜひ挑戦してみてください。スクール側は就業先の企業からお金をもらうことで無料で運営をしています。とはいえ授業の質は高いと評判です。『プログラマカレッジ』の卒業生による体験談記事はこちらです。

    詳しくはこちら

    スクール名 料金 授業形式 ジャンル 就職支援

    GEEK JOB
    無料 通学 プログラミング あり
    プロによる総評

    上で紹介した『プログラマカレッジ』と同様の20代限定の通学式で完全無料のプログラミングスクールです。プログラマカレッジは決まった時間に通学しますが、GEEK JOBは個別指導なので自分のペースで通学できます。エンジニアになりたい方は、自分の生活スタイルに合わせてどちらのスクールに行くか検討してみましょう。就職率97.8%は驚異的です!

    詳しくはこちら

    Web制作会社を歩き回れるゲームを作ってみました!ぜひ探検してみてください。(注意:音が出ます!)

    一番上へ