【WEBデザイン】cocodaをお勧めする！

こんにちは

今日はWEBデザインの勉強に役立つサイト「cocoda」を紹介したいと思います。

WEBデザインどうやって勉強したらいいかわからない…

本を読んだけど、よくわからなかった…

という方の役に立てば幸いです。

それでは紹介していきたいと思います。

「cocoda」の機能

「cocoda」は言うなればデザイン版の「Progate」のようなものを想像してもらえるとわかりやすいと思います。

～引用ここから～

Cocoda!上の架空の依頼に取り組むことでUIデザイナーに求められるユーザーを意識した設計力・ビジュアルの表現力を身につけていくことができます。

～引用ここまで～

引用:https://cocoda-design.com/

上記の通りなのですが、架空の依頼をこなしながら、実践力を身につけて行くことができます。

いきなり依頼なんてできるのかな…

という方も大丈夫です。しっかり初心者用のコースを用意されています。僕もこの初心者コースからやりました。

デザインの基礎から学べるので、非常に助かりました。

cocodaのいいところ

cocodaの長所を一番感じているのは「実際に手を動かしてデザインを勉強できる」というところです。

例えばコーディングにおいて、本を読むのと実際に模写や案件を受けてサイトを作っていくことのどちらがより技術を学べるでしょうか？

一概には言えませんが、僕の感覚としては実際に手を動かした方が技術の吸収度合いが違うと思いますし、学べることも多かったです。

同じようにWEBデザインも手を動かしながら自分の頭で考えていくほうが効率が良いのではないかと思います。

cocodaのいい点

いいところは上記の通り自分で手を動かしながらデザインを学べる点ですね。

色々と探してみましたが、そのような学習サイトは他には無く、画期的だと思いました。(そもそもWEBデザインを学べるサイトを他に見つけられなかった…あったら教えてください)

無料でできる点もいいですね。参入障壁が低いのですぐに始めることができます。

初心者に非常に優しいサイトだと思います。

cocodaのイマイチな点

イマイチな点としては、受講できるコースが少ないところですね。まだまだこれから増えていくことに期待しつつ、本などで補っていきたいと思います。

また、サイト内には実際に企業と連携した企画や、1日一個お題が与えられているので、力試しにやっていくこともできます。

フィードバックももらえる場合があるそうなので、基礎が身についたら僕自身もやってみようかと思います。

まとめ

基本的にここでWEBデザインの基礎を身につけてから、本などで補強していく形がいいかと思います。

何はともあれ奥の深いデザインの世界なので一朝一夕には身につくものではないと思いますが、一歩ずつ前進していきたいと思います。

https://note.mu/3104gs/n/n5997b2f18405

【WEB制作】実践済みのサイト模写の方法を紹介する！

こんにちはYes鍵です。

今日はWeb制作において一番勉強になるサイト模写についてお話ししたいと思います。

• Progateを終えたけど次に何をしていいかわからない…。
• 一通り基礎は学んだけど、いまいちよくわかっていない…。
• サイトの模写はいいけどやり方がわからい…。

と悩んでいる方の参考になればと思います！

では、さっそく行きましょう！

そもそもサイト模写とは

そもそもサイトの模写ってなに？というところから始めます。

サイトの模写とは実際にWeb上で公開されているサイトを、自分のPC上で再現することです。

つまり、手本を見ながら、自分でサイトを作ってしまおう！ということです。

えぇ…、そんなことできるん…？

と思うかもしれませんが、割とできます。やりかたを紹介していきます。

準備するもの

1. テキストエディタ
2. GoogleChrome
3. 模写したいサイト

これだけです。

全部タダです。すばらしい。

テキストエディタ

ぼくはAtomを使っていますが、動けば正直なんでもいいと思います。

世の中にはいろいろなエディタがありますから自分に合ったものを試してみるといいと思います。

GoogleChrome

これは意外と大事です。

何がいいかというとCromeの「検証モード」というのがあるんですが、これを使ってサイトのコードを知ることができたりします。

試しにテキトーなサイトを開いてF12キーを押してみましょう。すると右側になんか出てきますよね。

