![初心者でも自社HP作れました](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/初心者でも自社HP作れました.png?w=1080&ssl=1)
便利なサイトを参考にすれば、自社HPは作れる!
オシャレな自社HPは、ご自身で作成できます。
正直、私自身も「自作できない」と思っていたうちの一人です。
コードの知識、色、センス…
足りない知識をあげれば、キリがありません。
それでも、オシャレ(?)な自社HPは無事完成しました。
所要時間は、約3時間です。
参考にしたサイトと共に、自社HP作成の手順を紹介します。
私が参考にした『色』と『無料写真』のサイトを紹介
![Color Hunt](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/Color-Hunt.png?resize=1080%2C320&ssl=1)
![paletton.com](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/paletton.com_.png?resize=1080%2C779&ssl=1)
好みのグラデーションが見つかります。
![WebGradients](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/WebGradients.png?resize=1080%2C414&ssl=1)
![Pexels](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/Pexels.png?resize=1080%2C372&ssl=1)
![O-DAN](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/O-DAN.png?resize=1080%2C359&ssl=1)
![GIRLY DROP](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/GIRLY-DROP.png?resize=1080%2C381&ssl=1)
私が自社HPを作成した実際の手順
(1)メールサポートに予約エンジンの設定を依頼(所要時間:1分)
・「できる限りシンプルに」と設定を依頼
(2)自社HPの、色のイメージを確定
①WebGradientsで好きな色をスクショして保存(所要時間:5分)
![好きな色をスクショして保存](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/好きな色をスクショして保存.png?w=1080&ssl=1)
②paletton.comで配色パターンを調整(所要時間:10分)
※上で選択した色のイメージに合わせて調整
![配色パターンを調整](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/配色パターンを調整.png?w=1080&ssl=1)
※画像内④の作業は、自社HP作成時に実施
(3)自社HPを作成(所要時間:約2時間45分)
Google サイトを使って作成しました。
感覚的に作業できたため、操作方法は調べていません。
以下でグーグルサイトでゼロからHPを作成する方法を解説しています。
①『挿入』からパーツを選択し、大枠を組み立て
![パーツで大枠を組み立て](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/パーツで大枠を組み立て.png?w=1080&ssl=1)
②見出しや説明文などを入力
![見出しや説明文を入力](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/見出しや説明文を入力.png?w=1080&ssl=1)
③paletton.comから色のコードをコピペして配色を調整
![色のコードをコピペ](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/色のコードをコピペ.png?w=1080&ssl=1)
④Beds24からiframe(1行のコード)をGoogle サイトにコピペ
![iframeをコピペ](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/iframeをコピペ.png?w=1080&ssl=1)
⑤Google サイトでレイアウトを調整
![レイアウトを調整](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/レイアウトを調整.png?w=1080&ssl=1)
⑥Googleサイトの色を、Beds24予約エンジンの背景色などにコピペ
![背景色をコピペ](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/背景色をコピペ.png?w=1080&ssl=1)
⑦Pexelsで見つけた画像をGoogleサイトに挿入
![画像を挿入](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/画像を挿入.png?w=1080&ssl=1)
⑧公開をクリック
![公開をクリック](https://i0.wp.com/co-reception.com/wp-content/uploads/2021/10/公開をクリック.png?w=1080&ssl=1)
最後に
良質なサイトを参考にすれば、初心者でも自社HPは自作可能ですね。