個人でもウェブ制作を実践する為に必要な知識を解説

「プロにお願いしても成果が確約出来ないものなのに、自分でも出来るようになるんですか?」

以前、ZOOMミーティングでお客さんに上記のような質問をいただきました。

自分でも出来るものとは、サイト作成やランディングページのようなページ作成といった「ウェブ制作」です。

結論をいうと、必要な知識はもちろんありますが、現代であれば自分で自作することは十分可能です。

テクノロジーの発達により、HTMLやCSSなどの専門的な技術は、便利なシステム・ウェブサービスにより必要なくなりました。

今回は、個人でもウェブ制作を実践する為に必要な知識を解説します。

個人で自作できる理由

個人でも自作できる理由は以下の通り。

  • 便利なシステム・ウェブサービスが存在するから
  • それらを活用する為に必要な知識を学べばいいから

詳しく解説していきます。

初心者でも扱えるシステム・ウェブサービスが存在するから

システムの例だと、WordPressが有名ですね。

このWordPressにより、ある程度のホームページ・サイトのレイアウトやデザインなどの大枠は一から作成しなくてもよくなりました。

WordPressテーマとよばれる雛形があるからですね。

このWordPressに関する情報を中心に習得していれば、ウェブ制作の手段が一気に広がります。

なぜなら、

  • ランディングページ(メールアドレス取得用のオプトインページも含めた)
  • 会員制ビジネスの会員専用のサイト
  • 販売するデジタルコンテンツ用のサイト、ページ

といった、商品・サービスの提供や販売に使えるからです。

WordPressを使えばウェブ集客に必要なウェブ制作はほとんど出来てしまいますので、このWordPressへのリテラシーが高まれば、外注はしなくてもよくなります。

たまに外注している方がいますが、あれは完全オリジナルなサイトデザイン・機能を求めている方ですね。(それ以外だとしたら、損している可能性が高いです。)

WordPressの他にも、

  • ペライチ(ページ作成)
  • BASE(ECショップ作成)
  • STORES.jp(ECショップ作成)
  • Coubic(予約ページ作成)
  • Tayori(お問い合わせフォーム作成)
  • Canva(画像編集)
  • MailChimp(メール配信サービス)

といった便利なウェブサービスが存在します。

これらのウェブサービスは、日々開発を進めているので、気がついたらこんな便利な機能も追加されてたのかと、驚くことがあります。(特にペライチ、BASE、MailChimp)

こういったウェブサービスの情報にアンテナを張ることが、これからスモールビジネスの皆さんに求められることではないでしょうか。

それらを活用する為の必要な知識を学べばいい

ウェブ制作はWordPressやウェブサービスを活用していく為に必要な知識を学べば、外注に依存しなくてすみます。

色々ありますが、特に知っておいてほしいところは、

  • WordPressのカスタマイズ関連の操作
  • メール配信サービスの仕組みの理解
  • その他、カラーコード、埋め込みコードとリンク指定への理解

です。

WordPressのカスタマイズ関連の操作

WordPressのカスタマイズ関連は、PHPコードを編集してのカスタマイズではなく、以下のような操作です。

  • メニュー(メニューバー)
  • ウィジェット(サイドバー)
  • 固定ページの編集(オプトインページ作成に活用)
  • メディア(画像・PDF・音声ファイルの共有などに活用)
  • テーマに用意されたショートコード(プラグインでも実装可能)

メニュー、ウィジェット、固定ページの編集、メディアについては、検索すれば簡単に情報が手に入ります。

テーマに用意されたショートコードについては、テーマに依存するものですが大枠はどのテーマでも仕様は似ています。

多くの場合、このショートコードは購入したWordPressテーマの公式サイトに情報が記載されているので、そちらの解説をみましょう。

また、「Shortcodes Ultimate」というプラグインで実装できます。

このショートコードを使う事で、プログラミングが出来ない方でもある程度のデザインや、ページ内のレイアウトを作成(カラムといいます。)したりと、かなりウェブ制作が捗る機能です。

若干のプログラミングっぽさは残っていますが、要点を押さえて、落ち着いて操作すれば初心者でも簡単に編集出来ます。

そもそもプログラミングで実装するよりは簡単なので、WordPress初心者でも苦手意識を持たずにバンバン使うべきです。

メール配信サービスの仕組みの理解

正直、ペライチやBASEといったウェブサービスは、とても簡単に利用できてしまうので、わざわざ解説する必要もないかなと思っています。

なので、ウェブサービス関連で得におさえておいた方がいい知識は、「メール配信サービスの仕組みの理解」だと個人的に考えています。

メール配信サービスも仕組みの大枠は、

  • メルマガを配信する機能
  • ステップメールを配信する機能
  • メールアドレスを管理する機能
  • 登録フォームを管理、設定する機能

です。

この仕組みを覚えて、必要な時に操作が出来ることが重要です。

どれか1つでもわからないと、部分的な実践になってしまいますからね。

わからない場合は、メール配信サービスの公式サイトや、公式サポートへのお問い合わせ、まわりに詳しい人がいればその人へ質問するなどで、操作はわかります。

カラーコード

カラーコードについては、#から始まりアルファベットや数字により配色を指定するコードです。

ウェブデザイナーぐらいしかあまり馴染みがないと思いますが、ウェブ制作に少しでも関わるなら必須な知識です。

カラーコードは以下のようなサイトから取得できます。

HTMLカラーコード: WEB色見本 原色大辞典

または以下のようなChrome拡張機能「ColorZilla」のようなツールを使うことで取得できます。(他にも手段は多数あります。)

ウェブサイトの配色を解析!Chrome拡張「ColorZilla」

埋め込みコード、リンク指定

埋め込みコードとリンク指定も、ウェブサービスの連携に欠かせない知識です。

埋め込みコードは、ウェブサービスから取得できるもので、基本的にコピー&ペーストするだけで、ウェブサービスとの連携が出来るものです。

具体的には、メール配信サービスから登録フォームの埋め込みコードを取得して、WordPressの固定ページにコピー&ペーストします。(テキストエディタで)

この操作で、メール配信サービスとWordPressを連携することが可能です。

その後は、登録フォームにメールアドレスが登録されたら、ステップメールが配信されるといった仕組みです。

リンク指定も連携に欠かせない設定で、ページを移動させるにはこの知識が必要です。

WordPressでは、メニューの設定で「カスタムリンク」という設定項目がありますし、ページに配置した画像にも「カスタムリンク」を設定する事が可能です。

ウィジェットに配置した画像も同様に「カスタムリンク」を設定できるので、バナー画像を配置して、オプトインページに誘導することで導線をつなげることが出来ます。

ウェブ制作のコツ

最後に素人が作ったもので大丈夫なのか?、そもそもサイトの構成はどうする?といった疑問があると思うので、これについて解説します。

上記については、競合でも他業種でもいいので、上手く作っているサイトやデザインを参考にしましょう。

以下の記事にて詳しく解説しています。

個人でウェブ制作をする時のポイントは「モデルを設定→真似する」

スモールビジネスの
現場からは以上です.

このは屋の最新情報をツイッターで