&#x3053;&#x3093;&#x306B;&#x3061;&#x306F;&#xFF01;&#x666E;&#x6BB5;&#x3046;&#x3047;&#x3076;&#x30B9;&#x30BF;&#x3067;&#x306F;&#x3001;web&#x30C7;&#x30B6;&#x30A4;&#x30F3;&#x3084;&#x30D7;&#x30ED;&#x30B0;&#x30E9;&#x30DF;&#x30F3;&#x30B0;&#x3092;&#x52C9;&#x5F37;&#x4E2D;&#x306E;&#x5B66;&#x751F;&#x3055;&#x3093;&#x306B;&#x5411;&#x3051;&#x305F;&#x52C9;&#x5F37;&#x304A;&#x60A9;&#x307F;&#x89E3;&#x6C7A;&#x3059;&#x308B;&#x305F;&#x3081;&#x306E;&#x60C5;&#x5831;&#x767A;&#x4FE1;&#x3092;&#x3057;&#x3066;&#x3044;&#x307E;&#x3059;&#xFF01; &#x904B;&#x55B6;&#x30E1;&#x30F3;&#x30D0;&#x30FC;&#x306F;6&#x4EBA;&#x3044;&#x3066;&#x3001;&#x305D;&#x306E;&#x4E2D;&#x3067;&#x3082;&#x79C1;&#x306F;&#x30C7;&#x30B6;&#x30A4;&#x30F3;&#x306B;&#x3064;&#x3044;&#x3066;&#x767A;&#x4FE1;&#x3057;&#x3066;&#x3044;&#x308B;&#x306E;&#x3067;&#x3059;&#x304C;&#x3001;&#x4ECA;&#x56DE;&#x306F;&#x3046;&#x3047;&#x3076;&#x30B9;&#x30BF;&#x306E;&#x30AF;&#x30DE;&#x306E;&#x4E2D;&#x306E;&#x4EBA;&#x300C;&#x3053;&#x3070;&#x3084;&#x3057;&#x305F;&#x3044;&#x3088;&#x3046;&#x300D;&#x306B;&#x3064;&#x3044;&#x3066;&#x3044;&#x308D;&#x3044;&#x308D;&#x7D39;&#x4ECB;&#x3057;&#x3066;&#x3044;&#x304D;&#x307E;&#x3059;&#xFF01; <h2>&#x30D7;&#x30ED;&#x30D5;&#x30A3;&#x30FC;&#x30EB;</h2><blockquote>&#x540D;&#x524D;&#xFF1A;&#x5C0F;&#x6797;&#x5927;&#x967D;(&#x3053;&#x3070;&#x3084;&#x3057; &#x305F;&#x3044;&#x3088;&#x3046;) &#x51FA;&#x8EAB;&#xFF1A;&#x6ECB;&#x8CC0;&#x770C;(&#x7435;&#x7436;&#x6E56;&#x3057;&#x304B;&#x306A;&#x3044;&#x3088;&#xFF08;&#xFF3E;&#x3C9;&#xFF3E;&#xFF09;) &#x8DA3;&#x5473;&#xFF1A;&#x30FB;&#x30D5;&#x30A1;&#x30C3;&#x30B7;&#x30E7;&#x30F3;(&#x30A2;&#x30D1;&#x30EC;&#x30EB;&#x696D;&#x754C;&#x3044;&#x304D;&#x307E;&#x3059;&#xFF01;) &#x30FB;&#x98DF;&#x3079;&#x308B;&#x3053;&#x3068;(&#x7518;&#x3044;&#x3082;&#x306E;&#x3068;&#x30E9;&#x30FC;&#x30E1;&#x30F3;&#x5927;&#x597D;&#x304D;&#x3067;&#x3059;&#xFF01;&#xFF08;&#x30D5;&#x30EB;&#x30FC;&#x30C4;&#x306F;&#x5ACC;&#x3044;&#xFF09;) &#x4F55;&#x3057;&#x3066;&#x308B;&#x306E;&#xFF1F;&#xFF1A;&#x4E00;&#x5FDC;&#x30C7;&#x30B6;&#x30A4;&#x30CA;&#x30FC;&#x306E;&#x7AEF;&#x304F;&#x308C;&#x306E;&#x7AEF;&#x304F;&#x308C;&#x3057;&#x3066;&#x307E;&#x3059; &#x5F97;&#x610F;&#x306A;&#x3053;&#x3068;&#xFF1A;&#x7279;&#x306B;&#x306A;&#x3044;&#x3051;&#x3069;&#x6700;&#x8FD1;&#x306F;After Effects&#x306E;&#x52C9;&#x5F37;&#x3057;&#x3066;&#x307E;&#x3059;&#xFF01; &#x81EA;&#x6162;&#x3067;&#x304D;&#x308B;&#x3053;&#x3068;&#xFF1A;&#x8272;&#x5F69;&#x691C;&#x5B9A;1&#x7D1A;&#x6301;&#x3063;&#x3066;&#x308B;&#x3088;</blockquote><h2>&#x666E;&#x6BB5;&#x4F55;&#x3057;&#x3066;&#x308B;&#x306E;&#xFF1F;</h2>&#x666E;&#x6BB5;&#x306F;Web&#x30C7;&#x30B6;&#x30A4;&#x30F3;&#x306E;&#x5C02;&#x9580;&#x5B66;&#x751F;&#x3068;&#x3057;&#x3066;&#x6388;&#x696D;&#x3092;&#x53D7;&#x3051;&#x3066;&#x3044;&#x307E;&#x3059;&#x304C;&#x3001;&#x5C06;&#x6765;&#x306F;&#x4ECA;&#x306E;&#x77E5;&#x8B58;&#x3001;&#x6280;&#x8853;&#x3092;&#x6D3B;&#x304B;&#x3057;&#x3066;&#x30A2;&#x30D1;&#x30EC;&#x30EB;&#x696D;&#x754C;&#x3067;EC&#x3084;&#x30D7;&#x30EC;&#x30B9;(&#x5E83;&#x5831;)&#x306E;&#x8077;&#x306B;&#x3064;&#x304D;&#x305F;&#x3044;&#x306E;&#x3067;&#x3001;&#x30D5;&#x30A1;&#x30C3;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x77E5;&#x8B58;&#x3092;&#x3064;&#x3051;&#x306A;&#x304C;&#x3089;&#x30A4;&#x30F3;&#x30B9;&#x30BF;&#x30B0;&#x30E9;&#x30E0;&#x306E;&#x904B;&#x55B6;&#x3082;&#x3084;&#x3063;&#x3066;&#x3044;&#x307E;&#x3059;&#xFF01; &#x30D5;&#x30A1;&#x30C3;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x60C5;&#x5831;&#x767A;&#x4FE1;&#x3092;&#x30A4;&#x30F3;&#x30B9;&#x30BF;&#x3067;&#x3084;&#x3063;&#x3066;&#x3044;&#x307E;&#x3059;&#xFF01;<img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/48fdf21c274940f98ed3310893c78c70/%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF.png" alt>&#x30C1;&#x30A7;&#x30C3;&#x30AF;&#x3057;&#x3066;&#x30D5;&#x30A9;&#x30ED;&#x30FC;&#x3057;&#x3066;&#x306D;&#xFF01;<a href="https://www.instagram.com/spread___.official/" target="_blank">https://www.instagram.com/spread___.official/</a><h2>&#x306A;&#x305C;Web&#x30C7;&#x30B6;&#x30A4;&#x30F3;&#x306E;&#x5C02;&#x9580;&#x5B66;&#x751F;&#x304B;&#x3089;&#x30A2;&#x30D1;&#x30EC;&#x30EB;&#x3078;&#xFF1F;</h2>&#x307F;&#x306A;&#x3055;&#x3093;&#x306A;&#x305C;&#x79C1;&#x304C;&#x30A2;&#x30D1;&#x30EC;&#x30EB;&#x696D;&#x754C;&#x3078;&#x884C;&#x304F;&#x306E;&#x304B;&#x7591;&#x554F;&#x306B;&#x601D;&#x3063;&#x305F;&#x3068;&#x601D;&#x3044;&#x307E;&#x3059;&#x3002;&#x305D;&#x306E;&#x7406;&#x7531;&#x306F;&#x300C;&#x30D5;&#x30A1;&#x30C3;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x4E16;&#x754C;&#x3067;&#x98DF;&#x3079;&#x3066;&#x3044;&#x304D;&#x305F;&#x3044;&#x3068;&#x601D;&#x3063;&#x305F;&#x304B;&#x3089;&#x300D;&#x3067;&#x3059;&#xFF01;&#xFF01; Web&#x30C7;&#x30B6;&#x30A4;&#x30F3;&#x306E;&#x5C02;&#x9580;&#x5B66;&#x6821;&#x306B;&#x5165;&#x5B66;&#x3057;&#x305F;&#x7406;&#x7531;&#x306F;&#x307E;&#x305F;&#x3044;&#x3064;&#x304B;&#x3001;&#x3001; &#x79C1;&#x306F;&#x30D5;&#x30A1;&#x30C3;&#x30B7;&#x30E7;&#x30F3;&#x304C;&#x5927;&#x597D;&#x304D;&#x3067;&#x4EBA;&#x751F;&#x3092;&#x5909;&#x3048;&#x3066;&#x3082;&#x3089;&#x3044;&#x307E;&#x3057;&#x305F;&#x3002;&#x305D;&#x3093;&#x306A;&#x30D5;&#x30A1;&#x30C3;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x697D;&#x3057;&#x3055;&#x3092;&#x4E00;&#x4EBA;&#x3067;&#x3082;&#x591A;&#x304F;&#x306E;&#x4EBA;&#x306B;&#x4F1D;&#x3048;&#x305F;&#x3044;&#x3068;&#x601D;&#x3044;&#x3001;&#x30A2;&#x30D1;&#x30EC;&#x30EB;&#x696D;&#x754C;&#x3092;&#x5FD7;&#x671B;&#x3057;&#x307E;&#x3057;&#x305F;&#x3002; &#x5C31;&#x6D3B;&#x306E;&#x6642;&#x3001;&#x5C02;&#x9580;&#x5B66;&#x6821;&#x306A;&#x306E;&#x3067;&#x3082;&#x3061;&#x308D;&#x3093;&#x4ED6;&#x696D;&#x754C;&#x3092;&#x5FD7;&#x671B;&#x3059;&#x308B;&#x4EBA;&#x306F;&#x79C1;&#x3060;&#x3051;&#x3067;&#x3001;&#x76F8;&#x8AC7;&#x3067;&#x304D;&#x308B;&#x4EBA;&#x3082;&#x5C11;&#x306A;&#x304B;&#x3063;&#x305F;&#x306E;&#x3067;&#x624B;&#x63A2;&#x308A;&#x306E;&#x72B6;&#x614B;&#x3067;&#x3057;&#x305F;&#x304C;&#x306A;&#x3093;&#x3068;&#x304B;&#x30A2;&#x30D1;&#x30EC;&#x30EB;&#x4F01;&#x696D;&#x304B;&#x3089;&#x5185;&#x5B9A;&#x3092;&#x3082;&#x3089;&#x3046;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3057;&#x305F;&#x3002; &#x5C02;&#x9580;&#x5B66;&#x6821;&#x306B;&#x5165;&#x3063;&#x305F;&#x3089;&#x305D;&#x306E;&#x9053;&#x3057;&#x304B;&#x306A;&#x3044;&#x3068;&#x601D;&#x3063;&#x3066;&#x3044;&#x308B;&#x4EBA;&#x3082;&#x591A;&#x3044;&#x3068;&#x601D;&#x3044;&#x307E;&#x3059;&#x304C;&#x3001;&#x4ECA;&#x307E;&#x3067;&#x5B66;&#x3093;&#x3067;&#x304D;&#x305F;&#x3053;&#x3068;&#x306F;&#x7D76;&#x5BFE;&#x306B;&#x6D3B;&#x304B;&#x305B;&#x308B;&#x5834;&#x9762;&#x304C;&#x3042;&#x308B;&#x306E;&#x3067;&#x81EA;&#x5206;&#x306E;&#x3084;&#x308A;&#x305F;&#x3044;&#x3053;&#x3068;&#x3092;&#x660E;&#x78BA;&#x306B;&#x3057;&#x3066;&#x5C31;&#x6D3B;&#x306B;&#x81E8;&#x3093;&#x3067;&#x6B32;&#x3057;&#x3044;&#x3068;&#x601D;&#x3044;&#x307E;&#x3059;&#xFF01;&#xFF01;&#xFF01;&#xFF01;<h2>&#x6700;&#x5F8C;&#x306B;</h2>&#x3053;&#x306E;&#x8A18;&#x4E8B;&#x3092;&#x8AAD;&#x3093;&#x3067;&#x5C11;&#x3057;&#x3067;&#x3082;&#x79C1;&#x3084;&#x3046;&#x3047;&#x3076;&#x30B9;&#x30BF;&#x306B;&#x8208;&#x5473;&#x3092;&#x6301;&#x3063;&#x3066;&#x304F;&#x308C;&#x305F;&#x3089;&#x5B09;&#x3057;&#x3044;&#x3067;&#x3059;&#x3002;&#x3067;&#x306F;&#x307E;&#x305F;&#xFF01;

