Webサイトを作成してみよう(基本設定・作成編)
ここでは、はじめてHirameki 7のWebサイトを使う方向けにWebサイト作成の手順を紹介します。ぜひ操作を進めてHirameki 7でホームページ(Webサイト)を作成してみましょう。
注意
サイトURLの設定が完了していない方は、Webサイトを作成してみよう(ドメイン編)を先にご確認ください。
また設定したドメイン(サブドメイン)のキャンセル、変更はできません。ご注意ください。
この手順では、次のようなホームページ(Webサイト)を作成していきます。
※ページ内の画像は選択したデザインにより変わります。自社のイメージにあったデザインを選択しましょう。
1.サイト基本情報を設定します
サイト名称、説明文、ロゴ、コピーライトを入力しましょう。
1-1.サイト名称
Webサイトのタイトルになります。
主に企業名やサービス名など、代表となる分かりやすい名称を入力しましょう。
※検索結果のタイトルや、ブラウザのタブに表示される名称です。
1-2.サイト説明(任意)
Webサイトの説明文になります。
Webサイトに掲載する内容の概要や要約のことで、検索サイトの検索結果のページタイトル下部に表示されます。
1-3.ロゴ(任意)
Webサイトの左上に表示される画像になります。
企業名やサービス名などをわかりやすく画像化したロゴ画像を設定しましょう。
※ロゴ画像の高さは40px以内がおすすめです。
1-4.favicon(任意)
faviconはブラウザのタブやブックマーク、スマートフォンやタブレットの場合はホームページのショートカットのアイコンとして表示される画像になります。
企業名やサービス名などがわかりやすい正方形サイズの画像を用意しましょう。
1-3.OGP画像(任意)
OGP画像とはSNSなどでページを共有する際に一緒に表示される画像になります。
ロゴ画像とは別に情報量の多い画像などを表示することができるようになります。
1-6.コピーライト(任意)
Webサイトのページ最下部に表示される、コピーライト(著作権表示)の入力になります。
自社のWebサイトに掲載する画像やコンテンツ(記事)が無断利用されることなどを防ぐ役割も担います。
まずは、入力例を参考に設定しましょう。
1-5.設定が完了したら「保存して次へ」で進みます
サイト基本情報のすべての項目設定が完了すると「保存して次へ」ボタンがクリックできるようになります。
サイト基本情報を設定して、次のデザイン設定へ進みましょう。
2.デザインを選択します
2-1.デザイン候補を絞ります
画面左側のスタイル、業種のチェックリストから、自社のイメージに合うスタイル、自社の業種をクリックして、画面右側に表示されるデザイン候補を絞りましょう。
なお、有料テンプレートについては初期設定後に「デザイン」画面にて選択することができます。有料テンプレートの利用にはプライムプラン、またはページ数変更オプションのお申し込みが必要となります。
Webサイト機能でプライムプラン、ページ数変更オプションを利用されているユーザーに向けて有料テンプレートが追加されました!
有料テンプレートはよりデザインや利便性を重視し、スタイリッシュ、フレンドリー、リッチ/エレガントのそれぞれ異なるレイアウトを3タイプ用意しています。
有料テンプレートへの変更はプライムプラン、ページ数変更オプションをお申し込みいただいた後で「デザイン」画面を表示することで有料テンプレートへの切り替えができます。「有料」のラベルが目印です。
なお、テンプレートの変更を行ってもこれまで作成した画像やテキストは引き継がれます。ただし変更後のテンプレートが独自に持つデザインが反映されない場合があるため、変更後のテンプレートデザインを全て使用したい場合はページの初期化が必要になります。初期化を行った場合、ページ内に設置した画像やテキストは全て削除されテンプレートの初期状態へと戻ることになりますので、ご注意ください。
ページを初期化する手順について詳しくはページのデザインを変更したいをご確認ください。
シンプル
色や装飾を最低限に抑えた一番シンプルなWebサイトのデザインです。
スタイリッシュ
クールで洗練された印象を与えるWebサイトのデザインです。
フレンドリー
柔らかく親しみやすい印象を与えるWebサイトのデザインです。
2-2.デザインを選択します
画面右側のデザイン候補から、自社のイメージに合うデザインの「選択」ボタンをクリックします。
2-3.「保存して完了」ボタンをクリックします
デザインを選択すると「保存して完了」ボタンがクリックできるようになります。
ボタンをクリックした後、設定内容の反映が完了するまで、少々お時間かかります。
次の画面が表示されたら「ページ作成へ進む」をクリックして、ページ編集の操作を進めましょう。
3.ページを編集します
ここからは、Webサイトの編集画面を操作してページの作成を進めます。
3-1.ページの編集画面を表示します
「トップページ」をクリックすると、ページの詳細情報が確認できるドロアーが表示されますので、ドロアー内にある「ページの編集」をクリックします。
ページの編集画面が、基本設定で選択したデザインの状態で表示されます。
3-2.パーツを編集します
ホームページ(Webサイト)を構成している、パーツのタイトルやテキストなどを編集していきましょう。
画面右側(コンテンツエディターと呼びます)に表示されている、メインエリアパーツの上に、マウスを置きます。
パーツの右上に表示される、鉛筆アイコン(編集ボタン)をクリックします。
パーツの編集画面が表示されます。
※この操作が、パーツの内容を編集する際の基本操作になります。
今回はメインエリアパーツの編集で操作を進めましょう。
編集画面のタイトルに、Webサイトのタイトル、またはページのタイトルを入力します。
次に、テキストにWebサイトの説明文、またはページの説明文などを入力します。
次に編集画面の下にある、ボタンの文字まで移動します。
このページの操作手順で作成するWebサイトには、お問い合わせボタンを表示させないため、ボタンの文字に入力されているテキストを削除します。
編集画面の「OK」ボタンをクリックすると、パーツの編集は完了です。
3-3.パーツを削除してみます
この手順では、あらかじめデザインに設定されているパーツを削除していきます。
※もしテンプレートどおりのパーツでホームページ(Webサイト)を公開したい場合には、この手順は飛ばして、各パーツのタイトルやテキストなどの情報を自社の情報へ差し替えてください。
削除するパーツを選択して、前の項目の手順と同じように、パーツの上にマウスを置くと右上に表示されるアイコンを表示します。
今回はゴミ箱アイコン(削除ボタンと呼びます)をクリックします。
確認画面が表示されるので「削除」ボタンをクリックします。
選択したパーツが画面の右側(コンテンツエディターと呼びます)から、削除されます。
他にも削除するパーツがある場合は、同じ操作を繰り返します。
※サンプルのようなホームページ(Webサイト)にする場合は、メインエリア、私たちについて、のみを残します。
3-4.パーツを追加してみます
ページの内容を構成するパーツを追加していきましょう。
画面左側(パーツエリアと呼びます)から、企業概要をクリック。
クリックしたまま、画面右側のエリア(コンテンツエディターと呼びます)まで引っ張って、離します。
※今回はページの一番下に追加します。
コピーライトの上に企業概要パーツが追加されます。
※企業概要パーツは初期設定ツアーで登録した企業情報が、自動的に表示されます。パーツ編集画面を開いて、編集することも可能です。
4.ページプロパティを設定します
この手順では、ページの情報となるページプロパティを編集していきましょう。
4-1.画面右側のページプロパティをクリックします
4-2.タイトル、説明を入力します
タイトルはあらかじめ入力されているので、説明にページの説明を入力します。
ページプロパティでは、タグの追加など編集しているページの設定ができますが、今回の操作はこれで完了です。
5.公開前に確認します
これで、ホームページ(Webサイト)が公開できる手前まで完了しました。
実際に公開する前に、入力したタイトルやテキスト、ページ表示に問題がないかを確認しましょう。
5-1.画面右上の「プレビュー」ボタンをクリックします
実際に公開される表示と同じ状態で、ホームページ(Webサイト)が表示されます。
5-2.PC表示、SP(スマホ)表示、それぞれの表示を確認します
上のPC、SPのボタンを切り替えると、PC表示、SP(スマホ)表示と切り替えて確認できます。
表示の確認が完了したら、ページのタブを削除して、ページ編集画面に戻りましょう。
6.ホームページ(Webサイト)を公開します
最後に、作成したホームページ(Webサイト)を公開しましょう。
6-1.画面右上の公開設定をクリックします
6-2.即時公開を選択します
今回はすぐに公開するため、即時公開で公開作業を進めます。
6-3.「今すぐ公開」ボタンをクリックします
これで、作成したホームページ(Webサイト)が公開されました。