WixのHTMLテンプレートを3ステップでカスタマイズする方法
![Wix テンプレートを劇的に変える簡単 3 ステップ](https://static.wixstatic.com/media/a3d4e4_c5e42b24e1584deaaae8ca37ad0d5be9~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a3d4e4_c5e42b24e1584deaaae8ca37ad0d5be9~mv2.png)
更新日 2024年6月18日(公開日 2013年6月18日)
ウェブサイトの見た目を一新したい、でもテンプレートのカスタマイズ、どこからはじめたらいいかわからない...そんな悩みを抱えていませんか?
そこで、本記事では、Wix の無料テンプレートを自分らしくアレンジするための 3 つの簡単なステップをご紹介します。これらのテクニックを使えば、プログラミングの専門知識がなくても、魅力的でユニークなホームページを作成できるようになります。さあ、豊富なテンプレートから、オリジナリティあふれるホームページ作成にさっそく取り掛かりましょう。
目次
\900種類以上のテンプレートが無料/
Wix のホームページテンプレートとは
Wix の HTML テンプレートは、ウェブデザイン未経験のかたでも、直感的に編集することができる、無料のホームページテンプレートです。画像生成などの便利な機能も豊富なので、適切なアプローチさえ知っていれば、効率的に自分好みのデザインを実現できます。
さっそく、Wix の無料テンプレートを用いて、オリジナルウェブサイトを作成するための 3 ステップを紹介しましょう。まず、ステップ1に入る前に、テンプレートページから自分にあったテンプレートを選びましょう。カテゴリー別に多彩なレイアウトとデザインが選べます。
おすすめのテンプレートカテゴリー
1. 個人サイト
4. 白紙テンプレート
6. 近日公開テンプレート
ほかにも、人気テンプレートもぜひチェックしてみてください。
STEP 1. 背景と色を変更する
自分の理想に近いテンプレートが見つかったら、まずは背景と色を変更しましょう。コレだっ!というスタイルが見つかるまで、様々な背景や色を試すことができます。左側のツールバーから「サイトデザイン」アイコンをクリックし、「サイトテーマ」を選択。豊富な背景オプションやテーマから、好きなものを選びましょう。サイトテーマを変更すると、フォントやカラーパレットが、一括で全てのページに適応されるため、デザインの統一感を失わず、一瞬でオリジナルホームページへとカスタマイズすることができます。
写真をアップロードして背景として使う場合には、画像サイズに注意しましょう。モバイルからの表示を必ずチェックし、理想の写真の見え方であるか確認する必要があります。
![Wixの無料ホームページテンプレートで、サイトテーマを変更する。背景を自由に変更できます](https://static.wixstatic.com/media/a3d4e4_9a7d249404694e4da93faf39d875031c~mv2.png/v1/fill/w_49,h_27,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a3d4e4_9a7d249404694e4da93faf39d875031c~mv2.png)
また、「カラーテーマを編集」からアクセントカラーを別々に編集することができ、サイトの雰囲気をクリック一つで一新することもできます。
アクセントカラーを変更すると、背景、ナビゲーションメニュー、フォントの色に影響がでます。
![Wixエディタでは配色を一瞬で変更できるアクセントカラーの変更が便利](https://static.wixstatic.com/media/a3d4e4_c2ae1fd1e8b54d8ba37c7ed0cda4859a~mv2.png/v1/fill/w_49,h_27,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a3d4e4_c2ae1fd1e8b54d8ba37c7ed0cda4859a~mv2.png)
STEP 2. メニューやヘッダーのスタイルを変更する
前ページに表示されるナビゲーションメニューのスタイルを変更することで、サイトにオリジナル感ができます。Wix サイトのナビゲーションメニューは全て、カスタマイズすることができるので、お好みのメニューデザインを作成しましょう。
メニュー部分をクリックし、右に表示される「…」から、「ヘッダーデザインを変更」を選んで、ヘッダースタイルを変更しましょう。ここで、パーツの背景や枠線の色などの詳細をカスタマイズできます。
![Wixホームページビルダーでナビゲーションメニューやページスタイルをカスタマイズ](https://static.wixstatic.com/media/a3d4e4_f7ecf5de2be34d40b3ba2d5e05422ae3~mv2.png/v1/fill/w_49,h_27,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a3d4e4_f7ecf5de2be34d40b3ba2d5e05422ae3~mv2.png)
STEP 3. ページに画像やパーツを追加する
「パーツを追加」アイコンをクリックして、お好みのテキストや画像、ボタンなどを自由に追加することができます。
例えば、「ギャラリー」を選択すると、オリジナルの画像ギャラリーが追加できます。スライドショーやグリッドギャラリーなどのレイアウトを選んで「画像の整理」から、早速オリジナルの画像を追加しましょう。
![WixのHTMLサイトビルダーでホームページのスタイルを自由に変更](https://static.wixstatic.com/media/a3d4e4_dd299f42beff46bfa57fd77c33ebc62c~mv2.png/v1/fill/w_49,h_27,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a3d4e4_dd299f42beff46bfa57fd77c33ebc62c~mv2.png)
ほかにも、便利な「セクションを追加」アイコンを選択すると、セクションごとに機能の追加できるため、さらにお手軽にカスタムホームページにすることができます。
![Wixテンプレートは、セクションを追加し簡単編集が可能](https://static.wixstatic.com/media/a3d4e4_fd11d9e9deb847f8a036ca9d33fc5641~mv2.png/v1/fill/w_49,h_27,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a3d4e4_fd11d9e9deb847f8a036ca9d33fc5641~mv2.png)
「サイトページとメニュー」アイコンからは、ページの追加や削除、複製など、サイトのページ管理に関することはここで全て設定できます。また各ページの SEO 設定もここで管理します。
![Wixテンプレートは、SEO設定ももれなく可能](https://static.wixstatic.com/media/a3d4e4_bdef509150324b2597c7e00da1bf96e3~mv2.png/v1/fill/w_49,h_27,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a3d4e4_bdef509150324b2597c7e00da1bf96e3~mv2.png)
あとはオリジナルのテキストやコンテンツを追加して、自分だけのサイトを完成させましょう。テキストや画像が伝えるあなただけのコンテンツが、真のオリジナルサイトを作る肝となります。さっそく、ホームページ作成をはじめましょう。
![](https://static.wixstatic.com/media/bb1bd6_af66f1a58c724a19aba56901b6ea5a40~mv2.png/v1/fill/w_60,h_60,al_c,q_85,blur_3,enc_auto/bb1bd6_af66f1a58c724a19aba56901b6ea5a40~mv2.png)
ライター: Wix Team