初心者・独学でもわかる!案件受注できるスキルレベルとは?
様々な案件の内容と必要な基本的スキル

案件には様々なものがあり
*デザインカンプをコーディングするだけのもの
*コーディングしてある静的サイトをWordpress化するもの
*オリジナルテーマのWordpressのサイトを作成するもの…
などいろいろあります。
WordPressを使って、既存テーマのカスタマイズ無しパターンでサイトを作成する案件は、誰でも簡単にできる為ほとんどありません。コーディングに関連性が高い+αのスキルを身に付けて市場価値を上げることがオススメです。
- 案件によって、必要なスキルが違いますので、HTMLやCSSなど最低限のコーディングスキルを身につけたら、次にデザインデータからのコーディング方法を学びましょう。なぜなら、実作業でコーディングを行う場合、デザインデータを基に作業を行うからです。(実際に制作会社からWEB制作を依頼された際に、デザインデータを提供されて、それを元にコーディングを行うのが一般的です。)デザインデータからのコーディングは、案件作業をするための必須スキルです。(デザインデータは、『Figma』が多く、約8割を占め、残り2割が『イラストレータ』です。)
- 複数人でWebサイトやアプリのデザインを作るときに、デザインの内容を共有し、CSSの情報を確認したり、画像を書き出したりするためにデザインスペックという機能を使います。その使い方として、共有リンクの作成とCSS情報の確認の操作を覚えることが必要になります。(「デザインスペック」とは、デザイナーが作成したデザインの詳細な仕様情報を、開発者に正確に伝えるための資料や機能のことです。)
Figmaで「デザインスペック」を確認するには、開発者向けの「Dev Mode(デブモード)」を使うのが最も一般的で便利な方法です。デザイナーとエンジニアがスムーズに連携するための専用ビューであり、有料になります。 - また、HTML/CSSで作成した静的サイトをWordPressの管理画面を使って更新できる動的サイトにする案件が多いです。WordPress化することで、コーディングの知識がない人でも管理画面から簡単にサイト更新を行うことが可能になるからです。
- コーディングしたサイトをWordpress化することも含めて、WordPress関連の案件は、オリジナルテーマの開発が必須になります。なぜなら、ほとんどの案件作業が既存テーマでは対応できず、オリジナルテーマを開発する必要があるからです。
- サイト公開まで含めて依頼される案件も多いです。その場合、インターネット上にサイトを公開する作業までが仕事内容になります。
具体的には、「レンタルサーバーの環境設定【SSL設定(http→https)、独自ドメインの紐付け、WordPressのインストール】や「ファイル操作(サーバへのダウンロード/アップロード)」のスキルが求められます。- 新規にサイト制作をする場合、発注者がレンタルサーバやドメインの契約をしてない場合契約の支援をします。なぜ支援かというと、契約自体は必ず発注者に行ってもらうからです。こちらで契約までしてしまうと、揉めた際にトラブルの元になります。
コーディング以外に必要なスキルを整理すると…
コーディングスキル以外に必要な基本的スキルを整理すると、次の4つになります。
・ファイル操作(ダウンロード/アップロード)
・サーバ環境設定
・デザインデータからの情報取得
・効率的なコーディングソフト
- ファイル操作(ダウンロード/アップロード):
WEB制作では、アップロードしてインターネット上に公開する必要がありますので、ファイルのアップロード/ダウンロードの操作は必須です。レンタルサーバのサービスを使ってもいいのですが、「FileZilla」という無料のFTPソフトを利用したほうがいいです。 - サーバ環境設定:
制作会社案件では、下記のような作業も必要になることがあります。
SSL設定(http→https) 独自ドメインの紐付け WordPressのインストール - デザインデータからの情報取得:
WEB制作は、主にfigmaアプリで作られたデザインを基にコーディング作業を行っていきます。そのため、正確にコーディング情報を把握する必要があり、「デザインデータからの画像の書き出し」「文字情報の取得」「要素の測定(コンテンツのサイズやコンテンツ間の余白など)」はできなければなりません。 - 効率的なコーディングソフト:
コーディングする際に便利なソフトがいくつかありますが、無料の「VSCode」は優れものです。広く使われ、ネット上に使用法を解説したサイトが多く存在します。
WordPressのエディタなどでコードを入力していくのと比べれば、その効率性の良さを実感できるはずです。
コーディング教室などで、覚えることが増えるという理由から「VSCode」を教えないところもありますが、それは間違いだと思います。
様々な案件の内容と発展的なスキル(カスタマイズ)

基本的なスキルができたら、次は発展的スキルにチャレンジです。といっても、一般的な受託案件で使うカスタマイズはある程度決まっています。
具体的によくあるカスタマイズ方法は、「①スライダー機能の追加、②お問い合わせ機能の追加、③カスタム投稿の実装」の3点です。
- スライダー機能
- スライダー機能の作成方法は、大きく2パターンで、「プラグインを使った方法」と「JavaScriptライブラリを使った方法」になります。
- プラグインを使う場合、「MetaSlider」を利用します。利用方法はすごく簡単で、出力方法もショートコード を貼り付けるだけです。
- JavaScriptライブラリを使う場合、Swiperを使用します。数行コードを記載するだけで利用可能です。シンプルなメインビジュアルのスライダーはプラグイン(MetaSlider)を利用して対応すれば問題ないと思います。
- お問い合わせ機能
- コーポレートサイトに必須の機能なので対応できるようにしておきましょう。お問い合わせ機能の作成方法も大きく2パターンあり、「プラグインを使った方法」と「Googleフォームを使った方法」があります。
- カスタム投稿
- デフォルトの投稿は「お知らせ」として使い、その他の更新コンテンツ(「業務内容」、「実績」等)でカスタム投稿を実装する場合が多いです。作成方法は難しくありませんが、デフォルトの投稿との違いがはじめは分かりにくく、カスタム投稿をどんな時に作成するのか悩む人が多いです。
さらに発展的なスキル(データ移行、管理運用など)

開発環境から本番環境へのデータ移行はもちろん、完成したサイトのバックアップなど保守・運用・管理まで任されることもあります。
WEBサイトは公開して終わりではなく、分析&改善を繰り返し育てていくものだからです。
- 開発環境から本番環境へのデータ移行を行います。
WordPressの場合、プラグインを利用してデータ移行するのが簡単です。「All-in-One WP Migration」というプラグインを利用してデータ移行を行えば簡単です。
WordPress以外のサイトは、WordpressのようにデータベースがありませんのでFTPソフトを使いシンプルにサーバに転送するだけです。 - 次に運用ツールの設定です。
WEBサイトは公開して終わりではなく、分析&改善を繰り返し育てていくものです。本番環境には、Googleが無料で提供しているGoogleアナリティクスとGoogleサーチコンソールの2つを設定しておきましょう。ユーザーがサイトを訪問する前後で、分析するポイントが異なります。 - その他のスキル
- 後悔する前に、必ずセキュリティ対策を施しましょう
- 引継ぎ作業は、手順書を作成し、実際に発注者に操作してもらいながら行います。
引継ぎ作業が終わると、いよいよサイトの公開作業です。公開作業は、設定漏れがないかの最終チェックです。基本的に公開作業が終わった段階で納品完了になります。
最後に請求作業です。請求書を発行し、お客様に振り込んでもらって完了です。
請求書の発行にはMisoca(ミソカ) を利用したら便利です。


