当事務所HP制作過程を丸裸！自作HP検討の方の参考になれば幸いです。

まずはサーバー選びから

自作HP作成手順

自作HPを作成するにあたっての大まかな流れをご説明します。
あくまで「素人が作ったHP制作の手順」が前提となりますのでご了承下さいませ。
むしろ有識者の方から訂正等頂ければそれはそれで有り難いのでコメント頂ければ幸いです。

WEBサーバーとは？

WEBブラウザからのリクエストに応じて静的画面や画像などのホームページのデータを Web ブラウザーに送ってくれるサーバーのことです。
ホームページを表示させるために必要なものとなります。

サーバー契約

サーバーによって色々なプランがあると思いますが、基本的にはハイスピードプランが良いのでは？
と思ってます。
サイトを作り上げていくと、最終的にサイトがどの程度のスピードで表示されるのか？といった所も気になってきます。
サイトの読み込みスピードが遅いことによるデメリットが気になってしまう方はハイスピードプランで問題ないと思います。
SEO対策などは時間もかかるためあまり気にしなくても良いのかもしれませんが、表示速度が遅い事によるページ離脱は避けたい所！
といった理由で私はハイスピードプランを使用してます。

ではサーバー契約が済みましたら次はワードプレスですね！

※参考　Googleは2018年に、モバイルページの検索順位にサイトスピードを判断材料に加えると発表しています。
※参考　表示速度が遅いサイトではユーザーがストレスを感じて離脱しやすくなるため、問い合わせやコンバージョンを逃してしまう可能性が高まります。

ワードプレスをインストールする

ワードプレスのインストールですが、サーバーによっては簡単インストールという機能がついているものが多いと思います。
ロリポップ：ワードプレス簡単インストールはこちら

サーバーの簡単インストールを使用すると、ドメインの登録等を自動で行ってくれるので便利です！

ロリポップの場合、サーバーはロリポップ、ドメインはムームードメインと関連サイトに誘導されます。
最初は意味が分からず困る方もおられるかもしれません。
あまり難しいことまで理解する必要はないと思いますが、ドメイン（サイト住所）を管理してるのがムームドメインです。
ムームードメインについてはこちら

ワードプレスのテーマをインストール

決めたテーマのファイルをワードプレスにインストールします。
テーマのインストールが完了すると、サイト作成が行えます。
基本的にはテーマ内に数種類テンプレートがありますので、その中からご自身の好みのスタイルを選んでカスタマイズしていくのが一般的かと思います。
私は「Swell」を使用しましたので、「Swell」限定で説明していきます。

ワードプレステーマのインストール方法に関してはこちら

サイトを作る

ワードプレスのブロックエディタについて

まずはワードプレスのブロックエィタについて少し触れておきたいと思います。

Webの構造の基本は、根底にあるWebサーバ、Webサーバに置かれているHTMLファイル・画像、それを読み込むWebブラウザで成り立っています。
Webサイトが閲覧できるのは、WebブラウザがHTMLファイルのHTMLを読み込んでWebブラウザにそのプログラミング通りのビジュアルを表示しているためです。

ということで、
WEBサイトというのはHTMLやCSSによって構成されております。

CSS（Cascading Style Sheets）とは、 Webサイトのサイズや色、レイアウトなどを設定 するためのプログラミング言語です。 CSSは「シーエスエス」や「スタイルシート」などと呼ばれており、背景の色の変更や画像の設置、文字のフォントや色などの幅広いデザインを定義する際に使用されます
こういうやつですね。
↓

ただこれを理解して、自身でデザインから構築するのはさすがにハードルが高いです・・・
それを、ワードプレスのブロックディタならHTMLやCSSなどの知識がなくとも扱えるという所が特徴です。

HPトップから順に見ていきます①

HP上部からレイアウト順に簡単に説明していきます。
この部分が気になっていた！といった要望の参考になれば幸いです。

まずはヘッダー部分です。
少し見にくいですが、

1番上部の黒い帯▶ワードプレス管理画面の帯です。実際のHPには表示されません。

2番目紺色の帯（ドローン許可・・・・）▶これはSwellの機能のひとつでヘッダーバーというものです。
カスタマイズ→ヘッダー→ヘッダーバー設定で設定できます
※カスタマイザーはSwellのものになります。他のテーマの場合は仕様が異なると思いますのでテーマごとの使用説明を参照下さい。

