HTMLとCSSだけで稼ぐ！


Silicon Valley Super Ware

2019年11月28日

HTMLとCSSだけで稼ぐ！

前回はあなたのプログラミング技術の価値について書きました。
今日はもう少し具体的な話をしてみます。

例えば、Web制作を目指す人の場合は、最初に勉強するのはHTMLとCSSと言うのが多いかと思います。では、HTMLとCSSだけで出来る仕事はどんな仕事があるでしょうか？

クラウドソーシングで調べる！

最初に、クラウドソーシングのサイトに行って調べてみる事にします！
日本では大手のクラウドソーシングサービスは、「ランサーズ」と「クラウドワークス」だと思いますが、今回は「ランサーズ」で調べてみる事にします。

まずは、ランサーズのサイト「https://www.lancers.jp/」に行ってみます。
そこから「仕事を受けたい」のタブの「仕事を探す」に行きます。

そうするといろいろな仕事のカテゴリーが表示されます。
HTMLとCSSですから、「Web制作・Webデザイン」を選びます
さらに、「Webサイト制作・デザイン」を選ぶとさらに細かいカテゴリーが表示されます

どんな仕事があるか興味がある人はまずはこのレベルでどんな仕事があるかを見て行くと感じがつかめます。このレベルでのサブカテゴリ―は

  • ホームページ制作・作成
  • Web(ウェブ)デザイン
  • HTML・CSSコーディング
  • ランディングページ（LP）制作
  • CMS構築・WordPress制作・導入
  • UIデザイン・設計
  • Webディレクション
  • レスポンシブサイト制作
  • ドメイン取得・移行
  • サーバー構築・管理・運用
  • データベース設計・構築
といった項目が出てきました。どうですか「Web制作」と言ってもこんなに沢山の分野の仕事がある事がわかります。詳しく見ればわかるのですが、HTMLとCSSだけで出来る仕事は限られています。いろいろな仕事はありますが、多くの仕事はHTMLとCSSに加えて別の知識やスキルが必要になるという事です。

比較的、HTMLとCSSでも対応可能な仕事が多いのが、「HTMLとCSSコーディング」や「ランディングページ（LP）の制作」かと思います。
まずは、この二つの分野の仕事をさらに詳しく見て行く事にします。

ランディングページ（LP）の制作

実際に仕事の詳細を見て行くと詳しい内容がわかります。

  • レスポンシブ対応（モバイルデバイスに対応した表示）
  • 写真やイラストの準備や加工
  • 全体のデザイン（ワイヤーフレームの作成）
  • HTML・CSSのコーディング
  • メールアドレスの取得（HTMLとCSSだけではできない）
ワイヤーフレームは発注元が用意している場合もありますし、
ワイヤーフレームのも含む場合もあります。
イラストや写真などの画像も同様です。
報酬も5万円から20万円位と無いようによってかなりばらつきがあるのがわかります。

閲覧時の提案数も新しい案件ではまだ10件前後の物もありますが、
50件以上の提案がある案件も結構あります。
今日見たところでは、「常駐」の仕事も結構ありました。


コーディングのみの案件は比較的ハードルが低いです。
しかし、ワイヤーフレームからのデザインやデータの取得なども含む案件も多く、
HTMLとCSSのスキルだけでは厳しい案件が多い傾向にあります。

HTML・CSSコーディング

ではHTML・CSSのコーディングはどうでしょうか？
今日見た限りでは、単純なコーディング案件はあまりありませんでした。

  • サイトの修正
  • ページのデザイン（ワイヤーフレーム）を基にしたコーディング

などが主な内容です。報酬もいくらか安めになっています。
安い物は5千円程度からというのもありました。

仕事を見ていてわかる事は？

HTML・CSSに限定してしまうと、仕事の量は余り多くない事がわかります。
今回は今日一日だけの調査ですが、仕事を獲得するには頻繁にチェックする事が大切です

  • 他のスキルがあると可能な仕事の数が増える（JavaScript,PHP,WordPressなど）
  • 模写が出来れば対応できる仕事もある（ワイヤーフレームに基づいたコーディング）
