ホームページ制作デザイナーになる前に準備するもの12選

2026年7月21日

私はホームページ制作を6年間続けている個人事業主です。

ホームページ制作デザイナーとして独立しようと決めたものの、実際に案件を受けて仕事を始めるまでには想像以上に時間がかかりました。

コーディングやWordPressの勉強が終わればすぐに仕事を！と思っていましたが、実際にはホームページやポートフォリオの作成、サーバーやドメインの契約、請求書や契約書の準備、さらには案件を獲得するためのクラウドソーシングへの登録など、制作以外にもやるべきことがたくさんあります。

私自身も独立当初は何を優先して準備すればよいのかわからず、試行錯誤しながら環境を整えていきました。その中には「これは本当に役立った」と感じたものもあれば、「最初は必要なかったかもしれない」と感じたものもあります。

これからホームページ制作デザイナーとして独立を考えている方や、コーディング学習を終えて案件獲得に向けて動き出したい方の参考になれば幸いです。

ホームページ制作デザイナーになる前に準備するもの12選

この記事では、実際にホームページ制作を仕事にしている私が使用しているツールやサービスを中心に、サーバー、ドメイン、WordPressテーマ、請求書関連サービス、クラウドソーシングなど、独立前に準備しておきたいものをまとめました。

1. パソコン

ホームページ制作にはパソコンが必須です。

デザイン制作やコーディング、画像編集など複数の作業を同時に行うため、ある程度性能の高いパソコンを選びましょう。

特にメモリ16GB以上、SSD搭載モデルがおすすめです。

ホームページ制作デザイナーとして活動するならパソコンは必須ですが、私はノートパソコンが使いずらかった為、デスクトップパソコンをおすすめしています。

理由は、ホームページ制作のデザインカンプはデスクトップサイズを基準に作成されることが多いためです。

ノートパソコンでも制作は可能ですが、画面サイズや縦横比の違いによって、実際のデザインカンプと見え方が変わることがあります。そのため、余白のバランスや文字サイズ、全体のレイアウトを把握しづらいと感じる場面がありました。

また、私はChromeやedgeの拡張機能であるResponsive Viewerレスポンシブビューアーを使用して、パソコン・タブレット・スマートフォンなど複数の画面サイズを同時に確認しています。しかしノートパソコンの場合は画面サイズの制約もあり、それぞれの表示領域が小さくなるため、実際のデザインイメージを確認しづらい場面があります。

デスクトップパソコンと大きめのモニターであれば、デザインカンプを実際の表示サイズに近い感覚で確認できるため、デザインの完成イメージを把握しやすくなります。

特にホームページ制作を本業として長く続ける予定であれば、最初からデスクトップ環境を整えておくことをおすすめします。

2. デザインツール

デザイン制作には以下のようなツールが活躍します。

Figma
Adove XD
Adobe Photoshop
Adobe Illustrator

最近ではFigmaを利用する案件も増えているため、まずはFigmaから始めるのがおすすめです。
個人的にはXDを使い続けているので、XDをおすすめしたいですが、XDとFigmaの口コミではFigmaの方が圧倒的に口こみは良いです。XD派としては少し悲しい。

photoshopやIllustratorは必要に合わせて後からでも良いかなと思います。

3. コーディング環境

ホームページ制作ではHTMLやCSS、JavaScriptを編集するための環境も必要です。

おすすめのツールは以下の通りです。

Visual Studio Code	ホームページ制作で最も利用されているコードエディタの一つです。 HTML、CSS、JavaScript、PHPなどのコードを編集できるツール。無料で利用できます。Visual Studio Code
Local	WordPressを自分のパソコン内に構築できるローカル開発環境です。 Local WordPress
FFFTP	パソコンとサーバー間でファイルをアップロード・ダウンロードするためのFTPソフトです「FFFTP」定番FTPクライアントソフト – 窓の杜

無料で利用できるものも多く、初心者でも導入しやすい環境が整っています。

4. 独自ドメイン

ホームページ制作デザイナーとして活動するなら、自分のホームページを持つことをおすすめします。

その際に必要になるのが独自ドメインです。

無料ブログよりも信頼性が高く、クライアントからの印象も良くなります。

ドメインは出来る限りレンタルサーバーと同じ会社の方が特典をうけれます。永久無料特典をつけているところが多いです。