3番目の黒い帯（お気軽に・・・TEL）▶こちらはSwell専用プラグイン（補強・改造ツールのようなもの）を使用してます。「Swellカスタムヘッダー」

4番目の白い帯▶こちらが通常のヘッダー部分　左にロゴ・右にグローバルメニューを表示してます。

前項にある参考動画を見て頂ければグローバルMENUの設定方法はおわかりになると思います。
「行政書士いしなぎ事務所」のロゴに関してはWIXロゴメーカーで作成しました。
WIXロゴメーカーはこちら
買い切りで2000円？前後支払ったと思います。
設定方法は、カスタマイズ→ヘッダー→ヘッダーロゴの設定

ヘッダー部分のお問い合わせボタン

こちらは「ブログパーツ」という機能を使用してます。
使い方の解説はこちら
ブログパーツ▶Swellボタン▶リンク設定▶ウィジェット設定
という順序で作成してます。

画像処理に関して

ロゴ画像にしろ、挿入画像、トップのメインビジュアル画像、ブログに使用する画像、
全てにおいてですがご自身でHPを作成されるのであれば画像処理が出来るようになっておくことをおすすめします！
フォトショップやイラストレーターが使える方でしたら問題ないと思いますが、そういった画像処理は不慣れという方もおられると思いますので下記ご参考下さい。

無料の画像処理ツール　PhotoScapeXはこちら
無料で画像処理できるツールとしてはかなり優秀なのでは？と思います。
私も普段使用してます。
機能が沢山あって初めは戸惑うかもしれませんが、使っていけばすぐに慣れます。

画像サイズに関して

パソコンで表示させるサイズや、スマホ、タブレットで表示させる画像サイズはそれぞれに設定して画像の湾曲防止させてます。

PCサイズ▶幅2000px
SPサイズ▶幅900px
タブレット▶私はタブレット用サイズには別設定はしてません。した方が良いかもしれませんが。。

縦幅は画像によって変えてるのでここでは省きます。
※私の設定ですので、もう少し正確なサイズで処理したほうが良いかもしれません。

画像の重さ問題

使用する画像が大きすぎるとサイトが重くなってしまいます。
使用する画像を全体的に圧縮するプラグイン（ワードプレスの強化・カスタマイズするツール）もありますが、
テーマによっては不具合が報告されるケースもあるため注意が必要です。

私の場合は使用する画像を全てWebP（ウェッピー）に変換してます。
画質の劣化も少なく、かなり軽くできるためおすすめです。
JPEG、GIF、PING、よりは軽く鮮明に処理できていると感じます。
無料の画像処理ツール　PhotoScapeXはこちら
↑
こちらで変換できます。

WebP（ウェッピー）は、Googleが開発した画像フォーマットです。ファイルの拡張子は「.webp」です。

HPトップから順に見ていきます②

公式LINEに誘導する帯▶こちらはSwellに実装されている「お知らせバー」という機能で設定できます
※カスタマイズ→サイト全体設定→お知らせバー

メインビジュアル▶こちらはSwellカスタマイザーで設定できます。中の文字もSwellでは書き込むこともできるのですが、私は文字を書き入れた画像ファイルを作成して設定しております。
↓こちらで作れます
無料の画像処理ツール　PhotoScapeXはこちら
※Swellの文字サイズが小さくてもう少し大きくしたいと思い画像として設定しました。

画像はどこから？

私が素材集として使っているサイトを紹介します。
アンスプラッシュ
photAC
イラストAC
ソコスト
全て無料で使用できます。
有料の画像もありますが、無料画像でも十分揃う充実度だと思います。

HPトップから順に見ていきます③

記事スライダー▶こちらはSwell標準で実装されているテンプレートになります。動き方や画像同士の隙間の有無、上下の余白の増減などはSwellカスタマイザーから設定できます。

無料診断バナー▶こちらはCanvaで制作しました。Canvaはご存じの方も多いと思いますが、テンプレートも豊富なので簡単に作れるかと思います。
ちなみにPCサイズのダウンロードには有料化が必要でしたのでやむを得ず有料化しました。。
横サイズ2000px、拡張子ウエッピーにして設定してます。