それが「検証モード」です。詳しくはこちらをどうぞ↓

saruwakakun.com

模写したいサイト

これも正直なんでもいいですが、ランサーズの参考URLを模写してみましょう。

これができれば、もうその案件は取れてもおかしくないです。

模写ルール

ぼくはルールとして

1. できるだけ見本サイトのコードを見ない
2. 画像はダウンロードしてよし
3. 文字の大きさとかフォントにはこだわらない

の3つを決めました。

なかでも「できるだけ見本サイトのコードを見ない」は結構大事だと思っていて、

これをしっかり守るか守らないかで成長スピードが違うと思います。

基本的には目で見て「ここはたぶんこういう構造なんだろうな…。」と推測しながらやっていくことになります。

こうすることでProgateではできなかった、「自分で考えてコーディングする」ということができます。

どうしてもわからなかったらググりましょう。

ぼくは周りにプログラミングできる友人がいなかったので、どうしようもなかったらグーグル先生だけが頼りでした。

考えたけど思いどおりにならない…。ググっても出てこない…。となったら先ほど紹介した「検証モード」で見本サイトのコード（答え）を見てみましょう。

知らなかったらぜひメモするなりググってみるなりしましょう。そうすることで知識を深められます。

まとめ

準備するものは

・テキストエディタ

・GoogleChrome

・模写したいサイト

だけ！

模写のルールは

・できるだけ見本サイトのコードを見ない

・画像はダウンロードしてよし

・文字の大きさとかフォントにはこだわらない

でした。

ルールも守って楽しい模写ライフを送りましょう！！

以上です。最後まで見てくれてありがとうございました。

【コーダー向け】デザインスキルはなくても仕事は受注できるか？

こんにちはYes鍵です。

今日はWebデザインのスキルがなくても仕事が受注できるのかという話をしていきたいと思います。

• PhotoshopとかIllustratorとか知らん…。
• デザインのセンスないし…。
• 案件見たけどデザインもできないとだめなのかな…。

と悩んでいる方の参考になればと思います。

結論：Webデザインスキルがなくてもある程度は稼げた

結論からいってしまうと、Webデザインスキルがなくてもある程度（5万）は稼げました。

ぼく自身、PhotoshopもIllustratorも使えません。

作業範囲が「デザインからコーディングまで」の案件が見た感じ多かったので、使えるようになりたかったです。

が、ソフトがなにげに高価で…。手が出せませんでした。

なら、どうやって案件を取っていったのか。

当たり前ですが、コーディングのみの案件を取るようにしていました。（ランサーズの検索機能を使いました。「コーディングのみ」と検索するだけ）

余談ですがたまにpsdデータやaiデータでデザインを送ってくるクライアントさんがいらっしゃいます。しかし、これらのデータはフリーソフトでも開くことができるので心配しなくてもOKです。

話がそれましたが、ともかく何が言いたいかというと、5万稼ぐだけなら高価なデザインソフトを買う必要性はないかなと思いますってことです。

とはいえWebデザインスキルはあった方がいいと思う

とはいってもデザインからコーディングまで一括でできたほうが、高収入を得られることも事実です。見た感じ2倍くらい違いましたね。

なので、ぼくの計画としては、

1. デザインのない仕事でもうちょっとお金を稼ぐ。
2. その資金でPhotoshopを買う
3. 平行でデザインも勉強
4. デザイン案件を取る。
5. Happy！

という感じがいいかなと思います。

お金がない状態で、高価なソフト買って失敗したら嫌なので…。心の余裕を持ちたいです。

正直、コーディングの勉強でさえ大変だったのにまた勉強せんといかんのか…。と絶望していますが、そんなことを言っていても始まらないですよね！

まず目の前の仕事に全力で取り組んでいくことにしたいと思います。淡々と目の前のタスクをこなしていきます。

まとめ

• 5万くらいだったら、デザインスキルはいらない。（と思う）
• とはいえスキルはあった方が高単価が見込めるので、とりあえず、できる仕事で稼いだお金を自己投資に回す。（Photoshopを買う）

以上です。

最後まで見ていただきありがとうございました。

【プログラミング】月5万達成するのに必要なスキルと習得するのにかかった時間

