第1章：ココナラとHTML/CSSコーディングの概要
こんにちはWEB系のフリーランスをIT企業に勤めながら行っているWatataと申します。初心者の方が「ゼロからココナラでHTML/CSSコーディング案件を取るまで」に必要な知識やノウハウを、できるだけ丁寧にまとめますね。まずは「ココナラって何？」「HTML/CSSの仕事とはどんなもの？」「どうやって案件を獲得していくの？」という全体像からつかんでいきましょう。
目次
- 第1章：ココナラとHTML/CSSコーディングの概要
- 1-1. ココナラとは何か？
- ● ココナラの概要
- ● 他のクラウドソーシングサービスとの違い
- ● HTML/CSSに特化した案件は実際どんな需要があるのか
- 1-2. HTML/CSSの仕事の全体像
- ● コーディング案件の種類
- ● HTML/CSSコーダーの実務的役割
- ● クライアントが求めているポイント
- 1-3. ココナラで案件を獲得するための基本的な流れ
- ステップ1：プロフィール作成
- ステップ2：ポートフォリオ準備
- ステップ3：サービスの出品とリサーチ
- ステップ4：提案・受注・納品の流れ
- ステップ5：継続案件・リピートを狙う
- 【補足トピック】1章で押さえておきたい超基礎ポイント
- 【例題】ここでちょっと練習課題をやってみよう
- ● 例題：シンプルな自己紹介ページを作る
- ● 例題の解説
- 1章まとめ
- 第2章：HTML/CSSの基礎知識を確実に固める
- 2-1. HTMLの基本構造を再確認
- 2-1-1. HTML全体の流れ
- 2-1-2. head要素に入れる代表的なタグ
- 2-1-3. body要素に入る代表的なタグ
- 2-1-4. セマンティックHTMLを意識しよう
- 2-2. CSSの基本構造を再確認
- 2-2-1. セレクタとプロパティ、値の概念
- 2-2-2. CSSの適用方法（外部CSS・内部CSS・インラインCSS）
- 2-2-3. CSSのセレクタの種類
- 2-2-4. CSSの優先順位（カスケーディング）
- 2-3. HTML5/CSS3の新機能ポイント
- 2-3-1. HTML5セマンティック要素の活用
- 2-3-2. CSS3の代表的なプロパティ
- 2-3-3. レスポンシブデザイン（Media Queries）
- 2-4. 初心者がつまずきやすいポイント
- 2-4-1. 余白が意図しない場所にできる
- 2-4-2. floatを使ったレイアウト崩れ
- 2-4-3. positionプロパティの誤用
- 2-4-4. 「全然スタイルが反映されない！」
- 2-5. 実践例題：HTML/CSSの基礎を網羅したミニサイトを作ろう
- ● 例題概要
- 2-5-1. index.html
- 2-5-2. style.css
- 2-5-3. サンプル画面イメージと運用
- 2-6. 例題に対するチェック項目
- 4. レスポンシブ（@media queries）が機能しているか？
- 5. ブロック要素とインライン要素を正しく把握しているか？
- 6. 画像のパスやalt属性は正しく設定されているか？
- 7. フォントや色使いは読みやすいか？
- 8. その他の細かな点
- 2-7. コーディングの効率を上げるテクニック
- 2-7-1. Emmet（エメット）の活用
- 2-7-2. スニペット機能
- 2-7-3. Live Server（ライブプレビュー）の活用
- 2-7-4. ブラウザの開発者ツールを駆使する
- 2-8. 初心者がやりがちなNG行動＆改善策
- 1) なんでも<div>で囲むだけの「div地獄」
- 2) とにかくposition: absolute;を多用する
- 3) 大量の!importantに頼る
- 4) 「動けばOK」とコードを整理しない
- 2-9. Q&A：HTML/CSSに関するよくある質問
- Q1. 「HTMLとXHTMLはどう違うの？」
- Q2. 「<br>タグはたくさん使ってもいいの？」
- Q3. 「行間（line-height）はどう設定すればいい？」
- Q4. 「CSSで使う色指定は#rrggbb以外にどんな書き方がある？」
- Q5. 「HTML/CSSだけでアニメーションできるの？」
- 2-10. 章末演習問題
- 演習問題1
- 演習問題2
- 演習問題3
- 2-11. 演習問題の解答例
- 演習問題1 解答例
- 演習問題2 解答例（CSS）
- 演習問題3 解答例
- 2-12. 第2章まとめ
- 第3章：開発環境の整え方・ツール選び
- 3-1. テキストエディタ・IDEの選び方
- 3-1-1. テキストエディタとIDEの違い
- 3-1-2. VSCode（Visual Studio Code）の特徴
- 3-1-3. VSCodeの基本セットアップ
- 3-1-4. その他のエディタ・IDE例
- 3-2. ローカル環境・テスト環境の構築
- 3-2-1. なぜローカル環境が必要？
- 3-2-2. Live Serverの使い方（VSCode拡張）
- 3-2-3. XAMPPやMAMPなどのローカルサーバー
- 3-3. ディレクトリ構造の作り方
- 3-3-1. なぜディレクトリ構造が大切か？
- 3-3-2. 典型的なディレクトリ例
- 3-4. ブラウザ開発者ツールの活用
- 3-4-1. 開発者ツール（DevTools）とは？
- 3-4-2. Elementsパネル
- 3-4-3. Consoleパネル
- 3-4-4. Networkパネル / Performanceパネル
- 3-4-5. Device Toolbar（レスポンシブビュー）
- 3-5. 作業効率をアップさせるための補助ツール
- 3-5-1. Prettier（コード整形ツール）
- 3-5-2. ESLint（コードの品質チェック）
- 3-5-3. GitとGitHub（バージョン管理）
- 3-5-4. 画像圧縮・最適化ツール
- 3-6. 環境構築の一連の流れ（練習ドリル）
- ● 例題：VSCode＋Live Serverでミニサイトを作ろう
- ● 例題：WordPressローカル環境を構築してみよう（応用編）
- 3-7. 初心者がよくある質問Q&A：環境構築編
- Q1. 「Live Serverを起動してもブラウザが開かないorエラーが出る」
- Q2. 「インターネットに接続していなくてもLive Serverは使える？」
- Q3. 「Windows版のMAMPがあると聞いたけど、XAMPPと何が違う？」
- Q4. 「GitHubを使った方がいいのは分かるけど、1人開発でも使うメリットは？」
- Q5. 「FTPクライアントは何がいい？」
- 3-8. 章末演習問題
- 演習問題1
- 演習問題2
- 演習問題3
- 3-9. 演習問題の解答例
- 演習問題1 解答例
- 演習問題2 解答例
- 演習問題3 解答例
- 3-10. 第3章まとめ
- 第4章：コーディング実践ドリル（基礎編）
- 4-1. 基本的なレイアウトの組み方
- 4-1-1. ブロックレベル要素とインライン要素の復習
- 4-1-2. レスポンシブ対応の基本方針
- 4-1-3. Flexboxでレイアウトを組む
- 4-2. コーディングドリル①：ヘッダー、ナビゲーションのレイアウト
- 4-2-1. ドリルの概要
- 4-2-2. HTML構成
- 4-2-3. CSSの記述例
- 4-2-4. 追加練習
- 4-3. コーディングドリル②：メインビジュアル、ヒーローセクション
- 4-3-1. ドリルの概要
- 4-3-2. HTML構成
- 4-3-3. CSSの記述例
- 4-3-4. 追加練習
- 4-4. コーディングドリル③：カードレイアウト
- 4-4-1. ドリルの概要
- 4-4-2. HTML構成
- 4-4-3. CSSの記述例
- 4-4-4. 追加練習
- 4-5. コーディングドリル④：グリッドレイアウトの基礎
- 4-5-1. ドリルの概要
- 4-5-2. HTML構成
- 4-5-3. CSSの記述例
- 4-5-4. 追加練習
- 4-6. さらに押さえておきたいレスポンシブのテクニック
- 4-6-1. 画像のレスポンシブ対応
- 4-6-2. メディアクエリを複数使う
- 4-6-3. レスポンシブタイポグラフィ
- 4-7. 実践ドリル総合演習：シンプルLPの組み立て
- 4-7-1. LPの要件
- 4-7-2. HTML例
- 4-7-3. CSS例（概要）
- 4-7-4. 表示チェックと微調整
- 4-8. よくある質問（Q&A）: レイアウト実践編
- Q1. 「FlexboxとGridはどっちを使うべき？」
- Q2. 「スマホで表示したら、背景画像の重要な部分が切れてしまう」
- Q3. 「カードレイアウトで、タイトルやテキストの長さが違うと高さがバラバラになり崩れる」
- Q4. 「PC表示では3列にしたいけど、タブレットでは2列、スマホでは1列にしたい」
- Q5. 「HTML/CSSだけでスライダーを作りたいが可能？」
- 4-9. 演習問題：レイアウトドリルのおさらい
- 演習問題1
- 演習問題2
- 演習問題3
- 4-10. 演習問題の解答例
- 演習問題1 解答例
- 演習問題2 解答例（Grid + grid-template-areas）
- 演習問題3 解答例
- 4-11. 第4章まとめ
- 第5章：デザインカンプからのコーディング実践ドリル（応用編）
- 5-1. デザインカンプとは？
- 5-1-1. デザインカンプの役割
- 5-1-2. 主なデザインツール
- 5-2. カンプの読み解き方・注意点
- 5-2-1. カンプを見る前に確認すべきこと
- 5-2-2. カンプの測り方
- 5-2-3. 余白やフォントサイズの数値をそのまま使うか？
- 5-2-4. 画像の書き出し
- 5-3. カンプをコーディングに落とし込む手順
- 5-3-1. 手順1：全体のセクション構成を把握する
- 5-3-2. 手順2：HTMLの骨組みをざっくり書く
- 5-3-3. 手順3：画像やテキストを配置し、スタイルの雛形を作る
- 5-3-4. 手順4：微調整とレスポンシブ対応
- 5-3-5. 手順5：最終確認・納品形態
- 5-4. コーディング演習ドリル（応用編）
- 5-4-1. 想定デザインカンプの概要
- 5-4-2. HTML例
- 5-4-3. CSS例（抜粋）
- 5-4-4. チェックポイント
- 5-5. さらにステップアップするために
- 5-5-1. UIデザインツールをある程度使えると強い
- 5-5-2. ピクセルパーフェクトをどこまで目指すか
- 5-5-3. デザインがない場合は自分で作れる？
- 5-6. Q&A：デザインカンプコーディングにまつわる疑問
- Q1. 「カンプにはテキストが画像として書かれているが、生テキストにすべき？」
- Q2. 「Photoshopしか触ったことがないけど、FigmaやXDのファイルが来たらどうすれば？」
- Q3. 「カンプの縦余白はぴったり合わせたのに、実際の表示で思ったより広く（または狭く）感じる...」
- Q4. 「カンプを受け取ったらどんなファイル形式で保存しておくべき？」
- Q5. 「納品ファイルのフォント指定はどうする？」
- 5-7. 章末演習問題
- 演習問題1
- 演習問題2
- 演習問題3
- 5-8. 演習問題の解答例
- 演習問題1 解答例
- 演習問題2 解答例
- 演習問題3 解答例
- 5-9. 第5章まとめ
- 第6章：ポートフォリオサイトを作る
- 6-1. ポートフォリオサイトの必要性
- 6-1-1. なぜポートフォリオが必要なのか？
- 6-1-2. 掲載内容がポイント
- 6-1-3. ココナラとの連携
- 6-2. ポートフォリオに載せるべき内容
- 6-2-1. 基本情報：自己紹介＆スキル
- 6-2-2. 制作実績一覧（作品例）
- 6-2-3. 連絡先・問い合わせフォーム
- 6-2-4. 可能ならば料金プランや作業フロー
- 6-3. ポートフォリオサイトの構成例
- 6-3-1. 1ページ構成（シングルページ）の例
- 6-3-2. 複数ページ構成の例
- 6-4. 簡単に作れるポートフォリオ例（サンプルコードと解説）
- 6-4-1. HTML例
- 6-4-2. CSS例（抜粋）
- 6-4-3. ポイント解説
- 6-5. ちょっとしたJavaScript導入例
- 6-5-1. スムーズスクロール
- 6-5-2. フェードインアニメーション
- 6-6. 作ったポートフォリオを公開する方法
- 6-6-1. 無料ホスティング or GitHub Pages
- 6-6-2. 有料サーバー＋独自ドメイン
- 6-7. ポートフォリオをココナラに活かす方法
- 6-7-1. プロフィール欄にURLを掲載
- 6-7-2. サービス出品ページに掲載
- 6-7-3. 提案文にURLを添える
- 6-8. よくある質問：ポートフォリオ編
- Q1. 「まだ実績が少ないのですが、載せる作品がない...」
- Q2. 「デザインが苦手...どうしたらオシャレに見せられる？」
- Q3. 「問い合わせフォームを作るのが難しいです」
- Q4. 「WordPressでポートフォリオサイトを構築すべき？」
- Q5. 「写真やイラストはフリー素材を使っていい？」
- 6-9. 章末演習問題
- 演習問題1
- 演習問題2
- 演習問題3
- 6-10. 演習問題の解答例
- 演習問題1 解答例
- 演習問題2 解答例
- 演習問題3 解答例
- 6-11. 第6章まとめ
- 第7章：ココナラでサービスを出品する前の準備
- 7-1. プロフィールの作り込み
- 7-1-1. プロフィール写真とユーザー名
- 7-1-2. 自己紹介文のポイント
- 7-1-3. 評価や実績欄について
- 7-2. スキルや経歴をアピールする具体的な方法
- 7-2-1. 箇条書き＆アイコンで分かりやすく
- 7-2-2. 経歴や学習歴を年表風に
- 7-2-3. 資格や受講歴、コンテスト実績
- 7-3. サービス内容の決定
- 7-3-1. まずは得意なものを1つに絞ってみる
- 7-3-2. 価格設定の考え方
- 7-3-3. 提供範囲と納期を明確に
- 7-3-4. オプション料金や追加サービス
- 7-4. 競合リサーチの方法
- 7-4-1. ココナラ内検索
- 7-4-2. 強豪 vs. ニッチな分野
- 7-4-3. 差別化ポイントの例
- 7-5. タイトル・説明文・サムネ画像の作り方
- 7-5-1. サービス名の付け方
- 7-5-2. 説明文のコツ
- 7-5-3. サムネ画像をどう作るか
- 7-6. まとめ：出品前のチェックリスト
- 7-7. Q&A：ココナラ出品前の疑問
- Q1. 「実績ゼロなのに価格を高めに設定して大丈夫？」
- Q2. 「サービスタイトルのキーワードはどの程度意識すればいい？」
- Q3. 「サムネ画像を作る際に使えるフリー素材は？」
- Q4. 「サービス説明文が長すぎて、読みづらくなりそう」
- Q5. 「実はまだポートフォリオが完成していない…出品を待つべき？」
- 7-8. 章末演習問題
- 演習問題1
- 演習問題2
- 演習問題3
- 7-9. 演習問題の解答例
- 演習問題1 解答例
- 演習問題2 解答例
- 演習問題3 解答例
- 7-10. 第7章まとめ
- ＜第7章 お疲れさまでした！＞
- 第8章：ココナラで実際にサービスを出品する
- 8-1. サービスの登録手順
- 8-1-1. カテゴリ選択
- 8-1-2. サービス内容の入力
- 8-1-3. オプション料金の設定
- 8-1-4. 納期設定・打ち合わせ方法
- 8-1-5. サムネイル画像、ギャラリーの登録
- 8-1-6. タグの設定
- 8-1-7. 公開 or 限定公開
- 8-2. 見積り・カスタマイズ相談を効果的に活用
- 8-2-1. 見積り相談の流れ
- 8-2-2. トラブルを防ぐヒアリングポイント
- 8-2-3. カスタマイズ相談のメリット
- 8-3. 出品後にやるべきこと
- 8-3-1. SNSやブログでの告知
- 8-3-2. プロフィールの定期的な更新
- 8-3-3. 初期段階でレビューを増やす施策
- 8-4. Q&A：出品後の疑問あれこれ
- Q1. 「全然アクセス（閲覧数）が増えない…どうすれば？」
- Q2. 「出品して数日で購入されるもの？ それとも1ヶ月くらい様子見？」
- Q3. 「急に値段を上げ下げしてもいいの？」
- Q4. 「見積り相談だけして購入に至らないケースが多い…」
- Q5. 「PCが壊れたり、他の用事で数週間作業できないときはどうする？」
- 8-5. 章末演習問題
- 演習問題1
- 演習問題2
- 演習問題3
- 8-6. 演習問題の解答例
- 演習問題1 解答例
- 演習問題2 解答例
- 演習問題3 解答例
- 8-7. 第8章まとめ
- 第9章：案件獲得から納品までの進め方・コミュニケーション術
- 9-1. 受注までのフロー
- 9-1-1. 案件発生のきっかけ
- 9-1-2. メッセージ対応の基本
- 9-1-3. 信頼を得るためのポイント
- 9-2. 制作〜納品〜修正の流れ
- 9-2-1. 要件定義・ワイヤーフレーム確認
- 9-2-2. デザインの最終確定
- 9-2-3. コーディング開始
- 9-2-4. 中間レビュー（任意）
- 9-2-5. 納品形態
- 9-2-6. 修正対応と追加料金
- 9-2-7. 完了・評価
- 9-3. クライアントとの長期的な関係を築くコツ
- 9-3-1. 納品後のフォロー
- 9-3-2. 継続案件につなげる方法
- 9-3-3. 評価と口コミの収集
- 9-4. Q&A：案件獲得後によくある疑問
- Q1. 「クライアントの要望が曖昧で、制作が進まない…どうすれば？」
- Q2. 「納期に遅れそうになったらどうする？」
- Q3. 「制作途中でクライアントと連絡が取れなくなった…」
- Q4. 「修正が多く、追加料金を取りたいが言い出しにくい…」
- Q5. 「納品後に想定外のバグが見つかった。追加費用はもらう？」
- 9-5. 第9章まとめ
- 第10章：さらにレベルアップするために
- 10-1. JavaScriptやフレームワークへの展開
- 10-1-1. なぜJavaScriptが必要？
- 10-1-2. jQueryから始める
- 10-1-3. React・Vue・Angularなどのフレームワーク
- 10-2. WordPress案件への応用
- 10-2-1. なぜWordPressが重要？
- 10-2-2. テンプレートタグ・テーマ構造の基礎
- 10-2-3. WordPressの学習ロードマップ
- 10-3. SEOやマーケティング知識の活用
- 10-3-1. SEO（検索エンジン最適化）とは
- 10-3-2. LP制作×マーケティングの視点
- 10-4. 収益とスキルを伸ばすロードマップ
- 10-4-1. 学習の継続方法
- 10-4-2. 高単価案件を獲得するための考え方
- 10-4-3. キャリアパスの一例
- 10-5. 章末Q&A：レベルアップ編
- Q1. 「ReactやVueを学ぶなら、まず何をすればいい？」
- Q2. 「WordPressテーマ制作の難易度はどれくらい？」
- Q3. 「Webデザイン自体もやってみたいが、コーディングと掛け持ちは大変？」
- Q4. 「海外のWeb技術情報にも触れたいけど英語が苦手…どう勉強すればいい？」
- Q5. 「WordPress以外のCMSは学ぶべき？」
- 10-6. 本記事の総まとめ＆今後のステップ
- 10-7. 付録：本記事を今後活用するためのチェックリスト
- 【完】
1-1. ココナラとは何か？
● ココナラの概要
みなさんは「ココナラ」というプラットフォームをご存知でしょうか？ 最近ではテレビCMなどでも見かけますよね。ココナラは、自分の得意なことを売り買いできるサービスとして知られています。例えばイラスト制作や動画編集、占い、ビジネス相談など多岐にわたるカテゴリがあり、その中のひとつに「Webサイト制作・Webデザイン」分野があります。そのWebサイト制作カテゴリの中で、HTML/CSSコーディングを必要としているクライアントが数多くいるんです。
- 特徴1: 手軽に出品ができるココナラは手数料こそかかるものの、月額固定費や初期費用は基本かからず、個人がすぐにサービスを出品できます。
- 特徴2: 幅広いニーズ占いやイラストなど、個人向けのサービスがメインとされがちですが、実はビジネス用途の案件もかなり多いです。Webサイト制作関連もそのひとつ。
- 特徴3: 「個人間取引」にも抵抗が少ないランサーズやクラウドワークスなど、クラウドソーシングサイトに近いイメージもありますが、ココナラの場合は個人同士のやり取りに慣れたユーザーが多いため、比較的フランクに進められる印象があります。
● 他のクラウドソーシングサービスとの違い
「ココナラって、ランサーズやクラウドワークスとどう違うの？」と聞かれることもあります。大きく違う点は「クライアントが直接、サービスを購入しに来てくれる形式」がメインだということですね。もちろん、ココナラ内にも「見積り・仕事依頼」という形は存在しますが、基本的には自分の提供できるサービスを明確に「出品」しておき、それを見たクライアントが購入ボタンを押して依頼してくる、そんなイメージです。
- 出品型: 自分で価格や内容を決めておく
- 購入型: クライアントが自分に合うサービスを探して購入する
「出品型」のプラットフォームであるため、事前に自分のサービスを売りやすい形でまとめておくことが重要です。クラウドワークスやランサーズは、クライアントの「こんな仕事があります」という募集に対して、フリーランス側が提案を出して競う形が多いですよね。ココナラの場合、それもありますが、より自分からサービスを提示するスタイルが主体になるわけです。
● HTML/CSSに特化した案件は実際どんな需要があるのか
ココナラで「HTML/CSS」で検索すると、LP（ランディングページ）のコーディングや、WordPressテーマのカスタマイズなど多種多様な依頼が見つかります。要は**「デザインはできているから、あとはコードにしてほしい」「簡単な修正だけしてほしい」**といったニーズが山のようにあるんですね。
- LPコーディング: 1ページ完結型の長めのページをHTML/CSSに落とし込む
- Webサイト全体のコーディング: デザインカンプを支給され、それを複数ページ分コーディング
- 細かな修正対応: 既存サイトの色調やレイアウトの修正
- WordPress導入・テーマ改変: HTML/CSSに留まらずPHPの一部改変も発生するが、CSS部分だけでもやってほしい、という依頼がある
初心者のうちはまずはLP制作など、比較的1ページ完結しやすい案件を狙うと入りやすいです。複数ページのコーポレートサイト案件などは、工数や納期の管理が複雑になる場合もあるため、慣れてきてから手を出すのが無難と言えるでしょう。
1-2. HTML/CSSの仕事の全体像
● コーディング案件の種類
先ほど少し触れましたが、HTML/CSSのコーディング案件にはいくつかのパターンがあります。ここでは代表的なものを簡単に紹介します。
- LP（ランディングページ）制作案件1ページに商品やサービスの魅力を凝縮するデザインカンプが用意されている場合が多いスマホ対応必須（レスポンシブ）がほとんど目安の相場：3万円〜10万円程度（デザイン込みかどうかで変動）
- 1ページに商品やサービスの魅力を凝縮する
- デザインカンプが用意されている場合が多い
- スマホ対応必須（レスポンシブ）がほとんど
- 目安の相場：3万円〜10万円程度（デザイン込みかどうかで変動）
- 企業サイトのコーディング案件複数ページ（トップページ＋下層ページ）で構成される企業情報、サービス紹介、お問い合わせページなど納期が長め＆内容もボリューミー目安の相場：5万円〜数十万円（ページ数とデザインボリューム次第）
- 複数ページ（トップページ＋下層ページ）で構成される
- 企業情報、サービス紹介、お問い合わせページなど
- 納期が長め＆内容もボリューミー
- 目安の相場：5万円〜数十万円（ページ数とデザインボリューム次第）
- WordPressテーマのカスタマイズ既存テーマをベースにCSSを編集してデザイン変更PHPのテンプレート構造を少し触る場合もある要望が細かいケースが多く、コミュニケーションが大事目安の相場：2万円〜10万円程度
- 既存テーマをベースにCSSを編集してデザイン変更
- PHPのテンプレート構造を少し触る場合もある
- 要望が細かいケースが多く、コミュニケーションが大事
- 目安の相場：2万円〜10万円程度
- 部分修正や更新作業「このボタンの色を変えてほしい」「画像を差し替えてほしい」など1案件数千円〜数万円と幅広いが、手軽に取り組みやすい納期は短いことが多い
- 「このボタンの色を変えてほしい」「画像を差し替えてほしい」など
- 1案件数千円〜数万円と幅広いが、手軽に取り組みやすい
- 納期は短いことが多い
こういった案件がココナラでも十分見つかります。LP制作や、シンプルなコーポレートサイト制作の依頼が比較的目立ちますね。初心者の方がまず挑戦するならLP制作がおすすめです。なぜなら、「1ページ完結」というのが学習やタスク管理の面でわかりやすいんですね。複数ページあるサイト制作だと、下層ページごとに異なるデザイン要素などを考慮しなければならず、初心者にとってはハードルが上がります。LPなら、ひとつのデザインをそのままHTML/CSSで実装するだけなので、段取りが組みやすいんです。
● HTML/CSSコーダーの実務的役割
HTML/CSSコーダーの一般的な役割は**「デザイナーが作ったデザインカンプを、ブラウザで正しく表示される形に落とし込むこと」です。もちろん、JavaScriptを使った動きの実装などが加わるケースもありますが、まずは見た目を正確に再現する力**が求められます。ココナラの場合、個人経営者や中小企業の担当者が、デザインデータ（画像ファイルやFigmaリンク）を用意して「この通りにコーディングしてほしい」と依頼してくることが多いです。もしくは「こんな雰囲気のサイトにしたいから、簡易デザインも含めてやってほしい」という依頼もあります。そのため、デザインカンプを読み解くスキルや、基本的なHTML/CSSの知識、レスポンシブの対応力、あとは細かな微調整を素早く反映してコミュニケーションをとる力などがポイントになります。
● クライアントが求めているポイント
クライアントは何を求めているか？ これは案件ごとに千差万別ですが、大まかには以下のポイントを意識すると良いでしょう。
- 正確にデザインを再現してほしい「ピクセル単位まで同じようにしてほしい」場合もあれば、「ざっくり似せてくれればいい」という場合もあります。事前にすり合わせることが大切です。
- 「ピクセル単位まで同じようにしてほしい」場合もあれば、「ざっくり似せてくれればいい」という場合もあります。事前にすり合わせることが大切です。
- 納期を守ってほしいコーディングが遅れればプロモーションが遅れ、ビジネス機会を逃すかもしれません。納期厳守はとても重要。
- コーディングが遅れればプロモーションが遅れ、ビジネス機会を逃すかもしれません。納期厳守はとても重要。
- 修正対応をスムーズにしてほしい必ずと言っていいほど修正は発生します。修正指示を正しく理解し、迅速に対応することで信頼が得られます。
- 必ずと言っていいほど修正は発生します。
- 修正指示を正しく理解し、迅速に対応することで信頼が得られます。
- 初心者でもちゃんとサポートしてほしい中にはWeb制作の知識が少ないクライアントも多いです。「専門用語ばかり使って話が通じない」ということがないように、平易な言葉で丁寧に説明できる力があると重宝されます。
- 中にはWeb制作の知識が少ないクライアントも多いです。「専門用語ばかり使って話が通じない」ということがないように、平易な言葉で丁寧に説明できる力があると重宝されます。
1-3. ココナラで案件を獲得するための基本的な流れ
ここでは、ココナラで「HTML/CSSコーディングの案件を取るまで」のざっくりした流れを見ていきます。具体的なプロフィール作りやサービス登録方法は後の章で詳しく解説しますので、今は全体像を把握するだけでもOKですよ。
この記事のライター
