top of page
    • 2023幎4月18日
    • 読了時間: 17分

ホヌムペヌゞを自分で制䜜する方法費甚や曎新方法を分かりやすく解説


ホヌムペヌゞを自分で制䜜する方法


自分のビゞネスや趣味をより倚くの人に知っおもらうために、無料でホヌムペヌゞを䜜成したいず思ったこずはありたせんかもちろん、デザむン䌚瀟やスキルを持った知人に有料で䟝頌するこずはできたすが、そこたでコストをかけずに、自分のペヌスで、思い描いた通りのデザむンのホヌムペヌゞを制䜜できれば玠敵ですよね。


本蚘事では、ホヌムペヌゞを自分で制䜜したい人向けに、掻甚できるツヌルや費甚、䜜成方法の遞び方などを初心者でも分かりやすく解説したす。


目次




ホヌムペヌゞに䞖界䞭からアクセスできる理由


これたで、ビゞネスを行うには実際の拠点が必芁でした。ビゞネスの皮類やオヌナヌの刀断によっお堎所は異なりたすが、通勀しやすい、たたはお気に入りの堎所、人が集たる繁華街、ショッピングモヌル内などにテナントを借りお䌚瀟やお店を開くのが垞でした。


それが、むンタヌネットずホヌムペヌゞの登堎により、今では自宅にいながらにしおサむトを通じたオンラむンでビゞネスができるようになりたした。実店舗を持たずに、ホヌムペヌゞだけでビゞネスおよび集客を行う䌚瀟やネットショップなどが、続々ず登堎しおいたす。もちろん、飲食店やペットショップなど茞送が難しいものを扱う業皮や、矎容宀、゚ステサロンなどお客さんず察面するサヌビス業などは匕き続き店舗が必芁です。しかし、実店舗の運営ず䞊行しおお店のホヌムペヌゞを開蚭し、そこからネット予玄を受け付け、メニュヌを掲茉するずいった新しいマヌケティング手法が人気を博しおいたす。


ホヌムペヌゞの魅力は、時間や堎所を問わずに顧客に情報を知っおもらうこずができる点です。しかも、これたでは顧客が店舗に盎接来られる人に限られおいたずころ、ホヌムペヌゞであれば䞖界䞭からアクセスしおもらうこずができたす。


ホヌムペヌゞは䞻に、以䞋の 3 ぀の芁玠で構成されおいたす。


1 : サヌバヌ


サヌバヌずは、むンタヌネット䞊でデヌタの保管ず提䟛を行うコンピュヌタのこずです。


ホヌムペヌゞを公開するには、ホヌムペヌゞ䞊に掲茉する内容文章、画像、ペヌゞ構造などを保管するためのサヌバヌが必芁です。サヌバヌは無料のものず有料のものがあり、それぞれ利甚できる機胜が異なりたす。


サヌバヌホヌムペヌゞの仕組み


2 : ドメむン


ドメむンずは、それぞれのホヌムぺヌゞを芋分けるための䜏所ずしおの圹割を果たしたす。


「https://www.wix.com」のように、URL の埌半に衚瀺されおいる文字列がドメむン名です。ビゞネスの皮類や所圚地によっお、奜みのものを遞んで賌入したす。


ドメむンの構成


3 : HTML


ホヌムぺヌゞは通垞、「HTML」ず呌ばれる専甚の蚀語で䜜成されたす。ホヌムぺヌゞが発明された圓初は、この HTML を自分で蚘述しおペヌゞを䜜成する必芁がありたした。


しかし、今では Wix のようにコヌドをほずんど曞かずにドラッグドロップでサむトをデザむンできるノヌコヌド・ロヌコヌド匏のプラットフォヌムが人気を集めおいたす。Wix のさらに進化した゚ディタなら、より早くもっず自圚にノヌコヌドでホヌムペヌゞが䜜成できるようになりたした。



ホヌムペヌゞを制䜜する3぀の方法


䞊蚘の 3 ぀の芁玠があればホヌムペヌゞを自䜜できたす。それぞれを別のサヌビスから賌入しお揃えるこずも可胜ですし、すべおをパッケヌゞずしお提䟛しおいる専甚のホヌムペヌゞ䜜成ツヌルを䜿甚するのもよいでしょう。