こんにちは、Yes鍵です

今日は僕が月5万達成するのに必要なスキルとかかった時間について紹介していきたいと思います。

＊プログラミングを勉強してるけど、どこまでやればいいかわからない…。

＊ゴールが見えないときつい…。

＊どれくらいやれば仕事を受注できるレベルなの…？

という方の参考になればと思います！

では解説していきます。

スキルはHTML&CSSができればとりあえずOK！

スキルですが、ぼくはとりあえずHTML&CSSができれば案件が取れると考えています。

これは単にぼくの経験不足かもしれないので、大きな声では言えませんが、今ぼくのやっている案件（サイトの修正）がHTML&CSSしか使っていないからです。

今までHTML&CSS以外にもJavaScript、jQuery、PHPをやってきましたが今のところ使ってはおりません。

ぼくが（無意識的に？）そのようなスキル（JavaScript、jQuery、PHP）を使う案件を避けていたのかもしれないですね。

まあ、ともあれ

JavaScriptムズイ…。

PHPわからん…。

といってProgateを何周もして完璧に理解する必要はないと思います。

それよりも

なんとなく理解したなー

と思ったらすぐに行動に移して実務をこなすべきだとぼくは思います。

そこまで心配しなくてもググれば大抵のことは解決してくれます。Google先生は偉大です。

案件を取るまでにかかった時間

では、「なんとなく理解したなー」はどれくらいを指すのか。

ぼくの感じでは

ProgateのHTML&CSS：2周

＋

サイト模写：5サイト

でOKだと思います。

もう少し詳しく説明します。

ProgateのHTML&CSS：2周

ProgateのHTML&CSSのすべてのパートを2周くらいしました。（道場も含む）

まあ、3周目でなんかつまらなくなってやめちゃっただけなんですけどね…。

時間としてProgateは平日一日3時間、休日5時間くらいを一ヶ月くらいやってたと思います。（けど週一くらいでサボってたような気もする。）

ということは、HTML&CSSにかけた時間はその4分の1ですね。

結局理解度としては上位のパートの理解は「そこまで…」という感じでしたね。

加えて道場の方も最後のやつはヒント出されまくって、ほぼ答えじゃん！みたいな感じでした…。

とりあえず、お世辞にも完璧とは程遠いものでした。

思うにProgateってやっぱり基礎学習にはもってこいのサイトなんですが、なにせヒントが出てきちゃうので自分でググって答えを模索する能力は育たないのかな…？とも思うわけです。

というわけで、今度はサイト模写に入ります。

サイト模写：5サイト

ぼくはProgateよりもこっちの方が大切だと思っていて、実践形式で学ぶ方が得るものが多いし、なにより楽しいと思います。

ここでぼくは「検証モード」の使い方やProgateのときにはあやふやだった知識を整理することができました。

また、

ここがどうしてもわからん！

てなったところでいざサイトのコードを調べると、それまでは知らなかったタグや属性も知ることができてかなり勉強になりました！

なので、Progateでつまっても

「まあ、こんなもんか」

と気持ちを切り替えてサイト模写に移っていきましょう。

時間としては平日一日3時間、休日5時間ぐらい1か月やり切りました。（しかし週一くらいでサボってたような気もする）

最後に

ぼくが案件を取るまでに必要だと思うスキルとそれを習得するまでにかかった時間はこんな感じです。

確かにHTML&CSSだけだとやれる範囲が狭まりますが、チャンスはあるとぼくは思いますね。

別に他の勉強することを否定しているわけではなく、やれることが多いとそれだけチャンスが広がりますし、自信にもつながる素晴らしいことだと思います。

ですが、実際に使ってみて実戦形式で学んでいった方が早く習得できるのではないかな、と感じています。

以上です。

最後までご覧いただきありがとうございました！

【保存版】プログラミング学習に集中する方法

 

こんにちはYes鍵です。

今日はプログラミングに集中する方法について話したいと思います。

• プログラミングの勉強に全然集中できない…。
• すぐ別のことをやっちゃう…。

という方の参考になればいいなと思います。

はじめに言ってしまうと、「勉強場所をコロコロ変えろ」が結論です。

