「Wixでホームページを始めたけど操作が分からない」「ヘッダーの作り方を教えてほしい」と悩んでいる方も多いですよね。
本記事では、ヘッダーの作り方を例に、Wixでのホームページ制作について詳しく紹介していきます。
弊社は、Wixのレジェンドパートナーであり、年間600件以上の制作に携わり、日本トップクラスの成績を誇っています。
これからWixのホームページを作る方、力を入れたい方は是非参考にしてください。
Wixとは
ここでは、Wixとは何かを解説します。
Wixは、全世界で約1億人が利用しているホームページ制作サービスです。
イスラエルで2006年に設立され、現在は日本にも法人を持つほど世界的にも大きな企業となっています。
ただのホームページ制作サービスではなく、専門的なプログラミングの知識が要らない「ノーコード」の制作サービスです。
そのため「プログラミング言語は分からないし、ホームページを作れるか不安」のような悩みを解決できますよ。
無料でも有料でも利用でき、個人から企業まで幅広く使われています。
アカウントの開設手順から知りたい方は、こちらの「Wixホームページの開設手順・作り方を紹介【完全初心者向けに徹底解説】」をご覧ください。
それでは、ヘッダーの作り方を見ていきましょう。
Wixのヘッダーの設定方法を解説
それでは、ヘッダーの設定方法を解説します。
ヘッダーとは、ホームページなどの上部に位置する部分で、サイト名やロゴの設置なども可能です。
その他、メニューなどを設置し、クリックすることでページの移動を可能にします。
それでは見ていきましょう。
手順①：ダッシュボードからヘッダーの設定画面に移る
まずは、ダッシュボードから、ヘッダーの設定画面に移りましょう。
「サイト概要」から、該当する項目を選択します。（今回はウェブサイトを選択しています。）
「サイトを編集」をクリックすると、編集画面に移行します。
上記のような画面になればOKです。
オレンジの枠がヘッダーですので、今回はこの部分の設定・編集方法を解説します。
手順②：ヘッダー全体の編集をする
まずは、ヘッダー全体の編集を行いましょう。
右端に表示されている赤枠部分をクリックすると、ヘッダーのデザインなどを変更できます。
色やエフェクトを変更して、ホームページの雰囲気に合ったデザインに調節しましょう。
手順③：サイトの名前を編集する
続いて、サイトの名前を編集しましょう。
上記の赤枠で囲んだ部分が、サイトの名前になります。
今回は「Sample」という名前で設定しています。
「テキスト」の部分をダブルクリックすると、さまざまな編集が可能になります。
一つひとつ設定の内容を解説します。
スタイル
スタイルでは、H2やH3など、文字のスタイルを変更できます。
SEOにも関係するので、スタイルの調節は行いましょう。
フォント
フォントでは、文字の形を設定し、変更することが可能です。
例えば、「メイリオ」や「MS明朝」などですね。
その他、100種類以上のフォントから、好みやホームページの雰囲気に合わせて変更できます。
しかし、フォントの設定において、一点注意するべきことがあります。
多くの種類があり、様々なフォントを使いたくなると思いますが、2、３種類に抑えるのがおすすめですよ。
理由としては、フォントにバラつきがないほうが、統一感が出るからです。
気に入ったフォントを3つ程度決めて、使うようにしましょう。
文字サイズ
文字サイズでは、スライドバーを用いて文字の大きさを変更できます。
数字の単位は「px（ピクセル）」表記です。
文字の大きさは、小さすぎず、大きすぎないサイズにしましょう。
小さすぎると、ホームページに来た方が見にくいですし、大きすぎると、バランスが悪くなってしまいます。
16pxあたりが標準サイズですので、目安にしてバランスのいい文字サイズを選択しましょう。
文字の詳細設定
上記画像の赤枠部分で、文字の詳細設定が可能です。
「B」は、文字を太字にできます。
文字に強弱をつけたいときにおすすめです。
「I」は斜体ですので、選択した文字が斜めになります。
英字や数字などに利用すると、印象がついたりおしゃれに見えますよ。
「U」は指定した文字に、下線をつけることが可能です。
「A」に雫のようなマークがあるものは、文字色を変換できます。
サイトの雰囲気や、大事なワードを強調することが可能です。
その隣の、黒い背景に白い字で「A」と書いてあるものは、背景色の変更になります。
「🔗」はリンク先を設定して、他のページの移動することが可能です。
文の配置を設定
上記の赤枠部分は、主に文の配置や、段落・箇条書などの設定です。
先程の「文字の詳細設定」では、細かく指定できますが、ここでは文を右側に寄せたり中央揃えにするなど、まとめて変更できます。
「文をまとめて左側に寄せたい」「箇条書で分かりやすくしたい」という場合は、是非活用してみてください。
エフェクト
エフェクトでは、特定の文字にメリハリをつけることが可能です。
例えば、文字に影をつけたり、枠をつけたりできます。
タイトルや見出しなどにエフェクトをかけることで、より目立たせることができ、ユーザーにインパクトを残すことができますよ。
文字と行の間隔
ここでは、その名の通り文字間隔や行間隔の編集を行います。
1文字1文字の間隔をあけてバランスを良くしたり、行の感覚をあけて見やすくすることもできます。
両方ともスライドバーを使って間隔を決めるので、細かい調節も可能です。
縦書きテキスト
縦書きテキストではクリック一つで、横書きの文章を縦書きに変更できます。
例えば、サイトの名前を縦にしたいときなどに活用できますよ。
SEO・アクセシビリティ
SEO・アクセシビリティでは、SEOに有効的な見出しを設定できます。
この項目を参考にして、SEO対策を行うのも良いですよ。
手順④：横型メニューの編集を行う
続いて、横型メニューの編集を行いましょう。
上記画像の赤枠部分が、横型メニューになります。
メニューには、「お問い合わせ」「サポート「ショップ」などを設置し、クリックすると指定のページに移動することが可能です。
メニュー部分をクリックすると、赤枠の編集ボタンが表示されます。
ボタンにそれぞれ役割があるので解説します。
メニューを管理
メニューを管理では、横型メニューに表示されるものを編集できます。
例えば、名前の変更をしたりメニューのアイテムを増やすことが可能です。
新たにメニューに項目を追加したい場合は、メニュー管理から行いましょう。
ページを追加
ページを追加では、新しく追加したいページを入力できます。
例えば、お問い合わせのページを入れたい場合は、「ページの追加」から追加可能ですよ。
ページの管理に移動し、サイトメニューの編集も行えます。
設定
設定をクリックすると、「高度な設定」に変更するかどうかの選択が表示されます。
高度な設定にすることで、サブメニューの追加やメニューリンクの追加が可能になります。
横型メニューに対し、さらに細かい設定を施したい方は、「高度な設定」を選択しましょう。
レイアウト
レイアウトでは、テキストの配置やアイテムの表示順などの変更を行います。
アイテムの表示順は、アラビア語やヘブライ語を利用する際に、文字列を逆にする必要がある際に利用します。
そのため、日本語でホームページを制作する際は、気にする必要はないでしょう。
デザインを変更
デザインを変更では、より詳細にデザインの設定が可能です。
まずは、基本的なデザインを決めた後、以下のような設定を行えます。
不透明度・色
角
影
テキスト
間隔
メニューアイテムとメニューアイテムの間に線を入れたり、テキストの色を変更することも可能です。
通常、コードを入力する操作も、Wixではワンクリックで変更できるので、初心者でも簡単に編集できますよ。
アニメーション
アニメーションでは、横型メニューの表示方法を設定できます。
例を挙げると、以下のようなアニメーションがあります。
バウンス：横長メニューが弾みながら表示
ズーム：横長メニューが徐々に拡大しながら表示
スピン：横長メニューがまわりながら表示
アニメーションをつけることで、楽しくポップな印象を与えられますよ。
ストレッチ
ストレッチの設定をオンにすることで、パーツの余白を広げることが可能です。
ストレッチをオンにするメリットは、画面いっぱいに表示されるため、訪れたユーザーが見やすいことです。
中には、画面の小さい機種で見る方もいるかもしれません。
しかし、ストレッチをオンにしておけば、画面が小さくても余白なく表示できますよ。
Wixのヘッダー作成でよくある疑問
ここでは、ヘッダーを作成する際によくある疑問を解決していきます。
今回お答えする疑問は以下のとおりです。
ヘッダーを削除する方法は？
ヘッダーを固定したい
ヘッダーはホームページの中でも重要？
一つひとつ解説します。
ヘッダーを削除する方法は？
ヘッダー全体を削除することは不可能です。
Wixの仕様で削除できないようになっています。
しかし、削除はできませんが、非表示にすることは可能です。
ヘッダー部分を一度左クリックで選択し、その後右クリックを押すと「ヘッダーとフッターを非表示にする」と表示されます。
「ヘッダーとフッターを非表示にする」をクリックすれば完了です。
ただし、ヘッダーを非表示にすると、同時にフッターも非表示になるので注意しましょう。
ヘッダーを固定したい
ここではヘッダーを固定する方法を紹介します。
ヘッダーを固定すると、下にスクロールしてもヘッダーが画面に残り続けるようになります。
ヘッダー右側に表示される歯車のマーク（ヘッダースクロール設定）を選択します。
ヘッダースクロール設定から「固定」を選択すれば完了です。
ヘッダーはホームページの中でも重要？
ヘッダーはホームページを作るうえで非常に重要です。
なぜなら、あなたのホームページに訪れたユーザーに、第一印象を与えるからですね。
ビジネスやホームページの特徴に合わせた情報を掲載し、ユーザビリティを高めましょう。
また、スクロールが長くなってしまう場合は、先程紹介したヘッダーの固定がおすすめです。
縦に長くなるほど、ヘッダーに戻るのが大変になってしまいます。
ヘッダーはホームページの中でも非常に重要なので、しっかりと作り込みましょう。
ヘッダーづくりが大変な場合は、制作代行会社に委託するのもおすすめです。
Wixなら簡単にホームページ制作が作れる
ここまで見れば、Wixでのヘッダー作りも、ある程度理解できたと思います。
通常、プログラミング言語が必要ですが、Wixならクリックやドラッグで簡単に操作ができます。
しかし、中には「もっとデザインにこだわりたい」「初心者だから難しく感じる」と思う方もいますよね。
弊社では、ホームページ制作代行を行っています。
Wixのレジェンドパートナーであり、年間600件以上の制作を手掛けております。
Wixでのホームページ制作は、是非弊社にお任せください。
ホームページ制作でお悩みの方は株式会社プロパゲートにご連絡を
「ホームページを作りたいけど何をすればよいか分からない、どこが良いかよく分からない。」
その場合は、株式会社プロパゲートへお声がけください。全国どこでも対応可能です！
制作費無料・月々9800円の定額ホームページ。LINEで専属サポート！全国対応！
月５回まで無料で修正可能、追加料金無し。最短２週間で納品可能。年間制作実績1,000社超。
株式会社プロパゲートはWeb制作＆運用代行する会社です。
ホームページの制作費用は基本無料。月額9,800円〜で運用も代行します。
ホームページ制作においては取材・撮影・デザイン・文章作りなど、必要な全てをお任せ頂け、全て無料です。
更新も、メール・電話・LINEを頂ければ即対応。制作後のマーケティング運用まで行います。
【URL】
【TEL】
090-3552-3949
【会社所在地】
〒150-0045 東京都渋谷区神泉町20−21 クロスシー渋谷神泉ビル 7F
【制作実績】