Canvaはこちら

HPトップから順に見ていきます④

ここでサイトに使用するフォントについて解説します

ここでHPに使用する文字フォントについて解説します。
ここは悩まれる方も多いんじゃないかな？と思います。

まずHPに使用する文字フォントはテーマによって違いがありますが、Swellにおいては

• 遊ゴシック
• ヒラギノゴシック>メイリオ
• Noto sans JP
• 明朝体(Noto serif JP)

この4種類から選択することになります。

「游ゴシック」「ヒラギノゴシック＞メイリオ」に関してはインストールされているフォントで表示するタイプ
「Noto sans JP」「明朝体」に関してはグーグルフォント（Webフォント）です。


では、インストールされているフォントで表示するタイプ
と、グーグルフォント
では何が違うのか？

というところなのですが、勿論デザインに関してはそれぞれ違いが出てきます。
それとは別に、グーグルフォントというのはWebフォントになります。
Webフォントの表示には、Webサーバー上のフォントをダウンロードしてから表示させるといった特徴があります。

そのため、下記に少し説明を入れてますが、デバイス（PCやスマホ）によって表示されない問題がなくなるというメリットがあります！

しかし表示させる度にフォントをダウンロードするという命令が入るため、Webフォントを利用しない場合に比べ、その分の通信がプラスアルファで発生します。
そのため、Webフォントを利用すると、フォントダウンロードの通信が大量に発生し、サイトの表示スピード低下の原因になります。

ここが最大のデメリットです。

見た目のデザイン的には明朝体を使用したい・・・
ただサイトが重たくなるデメリットは避けたい・・・

といったことに悩むことになります。
サイトに追加CSSを組み込んで表示させる、或いはサーバーにダウンロードしておくといった解決方法もありますが、少し難易度が上がるので不具合の原因となる可能性も考慮し私は断念しました。

ということで、私の選択は「游ゴシック」です。

デバイスによっては文字が正常に表示されない

Webページを表示するとき、Webブラウザはそのデバイスにインストールされているフォントから、font-familyに指定されたフォントで文字を表示します。

しかしこのとき、注意しなければならないことがあります。その注意点とは、それぞれのデバイス（パソコンやスマホ）の、OSの種類やバージョンによって、初期状態でインストールされているフォントに違いがあるということです。

つまり、インストールされているフォントに違いがあるということは、font-familyで指定したフォントがインストールされていない場合、指定したフォントで表示されないということが発生します。

細かくは割愛しますが、選ぶフォントによっては、パソコン・スマホ表示されないことがあるということですね。
※Swellにおける「游ゴシック」「ヒラギノゴシック＞メイリオ」のフォントは、現在表示されないデバイスはほぼないそうです！

当事務所の取扱業務

ここは明朝体の文字となります。
大きな見出しをどうしても明朝体で表示したく、ここは画像処理して貼り付けてます。

「HP内の一部のフォントを変える方法」もありますが、追加CSSの知識が少し必要なので私は画像処理してしまいました。
見出しに文字ではなく画像を貼り付けることによるデメリットも多少ありますが、影響が少ないと考えてますのでここでは割愛します。

例により画像処理は　無料の画像処理ツール　PhotoScapeXはこちら

※PhotoScapeXを立ち上げる▶新規（画像サイズを指定・色等）▶挿入▶テキスト（好きなフォント選べます）▶保存（WebP）

ドローン包括申請　他

これはSwellのリッチカラムという機能を使ってます。
リッチカラムの説明はこちら

上下左右、複数のカラム（箱のようなもの）を設定でき、文字は画像を差し込み枠を付けたり移動させたりといたことができるようになります。

PCサイトではここをリッチカラムで表示させてますが、スマホでは文字が長くなり読みにくくなるため、アコーディオンブロックを使用してます。

PCサイト、スマホサイトで所々表記を変えてます。
また下記で別々で表記させる方法を書きます。

HPトップから順に見ていきます⑤

ここまでくると、ある程度ブロックエディタの使用に慣れてきているかと思います。

こういったお悩みありませんか？▶H３見出しです※見出しの設定はこちら
チェック項目▶リストで使える装飾の設定方法　こちらもSwellの基本機能で設定できます。