では、さっそく行きましょう！！

集中できない原因

そもそも、なぜ集中できないのか。

いろんな理由があると思うんですが、ぼくは集中できない要因として「疲れ」と「飽き」が大きいんじゃないかと考えます。

勉強を始めてすぐに集中力が切れちゃう人はなかなかいないと思うのですが、例えば始めて小一時間くらいでスマホ触っちゃったりとか、別のことしちゃう人は少なくないと思います。（そんなのぼくだけですかね？）

そういうとき、一度スマホを見てしまうとなかなかやめるのが難しいです。

そして罪悪感にさいなまれる…という決まりきったパターンに入ります。

このパターンに入るのはぼくの場合決まって小一時間経ったくらいのときなので、その理由を考えてみると、前述した「疲れ」と「飽き」に行きつきました。

まあ、考えるまでもなく一時間ずっとパソコンやってたら当たり前に疲れるし、飽きるよねって話です。

人間３時間とかずっと集中できるわけないよなーと、少なくともぼくにはムリゲーでした。

なんで考え付かなかったんだろうと思いましたが、そこに気づいてから目の前が開けたような気がしました。（大げさ）

だから、ぼくは飽きたり疲れたな、と思ったらすぐに場所を変えることにしました。

場所を変えて勉強する

どういうことかというと、例えば

大学の図書館（一時間）→大学の学食（一時間）→マクドナルド（一時間）

とか！！！

なによりこれをするメリットは「飽きにくい」ということです。

つまり、

①短時間だったら続けやすい。

→一時間だけ…！と思っていれば集中力も続きます。ノリと勢い大事です。

②移動時間が休憩になる

　→移動すると運動にもなります。適度に体を動かせば集中力もアップ！（する気がする）なお、スマホも触らずに済みます。

コツとしては、疲れて手が止まったら移動しましょう。

時間制限を決めてもいいかもしれませんね（ぼくの場合一時間）。

頭が「疲れたサイン」を出したら逆らわないことです。逆らっていいことないです。

場所を変えて勉強する～デメリット～

この方法を考え付いたときは完璧か！？と思ったのですが、そうではなくデメリットもあります。

以下二つ

お金がかかる場合がある。

マクドナルド行ってカフェ行って…とかやると一日500円以上使うことになりますね。

一ヶ月で15000円以上ですか…。絶対取り返してやる！というモチベーションにもなりそうですね（）。

その点大学生は恵まれていて大学の図書館、食堂はWifiちゃんと飛んでいますからね。

どれだけいても白い目で見られることないですし。素晴らしい。

この恵まれた環境を生かしてより頑張りたい。

再開するときに時間がかかるときがある。

すぐにスタートダッシュ決めないとスマホを見て無駄な時間を過ごすことになりかねないので、注意が必要ですね。すぐにやるぞと心に強く誓いましょう。

最後に

ぼくはこの方法が一番性に合ってました。

集中できない…。と悩んでいたら、ぜひ一度試してみてください。悩んでいる時間が割と無駄だったりしますから。

以上です。

最後まで読んでいただきありがとうございました。

【初心者】ランサーズの案件の取り方を解説する

こんにちは

今日は案件の取り方について話したいと思います。

どんな案件をとったらいいの？

ランサーズで案件が取れるか心配…

どのレベルまでいったら取りに行っていいかわからない…

という人に見てもらえたらと思います。

コーディング案件のレベル

案件のレベルとしては一案件10,000～50,000円程度を想定しています。

これより高いレベルのものを想定していた方は参考にならないかもしれません…

では、行きたいと思います。

どんな案件をとったか

僕が月5万を達成した時に取った案件は、前述の通り一案件10,000～50,000円程度のものでした。

仕事内容としては、サイトの修正、すなわちサイトのレスポンシブ化でした。

いまや、スマホからサイトを見る時代ですからこういう案件は結構多かったです。

なので、レスポンシブ化できる人材の需要は高まっているんじゃないかと思います。

ですから、HTMLを勉強するときはレスポンシブ化のところ(@media～のとこ)をちょっとまじめにやっとくとおトクかもです。