[メンバー紹介]うぇぶスタのクマの紹介！

初めまして！専門学校でWebについて学んでおり、将来はフロントエンドエンジニアになる予定のさとです。 基本はフロントエンドに関して、また趣味のデザインや写真、就活のことなどを発信していきます！<h2 id="h0669eefa7c">目次</h2><ol><li>ロゴデザインについて</li><li>見栄えのいいロゴとはなんなのか？</li><li>その前に</li><li>色の数</li><li>線の太さ・細さ</li><li>モチーフの簡潔さ</li><li>おわりに</li></ol><h2 id="h19c567b0d4">ロゴデザインについて</h2>Webデザイナーの卵とWebエンジニアの卵が「うぇぶスタ」というブログを新たに運営することになったのですが、 このロゴを、ありがたいことに担当させていただきました！ <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/71d3db722f4e46de8e9c733fe820310f/ws_01-02.png" alt=""> 【2022年前期】 ロゴにデザイナー要素（クロップアイコン）とエンジニア要素（タグ）を入れてみました！ ところで、こちらをご覧ください。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/8253046281c04c30aaabbe3df2fe4615/ws_01-01.png" alt=""> 【2020年前期】Illustrator歴3ヶ月で初めて作ったロゴ 先ほどのものと比べてみてください。 シンプルに、なんかダサくないですか？ どうして前者の方が良く見えたのでしょうか。 良く見えるロゴとは、一体なんなのでしょうか？ 以上のロゴ2つを見比べながら、どうすればロゴの見栄えが良くなるのかを解説していきたいと思います。<h2 id="h824b23b31f">見栄えのいいロゴとはなんなのか？</h2>こだわり始めるとキリがありませんが（そのうち記事にします）、意識している基本の部分は以下です。<ul><li>色の数</li><li>線の太さ・細さ</li><li>モチーフの簡潔さ</li></ul>先ほどのロゴをこの3つに当てはめながら、ひとつずつ説明していきます！<h3 id="h912f14e85d">その前に</h3>お見せしたロゴ2つは、実は分類が違います。 ロゴタイプ及びロゴマークと呼び分けます。用途も違いますし、理想とされる比率も異なってきます。 ロゴタイプ 商品名・企業名を記載したものを指します。フォント及び作字をベースにしていることが多いと思います。 僕が挙げた例ですと、前者の青い方。noteだとこっち。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/c4c3b8d646f44e798ed1786d402ef8d8/ws_01-08.png" alt=""> 左側を含める場合も多くあります ロゴマーク 商品・企業を表すマークのことです。例ですと後者の緑の方で、noteはこっち。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/aa4f8a088d9f4411b30269af17c6aa24/ws_01-07.png" alt=""> ただ2年前の僕は知識が浅く、この2つの違いが理解できていませんでした。 なので、後者の緑の方（本来はロゴマーク）をロゴタイプのつもりで制作するという失敗を犯しているのです。 その失敗が響いてる部分も解説しながら、今回はあくまでもロゴタイプの解説になることを、ご了承願います。<h3 id="h7f1c78c2c6">色の数</h3>統一感のあるデザインには、使う色の数が絞られているとよく言われます。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/ab0a42d83f344d54a34fe33de4943b40/ws_01-03.png" alt=""> 某コンビニ3店舗のロゴ配色 Web全体のデザインには3色、多くても4色と言われているので、それよりも規模の小さいロゴデザインでは3色以下がベターなのではないでしょうか。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/48450fa21a874cb28965807ab9896e22/ws_01-04.png" alt=""> 最新のロゴである左側は2色なのに対し、一番古いロゴは6色も使用していますね。 これでは統一感が出にくいです。<h3 id="hc30d1a02a8">線の太さ・細さ</h3>こちらは、比較しているロゴをWebデザインに組み込んだ例です。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/25d5423a09a1484989cbe70f5b634a59/ws_01-05.png" alt=""> 上側に対し、下側はタイトルが視認しづらいです。 これは線の太さにばらつきがあることが原因なのではないかと考えています。 モチーフが伝わりづらい問題 新旧ロゴの比較画像まで遡っていただくと、右側の古いロゴには白い縁をつけているのが分かるかと思います。 これを含めて「マーク」として視認してしまうので、線が統一されておらず、「見づらい」という印象を受けてしまいます。 また、冒頭にお話ししたロゴタイプとロゴマーク問題がここで響いてきます。 旧ロゴはロゴタイプとしては「見づらい」ですが、ロゴマークとしてはそこまでマイナスではありません。 実際、複雑なデザインのロゴマークは多く存在します。（旧ロゴ自体のデザイン性は置いておいて） 旧ロゴに関しては、モチーフと文字を分けていれば、もう少し見やすかったのかもしれませんね。 タイトルが見づらい問題 次に、Webデザインに組み込んだ例を見てください。 古いロゴはお香とお香立てをモチーフに製作しました。しかし、（色の濃淡にも問題がありますが）お香の茶色い棒が文字よりも太く、非常に読みづらくありませんか？ なんという文字が書いてあるか、視認することができますか？ ちなみに答えは「紅香 Koka」です。僕はアルファベットが潰れてしまっているように思いました。 以上2点から、ロゴマークの線の太さはなるべく統一することを意識する必要があると分かります。<h3 id="hbd4ad00cfd">モチーフの簡潔さ</h3>ロゴ比較画像をもう一度みてください。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/48450fa21a874cb28965807ab9896e22/ws_01-04.png" alt=""> 左側のロゴはタグとクロップアイコンを、右側のロゴはお香とお香立て（と煙）をモチーフに取り入れました。 左側のロゴの方が、線が少ない（モチーフが簡略化されている）のが分かりますか？ 先ほどWebデザインに組み込んだように、ロゴタイプは縮小される可能性を常に持っています。 ご覧いただいているnoteも、左上にロゴタイプ（ロゴマークを含む）がありますね。 縮小による視認性の低下を招く可能性があるため、あまりにも難解なデザインは避けたいです。<h2 id="h9be0c3393d">おわりに</h2>ロゴタイプデザイン初学者の方向けの解説でした！いかがでしたでしょうか？<ul><li>色の数</li><li>線の太さ・細さ</li><li>モチーフの簡潔さ</li></ul>解説した3点が、どなたかの制作の手助けになれば幸いです！