HPトップから順に見ていきます⑥

引き続き特別なことはなく構成されてます。
ワードプレス全般に言えることですが、

①段落を設定↓の画像の状態ですね。

②「/」を入力するか、右端の「＋」をおしてブロックを選択する（ワードプレス標準ブロック、テーマごとのブロックなど　例：見出し・アコーディオン・リッチカラム・QA）

③選択したブロックごとに文字を入れたり、形を変えたり枠をつけたりするという流れです

注意するべき３つのポイント▶H2見出し
（1）（2）（3）▶アコーディオンブロック　アコーディオンブロックの使い方

HPトップから順に見ていきます⑦

ここでは背景画像が固定され、文字だけが上下するという設定の説明になります。
ここで使用する機能はフルワイドブロックというツールになります。
フルワイドブロックの使い方

①段落から、フルワイドブロックを選択します

②ワードプレス右側にある設定項目から背景画像を選択

③フルワイド設定で、固定画像、パララックス、等お好みで選んで設定する

④見出しに文字を書くなり、さらに画像を重ねるなりして設定▶行政書士いじなぎ事務所等の文字は今回も画像として貼り付けてます。

で、固定画像にしたり、パララックス効果での背景にしたりできます。
パララックス効果が気になりましたら一度ググってみて下さい。
マウスのポンターを回すと画像がゆっくり上下する動きです。
私は固定画像の方が好みですね。

HPトップから順に見ていきます⑧

こちらも前項と同様です。

①段落▶フルワイドブロック▶画像設定（カラーオーバーレイ白・85％）
②H２見出し
③メディアとテキストブロック　メディアとテキストの使い方

HPトップから順に見ていきます⑨

ここも同じような流れになります。

①段落▶画像貼り付け（当事務所の取り組み）
②段落▶メディアとテキスト▶テキストにH３見出し下段に文字列▶メディア部分には画像差し込み

後は②を繰り返すだけですね。

デザイン的な話になりますと、
画像のサイズや、文字列に枠を付ける、付けない、色、フォントサイズなどかなり自由に設定できます。
写真に文字を被らせることもできます。

色々設定を触ってデザインを選ぶという所が、私の場合は何より時間を要しました。。。

HPトップから順に見ていきます⑩

こちらの構成は、
フルワイド▶画像設定▶固定画像

その後、
H2見出し▶ブロック下の余白量0▶記事内容に枠を設定▶記事内任意の文字列（ここではDID～目視外）をグループ設定▶シャドウ設定

といった形になってます。
文字で見るとややこしそうに見えますね。
実際やってみると意外に簡単です。

私も実際色々試した結果としてこの形になっただけで、元からこういったデザインを目指して構築してません！
オススメはデモサイトのデザインをみて「これいいな」と思うものを作ってみる▶微調整といった流れです。

HPトップから順に見ていきます⑪

こちらはSwellの「ボックスメニュー」というブロックを使用してます。
縦横の並びや、アイコン選択など全てボックスメニューの設定で指定できます。

ボックスメニューの設定はこちら

HPトップから順に見ていきます⑫

ご依頼の流れ▶画像ファイルの貼り付け

当事務所にご相談・・・▶Swellのキャプションブロックを使用してます
キャプションブロックの使い方

お問い合わせ▶Swellのステップブロックを使用してます
ステップブロックの使い方

HPトップから順に見ていきます⑬

こちらも同様ですね！

申請時無料特典▶画像ファイルを貼り付けてます

こちらはSwellの「ボックスメニュー」というブロックを使用してます。
縦横の並びや、アイコン選択など全てボックスメニューの設定で指定できます。

ボックスメニューの設定はこちら

HPトップから順に見ていきます⑭

よくある質問▶画像ファイルを貼り付けてます
QA▶SwellのFAQブロックで作成してます
SwellのFAQブロックの設定はこちら

HPトップから順に見ていきます⑮

こちらもすでに記載済みの方法で設定してます。
ここで使用する機能はフルワイドブロックというツールになります。
フルワイドブロックの使い方

