おすすめのWebデザイン＆プログラミングスクールを一部紹介！主要なスクール23校は『Webデザインスクールの一覧』でチェックしましょう。
【無料】デザインカンプからのコーディング練習教材
この教材はこちらに移動しました。
コラム①：Webデザイナーを強くオススメする理由
エンジニアになるのは本当に難しいです。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。
でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。
ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。
どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『プログラマカレッジ』に行きましょう。プログラマカレッジは、学校＆就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。
無料のプログラミング学校はもう一つ、『GEEK
JOB』があります。就職率97.8%と驚異的な数字を出しています！よりエンジニア色の強いカリキュラムを受けたい場合はこちらを受講します。
２校ともオススメです。無料見学をしてみて自分に合いそうな雰囲気の学校を選びましょう。
この２つの学校のどちらかに通って、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか
コラム②：正社員のWebデザイナーを強くオススメする理由
このサイトでは、
本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社すること
を強くオススメしています。
Webの最先端に触れられるWeb制作会社に入社し、スキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。
未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強いWebistです。
※現在はコロナの影響でWebistですら未経験OKの求人が少ない状況です。ただ、少しでも選択肢を増やすために、また今後状況が改善されてきた時のために登録しておきましょう。
コラム③：WordPressでポートフォリオサイトを作ろう！
“【無料】デザインカンプからのコーディング練習教材” への19件のフィードバック
ご質問や感想など、お気軽にどうぞ！
管理人（ねこポン）について
週３日だけ会社で働く30代前半ウェブデザイナーです！
インテリ風＆仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。
最近ちょこっと『月曜から夜ふかし』に出演しました↓
なんでもWebの質問受け付け中 (^o^) /♪
on 【3スタの面談に行ってきた】週3日Webデザイナー案件を多く紹介！超頼もしいエージェント: “ポポポポーンさん、はじめまして！ ビビッと心が撃ててよかったです＾＾講師の方が…” 5月 16, 02:06
on 【3スタの面談に行ってきた】週3日Webデザイナー案件を多く紹介！超頼もしいエージェント: “ねこポンさんこんばんわ。現在WEBデザイナーの職業訓練に通っていますがやる気や将…” 5月 12, 23:47
on ポートフォリオ用WordPressテーマ『PORTFOLIOベーシック』マニュアル: “ご親切にありがとうございます。 まずは、記事を見ながらWordPressで実装…” 5月 7, 23:41
おすすめのWebデザインスクール一覧
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 求職者支援訓練 ハロートレーニング |
無料 （教材費のみ） |
通学 （約６ヶ月/週４〜５日） |
Webデザイン | ハローワークによるサポート |
 プロによる総評 |