Xサーバーは12カ月以上の契約でドメイン費用永久無料、
コノハはWINGパック契約でドメイン無料
さくらはサーバー代が安い分、ドメイン費用はかかります。
ロリポップも下位プラン（スタンダードブラン以下）はドメイン費用がかかりますがハイスピード以上はドメイン費用無料。

5. レンタルサーバー

ホームページを公開するためにはレンタルサーバーが必要です。

初心者の方には以下のサーバーがおすすめです。

エックスサーバー：迷ったらココ。一番おすすめ
ConoHa WING：最速をうたっているサーバー、サーバーの中ではまだ新しいサービスの為情報量が少し少ない
さくらのレンタルサーバ：安さならここ

WordPressの簡単インストール機能もあり、専門知識がなくてもホームページを公開できます。

一つに絞るならXサーバーがおすすめです。当ブログもXサーバーです。

エックスサーバー

6. WordPress

現在のホームページ制作案件では、WordPressの知識が求められることが非常に多くなっています。

まずは自分のサイトをWordPressで作りながら操作に慣れておきましょう。

たまにWordpressブログと間違えている方がいるので要注意です。

wordpress.comの方と間違えられていたクライアントが過去3人いました。wordpress.orgの方になります。

サーバーのWordPress簡単インストールからいけば間違いありません。

7. WordPressテーマ

効率よくサイト制作を行うためにはテーマ選びも重要です。

おすすめはこのサイトで使用しているSWELLですが無料テーマでしたらNEVEが使いやすいです。

SWELL（有料テーマ）

SWELL（有料テーマならおすすめ）

SWELLはブロックエディターに完全対応した国産のWordPressテーマです。独自ブロックや便利な機能が豊富に用意されており、記事作成やホームページ制作を効率よく進めることができます。

特に気に入っているのは、「かゆいところによく手が届く」機能が多いことです。

ボックスやボタン、吹き出し、FAQなどのパーツも簡単に作成でき、HTMLやCSSをあまり触らなくても見栄えの良いページを作れます。

また、デザインもシンプルで洗練されているため、ブログだけでなく企業サイトやサービスサイトにも利用しやすいのが魅力です。

初心者でも扱いやすく、ブロガーからWeb制作者まで幅広く人気があるテーマだと感じています。

ただSWELLは17,600円（税込）と決して安いテーマではない為、最初は無料テーマを利用してポートフォリオサイトを作成し、実績作りを進めるのも十分ありだと思います。

軌道にのるまでは、初期費用は出来るだけおさえたいのが本音です。

ただSWELLは買い切り型で複数サイトに利用できるため、ホームページ制作やブログ運営を継続していく予定であれば、SWELLは非常におすすめできるテーマです。

私はこれまでSWELLを使って、50サイト近くのクライアントサイトを制作してきたので、制作効率の向上やデザインのしやすさを考えると元はとれているかなと思います。

「まずは無料テーマで始める → 案件が取れてきたらSWELLを導入する」という流れでも問題ありませんが、本格的にホームページ制作を仕事にしていくのであれば、長い目で見て投資する価値のあるテーマだと思います。

WordPressテーマ「SWELL」

NEVE（無料テーマ）

NEVE（無料テーマならおすすめ）

無料テーマであれば、WEBデザイナーの方が使用する場合、私はNEVEをおすすめしています。

NEVEの魅力は、コンテンツ配置の制限が少なく、デザインの自由度が非常に高いことです。WordPressテーマによってはレイアウトやパーツ配置に制約がありますが、NEVEは比較的自由にカスタマイズできるため、オリジナルデザインのサイトを作りやすいと感じています。

また、ヘッダーやフッターもカスタマイズしやすく、専用のビルダー機能によってパーツを組み合わせながら自由にレイアウトを作成できます。テンプレートに縛られず、自分好みのデザインへ調整しやすいのも魅力です。

一方で、ゼロから作り込む余裕がない人にはStarter Sites（スターターキット）が用意されていて、これも強みです。、スターターサイト機能を利用すれば、デザイン性の高いテンプレートを数クリックで導入できます。ポートフォリオサイトや企業サイトなど、ベースとなるサイトを短時間で作成できるため、初心者の方にもおすすめです。

実際に私も使用していますが、HTMLやCSSを使って細かくカスタマイズしたいWebデザイナーにとって扱いやすいテーマだと感じています。

