無料でwebデザインのコーディングが学べる！！クリ★スタ

WEBデザインを勉強したいけど何をしたらいいのかわからない人へ

自分でHPを作りたいけど、有料サイトはちょっと…

そんなできるだけ経費を抑えて勉強したい人必見。無料で学習できるサイト、クリスタを紹介します。

WEBデザイン学び始めの方におススメ！！デザイン学習ツールCocoda!

HPを作りたい人へ。コスパ最強の初心者におススメプログラミングスクール＆教材を紹介します！！

デザインのコーディングとは

HP制作はざっくりと

1. ターゲットとする客層を確認
2. どんなページ構造にするか、ざっくりとHPの階層などを地図に作る(👈ワイヤーフレーム)
3. それに沿った配色、デザインの構成を考える(使う写真、イラスト、配色、字体等)
4. Photoshop、AdobeXDなどを使ってデザインを作る(👈デザインカンプ)
5. デザインにそってHTMLやCSSなど実際にコードを書いていく(👈コーディング)

このような工程で作られていきます。

完成品のデザインを見ながら、配置、幅、距離などを確認しつつコードを書いていくことをコーディングと言います。

クリスタで学べる事

クリスタトップページ

公式サイトより引用

クリスタでは既に出来上がったデザインカンプが初級、中級、上級と用意されています。

サイトよりダウンロードしたフォルダには、完成品として目指すAdobeXDで作成されたデザインカンプ、必要な画像などが入っています。

こちらを参考にデザインカンプを見ながらコードを書いていきます。

回答、解説付き。(ものによっては動画解説あり)

上級ではAdobeXDのデザインカンプから自分で画像を取り出すところから学習することになります。

必要な知識はHTML、CSS、jQueryです。

デザインカンプを配布し、解説がついているものは有料で販売されていることが多いのでこれはとてもプログラミング初心者にはうれしく、優しいと思います。

また、勉強するにあたって参考になる記事も充実。
ポートフォリオの作り方など、webデザインをするのに必要な知識のみならず周辺知識の記事まで幅広いので大変勉強になります。

コーディング初めてでもできる？？

コーディング？？したことがないんだけど…という人でも安心。

クリスタではいきなり課題に取り組むのはちょっとハードルが高い…という人のために

はじめてのコーディングの章も用意されています。

• コーディングの心得
• 使うエディタについての紹介
• HTMLとは
• CSSとは

などなど、問題集のみならず、説明のコンテンツも充実。丁寧に説明がされているので初めての方でも安心。

クリスタを使ってみての感想

クリスタはとてもかわいくて勉強続けやすい使用になっていて

無料で使えるのは本当にありがたいサイトです。

また、中級と上級はyoutubeで無料動画解説が乗っているので全然わからない人は見ながらコーディングも勉強できてとても親切。

読み物コンテンツはこれからも随時更新されていくようなので楽しみです。

初級はProgateなどの予備知識が全くなくて望むのはちょっと難しいように思えるかもしれませんが繰り返しやると確実に力が付くような作りになっています。

ちなみに中の人のペイさんは副業で30万円稼いだ実績の持ち主なんだとか。

noteにて案件獲得の手順など具体的なノウハウを説明されています。
私も購入しました。

こちらは有料になりますが、実際の案件獲得に必要な実務的なノウハウが詰まっています。
初案件前、見積書などの書き方について不安だった私は大変参考にさせていただきました。
ぜひ気になる方は覗いてみてはいかがでしょうか。

もし、独学で困った方は無料体験も覗いてみてはいかがでしょうか？

TechAcademyのwebdesignコースは実際のところ良いの？悪いの？？