【ロゴタイプ初心者向け】おさえておきたいポイント3つ

皆さんは色がなぜ見えているのかご存知ですか？ りんごが赤く見えるのはりんごが赤いから？ もし、リンゴが赤色を出しているのなら、真っ暗闇でもリンゴは赤く見えるはずです。しかし、実際は真っ暗闇ではリンゴは見えません。 ではどうやってりんごは赤く見えているのでしょうか。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/d3bd1e17c1ec49d2951331890d2f51f6/%E3%82%8A%E3%82%93%E3%81%93%E3%82%99.jpg" alt=""> <h3 id="hfd2abfbd8e">色を見るために必要な3つの要素</h3>色を見るためには「光源」「物体」「視覚(眼)」の三つの要素が必要で、目で受け取った情報を脳で処理して、はじめて色を認識することができます。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/6426f3c881dd4924b320121e50ee82ba/%E8%89%B2%E3%82%92%E8%A6%8B%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E4%B8%89%E8%A6%81%E7%B4%A0.png" alt=""> 　　　　　　　　　　　　　色を見るための3つの要素 先程のりんごの話に戻ります。 まず、リンゴが赤く見えるためには光が必要。光には、すべての色が含まれています。光がリンゴに当たったとき、リンゴは多くの光を吸収します。その中で、赤の光だけを反射しているのです。そして、その赤の光が私達の目に入ったとき、「このリンゴは赤い」と認識できるのです。 つまり、リンゴの表面に赤い色がついているわけではありません。リンゴの表面には「赤い光を反射する性質」があるのです。 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/217ad77ac0c24beba7d41520ae13184f/%E3%82%8A%E3%82%93%E3%81%93%E3%82%99%E3%81%8B%E3%82%99%E8%B5%A4%E3%81%8F%E8%A6%8B%E3%81%88%E3%82%8B%E7%90%86%E7%94%B1.png" alt=""> 　　　　　　　　　　　　　りんごが赤く見える理由 <h3 id="h3bcda3e6b0">最後に</h3>簡単にまとめると、色を見るためには「光源」「物体」「視覚(眼)」の三つの要素が必要で物体自体が色を発しているのではなく物体に反射された光の色が目に入り、色が見えていると言うことになります。