①段落から、フルワイドブロックを選択します
②ワードプレス右側にある設定項目から背景画像を選択
③フルワイド設定で、固定画像、パララックス、等お好みで選んで設定する
④見出しに文字を書くなり、さらに画像を重ねるなりして設定▶行政書士いじなぎ事務所等の文字は今回も画像として貼り付けてます。

HPトップから順に見ていきます⑯

こちらはフッターの設定になります。
Swellのフッター設定をするだけでこのようなレイアウトになります。
フッター周りの設定方法はこちら

素人が作る自作HP制作過程　まとめ

以上で大まかなサイト制作の流れを書かせて頂きました。
全般的に言えることは、

• ワードプレスの設定やブロックエディタの使い方
• ワードプレステーマのブロック設定方法
• 画像処理の方法

が分かればサイトは作っていけるかと思います。
HTMLやCSSの知識もあればさらにカスタマイズできるのは間違いないのですが、全く知らなくてもここまで作り上げることはできました。

追加CSSは文字フォントサイズを指定するCSSを一つだけ入れましたが、それ以外は全てテーマにあるデフォルトの設定のみで仕上げてます。

自作HPの良い点・悪い点

良い点

自作HPの良い点としては、やはりランニングコストが大きく押さえられるという点があげられます。
作成費は自身の人件費ですし、実費としてはサーバー費くらいです。
業者に依頼した場合の制作費は安くても15万円前後はするでしょうか？
コンテンツを充実させたりした場合30万円～といった所も多いようです。
その後管理費として毎月1万円ほどの出費がランニングコストとしてかかってきます。
その費用が0です。

後は、自身でHPを作り上げる時、どのようなコンテンツを載せるか？
といった所も全て自分で考えることになります。
その結果、取扱業務の選別、業務の説明、関係法令のチェック等を全て自分で行う必要があります。
当たり前の話ではあるのですが、士業専門WEB制作会社等に依頼すると、雛形が用意されてるケースもありますので、自作の方のほうが調べる量などが多く、整理する段階で身につきやすいといったメリットはあるかと思います。

悪い点

例えば、HPの見やすさや構成、セールスレター、SEO、画像処理、キーワード、と上げればキリがありませんが、プロの方に頼めば解決し、士業専門の業者さんでしたら経験やノウハウの蓄積もありとても素人では太刀打ちできません。
ですので、自作の方とプロの方との間には明確な差があるように思います。
※中にはそうでもないなと思う制作会社さんもいらっしゃるので選別には注意が必要です。

そして何より「時間」です。
労力自体は自分次第ですので少し別枠で考えますが、「時間」だけはどうしようもありません。
制作経験者でもないかぎり、1ヶ月以上は基本的にはかかると思って良いと思います。
依頼してしまえば費用はかかりますが、頼んでいる間は他のことに時間を使えます。

追記

実際テーマを決めてからサイト作成に取り組んで、20日前後？でここまで出来ましたが、手間はかなりかかりました。
一つ一つ分からない所をグーグル先生に聞き、Swellに関しては作り方を丁寧に説明してくれているサイトを見つけては試してを繰り返し、デザインなどは娘（小4）の好みに合わせて（笑）作成しました。

今回の記事も、少しも分かりやすく書けた気がしません。
大変恐縮ですが、この記事から不明な点、間違っている点、お聞きになりたい点、等ございましたらお気軽にご連絡頂ければと思います。

この記事から少しでも自作HPを作られる方の参考になれば嬉しく思います。

以下、

・実際サイト制作にかかった費用
・使用しているプラグイン
・スマホページ用の対応
・サイトスピードを調べてみる

を載せておきます。

HP作成に掛かった費用

ロリポップハイスピードプラン　　¥ 11,880/12ヶ月
ワードプレス有料テーマ「Swell」　¥ 17,600/買い切り
ロゴ作成　　　　　　　　　　　　¥ 2,000/買い切り
Canva有料契約　　　　　　　　　¥ 12,000/12ヶ月
※Canvaは1ヶ月無料でプロ版お試しがあるため、1ヶ月以内にサブスク解除すれば無料でプロ版使用も可能です。

費用としては3万円強ほどで済んでます。
ランニングコストとしてはサーバー費が年間更新で¥ 11,880のみです。
Canvaは1ヶ月以内にサブスク解除すれば無料になります。
自作HPの最も良い点はやはりランニングコストを押さえられる点でしょうか。