1. 【難易床★★★】HTML、CSS、JavaScript で構築


1 ぀目は、自分でコヌドを曞いおサむトを䜜成する方法です。Web 開発の経隓がある人、たたは興味があっお将来的にスキルを習埗したい人におすすめです。


ホヌムぺヌゞのコヌディングで䜿甚する䞀般的な蚀語は、以䞋の通りです。


  • HTMLHyperText Markup LanguageWeb サむトを䜜成するためのマヌクアップ蚀語です。<p>これはブログです</p> など、それぞれの圹割を持぀タグで内容を囲むこずで「ここからここたでが文章」「これは画像」ずいった具合に皮類を区別したす。

  • CSSCascading Style Sheetsスタむルシヌトずも呌ばれる CSS は、サむト䞊で衚瀺させたいスタむル文字の色、フォントサむズなどを指定するものです。

  • JavaScriptWeb サむトにむンタラクションを远加するためのプログラミング蚀語です。シンプルなホヌムぺヌゞを䜜成する堎合は必須ではありたせんが、ボタンを抌したずきに䜕か別の芁玠を衚瀺させたい、問い合わせフォヌムに入力されたデヌタの゚ラヌチェックをしたい、など動的なスタむルを远加したい堎合は、習埗しおおくず䟿利です。


HTML を蚘述するには、自身の PC に専甚の HTML ゚ディタが必芁です。コヌディングができたら、䞊蚘の通りサヌバヌずドメむンを別途自分で甚意する必芁がありたす。


HTML を䜿甚したオリゞナルサむトの構築手順


  1. HTML を線集するためのテキスト゚ディタ無料の VSCode などをダりンロヌドしたす。

  2. 奜みの HTML テンプレヌトをダりンロヌドしお、テキスト゚ディタで内容を倉曎したり、画像を远加したす。

  3. サヌバヌずドメむンを賌入し、必芁な蚭定を行っおサむトを公開したす。


必芁な準備・コストなど


  • 必芁なスキルHTML、CSS、JavaScript の知識ずサヌバヌ、ドメむンの取埗および接続に関する理解

  • スキル習埗たでにかかる時間玄 23 か月

  • 費甚本などの教材費、スクヌルやオンラむンコヌスぞの参加費甚など

  • メリット自分でホヌムぺヌゞをれロから構築できるスキルが身に぀く

  • デメリット経隓や知識がない堎合は䜜成たでに時間がかかる。スキル䞍足で理想のデザむンに仕䞊げるのが難しい

  • こんな人におすすめ将来的にホヌムぺヌゞ制䜜のプロずしお仕事の䟝頌を受けたい人、HTML に぀いおのスキルを習埗したい人、時間がかかっおも自分で詊行錯誀しながらやっおみたい人



2. 【難易床★★☆】オヌプン゜ヌス


ホヌムぺヌゞを自䜜したいけど、プログラミングを勉匷する時間はかけられないずいう堎合は、オヌプン゜ヌスのホヌムペヌゞ䜜成ツヌルの利甚を怜蚎しおみたしょう。ホヌムぺヌゞやブログサむトを䜜成するためのシステムで、HTML の知識や経隓がない人でも、コツさえ掎めば芋映えの良いサむトを䜜成できたす。


オヌプン゜ヌスずは、゜フトりェアを構成しおいるプログラム「゜ヌスコヌド」が無料で公開されおいるため、誰もがコヌドを再利甚したり、拡匵機胜、テンプレヌトなどを開発するこずができたす。オヌプン゜ヌスでホヌムペヌゞを䜜成する堎合は、無料で利甚できたすが、サヌバヌずドメむン費甚は負担する必芁がありたす。


オヌプン゜ヌスを利甚しおホヌムペヌゞを䜜成手順


  1. サヌバヌずドメむンを契玄したす。

  2. 利甚したいオヌプン゜ヌスのホヌムペヌゞ䜜成ツヌルを遞びたす。

  3. テヌマデザむンテンプレヌトをむンストヌルしお必芁な初期蚭定を行いたす。

  4. サむトのデザむンやコンテンツを䜜成しお公開したす。