「できるだけ費用を抑えたい」「オリジナルデザインのホームページを作りたい」という方は、まずNEVEから始めてみるのも良いでしょう。

NEVEテーマ

このサイトもWordPressテーマ「SWELL」で制作しています。
実際に私自身、クライアントサイトを含めて50サイト近くSWELLで制作してきました。ブロックエディターの使いやすさやデザインの整えやすさ、制作効率の高さから現在もメインテーマとして利用しています。

SWELLの特徴を見てみる

8. ポートフォリオサイト

案件獲得のためには実績を見せる場所が必要です。

ポートフォリオサイトには以下の内容を掲載しましょう。

自己紹介
制作実績
サービス内容
お問い合わせフォーム

実績が少ない場合は架空サイトを制作して、まずは制作物を公開することが大切です。

実績がまだ少ない場合でも、飲食店・美容室・企業サイトなどジャンル別にサンプルを用意しておくことで、クライアントが完成イメージを想像しやすくなります。

クライアント様が求めている雰囲気に近い制作例があれば、「このようなサイトを作れるならお願いしたい」とイメージしてもらいやすく、依頼につながる可能性があります。

9. クラウドソーシングサービス

独立初期は営業先がないため、クラウドソーシングサービスを活用するのがおすすめです。

代表的なサービスとして、

クラウドワークス

国内最大級のクラウドソーシングサービス

案件数が非常に多く、ホームページ制作・Webデザイン・バナー制作など幅広い仕事が掲載されています。

初心者向けの案件も多いため、実績作りや初めて案件を獲得する場として利用しやすいサービスです。ただし、案件数が多い分ライバルも多く、プロフィールや提案文で自分の強みを伝えることが重要です。

使用した感じは他クラウドサービスと比べて費用相場が安いイメージです。初心者〜中級者が経験を積むのに向いています。

国内最大級のクラウドソーシングサービス。
案件数が多く、ホームページ制作やWebデザインの仕事を探しやすいサービスです。

【公式】クラウドワークス

ランサーズ

質の高い案件を探しやすい老舗クラウドソーシングサービス

クラウドワークスと並ぶ国内大手サービスで、Web制作や企業サイト制作などの案件も豊富です。

本人確認や評価制度が整っており、実績を積むことでクライアントから信頼を得やすくなります。継続案件につながるケースもあります。

Web制作・Webデザインの案件数を調べるとランサーズが最も多いという調査結果があり、ユーザーの質・案件の質・手数料などを総合的に見ると、Webデザイナーはランサーズが一番稼ぎやすいという意見もあります。

実際高単価案件が多く、長期契約を希望するクライアントが多いのも特徴で、コンペ形式（複数のデザイン案から採用を決める形式）の案件が豊富なため、デザインスキルをアピールしたい人に向いています。

私自身が利用した経験では、個人からの依頼だけでなく、制作会社が外注先を探すために利用しているケースも多い印象です。実際に私自身もランサーズをきっかけに複数の制作会社様とつながり、現在も長期的にお付き合いしている会社様があります。

ランサーズ公式サイト

ココナラ

自分のサービスを販売できるスキルマーケット

強み：「スキルのECサイト」的なポジション自分から案件に応募する「提案型」ではなく、サービスを出品して購入されるのを待つ「出品型」が基本です。

「公開依頼」という形式での募集もあり、そこでのライバルはクラウドワークスやランサーズよりも少ないという利点があります。 「WordPressで〇〇なサイトを10万円で作ります」のように、料金と提供内容を明確にした商品として出品できるのが最大の特徴。

依頼者は会社から個人の方まで色々ですが、制作会社様からの依頼は少ない印象です。

初心者でも始めやすい一方で、最初は評価を集めるために価格を低めに設定している出品者も多く、価格競争になりやすい傾向があります。

私自身もココナラを利用していますが、Webデザイン案件を探すというより、自分のサービスを出品する使い方がおすすめです。

最近、Webデザイン系の募集案件は低価格な内容が多く、数も以前より少ない傾向にあります。ココナラは「仕事を探す場所」ではなく、「自分のスキルを商品として販売する場所」と考えると活用しやすいです。

私が最も利用しているサービス。スキル販売型なので、
自分で価格やサービス内容を決めて販売できます。

ココナラ