話がそれましたが内容はそんなとこです。

案件の取り方

取り方としては、以下の3つを意識しました。

• ①参考URLを模写
• ②提案文を丁寧に書く
• ③費用を抑えめで提案する

では、解説していきます。

①参考URLを模写

いきなり意味わからんかもですが、取りたい案件の参考URLを模写します。

これをだいたい2日とか3日で仕上げて、提案文に添付します。

(なぜ、2日～3日かというとその間に募集が締め切られちゃうからですね。)

これがあるとだいぶクライアントさんの目にとまると思います。他のランサーとの差別化です。

ぼくが最初の案件をとった時もこの戦法が当たって採用されることができました。

2日～3日でサイトを模写するのは結構しんどいですが、いままでの模写経験を存分に生かして、全力で模写し切りましょう。

こちらを参考にしました。

https://manablog.org/freelance-order-rates/

②提案文を丁寧に書く

「そんなん当たり前やんけ(笑)」と思われるかもですが、意外と丁寧に書く人少ないらしいです。

僕の場合クライアントさんから

「Yes鍵さんの提案が一番丁寧だったので採用させていただきました！」

と言われたことが結構あるので…

やっぱり仕事を請け負うわけですからね。丁寧に書くようにしたいですね。

とはいえ、どんな感じが丁寧なのかわかりませんよね。

具体例を挙げておきますと、こんな感じです。

1. 挨拶(こんにちは、Yes鍵と申します。)
2. 自己紹介(HTML、CSSは慣れており〇年の経験がございます。レスポンシブ対応も可能です。)
3. 納期(納期としましては、量にもよりますが1ページ２～３日以内で可能です。)
4. 過去の実績(なお、過去のWeb制作実績を添付させていただきます。)
5. 費用(費用は、○○円ほどで承りたいと考えております。)
6. 締めの言葉(よろしくお願いいたします。)

ぼくは毎回このパターンです。これで10件くらい提案したら普通に通るんじゃないかと思います。

③費用を抑えめで提案

正直なりふり構っていられないので、前述の案件なら3万くらいで請け負いました。

あんまり安く受けすぎてもモチベーション下がりますが、

「ちょっと安いかな…」

と思うくらいでちょうどいいと思います。より費用を下げればより採用されやすいと思います。

こちらを参考にしました。

manablog.org

おまけ.このときの自分のレベル

5サイトくらい模写を行なった後に

「もうムリ…模写しんどい…」

ってなったときに受注し始めました。

Bootstrapでずっと模写してきたので、@media～でレスポンシブ化する方法を忘れてて、慌ててググりました(汗)。

案外ググればどうにかなります。楽観的にいきましょう。

まとめ

最初はめちゃくちゃ緊張しますが、もう飛び込むしかないです。怖いですけど。

あと、一度やったら慣れます。

ググればいける！

あれだけ模写したんだから大丈夫！

と自己暗示してバンバン提案しましょう！！

以上です。

見てくれてありがとうございました。

【体験談】プログラミングで月5万達成するまでの具体的な方法

こんにちはYes鍵です。

先日…ついに…

プログラミングで（ほぼ）月5万達成しました！

ようやく努力が実った感じです。うれしい！

ひと段落ついたので、これから月5万を目標にしている方に向けて僕がやってきたことをまとめていきたいと思います。お付き合いいただければ幸いです。

ぼくのスペック

学習前のぼくのスペックはこんな感じです。

①プログラミングの知識

2年前に一週間くらいやって挫折。ほぼなし。

②パソコン

Let’s note大学生協で買ったやつ。Macを買えば…と後悔。

③やる気

バイトが嫌でたまらなかったので、お金稼ぎたい欲はある。プログラミング好きだったわけではない。とにかく稼ぎたい。

1か月目(11月下旬～12月)～バイト辞めてやろうと決意→プログラミングを始める～

この月5万を達成したことと、切っては離せないことがあります。

それが今も続けている塾講のバイトです。

まあいろいろありまして、「絶対やめてやる！！」と決心してから割とすぐにプログラミングの勉強を開始しました。