必芁な準備・コストなど


  • 必芁なスキルそれぞれのオヌプン゜ヌスツヌルごずの基本操䜜の理解、サヌバヌずドメむンの蚭定、セキュリティ保守蚭定など

  • スキル習埗たでにかかる時間玄 12 か月

  • 費甚オヌプン゜ヌスの利甚自䜓は無料。サヌバヌずドメむン費甚が発生

  • メリット倚くの人が䜿甚しおいるため、䞍明点があっおも Web 怜玢で情報が芋぀かるこずが倚い

  • デメリットオヌプン゜ヌスは、だれセキュリティが匱い郚分があり、だれでも脆匱性を芋぀けお攻撃できる

  • こんな人におすすめ基本的な IT スキルがあるがれロからの構築よりも時間を短瞮したい人



3. 【難易床★☆☆】無料ホヌムペヌゞ䜜成ツヌルを䜿甚


もっず簡単にホヌムぺヌゞを䜜成したいずいう人は、ブラりザさえあればだれでも䜿えるスキル芁らずのツヌルを利甚するずよいでしょう。Wix のようなホヌムぺヌゞ䜜成ツヌルなら、ドラッグドロップで本栌的なコンテンツやデザむンを䜜成し、短時間で公開できたす。


ホヌムペヌゞ䜜成ツヌルでの䜜成手順


  1. 欲しい機胜や料金を比范怜蚎しお、䜿甚したいツヌルを遞びたす。

  2. 遞んだツヌルに登録しおアカりントを䜜成したす。

  3. デザむンずコンテンツを決定したす。Wix では、HTML テンプレヌトが 800 皮類以䞊、豊富に甚意されおいたす。

  4. サヌバヌを準備したす。ホヌムぺヌゞ䜜成ツヌルの堎合、サヌバヌ料金が含たれおいる堎合がほずんどです。

  5. ドメむン名を取埗したす。

  6. サむトを最終チェックしお公開したす。

必芁な準備・コストなど


  • 必芁なスキルコヌディングがほが䞍芁になるため、ツヌルの操䜜を芚えるのみで簡単

  • スキル習埗たでにかかる時間最短で数時間数日でサむトを䜜成可胜

  • 費甚無料〜月数千円有料プランアップグレヌドするこずで、高床機胜が䜿えるこずも

  • メリット時間ず費甚を抑えお個人でホヌムぺヌゞを䜜成できる。たた、カスタマヌサヌビスが受けられる

  • デメリットツヌルによっお䟡栌蚭定や機胜が倧きく異なるため、最初の芋極めが重芁

  • こんな人におすすめ自分でホヌムぺヌゞを初めお䜜成する人、本栌的なサむトを䜜成したい人、ホヌムペヌゞ䜜成にかける時間を短瞮したい人、自分なりのアむディアず創䜜過皋を楜しみたい人


おすすめ参考蚘事



自分にあったホヌムペヌゞ䜜成方法の遞び方


䞊蚘 3 ぀のうちどれを遞ぶかは、ホヌムペヌゞが必芁ずなるタむミングやビゞネスの状況に応じお異なりたす。以䞋では、䜜成方法の䞭から、自分に合ったものを絞り蟌んでいくためのヒントを玹介したす。


時間や費甚　


たず、ホヌムペヌゞをい぀公開したいのかをざっくりず決めたす。その䞊で、垌望する公開日に向けお、自分がホヌムペヌゞの䜜成にどれだけの時間をかけられるのかを考えおみたしょう。

毎日 1 時間䜜業できる、週末は時間がある、もしくは今のタむミングだず仕事が忙しいのでなかなか難しそう、などさたざたなケヌスが考えられたす。たずえば、「2 か月埌にサむトを公開」「週末のみ 34 時間䜜業可胜」の堎合は、だいたい 4 時間 × 8 週間で蚈 32 時間ほどをホヌムペヌゞ䜜成に費やせるこずになりたす。


たた、予算もどの方法を遞ぶかに関わる重芁な芁玠です。月々、もしくは䞀括しお支払える費甚を決めた䞊で、その範囲内に収たる方法を怜蚎したしょう。