初心者の方は、案件へ応募するよりも、ココナラやランサーズで低価格からサービスを出品する方法がおすすめです

実際にクラウドソーシングでは、1つの案件に100件近く応募が集まる為、実績0の状態で、経験豊富な制作者と比較されると、最初の案件獲得はかなり難しいです。

まずは低価格でもサービスを提供し、実績や口コミを増やしていくことが大切です。評価を増やして信頼につなげ、少しずつ単価を上げていくことがおすすめです。

10. 請求書・契約書の準備

案件を受注した際に慌てないよう、請求書や契約書の準備も行っておきましょう。

トラブル防止のためにも契約書は必須です。

請求書サービス

フリーランスや個人事業主の請求書や見積書、領収書のサービスはこれ一択です

私自身も開業当初から利用しており、現在も愛用しています。無料で利用できるため、これからホームページ制作を始める方にもおすすめです。

テンプレートに会社名や請求内容を入力するだけで、見積書や請求書を簡単に作成できます。

無料プランでも月10通まで請求書を作成できるため、フリーランスや個人事業主であれば十分活用できると思います。

私自身も開業当初から利用しています。無料で始められ、
テンプレートに入力するだけで見積書・請求書を簡単に作成できます。

請求書作成サービス「Misoca(みそか公式サイト)※

契約書サービス

ランサーズやココナラ、クラウドワークスなどのクラウドソーシングサービスを利用している場合は、サービス側で契約や支払い管理が行われるため安心ですが、直接クライアントと契約する場合は契約書をしっかり準備しておきましょう。

ホームページ制作では、制作範囲・料金・納期・修正回数・著作権の扱いなどを事前に明確にしておくことで、後々のトラブル防止につながります。

そこでおすすめなのが電子契約サービスのクラウドサインです。

紙の契約書のように印刷・押印・郵送する必要がなく、オンライン上で契約を完結できます。契約書を作成して相手に送信するだけで、相手側もスマホやパソコンから簡単に手続きが可能です。

契約書の郵送や管理の手間を減らせるため、フリーランスや個人事業主にとって非常に便利なサービスです。

クラウドサイン | 国内シェアNo.1の電子契約サービス

11、便利なブラウザ拡張機能

下記の機能は入れておくとかなり効率よく制作が進められます。デザインやサイトを作る上では必須機能です。

WhatFont	フォント調査サイトで使用されているフォント、サイズや太さ、行間なをマウスオーバーするだけで確認できます。
ColorZilla	カラー取得サイト上の好きな場所からカラーコード（HEX・RGB）を取得できます。参考サイトの配色分析やデザイン制作時のカラー抽出に便利です。
Page Ruler Redux	サイズ計測 Webサイト上の画像やボタン、余白などのサイズをピクセル単位で計測できます。デザインカンプの再現やコーディング時の確認作業に役立ちます。
Responsive Viewer	レスポンシブ確認複数のスマホ・タブレットサイズを同時に表示し、レスポンシブデザインを効率よく確認できます。制作中の表示チェックに欠かせないツールです。
Image Downloader	画像収集ページ内の画像を一覧表示し、まとめてダウンロードできます。参考サイトの分析や素材収集を効率化できる便利な拡張機能です。
Wappalyzer	使用技術調査サイトで使用されているCMS、サーバー、解析ツール、JavaScriptライブラリなどを調査できます。「このサイトはWordPress？」「どのテーマを使っている？」といった確認が簡単にできます。

必須機能とまではいきませんが入れておくと便利な拡張機能

CSS Peeper	サイトで使用されているカラーやフォント、余白、シャドウなどを簡単に確認できます。
PerfectPixel	デザインカンプをブラウザ上に重ねて表示できる拡張機能です。サイトとデザインデータを比較しながら、余白やサイズのズレをピクセル単位で確認できます。
GoFullPage	ページ全体キャプチャ（スクロールやfade in系も表示してキャプチャしてくれます）
Google Font Previewer	Google Fontsを実際のサイトに適用した状態でプレビューできるツールで、雰囲気を確認しながら、サイトに最適な書体を探せます
TabCloud	開いているタブを保存・整理できる拡張機能です。制作中は参考サイトや管理画面など大量のタブを開くため、作業ごとにタブをまとめて管理できると効率的です。
Tag Assistant	GA4、Google広告、GTM タグが正常発火しているか確認できます。