Webサイトを作成してみよう(基本設定・作成編)

Hirameki 7では、プログラミングなどHTMLの知識不要でオリジナルの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.コピーライト(任意)

画面キャプチャ

Webサイトのページ最下部に表示される、コピーライト(著作権表示)の入力になります。
自社のWebサイトに掲載する画像やコンテンツ(記事)が無断利用されることなどを防ぐ役割も担います。

まずは、入力例を参考に設定しましょう。

1-5.設定が完了したら「保存して次へ」で進みます

サイト基本情報のすべての項目設定が完了すると「保存して次へ」ボタンがクリックできるようになります。
サイト基本情報を設定して、次のデザイン設定へ進みましょう。

画面キャプチャ

2.デザインを選択します

2-1.デザイン候補を絞ります

画面左側のスタイル、業種から、自社のイメージに合うスタイル、自社の業種をクリックして、画面右側に表示されるデザイン候補を絞りましょう。

画面キャプチャ

シンプル
色や装飾を最低限に抑えた一番シンプルな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サイト)が公開されました。
さらに詳しい操作方法を知りたい方は、Webサイトのご利用ガイドをご確認ください。

画面キャプチャ

この記事は役に立ちましたか?

  • はい
  • いいえ