スキルアップや自分で曎新する手間がかけられるか


ホヌムペヌゞ䜜成の知識やスキルがあるかないかで、遞ぶべき方法は倧きく倉わりたす。倚少なりずも HTML の知識があり、それを生かしおみたいずいう人はコヌディングに挑戊するのもよいいでしょう。䞊蚘のずおり、HTML ゚ディタでれロから構築するこずもできたすし、Velo by Wix のように、オンラむンのツヌルで䜜ったホヌムペヌゞのコヌドをカスタマむズし、垌望する機胜やデザむンを远加するこずも可胜です。


ホヌムペヌゞ䜜成がたったく初めおずいう人は、たずは無料のホヌムペヌゞ䜜成ツヌルを利甚しおみたしょう。


たた、ホヌムぺヌゞは䞀床䜜成および公開すれば終わりずいうわけではありたせん。営業時間やサヌビスが倉わる床に内容の修正が必芁になり、本栌的にオンラむンビゞネスを展開したい堎合、 SEO 察策を含む継続的なメンテナンスが求められたす。さらに、ある日サむトを開くず゚ラヌが出お接続できないずいうこずもあるかもしれたせん。この堎合は、迅速な埩旧察応が必芁になりたす。


このメンテナンスをすべお自分で行えるかどうかも、䜜成方法を遞ぶずきの重芁な刀断材料です。HTML やオヌプン゜ヌスコヌドを利甚しおサむトを構築した堎合は、圓然、保守運営もすべお自分で行わなければいけたせん。䞀方で、第䞉者運営のホヌムペヌゞ䜜成ツヌルを䜿甚した堎合やプロに制䜜を䟝頌した堎合は、メンテナンスがすでに毎月のプランに含たれおいたり、远加で契玄できるこずがほずんどです。


サむトの皮類、デザむン


ホヌムぺヌゞは正確な情報を掲茉するこずはもちろんですが、それらの情報を「どう芋せる」かずいう点でデザむン性はかなり重芁です。さらに、䜿甚する色や画像の皮類によっおもサむト党䜓の雰囲気が倧きく倉わっおきたす。


いずれの方法を遞ぶにせよ、HTML テンプレヌトフルカスタマむズが可胜、テヌマ遞ぶテヌマによっおはフルサむト線集が可胜、ホヌムぺヌゞ䜜成ツヌルで甚意されおいるデザむンテンプレヌトカスタマむズが制限される堎合もありずいった圢で、サむトのひな圢を利甚できたす。もちろん、単にひな圢に文章を入れただけでは、他のサむトず䌌たデザむンになっおしたう可胜性も吊めたせん。テンプレヌトを掻甚しお制䜜を効率化する䞀方で、自分のサむトをどこたでカスタマむズしたいのかずいう点でも、䜿甚する方法は絞られたす。自分だけのオリゞナルサむトデザむンにしたい堎合は、Wix の癜玙テンプレヌトがおすすめです。䟿利な線集機胜はそのたた、より自由にデザむンを構築するこずができたす。


おすすめ参考蚘事


以䞊のポむントをよく比范しお、自分に合った方法はどれかを考えおみたしょう。


初心者でも、それなりに Web 関連の経隓がある人であっおも、必芁ずなる時間ずコストを䞀番有効に䜿いたいならホヌムぺヌゞ䜜成ツヌルの䜿甚がおすすめです。たずえば、Wix なら数癟皮類揃った HTML テンプレヌトを線集するだけで、数日あれば本栌的なホヌムぺヌゞを䜜成できたす。テンプレヌトはフルカスタマむズ可胜で、ネットショップやむベントの集客・管理、オンラむン予玄などさたざたなビゞネス機胜を远加可胜。初心者でもドラッグドロップ操䜜なので安心ですし、経隓者はテンプレヌトから制䜜したサむトに独自のコヌドを远加するこずもできたす。


さらに、Wix のシステムにはサヌバヌが付属しおおり、サヌバヌ代金は実質無料です。セキュリティ察策も䞇党のため、メンテナンスにかける劎力を最小限に枛らすこずができたす。


無料ホヌムペヌゞ䜜成ツヌル Wix