プログラミング学習において一番大切なのはこのモチベーションが続くかどうか、にかかっているのでその点ではバイトに助けられたのかもしれませんね(笑)

なにはともあれプログラミング勉強をし始めたわけですが、ぼくは当時HTMLもCSSもわからないやつでしたから、どうにかならんもんかと勉強方法を探りました。

そこで行き着いたのがマナブログ

manablog.org

です！

一から十まですべてのノウハウが詰まっていてこれを信じていけば間違いない！と確信し、ぼくは忠実に行動に移していくことにしました。

これが、一か月目の出来事でした。

二か月目(1月)～もくもくと勉強Progateとの出会い～

さて、始めるかと腰を上げ始めProgateを始めました。（このProgateを知ったのもマナブさんのブログでした。）

Progateというのはオンライン上でプログラミングができるサービスです。

prog-8.com

実際に手を動かしながら勉強していけるので直感的にわかりやすく、楽しく続けやすかったです。

無料でもある程度までできますが、有料で全部履修することをおすすめします。月980円なのでいい投資かと思いますね。

ぼくの場合は技術書などで勉強してると圧倒的に飽きてくるので、こんなふうに実際のコードを打ち込みながらの勉強は非常によきでした。

ここでHTMLやCSS、JavaScript、jQuery、PHPを学びました。

実際使ったのはHTML&CSSでしたがやっておくと不安が消えるかもです。ムリそうなら他のはやらなくてもいいかなと思います。

大学が終わったあと、一日3時間程度を目標に勉強しました。

目標達成できない日もありましたが、「まあ、土日に多めにやればいいか」と緩めに考えることが大事です。一日30分でも出来たら自分をほめながら続けていきました。（激甘）

何とかHTML&CSSくらいは終えることができました。

これが2か月目の出来事でした。

3か月目（２月）～Bootstrap4の勉強→模写～

一ヶ月で80時間ぐらい勉強した後、Bootstrap4を勉強し始めました。

これはみなさんご存知のドットインストールで勉強しました。お察しのとおりこれもマナブさんのブログに書かれていたことです。(笑)

ここまできて、「簡単なサイトなら一から作れるやろｗｗｗ」と根拠のない自信がわくようになってきました。

なので、これを習得したのち次はサイトの模写に移りました。

模写というのは、既存サイトを見ながら、一から全く同じサイトを再現するというものです。

模写のルールとして

①なるべく実際のコードを見ない。わからなかったらググって調べる。

②画像は引用してきてよし。

③正確なコーディングを目指すが、１pxの調整にはこだわらない。

を決めて４～５サイトほど模写しました。

本当は10サイトほどやるつもりだったのですが、「こんだけやれば仕事できるようになるだろ」という謎の自信がありましたし、

まあ、本音を言うとただシンドかったんですけどね！

しかし、得られたことも多く

①ググる能力が上がった。

②のちのポートフォリオ（オレこんなことできるよってアピールするもの）を作ることができた。

③実際のサイトの作り方を学べた

④自信がついた

とまあいいこともあるので、サイト模写はぜひ一個くらいはやる価値ありだと思います。

ここまでで、3か月です。

4か月目（3月）～受注～

そんなこんなで基礎学習を終えた僕は受注に入りました。

ここでも参考にさせていただいたのが…

マナブログです！！！

もうまるパクリです。こちらのページです。

manablog.org

どうもこれを見たところ

「20件くらい提案して1件取れればいいよ」

と書かれていたのでまあそんな簡単に行くわけないよなーと長期戦を覚悟しましたが

なんと5件くらい提案したらサクッと決まってめちゃくちゃ驚きました。

マナブさん神・・・！

という感じでしたね…。

まとめ

こんな感じで月5万稼ぎました。

（というかまあ全部マナブさんのパクリですが(笑)）

まわりにはプログラミングやってる人などいませんでしたし、大学でも勉強しませんでした。

そんなぼくでも独学でここまでこれたので、やる気と行動力さえあれば割と簡単にできるかと思います。

最後になりましたが、ここまで読んでいただきありがとうございました。

少しでも参考になればと思います。

では、頑張っていきましょう！！

ぼくは月10万を目指して頑張ります！！

以上！！