おすすめのWebデザイン＆プログラミングスクールを一部紹介！主要なスクール23校は『Webデザインスクールの一覧』でチェックしましょう。
【無料】デザインカンプからのコーディング練習教材
この教材はこちらに移動しました。
コラム①：Webデザイナーを強くオススメする理由
エンジニアになるのは本当に難しいです。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。
でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。
ほとんどの人がエンジニアにはなれないので、50〜60万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。
どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『プログラマカレッジ』のようなスクールに行きましょう。プログラマカレッジは、学校＆就職支援の一体型サービスです。
無料のプログラミング学校は他にも、『GEEK
JOB』があります。就職率97.8%と驚異的な数字を出しています！よりエンジニア色の強いカリキュラムを受けたい場合はこちらを受講します。
他にも、PHPに特化した無料の『無料PHPスクール』もあります。PHPはがっつりプログラミングの言語である一方で、ECサイト構築やWordPressにも使われるWeb系と親和性が高い言語なので、Web系に進みたい人には無料PHPスクールはオススメです。23日間通学でけっこうハードなカリキュラムです。
この３つの学校のどれかに通って、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。無料見学をしてみて自分に合いそうな雰囲気の学校を選びましょう。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか
コラム②：正社員のWebデザイナーを強くオススメする理由
このサイトでは、
本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社すること
を強くオススメしています。
Webの最先端に触れられるWeb制作会社に入社し、スキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。
未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強いWebistです。
※現在はコロナの影響でWebistですら未経験OKの求人が少ない状況です。ただ、少しでも選択肢を増やすために、また今後状況が改善されてきた時のために、ポートフォリオを制作後に登録しておきましょう。
コラム③：ポートフォリオのチェックリストをnoteで販売中！
「ポートフォリオを作ってみたけど不安...」「周りにレビューをしてくれる人がいない...」
そんなお悩みを解決するために、ポートフォリオのチェックリストを作りました！27,000文字以上の大ボリュームです笑。noteで販売中です。激安のワンコイン500円です。このチェックリストで改善点を見つけて、少しでもポートフォリオの質を上げて、自分が望む就職に繋げましょう！
“【無料】デザインカンプからのコーディング練習教材” への35件のフィードバック
ご質問や感想など、お気軽にどうぞ！
管理人（ねこポン）について
週３日だけ会社で働く30代前半ウェブデザイナーです！
インテリ風＆仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。
最近ちょこっと『月曜から夜ふかし』に出演しました↓
なんでもWebの質問受け付け中 (^o^) /♪
おすすめの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 Webデザイン副業コース |
有料 （¥148,000 〜） |
オンライン （２ヶ月〜） |
Webデザイン | キャリア支援あり （就職エージェントの紹介） |
| プロによる総評 |
||||
|
CodeCampはオンラインのWebデザインスクールです。低価格ながら講師から直接指導とフィードバックを受けられるのが最大の特長です！おすすめのコースは「Webデザイン副業コース」。コスパ重視で講師と対話しながら学びたい人に最適なスクールです。 |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 プログラマカレッジ |
無料 | オンライン | プログラミング | あり |
| プロによる総評 |
||||
|
『プログラマカレッジ』は20代限定のオンラインの完全無料のプログラミングスクールです。無料なのでエンジニアになりたい方はぜひ挑戦してみてください。スクール側は就業先の企業からお金をもらうことで無料で運営をしています。とはいえ授業の質は高いと評判です。『プログラマカレッジ』の卒業生による体験談記事はこちらです。 |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 GEEK JOB |
無料 | オンライン | プログラミング | あり |
| プロによる総評 |
||||
|
上で紹介した『プログラマカレッジ』と同様の20代限定のオンラインの完全無料のプログラミングスクールです。よりエンジニア色の強いカリキュラムを受けたい場合はこちらを受講します。就職率97.8%は驚異的です！ |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 無料PHPスクール（ドリームシアター） |
無料 （デポジットあり） |
通学 | プログラミング | あり |
| プロによる総評 |
||||
|
こちらも上で紹介した『プログラマカレッジ』『GEEKJOB』と同様の完全無料のプログラミングスクールです。特徴的なのはオンラインではなく通学式で、学習するプログラミング言語をPHPに絞っている点です。PHPはがっつりプログラミング言語である一方で、ECサイト構築やWordPressで使われるなどWeb系と親和性が高い言語なので、Web系の会社で働きたい人にはこのスクールがオススメです。23日間という短期間でハードめなカリキュラムな分、未経験でも内定２社を保証してくれます！校舎がある池袋に通学できる方が対象です。 |
||||
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をサイトの部分に入れましたので見て頂ければと思っております。
見ていただいてデザインカンプの使用が問題ないといいのですが
ノクトンさん、こんにちは。
ポートフォリオサイトを拝見しました！掲載の仕方はまったく問題ざいません。そして、カンプに正確でとても綺麗にコーディングしていただいているのでバッチリです！デザインカンプを使ってくださって嬉しいです。
ねこポンさん、はじめまして。ナツツバキと申します。
独学でwebコーディングを勉強中で、難易度別にデザインカンプがあり、しかも無料ということで、絶賛活用させていただいております。(ついに上級編まで来れました！)
さて、上級編について質問したい箇所があります。
コーディングというより、XDの操作方法になってしまうかもしれませんが…
RECRUIT-採用情報ページにある画像を書き出しすると、斜めに切れた(トリミング)状態で保存されてしまします。元の四角の形状のまま保存したい場合はどうしたら良いでしょうか。
自分で調べてみたのですが、出てこなかったため質問させていただきます。
宜しくお願い致します。
ナツツバキさん、はじめまして！
無料コーディング練習所にトライしていただき嬉しいです。
ちゃんと一つずつ入門編から始めて上級編までやってくださったんですね〜！
>RECRUIT-採用情報ページにある画像を書き出しすると、斜めに切れた(トリミング)状態で保存されてしまします。元の四角の形状のまま保存したい場合はどうしたら良いでしょうか。
あ、、ここはどうしてもそのまま書き出すと、斜めに切れた状態で書き出されてしまいますね…。本来、業務の上ではデザイナー側がXDのファイル上に斜めに切れていない画像を用意すべきですね。申し訳ないです。。一応、画像の上で右クリックをして「Photoshopで編集」をクリックし、Photoshopで開けば元々の画像が表示はされます。
近いうちに斜めになっていない画像をXD上に別途掲載しておき、XDのファイルを更新しておきます。ご指摘ありがとうございます。
コーディング例より画像を保存して作業は進めていたのですが、実案件で同じ状況になったらどうすればいいか不安だったので…こういうこともあるのだと分かり、確認して良かったです。
次からは迷いなくデザイナーさんにお願いできそうです。
ご回答ありがとうございました(^o^)
加えて、質問したいことがあるのですが、プロの方々はデザインカンプをもらってからコーディングが完了するまで計何時間くらい掛かるのでしょうか。上級編だけでなく中級編なども大体の作業時間を教えていただけると嬉しいです。
宜しくお願い致します。
ナツツバキさん、こんにちは。
なるほど、コーディング例から画像をDLして使ってくれてたんですね。。お手数おかけしちゃいました。。
工数ですが上級編は一週間（７人日）くらいですかね〜。一日８時間換算として56時間とかそんな感じでしょうか。正直僕は工数管理が苦手で制作会社で働いてた時は予想の３倍くらい掛かっちゃってました。今も苦手なのでちょっとなんとも言えないですね。中級編は１と２は３〜４人日程度、３は５人日程度かと思います。
時間を意識したコーディングは大事ですね。でも慌てすぎず、破綻しにくい質を大事にしたコーディングを心がけると良いと思います。
ご回答ありがとうございます。
これまであまり時間を気にせず取り組んでいたのですが、そろそろ実案件にも目を向ける頃かと思ったので、目安として聞いてみました。
まだまだ力不足ですが、正確さや保守性を大事にしながら、効率的に時間を短縮できるようにこれからも精進したいと思います。
ありがとうございました。
ねこぽんさま、こんなに便利なHPを無料で提供していただきありがとうございます。
twitterでリツイートしたところやはり需要があるようでいいねが多くつきました。
私自身は完全な初心者から言語を学び、さてスクール。。。というところでここに出会い、さっそく初級から始めたのですが、「書き出しってなに？」のところから学ばせていただいています。笑
質問なのですが、「作業フォルダをProject Managerに設定しよう」の場面でVScodeに作成したファイルをドラッグして移したのち、「Ctrl＋Shift＋E」を押すと入力欄にProjectManajerの文字が入力できるとなっていますが、いくら押しても特にVSCode上に変化が起こりません（入力欄が出てこない）。なにかが間違っているとは思うのですが、この操作をする際にフォルダをカーソルでクリックしていないといけない、または新しいテキストファイルを開いておく等前提条件があるのでしょうか。
やきにくさん、はじめまして！
無料コーディング練習所を利用してくださって嬉しいです。やっぱり書き出し方法などの解説も大事なようですね！少しずつ進めていただければいいと思います＾＾Twitterでの宣伝もありがとうございます。
あああ！ホントすみません！！Project Managerのショートカットですが、
誤：Cmd（Crtl）＋Shift＋E
正：Cmd（Crtl）＋Shift＋P
ですね！
EではなくてPでした…。それで試していただけますか？もしそれでもダメならまた教えてください。記事の方も直しておきました。
早いお返事ありがとうございます。
さっそく「Ctrl＋Shift＋P」で試したところ、出てきました…！
ただそこから「Project Manajer」で検索しても「一致するコマンドがありません」と出てきます(:_;)
これも事前準備がなにか必要なんでしょうか？
やきにくさん、お、出てきてよかったです！
あら、コマンドでてきませんか。拡張機能の「Project Manajer」自体はインストールされていますかね？
【準備編】コーディングの基礎スキルの習得方法とエディタの設定など
https://webdesigner-go.com/coding-practice/introduction/
VSCodeの拡張機能については、準備編に詳しく書いているのでまだ読んでいなければ↑こちらを読んでみてください。
初めまして
以前からこちらのコーディング練習を活用させて頂いており、とても勉強になっております。
ありがとうございます。
本題に入らせて頂きますが
去年の5月に職業訓練校のWebデザインコース(3ヶ月)に入り8月に卒業しました
その後、11月にWebデザイナー募集と嘘をついていた会社に入社しWebデザインと全く関係の無い仕事をしたり色々と条件が合わずモヤモヤしていた頃、
訓練校に通ってる最中にTwitterで知り合った方から一緒に仕事をしないか？というお誘いがあり、前職を5月に退職し、6月からその方の所でお世話になる事にしました。
(その方のお仕事はコーディングオンリーです。)
しかし、今まで勉強をしてきた事を殆ど憶えておらず全く戦力になりませんでした。
その為、6月の半ば頃から無給で勉強期間を頂き今日までの間に2サイト程テストとして作ったのですが、どちらも制作期間に全く間に合わず合格する事が出来ませんでした。
どちらもゼロから勉強した人でも、最低でも5日程で終わるようなレベルの課題だったらしいのですが、1サイト目は約1ヶ月、2サイト目は3日で半分程度の仕上がりでした。
(2サイト目に関しては、私が3日程で出来ると思うと言った為そこで終了になりました。)
その為、本日、今月一杯で雇用契約を終了するという事が決まりました。
以前から遠回しに向いていない事も告げられており、私自身もそう思います。
余りにも成長スピードが遅く、すごく困らせてしまっていました。
しかし、Webデザインを続けたいという気持ちもあり、違う仕事をしながら勉強を続け、再度この業界へ戻ってこようかなとも思っています。
Twitter等でよく見かける、訓練校に入って勉強始めた方やオンラインスクール(？)の方達はすごく出来ているのに、自分がここまで勉強しても出来ないのは才能が無いからというのがわかっているので、
正直ちゃんとスキルが身に付くのかという不安もあります。
なので、最悪はWebデザインではなくWeb関係に関わる仕事をしたいなと思っているのですが、パッと浮かんできません。
何かそういった方向でのお仕事や、今後のアドバイス等がありましたらご教示をお願いします。
拙い文章での長文失礼しました。
ほむらさん、はじめまして！
なかなか思うように力が発揮できず、歯がゆい思いをされてきたと思います…。これまで一生懸命がんばってこれたことは素晴らしいことだと思います。
今後のことを考えると、ほむらさんもご自身で考えているように、大きく２つの観点がありそうですね。
1. 向き不向きは関係なく、好きならWebデザインを続ける
2. スパッとWebデザインは諦めて、他のWeb・IT系、あるいは全く別の職種を目指す
1. 向き不向きは関係なく、好きならWebデザインを続ける
僕なんかはまさにこれですが、向き不向きとか関係なく、デザインとコーディングが大好きで、仕事も趣味も関係なく永遠にサイトを作り続けています。僕にとっては向き不向きは関係ないです。もしほむらさんもすごくWebデザインが好きなら、周りから何を言われても気にせず、趣味かあるいはどうにか仕事としてもコーディングをし続けていくのがいいと思います。好きこそものの上手なれなので、仮に才能が全く無いにしても、さすがに数年もやり続けていれば少しずつは上達はしていくはずです。下手の横好きという言葉もありますがそれは気にせずに笑。
ただWebデザインに夢中になれる人って意外に少ないので、あまり現実的ではないかもですね…。でももし、仕事ではなく趣味でやるコーディングが楽しいと思えるのなら、他の仕事をしつつも空いている時間にコーディングをし続けて、やがて自信を持てた時に再度コーダーやWebデザイナーとして転職活動をしてみるのがいいと思います。
なので、この１を選ぶ場合は「何を言われても自分はWebデザインを続けていきたいのか？」と自問してみるのがいいと思います。
2. スパッとWebデザインは諦めて、他のWeb・IT系、あるいは全く別の職種を目指す
コーディングは決して誰でもできる仕事ではないので、自分を責めず落ち込む必要は無いです。僕が通っていた求職者支援訓練でも、結局Webデザイナーになった人って20人中６人程度だったように記憶しています。残りの人はなれず元の仕事に戻っていったりしましたよね。できないものはやっぱりできないのは仕方ないことです。
よくTwitterでWeb制作系インフルエンサーが「努力したら必ずWebデザイナーになれます！」みたいなことを言っていると本当に腹が立ちます。どうしても向いていないならスパッと辞めたほうがいいはずです。自分に少しでも向いていることをやるべきです。TwitterのようなSNSでは努力信仰・根性論をふりかざし、自分のサロンやコンサルへ誘導するやり方が蔓延しています。Twitterで活躍している人なんて全体の１〜２割程度で、目立って見えるだけです。まったく気にしなくていいです。
僕は元々エンジニアになりたくて、ある会社にアルバイトで入りましたが、まったくついていけませんでした…。そこで、「Webデザイナーならなれるかな？」と思って、どうにかなれました。そんなふうに近い職種を探してみるのは確かにいいアイデアだと思います。
Webデザイナーと近い職種は、IT・Web系の仕事ではこのへんでしょうか。
・エンジニア
・Webマーケッター
・Webディレクター
・Webマスター（Webサイト運営者）
・SNSマーケッター
・動画編集者
・ブロガー、アフィリエイター
・ライター
・YouTuber
気になるものを少し勉強してみて、自分が好きになれるか確かめてみるといいですね。
この中で現実味があるのがWebマスターですかね。WebメディアやECサイトの運営者ですね。最低限のWebデザインの知識を持ちつつ、アクセス解析したり施策を考えたり。Webマスターを目指すなら、これは地味にすごくいいと思うのですが、趣味でコーディングを続けながら、そこから学んだことを自分で作ったブログにまとめていくと良いです。ブログはコーディングがテーマじゃなくてもいいです。例えばお花とか何か別に趣味があるなら、お花のブログとかですね。アクセスが集まることを意識してブログを作ってそれがうまくいけば、WebマスターやSEOライティング・アクセス解析として実績にはなりえます。興味があればその道を模索してみてもいいですね。
僕に言えるのはこれくらいですかね…。僕もこのブログを運営しているわけですが、記事を書いたり、こうやってコメントで交流ができたり楽しいですよ。なので、Webデザイン＋αで、ブログだったり、動画だったり、他にもWeb系以外でも気になることを探して見つけてトライしてみるのがいいかもですね！
>しかし、Webデザインを続けたいという気持ちもあり、違う仕事をしながら勉強を続け、再度この業界へ戻ってこようかなとも思っています。
これもとてもいいと思います。
またご質問や進捗などあればいつでもコメントをください＾＾あとこの記事はそろそろ消してしまうので、次回はどの記事でもいいので別の記事のコメント欄からコメントをお願いします。
ねこぽん様
お初にかかります。webデザイナーを目指しておりますmEloWと申します。
私は半年間職業訓練に行った後、ハローワーク求人にあった職業先に就職しました。
しかしその職場の人と性格が合わなかったのと、以前より通院していた病院で長期の入院が決まったことをきっかけにおよそ８ヶ月ほどで退職を致しました。
現在は療養中につき休職中です。
最近ようやく落ち着いてきたので仕事の復帰を考え、現在webポートフォリオの作成をしています。
ただ、webポートフォリオを作成していく中で思った以上に時間を要しているため、早めに仕事復帰を考えている私の中に焦りがあります。
長くなりましたが、以下がお尋ねしたい質問になります。
一度別の職場にアルバイトとして働き、その期間中にポートフォリオを作成しつつ新しい就職先を探す方法と、
時間を掛けてもいいからポートフォリオをしっかり作成して、web制作ができる会社にアルバイトとして就職して正社員を目指す方法、の２つを考えております。
アルバイトとして就職する理由は、半年間ではありますが再度入院する予定があり、仕事に穴が開けてしまうためだからです。
これからwebデザイナーとして就職していくのにどちらが有利であるのか、ご教示願えたら幸いです。
長々と失礼しました。
mEloWさん、はじめまして。
職場での人間関係や入院など大変なことが多かったですね…。
ご質問の「別の職場」というのは、Web系ではない職場ということですよね。そうなると、このご質問はもちろん後者の「時間を掛けてもいいからポートフォリオをしっかり作成して、web制作ができる会社にアルバイトとして就職して正社員を目指す方法」がベターかと思います。このサイトで多くのコメントに回答してきましたが、ポートフォリオの質が低いことで、選べる会社の選択肢が減って、ブラックな会社に入ってしまう人が多いです。なので、時間を掛けられる限りは、ポートフォリオ制作に時間を割いてその内容を充実させた方がいいですね。
ただ、このご質問をするということは、なかなかそこまで時間を掛けられず、一旦別の職場でアルバイトをしつつ生計を立てる必要があるということですかね。もちろんまずは生活することが最重要なので、そうせざるを得ない状況であれば一度別の職場でアルバイトをすることになると思います。
どちらを選ぶにしても、「質の高いポートフォリオを作ること」これに尽きますね。
ねこポン様
お忙しい中、返信をいただきありがとうございます。
分かりにくい質問で大変申し訳ございませんでした。
ねこポン様が仰った通りでございます。
別の職場＝Web系以外の職場です。
やはりポートフォリオの質が職場の質なのですね。
頂いたアドバイスをもとにまずはよその場所でアルバイトをしつつ、より良いポートフォリオの作成に励みたいと思います。
ポートフォリオが出来上がり次第、こちらへ提出しに参りたいと考えておりますので、その際は何卒よろしくお願い申し上げます。
長々と失礼いたしました。
そうですね、しっかり勉強をした上で、ポートフォリオを充実させていくのが大事です。
ポートフォリオはこちらに提出しても困ってしまいます笑。添削などはやっていません。メンタなどのサービスで添削してくれる方を見つけてみてください＾＾
ねこポン様
お返事が遅くなり申し訳ございません。
その節は大変失礼いたしました。
メンタ等のサービスにて添削依頼を考えてみます。
色々とご教示いただきありがとうございます。
長々とお付き合いいただきありがとうございました。
アドバイスを元に頑張ります。