5ステップ自分でホヌムペヌゞを䜜る手順


それでは、Wix を䟋に挙げお、実際にホヌムペヌゞを自䜜する堎合の手順を説明したす。初心者でも、5぀のステップで本栌的なサむトを䜜成できたす。


1. テンプレヌトからデザむンを遞択


たずは Wix に無料登録し、奜みのホヌムペヌゞテンプレヌトを遞びたす。あらゆる業皮に察応した 800 皮類以䞊のテンプレヌトが甚意されおおり、䞀芧を芋おいるだけでもデザむンのむンスピレヌションが埗られたす。テンプレヌト内のテキストや画像は自由にカスタマむズが可胜です。


2. パヌツやセクション線集でデザむンをカスタマむズ


Wix の特城は、ブラりザ䞊でさたざたなパヌツテキスト、画像、ボタンなどを远加し、ドラッグドロップしお自由に配眮できるこずです。ホヌムペヌゞの䜜成がたったく初めおでも、盎芳的な操䜜で楜しく䜜業を進められたす。


Wix ゚ディタには思い通りのサむトを䜜成するためのさたざたな機胜が揃っおいるため、ぜひさたざたなカスタマむズを詊しおみおください。Wix ゚ディタを䜿っお䜜成された、おしゃれなホヌムペヌゞデザむンの事䟋も参考にしおみおください。


  • パヌツを远加芋出しやボタン、動画の埋め蟌みなど、さたざたなコンテンツパヌツを远加するこずができたす。

  • セクションを远加セクションずは、1 ぀の Web ペヌゞ䞊でそれぞれのコンテンツを区切るためのブロックのこずです。テンプレヌト䞊で線集したいセクションをクリックするず、機胜的な差し替えデザむンが提案されるため、デザむンを厩さず䟿利にカスタマむズできたす。 サむト䜜成に慣れおいない堎合、䞀番怖いのは「線集䞭にサむトのデザむンが厩れお戻せなくなる」こずでしょう。Wix なら、セクション内のアむコンをクリックするだけで自由にレむアりトや色を倉曎でき、倱敗した堎合は取消できるため安心です。

  • サむトデザむン色やフォントを䞀括で線集できたす。゚ディタ䞊でカラヌスタむルサむト党䜓で䜿甚する色を指定し、サむトにブランドむメヌゞを反映させられたす。

  • Wix App Marketビゞネスに必芁なあらゆるアプリを远加しお、サむトの機胜を拡匵できたす。


3. コンテンツを線集


だいたいのデザむンが決たったら、次に文章や画像などのコンテンツを線集しおいきたす。ホヌムペヌゞ䞊に掲茉する文章はできる限り簡朔にたずめ、ビゞネスの抂芁やメリットを端的に衚すものにするず効果的です。長文やニュヌスを掲茉したい堎合は、別途ブログペヌゞを開蚭し、継続的に曎新しおいくこずをおすすめしたす。


  • 文章を远加簡朔か぀ SEO キヌワヌドを意識した芋出しや文章を远加したしょう。

  • 写真を差し替えWix では、数癟皮類揃った高画質の写真・動画玠材を無料でサむトに䜿甚できたす。たた、Shutterstock や Unsplash ずいったストック画像サむトの写真から遞んで远加するこずも可胜です。

  • ロゎの远加トップペヌゞやヘッダヌおよびフッタヌ郚分には、䌚瀟やビゞネスのロゎを远加したしょう。ただロゎがない堎合は、ロゎゞェネレヌタヌで簡単な質問に答えるだけで、おしゃれなロゎを無料で䜜成できたす。ロゎができたらファビコンの蚭定も忘れずに。

  • モバむル版゚ディタスマホからサむトを閲芧する人が倚いずいう事実を頭に入れお、モバむルサむトのデザむンも怠らないようにしたしょう。2022 幎䞊期に LINE が実斜したむンタヌネットの利甚環境調査では、「日垞的なむンタヌネットの利甚環境はスマホのみ」ずいう回答が最倚ずいう結果が出おいたす。 Wix なら、サむトを䜜成した時点でモバむル版のサむトが自動䜜成されたす。モバむル゚ディタに切り替えお、公開する前にモバむルサむトの衚瀺を確認しおおきたしょう。

  • プレビュヌで衚瀺を確認画面右䞊の「プレビュヌ」をクリックしお、実際のサむトの衚瀺を確認したしょう。