使用したプラグイン

Webサイトを作る上で、重要なものに絞ってプラグインを入れてます。
基本的には下記のものは入れてる方も多いのでは？と思います。
参考にしてみて下さい。

プラグイン	概要
All In One WP Security	セキュリティー系プラグインです
BackWPup	バックアップを簡単に作成できるプラグインです
EWWW Image Optimizer	画像圧縮プラグインです。不具合報告あるので注意です
LightStart – Maintenance Mode, Coming Soon and Landing Page Builder	登録前は公開できないので、このプラグインでメンテナンスページを表示せてました
Really Simple SSL	ワンタッチでSSL化。重要度高めです
SEO SIMPLE PACK	Swell使用される方は必須です
SWELL Custom Header	冒頭でも説明したトップヘッダーです
WP Multibyte Patch	日本語利用時のバグ修正・機能強化プラグイン
WPForms Lite	簡単にお問い合わせフォームが作れます

スマホページ用の対応

サイト作成をする上でテーマを決めて作成するわけですが、テーマによってはスマホサイトに対応しているテーマ、そうでないテーマに分かれます。

スマホ対応▶レスポンシブ対応と言いますが、対応してなければスマホ用で別サイトを制作する必要が出てくるためオススメしません。
レスポンシブ対応のWordPressテーマ60選【目的別】

レスポンシブ対応テーマであれば、基本的にはPC用で作成した記事が自動的にSP（スマホ）のサイズに変換されて表示されます。
なので、2つのサイトを作る必要は基本的にはありません。

スマホでは違う表示をさせたいとき

私使用したSwellもレスポンシブ対応のテーマにはなるのですが、

・PCでの表記と、SP（スマホ）での表記を変えたい。
・PCの文字サイズだと、SPで中途半端な表示になる。
・Swell限定ですが、フルワイドブロックの固定画像設定（背景画像が固定されて文字や画像だけ動くやつです）がSP（スマホ）では対応しておらず背景画像固定が表示できない。
・SP（スマホ）では文字数が多いと見にくくなるのでアコーディオン等で文字を隠したい

といった問題が出てきます。
そんなとき、Swellでは、デバイス制限という機能があり、どちらに表示させるか指定することができます。
なので、私の場合、

SPでは違った形で表示させてい箇所をグループ化▶複製▶SP表示（元々のグループはPC表示）

という形で表記を分けて対策しました。
これでPCで文字を大きくしてもSPには影響しないため、SP表示を指定したグループで設定すればOKということですね。

・Swell限定ですが、フルワイドブロックの固定画像設定（背景画像が固定されて文字や画像だけ動くやつです）がSP（スマホ）では対応しておらず背景画像固定が表示できない。

この問題に関しては別の対策が必要でして、
PCはフルワイドブロックのままで問題ないのですが、SPでは動かなくなります。
そこで、ワードプレスの純正ブロックである「カバーブロック」で作成することで解決しました。

カバーブロックの使い方

サイトスピードを調べてみる

Webサイトの表示スピードを知りたいときに便利なツールがあります。
ページスピードインサイトはこちら

PageSpeed Insightsとは、入力したURLのページ速度スコア（点数）とWebページの表示速度改善に必要なアドバイスをしてくれるGoogle公式提供の無料ツールのことです。

速さはそこまで追求してないのですが、遅い、重いサイトだと離脱率が高まるという所が私としては問題なので、ある程度の対策は行ってます。
PageSpeed Insightsではページ速度が遅くなる原因を教えてくれるので非常に便利なツールです。

・Swell高速化ツール　SEO SIMPLE PACK
・全ての画像を縮小、WebP拡張子に変換する
・使用していないJavaScriptを削除する

等ですね。
当サイト「行政書士いしなぎ事務所」のサイトスピードを参考に掲載しておきます。
ちなみに、全体フォントを明朝（グーグルフォント）に変えると、
SP　55 　PC　70
まで落ちます。
このあたりは悩みのタネですね。

SP	PC

以上、素人が作る自作HP制作過程について、なるべくわかりやすく解説してきましたが、いかがだったでしょうか？
自作HPを考えておられる方に、少しでもお役に立てれれば嬉しく思います。