色はなぜ見えるのか?

はじめまして！岡崎です。 今回は、入学までプログラミングが全くできなかった私が当時勉強したこと、そして今の自分ならすることをまとめてみました！ 最近勉強を始めた方の参考になればと思います！ ※技能五輪全国大会という、24 歳以下が出場できるフロントエンド・バックエンド・CMS のモジュールがある全国大会で 2 位獲りました。力試しで出場したので力を入れて対策をしていた感じではないです。 <h1 id="h8d027c8ed3">はじめに</h1>プログラミングの勉強は基本的にしんどいです。 わからないことばかりで、楽しくない時間やしんどくなる時期がたくさんくると思います。 広告でよく見る、 <code>web のプログラミングは簡単で稼ぎやすい</code> というのはプログラミングが簡単という意味ではなく、 <img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/04e15308b7aa4fbf812139e6ca2346aa/8507a99e71db8e43cf171d37.png" alt=""> という意味です。 簡単だと思って勉強を始めると心が折れると思います。 ですが、時間をかけて根気よく向き合うことができれば誰でもある程度は書けるようになると思うので頑張りましょう！ 外部との通信が出来るようになると一気に作れるものの幅が広がり、楽しくなってくるのでひとまずの目標は通信でデータを取ってきて便利なアプリを作ってみることで良いと思います！<h2 id="h24622a49d2">勉強をする上で意識しておきたいこと</h2>プログラミングは暗記する必要はないので、暗記をしようと思わないでください！ 覚えるしかないものもありますが、100%覚える必要は全くありません！ 色々触ってみることが成長への一番の近道だと思います！ 色々なプログラミング言語を触るよりかは、何か 1 つに絞って習得した方が絶対に良いです！ 書き方が変わるだけで本質的にはどの言語を使っても変わらないので、とりあえず 1 つの言語をがんばりましょう！ お金を払うことを躊躇しないでください！ 知識は力です。無料のコンテンツでも勉強はできると思いますが、最初のうちは体型的に学べる書籍などで勉強するのが良いと思います。<h2 id="h451be01e23">勉強した順番</h2><ol><li>HTML, CSS</li><li>JavaScript</li><li>vue / react + typescript</li></ol><h2 id="ha080a2565a">HTML, CSS</h2>まず初めに<a style="color:#0f83fd" href="https://prog-8.com/courses/html" target="_blank" rel="noopener noreferrer">プロゲート</a>の HTML, CSS のコースを 2 周しました。（途中から有料会員になる必要があります。） 1 周目はヒントやスライドを振り返りながらなんとなくで進めてゆき、2 周目はできるだけヒントを見ずにスライドを中心に進めてゆきました。 なんとなく流れが掴めたら&nbsp;<a style="color:#0f83fd" href="https://www.udemy.com/courses/search/?src=ukw&amp;q=html+css" target="_blank" rel="noopener noreferrer">udemy</a>&nbsp;にて html, css の内容があるコースを購入し進めるのが良いと思います。 自分は CodeMafia 様の<a style="color:#0f83fd" href="https://www.udemy.com/course/front-dev-tutorial/" target="_blank" rel="noopener noreferrer">こちらのコース</a>を購入し進めました。 勉強中、プロパティの仕様などを確認したい場合が出てきた場合は検索エンジンにて、「プロパティ名 mdn」と検索し勉強することをお勧めします。 mdn は firefox の会社が作成している説明書みたいなものです。他のサイトよりも信頼できる情報源なので web 関連の調べ物をする場合は積極的に使用しました<ul><li><a style="color:#0f83fd" href="https://prog-8.com/courses/html" target="_blank" rel="noopener noreferrer">プロゲート - HTML</a></li><li><a style="color:#0f83fd" href="https://www.udemy.com/course/front-dev-tutorial/" target="_blank" rel="noopener noreferrer">【JavaScript＆CSS】ガチで学びたい人のための WEB 開発徹底実践（フロントエンド編）</a></li></ul><h2 id="hd148c32f21">JavaScript</h2>HTML, CSS がなんとなく書けるようになったら、HTML, CSS と同様にプロゲートにて JavaScript のコースを 2 周しました。 様々なサイトやサービスを使ってみた結果一番プロゲートが楽しく、わかりやすかったです。 そして udemy にて&nbsp;<a style="color:#0f83fd" href="https://prog-8.com/courses/es6" target="_blank" rel="noopener noreferrer">JavaScript</a>&nbsp;のコースを購入し進めました。私の場合は前回購入したコースの中に JavaScript が含まれていたのでそちらを使用し、学習を進めました。 コースの中でわからない用語が都度都度出てきたので調べて理解していました。 udemy を進めながら、<a style="color:#0f83fd" href="https://jsprimer.net/" target="_blank" rel="noopener noreferrer">jsprimer</a>&nbsp;で概要の復習をしていました。<ul><li><a style="color:#0f83fd" href="https://prog-8.com/courses/es6" target="_blank" rel="noopener noreferrer">プロゲート - JavaScript</a></li><li><a style="color:#0f83fd" href="https://jsprimer.net/" target="_blank" rel="noopener noreferrer">jsprimer</a></li></ul><h2 id="hf8817f2c20">vue / react + typescript</h2>HTML / CSS / JavaScript でいろいろ作れるようになった方は vue や react を勉強してみると仮想 DOM の概念に感動すると思います。 フロントエンドエンジニアとして働くことを想定している場合は、vue か react どちらか好きな方を触ることを強くお勧めします！ <h1 id="h9be0c3393d">おわりに</h1>勉強で何をしたらいいのか分からなくなった時は&nbsp;<a style="color:#0f83fd" href="https://roadmap.sh/frontend" target="_blank" rel="noopener noreferrer">roadmap</a>&nbsp;などを参考にしてみると良いかもしれません！ そして一通りフロントを触ったあとは、サーバーサイドや linux の基礎など自分の興味のままに勉強していきましょう〜！ いろいろな勉強方法がある中、この記事がどなたかの参考になれば幸いです！ それではよいエンジニアライフを！

[メンバー紹介]うぇぶスタのクマの紹介！

プロフィール

普段何してるの？

なぜWebデザインの専門学生からアパレルへ？

最後に

【ロゴタイプ初心者向け】おさえておきたいポイント3つ

色はなぜ見えるのか?

初心者がフロントエンドエンジニアとして全国2位になれた勉強法