4. 公開前準備


サむトの線集が終わったら、公開に向けおの準備を行いたす。各皮蚭定を行い、゚ディタ右䞊で「公開」をクリックするだけで、簡単にサむトを公開できたす。


  • 各ペヌゞの URL を蚭定それぞれのペヌゞに分かりやすい名称の URL を蚭定したす。

  • サむトのデザむンを保存゚ディタ右䞊の「保存」をクリックしお、線集した内容を保存したす。Wix では䜜業内容が自動で保存されたすが、予期せぬ状況で倉曎内容が倱われないよう、定期的に保存をクリックしおおくこずをおすすめしたす。

  • ドメむンを蚭定Wix では無料の Wix URL を䜿甚できたすが、サむトの SEO 察策やブランディングのために、独自ドメむンの取埗をおすすめしたす。ドメむンは賌入する必芁がありたすが、Wix の幎額プレミアムプランを契玄した堎合は 1 幎間ドメむンが無料になるクヌポンを受け取るこずができたす。

  • SEO 蚭定ダッシュボヌドからサむトの SEO 蚭定を簡単に行うこずができたす。Wix の SEO チェックリストで察策が必芁な点が衚瀺されるため、SEO に詳しくない堎合でも、指瀺に埓うだけで基本蚭定を網矅できたす。


ホヌムヌペヌゞを公開する前に、こちらのチェックリストで最終確認を行いたしょう。たた、倱敗しやすいポむントをおさえ、成長しやすいホヌムペヌゞの基盀を敎えたしょう。


5. 公開・運営


サむト公開埌には、怜玢結果での衚瀺順䜍やアクセス数などの数字を適宜確認し、必芁に応じおリニュヌアルを行いたしょう。ホヌムペヌゞをレベルアップするために、取り組みたい目暙を決めお、段階的に改善しおいくこずが倧切です。


  • Google コン゜ヌルに提出サむトを Google 怜玢に掲茉しお、アクセス数を䌞ばしたしょう。䞊蚘の SEO チェックリストで基本的な蚭定を行った埌、サむトを Google に提出したす。

  • アクセス解析機胜でパフォヌマンスをモニタリングWix アクセス解析のレポヌトを掻甚しお、サむトのアクセス数や売䞊、蚪問者の動向ずいった各皮デヌタを確認したす。

  • SEO 蚭定をアップデヌトダッシュボヌドで SEO チェックリストを定期的に確認し、改善が必芁な点があれば曎新したす。

  • コンテンツのメンテナンスホヌムペヌゞのコンテンツも定期的に確認し、必芁に応じお曎新したしょう。新しいサヌビスの提䟛を開始した、メンバヌの亀代があった、䌚瀟䜏所が移転したなど、サむト䞊で足りおいない情報はないか、たた叀い情報がそのたたの状態になっおいないかどうかを適宜チェックするこずが重芁です。


たずめ


いかがでしたか自分でホヌムぺヌゞを䜜成するのは長い道のりに芋えたすが、手順ず必芁なものさえ理解しおいれば、実は初心者でも数日で本栌的なペヌゞを䜜成できたす。


たずは、Wix で無料のサむト䜜成を詊しおみおください。シンプルな 5 ステップで簡単に矎しいサむトが完成したす。ネットショップやブログなど、豊富に揃ったビゞネスツヌルやアプリを自由に远加できるため、サむトをたず䜜成しおから埐々に機胜を拡匵しおいくこずも可胜です。


デザむナヌが手がけたホヌムペヌゞテンプレヌトから奜みのものを遞んで䜜成するこずで、プロ䞊みの本栌サむトをすばやく䜜成・公開できたす。いたすぐ、Wix の高機胜な゚ディタをお詊しください。



Miyuki Shimose䞋瀬 矎幞

線集者Miyuki Shimose

ブログ コンテンツマネヌゞャヌ


ja03.png
bottom of page