こうした事に気づくと意識が変わります！
実は、「稼ごう！」と思って、実際に行動に移すと状況が大きく変わります。
勉強ばかりしていても、稼ぐ事にはなかなか結びつきませんが、
例えば、今持っているスキルだけで出来る仕事にはどんな物があるか「見るだけ」でも変わるという事です。

現状に加えて「XXX」を身に着けると仕事が増えるー＞勉強しよう！
模写と同じことをするだけで稼げるー＞提案してみよう！

のように、行動パターンが変わります。

実際に勉強として模写を繰り返すより、ダメもとで提案してみる。
実際の案件の内容を見て自分なりにやってみる

こうした事をしていると、「稼ぐ」に大きく近づきます！

実際は、簡単な仕事だと応募する人も多く、競争が激しいのも現実です。
それでも、行動を起こすといろいろな事が変わってきます。

少なくても、HTMLとCSSだけでも稼げる仕事はあるという事です！

となると、あとはどうやって仕事を獲得するかです。

仕事の獲得にはコツがあります！興味がある方はお問い合わせください！
あなたのスキルに合わせて、案件獲得をサポートしています！

お問い合わせはこちら！

コメント

コメントを投稿

このブログの人気の投稿

ユーザーインターフェースの設計

イメージ
ホーム ブログ Firebase情報 ユーザーインターフェースの設計 2022年10月12日 ユーザーインターフェースの設計 前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。 HTML でデザイン これまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。 今回は、一般的な電卓のようなユーザーインターフェースを実現します。 この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。 Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。 今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。 HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。 <!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <div class="calc"> <div> <input class="display" type="text" /> </div> <div class="keypad"> <div> <button class="clea
続きを読む

足し算以外もできるようにする

イメージ
ホーム ブログ Firebase情報 足し算以外もできるようにする 2022年9月29日 足し算以外もできるようにする 穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。 演算子を選べるように変更する 足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。 この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。 これには、HTML の記述を変更してフォームを変更する必要があります。 <label>+</label> を以下のように変更します。 <select onchange="operatorChanged(event)"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。 演算子の変更を反映する プログラム側でやることは三つです。 初期状態の演算子を設定する　（最初にフォーム上で表示されている演算子をセットする） 演算子の変更を検出して、現在選択されている選択肢を更新する 「Calcullate」ボタンがクリックされたら必要な処理を呼び出す 現在どの演算子が選択されているかを知る必要があります。実装方法は幾つかありますが、今回は選択が変更される度に現在選択されている演算子を更新する方法を採用した例を紹介します。 これには、現在選択されている演算子を保存する変数「operator」を用意して管理します。
続きを読む

改良版足し算プログラム

イメージ
ホーム ブログ Firebase情報 改良版足し算プログラム 2022年9月15日 改良版足し算プログラム 前回は、入力データのチェックを工夫することで、データを処理する前に想定外のデータの入力を制限するユーザーインターフェースの設計について紹介しました。この記事では、そのコンセプトを使って、実際に足し算をするプログラムにしてみました。今回のポイントは、ユーザーインターフェースとデータ処理を分けるという点に注目してみました。プログラムの設計の際には、この二つの境界をきちんと設定する事が大切です。 データの処理は？ このプログラムは、入力された二つの整数を足して結果を表示するというシンプルなプログラムです。 このプログラムのデータ処理部分は、実は二つの整数の足し算をするだけです。 つまり、プログラムのデータ処理部分は以下の関数「add(a, b)」だけです。 function add(a, b) { return a + b; } 処理自体は、二つの整数「a」と「b」を受け取って、この二つの整数を足し算した結果を返すというシンプルなものです。 残りのプログラムは？ このプログラムのデータ処理部分は、至ってシンプルです。 では、残りのプログラムは何かというと、これがユーザーインターフェースになります。 <!DOCTYPE html> <html> <head> <title>Add Program</title> </head> <body> <div> <input id="opeland0" type="text" placeholder="Please input integer" /> <label>+</label> <input id="opeland1" type="text&qu
続きを読む