プロコーダー育成講座
こんな方へ基礎学習のあと、何をして良いかわからない方
実際に稼働しているサイトデザインを元に、プロとしてのコーディング力を培うカリキュラムをご用意しました。デザインをコードに起こす「考え方」を学ぶことで、どんなデザインもコーディングできるようになります。
この講座で、できるようになること
- 複雑なデザインをHTMLとCSSでコーディングできる
- デザイン画からレスポンシブにコーディングができる
- レイアウトが崩れてしまった時の修正方法が身につく
この講座について
どんな案件でももう怖くない！
～高難易度のプロ案件も、安心して受注できるスキルを獲得～
HTMLとCSSを学んでも「コーディングのお仕事を受けて、できるのか」となると不安に感じる方も多いのではないでしょうか。デザインをコードに起こす「考え方」を学び、どんなデザインもコーディングできるようになりましょう。
実際に稼働しているサイトデザインを元に、プロとしてのコーディング力を培うカリキュラムをご用意しました。
実際に稼働しているプロのデザインを使った本格学習
本物のプロコーダースキルが身につく
どんなデザインでも自力でコーディングできるようになる
コーディングを依頼されるデザインは、スクール等の題材よりも圧倒的にむずかしいですよね。時にはHTMLやCSSを全く知らないデザイナーが作ったものもあります。
この講座の内容をマスターすれば、もうデザインカンプを見て途方に暮れることはありません。どんな案件・どんなデザインも自分の力だけでコーディング出来るから怖いものなし！
クライアントの困難な要求に答えられるようになる
デザインカンプとぴったり重なるように作って欲しい、cssリセットは〇〇を使って...クライアントに伝えられる様々な要件。それをきっちりとクリアしてこそ、プロのコーダーです。
頂いたデザイン以外に「タブレット幅は見やすいように作っておいて」「ここはちょっと動きをつけて欲しい」など、漠然とした要求にも対応できるようになりますよ。
単価の高いお仕事が受けられ、余裕ができる
制作要件やデザイン難易度が高い案件ほど、お仕事の報酬も高額になります。また、複雑なデザインを再現できるコーダーは多くありません。競争相手が少ないので、案件獲得のチャンスもどんどん高くなります。
中には1時間4000円もありますので、毎日2時間、週末少しで20万円以上稼ぐことも可能です。
現場レベルのコーディングを学びましょう
本当の「プロのデザイン」を使ってコーディング
コーディング学習が目的のデザインではなく、プロがデザインし実際にリリースされているサイトデザインをコーディングします。デザイン通りに作る大変さを乗り越え、自信をゲットしましょう。
デザイン画からコーディングする「考え方」を学ぶ
レッスンでは、どう要素・クラスを設計を考えたのかを解説しています。習ったものならできる、ではなく、どんなデザインが来ても「考えてコーディングする」ことができるようになります。
モバイルファースト設計のコツが分かる
課題はコーディングは現在の主流であるモバイルファーストで行います。スマホ向けとPCモニター向けで、レイアウトやパーツデザインが変化する場合のクラス設計やCSSも解説。現場でも通用するモバイルファースト設計を学びましょう。
「自己解決力」をつけて、できないを自力で解決！
お仕事をするならば、作り方がわからないときに自分で調べて解決する力が必要です。レッスンは「調べながら作る」箇所も多いので、自然と自己解決力が身につきますよ。習っていないからできない、はもう卒業です！
ツールを使って効率よくコーディングする
カンプと同じに仕上がっているか確認したり、CSSで図形やアニメーション効果を表現したり…。コーダーの作業はツールを使うと簡単・短時間で出来ることもたくさんあります。卒業後も使用必須の便利なコーディングツールも紹介しています。
本講座の受講に必要なスキル
ランディングページ(LP)コーディング講座では複雑なレイアウトや、デザイン性の高いコーディングを行います。レッスンをスムーズに進めるため、HTMLとCSSの基礎知識が必要となります。
- HTML,CSSの基本書式を理解している
- Flexboxでのレイアウトができる
- positionプロパティを使った絶対位置指定ができる
- ブラウザ付属の検証ツールが使える
この講座で学べること
- 複雑なデザインをHTMLとCSSでコーディングできる
- デザイン画からレスポンシブにコーディングができる
- レイアウトが崩れてしまった時の修正方法が身につく
- スマホ幅でも横方向のはみ出しゼロでコーディングできる
- 実務レベルのコーディング力が身につく
- Webコーダーとしての自信がつく
こんな方におすすめです
- 基礎学習のあと、何をして良いかわからない方
- 基礎を学んだが「作りたいサイトが作れない」とお悩みの方
- 一回沼ると修正ができない・時間がかかる方
- クライアントの期待に答えられるか不安な方
- 実践的なHTML/CSS設計・コーディング方法を知りたい方
- お仕事レベルのWebコーディングスキルを身につけたい方
受講の前に用意するもの
- パソコンの基本操作ができる方
- HTML/CSS基礎学習終了者
- 【推奨】Google Chrome がインストールされている環境 ※他のブラウザでもOKですが、動画と同じ操作画面にするために、同じ環境を推奨します。
カリキュラム
- 1本講座の目的と進め方
- 2プロコーダーに必要なスキルについて
- 3Bootstrapを使わないコーディング
- 4リセットCSSについて
- 5コーディング、検索のための基礎知識
- 6テーブルの基礎を知ろう
- 7コーディングお役立ちツール
- 8画像化する部分・CSSで再現する部分を考える
- 9Illustratorからの画像書き出し方法
- 10~ここからの先のレッスンについて~
- 11【準備編】初期セッティングとヘッダーナビゲーション作成
- 12【実習01】スマホ幅ファーストビューの作成
- 13【解説01】スマホ幅ファーストビューの作成
- 14【解説01】デザインと比較し、調整する
- 15【実習02】無料８テストのセクションを作成
- 16【解説02】無料８テストのセクションを作成
- 17【実習03】実力をアップする3ステップ部分を作成
- 18【解説03】実力をアップする3ステップ部分を作成
- 19【実習04】Webデザイナースキルが上がる理由部分の作成
- 20【解説04】Webデザイナースキルが上がる理由部分の作成
- 21【実習05】ユーザーの声部分の作成
- 22【解説05】ユーザーの声部分の作成
- 23【実習06】クロージングとフッターを作成
- 24【解説06】クロージングとフッターを作成
- 25◇スマホ幅以上のコーディングについて
- 26【実習07】PC幅-ファーストビューの作成
- 27【解説07】PC幅-ファーストビューの作成
- 28【解説07】TB幅-ファーストビューの調整
- 29【実習08】PC幅-無料８テストの作成
- 30【解説08】PC幅-無料８テストの作成
- 31【実習09】PC幅-実力をアップする～部分の作成
- 32【解説09】PC幅-実力をアップする～部分の作成
- 33【実習10】PC幅-Webデザイナースキルが～部分の作成
- 34【解説10】PC幅-Webデザイナースキルが～部分の作成
- 35【実習11】PC幅-ユーザーの声部分の作成
- 36【解説11】PC幅-ユーザーの声部分の作成
- 37【実習12】クロージングとフッターの調整
- 38【解説12】クロージングとフッターの調整
- 39【実習13】ファーストビューのアニメーション設定
- 40【解説13】ファーストビューのアニメーション設定
- 41◇課題：テスト一覧ページの作成
プロコーダー育成講座
基礎学習のあと、何をして良いかわからない方に向けた、全41レッスンの講座です。上から順に、1つずつ進めてください。
- 複雑なデザインをHTMLとCSSでコーディングできる
- デザイン画からレスポンシブにコーディングができる
- レイアウトが崩れてしまった時の修正方法が身につく
- スマホ幅でも横方向のはみ出しゼロでコーディングできる