||||
|
一番おすすめのスクールは国の運営する求職者支援訓練（ハロートレーニング）です。授業料が無料！しかも約６ヶ月という期間がWebデザインの基礎スキルを習得するのに十分な長さです。僕自身も求職者支援訓練を経てWebデザイナーになりました。 失業保険が受給できる方は職業訓練がおすすめです。期間が約３ヶ月と短くやや理解が浅くなる点は不安ですが、復習や独学で補えれば問題ありません。最近は数は２校ほどで少ないですが６ヶ月コースも登場しました！ 参考記事：【無料】職業訓練でWebデザインを学ぶ |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 LIG |
有料 （¥450,000 〜） |
通学 （６ヶ月） |
Webデザイン | 転職セミナーあり/LIGへの採用実績もあり |
| プロによる総評 |
||||
|
金銭的に余裕があればLIGを検討しましょう。超有名Web制作会社LIGによるWebデザインスクールです。現役のプロデザイナーが講師で、Mac＆デュアルディスプレイという最新設備で学べます！LIG運営のコワーキングスペースも無料で使い放題。生徒のレベルによってはLIGへの就職も可能です。 |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 デイトラ |
有料 （¥89,800〜） |
オンライン （90日間/質問期間は1年） |
Webデザイン | なし |
| プロによる総評 |
||||
|
『デイトラ』はかなりコスパの高いオンライン完結型のWeb制作スクールです。格安ながらもデザインとコーディングのレビュー（添削）が受けられます。人気急上昇中でTwitterで受講生のツイートを見ない日はありません。「課題 ＋ 課題のレビューあり ＋ 質問し放題」というサービスを提供しています。 |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 Famm |
有料 （¥162,800） |
オンライン （１ヶ月） |
Webデザイン | なし（案件獲得サポートあり） |
| プロによる総評 |
||||
|
ママさん専用Webデザインスクールです。現在はコロナでライブ配信授業が中心です。なんと授業中は自宅にシッターを手配してくれるのでしっかり集中できます。受講期間は１ヶ月で５日間という超短期間なので、忙しいママさんでも時間を確保しやすいです。生徒はママさんだけなので、ママさん同士の交流も楽しめます。 |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 CodeCamp デザインマスターコース |
有料 （¥148,000 〜） |
オンライン （２ヶ月〜） |
Webデザイン | キャリア支援あり （就職エージェントの紹介） |
| プロによる総評 |
||||
|
CodeCampはオンラインのWebデザインスクールです。低価格ながら講師から直接指導とフィードバックを受けられるのが最大の特長です！おすすめのコースは「デザインマスターコース」。コスパ重視で講師と対話しながら学びたい人に最適なスクールです。 |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 プログラマカレッジ |
無料 | 通学 | プログラミング | あり |
| プロによる総評 |
||||
|
『プログラマカレッジ』は20代限定の通学式で完全無料のプログラミングスクールです。無料なのでエンジニアになりたい方はぜひ挑戦してみてください。スクール側は就業先の企業からお金をもらうことで無料で運営をしています。とはいえ授業の質は高いと評判です。『プログラマカレッジ』の卒業生による体験談記事はこちらです。 |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 GEEK JOB |
無料 | 通学 | プログラミング | あり |
| プロによる総評 |
||||
|
上で紹介した『プログラマカレッジ』と同様の20代限定の通学式で完全無料のプログラミングスクールです。プログラマカレッジは決まった時間に通学しますが、GEEK JOBは個別指導なので自分のペースで通学できます。エンジニアになりたい方は、自分の生活スタイルに合わせてどちらのスクールに行くか検討してみましょう。就職率97.8%は驚異的です！ |
||||
Web制作会社を歩き回れるゲームを作ってみました！ぜひ探検してみてください。(注意：音が出ます！)
ねこぽんさん初めまして！Emiと申します。
昨年からWebサイト制作の学習をしており、いつも楽しく読ませてもらってます！
【無料配布】コーディング練習用デザインと完成版コーディングデータ
のページを見て質問があり連絡させていただきました。
コーディングデータを見せていただき、勉強させてもらってます。
ちょうどSassを使用し始めていましたが、
サイト１つ分のコードを公開されている方がなかなかいなかったのですごく助かります！
コーディング時のの使用方法について質問があります。
例えば、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タグ抜きで書いてください笑
コーディング学習、がんばってください＾＾
ねこぽんさん
早速ありがとうございます！
HTMLは使えないのですね。
ご説明いただいた通りの場所です！
詳しく説明いただきありがとございます。すごく勉強になりました！
勉強頑張ります^ ^
ねこぽんさん初めまして！現役でWEB制作フリーランスをさせていただいているものです。
素晴らしいデザインカンプを拝見させていただきました。
ご相談がありまして、コーディング勉強中の方向けにコーディングノウハウ、ないしはコードレビューをサービスとして提供しようと思っており、こちらのデザインカンプを受講希望者に提示させて頂きたく思いコメント致しました。
ご返信頂けますと幸いです。よろしくお願い致します。
まっちゃんさん、はじめまして！
デザインカンプを活用していただけるのは嬉しいです！
カンプの制作者をサイト上で示した上でぜひ使ってください。下記のような感じで、クレジット表記とリンクをしていただければご自由にお使いいただけます。
—————————————–
このデザインカンプは「未経験からWebデザイナーへ！」による制作です。
https://webdesigner-go.com/
—————————————–
クレジット表記とリンクがあればテキストはおまかせいたします。
コーディングレビューのサービス、応援しております。ぜひ初学者の方が気軽に楽しくコーディングスキルを伸ばせる仕組みをつくっていただきたいです＾＾
よろしくお願いいたします。
ねこポンさん、早速のお返事ありがとうございます！
活用させて頂けるとのことで嬉しく思います！
サービス展開がんばります！
質問です！現在、デザインカンプからのコーディング練習教材の完成版コーディングデータを見ながら学習しているのですが、ヘッダーのリンクタグで、「WORKS」から「NEWS」など飛ぶことができるのですが、「WORKS」から「HOME」。「NEWS」から「HOME」など、
「HOME」ボタンを押すとインデックスファイルが表示されてしまいます。また、ロゴの画像を
押しても同じように表示します。すみませんが解決方法があれば教えていただきたいです。
井上さん、はじめまして！
コーディング練習教材を使ってくれてありがとうございます。
インデックスファイルが表示されましたか。環境によって表示のされ方が異なるのかもですね。
以下ではHTMLはコメント欄で自動で消えてしまうので、<>の括弧を省いて解説しますね。
HOMEへのリンクは、例えばロゴであれば
a href=”.”
と書いていますよね。
今はhrefで飛び先は「.」になっていて、「.」はカレント（現在の）ディレクトリを指すので、
井上さんの今のURLの構造がコーディング例と異なっているとアクセスできなくなってしまいます。
なので、このhrefの飛び先を、
a href=”/”
と「/」にしてルート（一番上のディレクトリ）を指定してみたり、あるいは
a href=”https://xxxxx.com”
と直接URLを指定したりしてみてください。
また不明点があればコメントをください。
ありがとうございます！！
無事に解決しました。
ねこぽんさん、初めまして。
Web制作について勉強中の田中と申します。
素晴らしいデザインカンプを無料で公開いただきありがとうございます。
大変勉強になります。
さて、自分でも制作を始めてみましたが、細かいところで、デザインカンプと、コーディング例で若干異なるところがあり混乱していました。
例としては以下のようなところです。
＋デザインカンプでは、heroの文字色は「#E8E8E8」となっていますが、コーディング例だと「#ffffff」となっている
＋headerのメニューボタンのライン（３本線）の横幅が、デザインカンプでは31px、コーディング例だと30px
このあたりの細かいところは、気にせず、進めて問題ないでしょうか？
実務ではどのようにするのか、教えていただけると幸いです。
以上、よろしくお願いします。
田中さん、はじめまして！
コーディング教材を使っていただいて嬉しいです。ありがとうございます！
>デザインカンプでは、heroの文字色は「#E8E8E8」となっていますが、コーディング例だと「#ffffff」となっている
いまカンプを確認してみましたが、ヒーロー内の文字色は「#FFFFFF」となっていました。heroの文字色というのは具体的にどのテキストの箇所か教えていただけますでしょうか？
>headerのメニューボタンのライン（３本線）の横幅が、デザインカンプでは31px、コーディング例だと30px
こちらは30pxが正しいですね。。31pxはミスです。ご指摘ありがとうございます！
>このあたりの細かいところは、気にせず、進めて問題ないでしょうか？
はい、メニューボタンに関しては30pxで進めちゃってください。実務でもテキトーなデザインカンプと出会うことはどうしても何度もあります。明らかに不自然な箇所はデザイナーに都度確認する必要はありますが、1px程度の差異であれば誤差としてコーダー側で対処することになります。田中さんはコーダーとしてとても優秀な目と意識をお持ちです。こういう箇所を軽くスルーして全くカンプと異なるコーディングをしてしまう人がかなり多いです。コーディングに対すて意識が低くて目の解像度が低いコーダーが本当に多いです。これからも今回のご指摘のように細かくデザインをチェックしてコーディングしていただけると優秀なWeb制作者になれるはずです。
ねこポンさんの教材で練習しております。あきえです。
CSSで、どうしてもわからない箇所があります。
初歩的な質問で恐縮ですが、お手すきの際に、ご教示いただければ幸いです。
どうやってY軸のスクロールバーを半透明に設定しているのでしょうか。画面の上にかぶせているように見えますが、元コード見てもどうやって記述しているのかわかりませんでした。
また、スクロールバーの分を抜いた1920px横幅いっぱいに表示されており、コードをのぞきましたが、100vwもしくはoverflow:hideen;の記述が該当しそうなところに見当たりませんでした。
よろしくお願いいたします。
あきえさん、はじめまして。
Twitterで投稿してくださっていましたね！取り組んでいただいて嬉しいです。ありがとうございます。
>どうやってY軸のスクロールバーを半透明に設定しているのでしょうか。
…すみません、この「Y軸のスクロールバー」とはどの部分でしょうか？？具体的に教えていただけますと助かります。
失礼いたしました。y軸のスクロールバーとは、画面右側に表示される縦のスクロールバーのことでしたが、検証しているうちに、いろいろいじっているうちに消えてしまい、半透明になったようです。
横幅が1920pxになっていたのもその影響です。申し訳ありません。検証や画面の状態に気をつけて質問していきます。
このコーディングにお世話になっております、あきえです。
前回はありがとうございました。
今回は質問が長くなります。お手すきの際に、よろしくお願いいたします。
デザインが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要素については知らなかったので、使ってみようと思います。
以前質問させていただいたノクトンと申します。
ポートフォリオサイトの制作でねこポンさんのデザインカンプを使用させていただきました。
もしよろしければポートフォリオサイトのURLをサイトの部分に入れましたので見て頂ければと思っております。
見ていただいてデザインカンプの使用が問題ないといいのですが
ノクトンさん、こんにちは。
ポートフォリオサイトを拝見しました！掲載の仕方はまったく問題ざいません。そして、カンプに正確でとても綺麗にコーディングしていただいているのでバッチリです！デザインカンプを使ってくださって嬉しいです。