Web 開発クライアントにカスタム デザイン サービスを提供する方法
公開: 2022-08-24Web 開発サービス全体の一部としてカスタム デザイン サービスを提供することで、魅力と収益を向上させ、クライアントにより多くの価値を付加することができます。 この記事では、その方法を順を追って説明します。
一般的な Web 開発作業を超えてサービスを拡張したいとお考えですか? それとも、新しい Web デザイン スキルを学んでいて、それらを活用して収益を上げる方法を探しているのでしょうか。
この記事では、デザインのスキルや経験がまったくない場合でも、専門の Web デザイン サービスをクライアントに提供する方法を紹介します。
参考までに、私たちは 50,000 人以上のメンバーを調査し、数十の専門的な Web サイトを調査して、この記事で言及されている推奨事項と提案にたどり着きました.
「この副業で稼いだお金で、他の方法では買えなかった休暇や新しいおもちゃを買うことができました。」 –フィル (WPMU DEV メンバー)
読み終わるころには、次のようなアイデアが浮かぶでしょう。
- クライアントに提供する最適なタイプの Web デザイン サービス。
- サービスを実装またはアウトソーシングする方法。
- デザインサービスに請求できる金額。
この記事の任意のセクションにスキップしてください。
- Web開発クライアントを提供するトップデザインサービス
- ブランディング
- ビジュアルアイデンティティ
- ランディングページとリードジェネレーション
- 再設計
- デザイン サービス メニューの表示
- クライアントへの Web デザイン サービスの提供を開始する
設計サービスとは何ですか?また、どのサービスを提供する必要がありますか?
前述のように、デザイン サービスの定義は、通常のテーマ、テンプレート、またはページ ビルダーのアプローチを超えたサービスです。
ブランディング、リブランディング、ロゴデザイン、ランディングページのデザイン。 これらは、多くの Web 開発者がやりたがる類のことであり、それで問題ありません。
しかし、追加の収入を得て、クライアントにより多くの価値を提供し、Web 開発サービス全体を他のサービスより際立たせたい場合は、その方法を紹介します。
また、あなたがデザイナーでない場合や、これらのサービスを提供するために必要なスキルや経験を持っていないと思われる場合も心配しないでください。
マークアップを適用して利益を上げることができるさまざまなアウトソーシング オプションを提供します。
各サービスに触れると、自分で仕事をしたい場合に使用できる多くのツールとリソースも提供されていることがわかります.
提供できるトップ 4 Web デザイン サービス (メンバーの投票による)
これらの追加の Web デザイン サービスを提供することを決定したら、次の質問は、実際に提供するサービスの種類です。
暗闇の中で突き刺したり、Google の上位の結果をコピーしたりするのではなく、誰よりもよく知っている人々のグループに尋ねることにしました。
50,000 人以上の Web 開発者メンバー!
最近のメンバーのディスカッションで彼らに尋ねたところ、トップに出てきた設計サービスは次のとおりです。
- ブランディング
- ビジュアルアイデンティティ
- ランディングページとリードジェネレーション
- 再設計
それでは、これらの各デザイン サービスについて詳しく見ていきましょう。 各サービス、リソース、ツール、およびそれぞれのアウトソーシング オプションに関連するものと、クライアントに請求できるものについて学習します。
Webデザインサービス1：ブランディング
ブランディングとは、ビジネスが他のエンティティと差別化する方法であり、顧客がそれを識別して関連付けるものです。
特に大企業ではない場合は、ブランドを立ち上げて実行するために基本を超える必要はありません.
関連する場合は、追加のブランディング コンポーネントを補足することもできます。
「必要なものだけから始めて、必要に応じてさらに追加してください。」 – Databoy (WPMU DEV メンバー)
–
ブランディング サービスには何が含まれますか?
私たちが焦点を当てているブランディングは、メンバー コミュニティの意見に基づいており、カラー パレットを組み込み、フォントを選択し、ロゴやワードマークを戦略的に配置することで、ブランドを作成するだけです (ロゴの作成については別途説明します。以下のビジュアル アイデンティティを参照してください)。 .
クライアントのブランドのカラー パレットを作成する
カラー パレットの採用は、クライアントの Web サイトの相乗効果に不可欠です。
クライアントのために色合いをまとめるのに助けが必要な場合に使用する優れたオンライン ツールがいくつかあります。
気に入ったものをいくつか紹介しますが、すべて無料です。
カラー パレット ツール:
クーラー
Coolors を使用すると、カラー インスペクター (RGB バー) を使用するか、画像をアップロードすることで、無作為に、またはより正確には、ソリッドとグラデーションの両方のパレットをすばやく生成できます。
既製のオプションを好む場合は、巨大なライブラリがあります。
このツールは、iOS および Android アプリ、Figma プラグイン、Chrome 拡張機能から利用できます。
また、 Contrast CheckerとArtwork Recolorツールも提供しています (上の画像の私のテスト ケースを参照してください)。
アドビカラー
Adobe Color は、RGB、HSB、および LAB の 3 つのモードを使用できるプロフェッショナル カラー ホイール ツールを提供します。
画像からテーマを抽出して、カラー パレットまたはグラデーションとして保存できます。
アクセシビリティ ツールもプラスです。 コントラスト チェッカーモードと色盲セーフモードを使用して、それぞれを確認します。
エッググラディエント
Eggradients では、多数の既製のグラデーションから選択できます。 これらはシンプルな 2 色のブレンドですが、基本的なパレット アプローチを探している場合に役立つか、創造性を刺激することができます。
カラー パレット ジェネレーターを使用すると、さまざまな色合いのグラデーションのリストから選択できます。
また、「50 Shades of Color」セクションもあり、対応する 16 進コードを使用して、そのカラー ファミリーのランダムなトーンを抽出します。
ウェブサイトのフォントの選択
新しいデザインの成功には、タイポグラフィと強力なフォントの選択が重要な役割を果たします。
フォントを比較およびテストするための適切なツールがいくつかあり、フォント自体の堅牢な品揃えへのアクセスを提供するサイトもあります。
繰り返しますが、これらはすべて無料のオプションです。
Web フォント ツール
フォントペア
Fontpair のサイトには、Web から集められた事前にペアリングされたフォントのコレクションがあります。
彼らには提案/提出ページがあり、新しいペアリングが毎週追加されています.
ペア＆比較
Pair & Compare を使用すると、フォントの組み合わせを簡単に試すことができます。
Google またはローカル フォント (デバイスから共有) を使用でき、最大 3 つの比較を同時に画面に表示できます。
サイズ、太さ、色、行の高さなど、さまざまな編集オプションがあります。
サンプル テキストを変更したり、後でテストするためにフォントをブックマークしたりすることもできます。
Google フォント
Google Fonts は、バリアブル フォントやマテリアル シンボルを含む 1,500 近くのファミリを持つフォントを検索して使用するための優れたリソースです。
これらはすべて無料で使用でき、商用または商用販売されている製品内であっても使用できます (例: ロゴまたはワードマーク)。
ダウンロードは家族または個々のスタイルで利用でき、リンクを介して他のユーザーと共有できます.
フリー フォントを提供するその他のサイト:
- FontBase (これはフォント管理システムです)
- フォントリス
- Dafont.com
- フォントスペース
- 1001フリーフォント
- アーバンフォント
プレミアム/有料フォント サイトの選択:
- アドビフォント
- マイフォント
- EnvatoElements フォント
- フォントバンドル
ブランディングサービスの料金はいくらですか?
ブランディング サービスの価格設定方法を理解するには、競合他社が提供しているものと、同じまたは類似のコンテンツの作成に対して課金するものを確認することをお勧めします。
これは私たち自身で行ったもので、価格設定のインスピレーションを得るために関連するいくつかの例を次に示します。
TechCrunchは、10 年の経験を持つデザイナー (フォーチュン 500 を含む) による、スタートアップのブランディングとビジュアル アイデンティティのコストに関する素晴らしい記事を掲載しました。
彼らが請求したものの内訳は次のとおりです。
価格の見積もりは、ビジネスの段階に基づいて 2 つのカテゴリに分類されます。これは、ご覧のとおり、おおよそのコストに大きく影響します。
Branded Agencyは、ブランディングのすべての要素とレベルを網羅するサービスとアドバイスを提供するフルサービスのデジタル エージェンシーです。
ブランディング コストの計画と計算に役立つ仕様を提供する有益な記事があります。
これらの価格にもばらつきがありますが、設計サービスの典型的な範囲を把握するのに役立ちます.
これを知っておくと、スキルと知識のレベル (および特定のプロジェクトの範囲) を考慮して、大幅な過充電または充電不足を防ぐことができます。
もちろん、ブランディング パッケージに含めるものを多くすればするほど、価格を高く設定できますし、高く設定する必要があります。
ブランディングサービスの平均価格帯: $1,000-$30,000+
Web デザイン サービス 2: ビジュアル アイデンティティ
ビジュアル アイデンティティは、グラフィックのみ (ロゴ)、芸術的なテキストのみ (ワードマーク)、両方の組み合わせ、またはすべてを完全に補完するものである可能性があります。
イニシャルが入った円のような基本的なものや、特定のフォント、太さ、色の会社名などがあります。
適切なケース >> WPMU DEV!:
ビジュアル アイデンティティ サービスの提供に関連するもの
クライアントのロゴを決めるには、さまざまな難易度があります。
要するに、彼らがどれだけ特別であるか、そして彼らの予算がいくらかということです。
クライアントが思い描いたデザインがより複雑または具体的であるほど、カスタム デザインを使用することでニーズが満たされる可能性が高くなります。
カスタム デザインのもう 1 つの明確な利点は、ユニークであることです。 プレハブのものは誰でも利用できるので、複数の企業が同じデザインを購入して使用することができます.
ブランディングの核となる要素に役立ついくつかのサイトをチェックしたのと同じように、次に、ビジュアル アイデンティティ (ロゴ、ワードマークなど) の優れた選択肢を提供するリソースを探し始めました。
カスタムロゴを作成するためのツールとアウトソーシングオプション
ロゴ.com
Logo.com のロゴはすべて無料です。
これらは非常に基本的な既製のクッキー カッター製品ですが、たくさんあります。
非常に特定の色合いが必要な場合は、色の大きなバリエーションも可能です (Hex フィールドがあります)。
Logo.com で無料のロゴのカスタマイズを試しています。
これらが完全に無料であることを考えると、複雑なものやユニークなものが必要ない場合は、まともなオプションです.
クリエイティブ マーケット
Creative Market には、企業ブランディング、電子商取引、および起業家精神に使用するための 150,000 以上のロゴ テンプレートがあります。
ロゴ テンプレート セットには、ユニークでモダンなロゴを作成するためのバッジ、アイコン、およびその他の要素が含まれています。
これらはすべて既製のデザインですので、あなた以外に何人でもアートワークを購入/使用できることに注意してください. クライアントが独自のロゴを希望する場合、このオプションは機能しません。
ファイバー
Fiverr は非常に人気のある売り手市場であり、Gig として提供される任意の数のデザイン要素に対して個々のアーティストを雇うことができます。
これは、たまたま選んだデザイナーに完全に依存するため、マイレージは異なる場合があります. しかし、一般的に、レビュアーは全体的に満足しているようで、支払った金額に見合うだけの価値があると感じています。
最高のプロ WP ツールが 1 つのバンドルに
価格は、アーティストのスキルレベルと含まれるコンポーネントに応じて、5 ドルから 995 ドルの範囲です。
ロゴグロ
Logoglo はプレミアム ロゴ サイトです。 ここで得られるものはすべて、あなたのブリーフに基づいて専門的にゼロから作成された、ユニークで 1 回限りのデザインです。
パッケージには、階層が上がるにつれて、初期コンセプトの数、所要時間、修正許容量など、より多くのコンテンツが含まれます。
これは、クライアントの予算が少し多めで、他では見られないようなアートワークを希望している場合に最適なオプションです。
99デザインズ
99designs は、成功を収めているオンライン プリント ハウスである VistaPrint の子会社です。
オファーには、デザイナーのレベル、および専任のマネージャーと優先サポートが得られるかどうかが含まれます。
提示されたデザイン コンセプトの数は 30 から始まり、最大 90 までです。すべてのデザインには、返金保証と完全な著作権所有権が付属しています。
ビジュアル アイデンティティ サービスの料金はいくらですか?
Jacob Cass は、ブランド デザイナー、ストラテジストであり、受賞歴のあるブランディングとデザインのコンサルタント会社であるJUST Creativeの創設者です。
JC.com にはデザイン コストに関する記事があり、ロゴ デザインの価格に関する役立つチャートが掲載されています。 さらに、彼らはコストをより詳細に分類したリストを提供しました.
グローバル アイデンティティのフル ブランディングは非常に高額で、100 万ドルを超えます。
もちろん、これはエリートの上層部であり、平均をはるかに上回っています。
私たちが注目しているレベルでは、DIY/無料のロゴ メーカーの場合は 0 ドル、経験豊富なデザイナーの場合は 5,000 ドル以上の変動があることがわかります。
ビジュアル アイデンティティ サービスの平均価格帯: 500 ～ 5,000 ドル
Web デザイン サービス 3: ランディング ページとリード ジェネレーション
ほとんどの Web サイト (教育とエンターテイメントを除く) の主な目標は、流入トラフィックをリードに変えることです。
ランディング ページや同様のコンバージョン ベースのサービスをクライアントに提供することは、それだけの価値があります。
結局のところ、より多くの顧客やリードを獲得する可能性を断る可能性は低いです。
「各ページには、コンバージョンという 1 つの目的があります。 クライアントがどのように変換したいのか、クライアントがすべての訪問者に望んでいる目標は何かについて、明確な道筋があることを確認してください. コンバージョン クリックを獲得することに重点を置いたデザインを維持してください。」 –クリス (WPMU DEV メンバー)
関連する内容と、ランディング ページとリード ジェネレーション サービスの提供に役立つツール
ランディングページ
クライアントのランディング ページに使用するテンプレートが既にある場合があります。自分で作成したもの、購入したもの、または無料で入手したものです。
新しいものを探している場合、またはまだ頼りになるものがない場合は、ランディング ページ Web サイトのいくつかのオプションを次に示します。
ツールとアウトソーシングのオプション
ナイスページ
Nicepage では、10,000 以上の事前にデザインされたランディング ページを提供していますが、独自のランディング ページを作成することもできます。
独自のウェブサイトビルダーを使用して、事前に作成されたテンプレートを編集できます。これにより、ドラッグアンドドロップが可能になり、コンテンツの編集、レイアウトの変更 (ブロック)、色やフォントの変更、さまざまなレスポンシブの調整などのコーディングのカスタマイズが不要になります。モード。
Nicepage は、WordPress プラグインとして Windows または Mac OS で利用できます。
ファイバー
Fiverr の経験豊富なランディング ページ デザイナーが、ページの適切なレイアウトとブランディング アイデンティティを作成できます。
プレミアム品質の画像、モバイル デバイスやデスクトップに適したレスポンシブ デザイン、コンテンツのアップロード (提供されたコンテンツの) などを期待してください。
価格は、希望するもの、希望する速さ、選択したアーティストのスキルと経験によって大きく異なります。 参考までに、価格は 5 ドルから 1500 ドルの範囲でした。
ランディングフォリオ
Landingfolio は、ウェブ上から厳選された美しく多様なランディング ページのコレクションを特徴としています。
彼らの製品には以下が含まれます：
- Tailwind CSS サイト テンプレート – すべてのデザインに Figma が含まれています
- ロゴ – コミュニティに寄贈されたデザイナー Jord Riekwel によるコレクション (無料)
- モックアップ ジェネレーター – アプリまたは Web デザイン用のデバイス モックアップをすばやく作成します。 ウェブサイトの URL を入力すると、モックアップが生成されます
Tailwind は Bootstrap のような CSS フレームワークで、開発時間を短縮します。 クラスを使用して要素のスタイルを設定するため、CSS を記述する必要はありません。
ElementorやDiviなどの人気のあるページビルダー
もちろん、必要に応じていつでもページビルダーとテーマを利用できます。そのほとんどは、クライアント向けの高品質のカスタムランディングページを作成するのに役立ちます.
Diviはビルダーの有料版のみを提供しており、ランディング ページとコンバージョン要素に関しては見栄えの良い最終製品を提供します。 Elementorには、無料バージョンとProバージョンの両方でランディングページを作成する機能もあります.
Hustle でリード ジェネレーション モジュールを作成する
すべての優れたランディング ページには、効果的なリード ジェネレーション要素が必要です。
無料の Hustle プラグインを使用して、いくつかの優れたリード生成モジュールを組み合わせることができます。
オプトイン、ポップアップ、スライドイン、ソーシャル共有、および埋め込み – Hustle は、結果を促進し、訪問者を変換するように設計された、それらすべての作成を支援します。
Hustle のプロがデザインしたテンプレート (18 種類以上) を使用して、見栄えの良いモジュールを数分で簡単に作成できます。
これらはすべてモバイル対応で、電子メールのオプトイン フォームと情報デザイン (つまり、ユーザーがボタンをクリックすると別のページに移動する) を選択できます。
ハッスルには、無料版とプロ版の両方があります。 どちらも同じ優れた設定とオプションをすべて提供します。
唯一の違いは、Pro バージョンには無制限のオプトイン、カスタム コンテンツ、およびソーシャル共有が付属していることです。
もっとハッスルしたいですか？ ブログでこれらの情報満載の記事をチェックしてください。
- ハッスルを最大限に活用する方法
- Hustle で可視性条件を使用する方法
- ハッスルを使用して最も多くのメール購読者を獲得する方法
ランディングページとリードジェネレーションサービスの料金はいくらですか?
F5 Studioは、2013 年から事業を展開している成功した Web 開発会社で、デザインの要素と、ランディング ページの価格設定の内容を分析した優れた記事があります。
彼らによると、デジタルエージェンシーは、静的なランディングページを作成するために約600ドルから3,000ドル、動的なランディングページを作成するために2,000ドルから5,000ドルを請求する.
受賞歴のあるフルサービスのマーケティング エージェンシーであるBrimarは、ランディング ページのコストに関するこれらの洞察を共有し、プロジェクトの複雑さとクライアントのビジネス目標に応じて、エージェンシーはランディング ページごとに 300 ドルから 3,000 ドルの範囲で請求できると主張しました。
全体として、ランディング ページの作成にかかる費用は、仕事の全体的な範囲と、どれだけの作業が必要になるかによって異なります。
ランディング ページと変換サービスの平均価格帯: 300 ～ 5,000 ドル
Web デザイン サービス 4: プロジェクトの再設計/再ブランド化
クライアントがウェブサイトの再設計から利益を得たり、再設計したりする理由はいくつかあります。 最も一般的なものは次のとおりです。
- 全体的なルック アンド フィールが古くなっている、または魅力的でない。
- ビジネス アイデンティティがデザインに十分に反映されていないか、計画されているブランド変更のためにすぐに反映されなくなります。
- ユーザビリティが悪く、ナビゲーションが難しく、変換が制限されます。
「完全なオーバーホール (UI を完全に再考する必要があるかもしれません) は、まったく異なるオーディエンスにアピールしようとする場合に特に重要です。たとえば、Web サイトが b2c から b2b に変更された場合などです。」 –マリアンナ (WPMU DEV メンバー)
関連するものと再設計サービスの提供に役立つツール
ユーザー エクスペリエンスを理解することが重要です。 サイトのインタラクション/コンバージョン率がサイトのトラフィックよりもはるかに少ない場合は、行動分析を調べる必要があります.
UX インサイトのための Hotjar と Crazy Egg
Hotjar や Crazy Egg などのツールは、サイトの UX デザイン/ユーザビリティに関する優れた洞察を提供します。
記録された画面の動作を観察することで、弱点を特定し、実際の使用データに基づいてアップグレードを行うことができます。
Hotjar は、必要な機能と、セッション (「観察」) または応答 (「質問」) の数に基づいて、最大 1,000 ドル (月額) まで無料でサービスを提供します。
Crazy Egg の価格には、月額 30 ドル未満から見積価格まで、5 つの異なるパッケージが含まれています。 各層では、より多くのサービス (追跡されたページ ビュー、スナップショット、および記録など) が許可されます。
顧客がどこでマウスを動かし、どこをクリックするか、何に注目し、何を無視するかを知ることで、疑問や当て推量が取り除かれ、改善の機が熟していると具体的に強調された領域に集中できるようになります。
再設計サービスの料金はいくらですか?
再設計は、必要な全体的な労力という点では、新しい設計と非常によく似ています。 これらには、同じ要素、ツール、および所要時間の多くが含まれます。
上記で説明したように、再設計による唯一の価格差は、UX インサイト ツールの追加コストです。
全体的なウェブ再設計コストに関して、最近のグローバルな再設計調査の参加者は、いくつかの重要な統計を明らかにしました。
- ウェブサイトの平均デザイン費用 (基本機能付き): $3,200
- ウェブサイトのデザインにかかる平均時間 (基本的な機能を含む): 2 か月
- 人々が (サイト構築ソフトウェアを使用するのではなく) プロの Web デザイナーを雇う最大の理由は、完全にカスタマイズできることです。
再設計の背後にある理由に関係なく、事前に範囲とコストの期待値を確立することが重要です。
ウェブ全体のデザイン/再デザインには、平均で 3,000 ドル以上の費用がかかり、約 2 か月の期間がかかります。 それを考慮して、平均ビルド時間と、価格設定に役立つサービスを含めます。
ウェブサイトの再設計の平均価格帯: $2,000-$4,000
すべての Web デザイン コンポーネントをまとめる
情報を収集し、十分に考慮した上で、Web デザイン サービスに合わせて独自に調整されたメニューを作成し、関心のあるクライアントに簡単にアクセス (および価値提案) を提供できます。
完全な設計サービス メニューの例:
これは、含まれるコンポーネントと関連する予想される作業に応じて、要素の価格の変動を含む、私たちが思いついた例です.
クライアントへの Web デザイン サービスの提供を開始する
Web デザイン サービスの提供に関するこの詳細な説明から、貴重な洞察を得ていただければ幸いです。
この記事で説明したことについてさらにアドバイスや説明が必要な場合は、下のコメント欄でお気軽にお問い合わせください。
Web 開発者として空中に保持するボールがたくさんあります。 WPMU DEV の目標は、そのプロセスをできるだけ簡単にすることです。
当社のプラットフォームを試してみたい場合は、無料プランから始めるのが最適です。 無制限のサイト管理、ビルトイン課金、プラグインなどが含まれています。