ここでは、はじめてHirameki 7のWebサイトを使う方向けにWebサイト作成の手順を紹介します。ぜひ操作を進めてHirameki 7でホームページ(Webサイト)を作成してみましょう。
この手順では、次のようなホームページ(Webサイト)を作成していきます。
※ページ内の画像は選択したデザインにより変わります。自社のイメージにあったデザインを選択しましょう。
1.基本設定画面へ移動します
Hirameki 7のトップページ(ポータル)から、Webサイトをクリックします。
「基本設定を完了してWebサイトを作成しましょう。」と表示された画面の「Webサイト基本設定画面へ」ボタンをクリックして進みましょう。
2.デザインを生成・テンプレートから選択します
デザインの選択とページ作成の方法は3つ用意されています。
2-1.AIでデザインを生成したい
AIでの生成には、サイトの目的やイメージ・業種などをプロンプトに入力して自由に編集可能な「プロンプトを入力」、業種、トーン、カラー、テキストの書体などからテーマを選択して作成する「テーマをカスタマイズ」、URL・画像ファイル・PDFファイルを基にAIを使ったページの生成を行う「URL・ファイル」の3種類の方法があります。
2-2.自由にデザインしたい
「自由にデザインしたい」を選ぶと、テンプレート選択画面になります。
用途と業種を選択し、プレビューでPC版とスマホ版の見え方を確認し、デザインを選択します。
「自由にデザインしたい」を選択した場合は、AIで生成したデザインと同じエディターでページを編集できるようになります。
こちらのエディターでは、ページ作成時にもAIを使って文章の作成だけでなく、デザインの生成も行えます。
2-3.かんたんに更新したい
「かんたんに更新したい」を選ぶと、かんたんな設定で編集できる「かんたんエディター」でのページ編集が行えます。
画面左側のスタイル、業種のチェックリストから、自社のイメージに合うスタイル、自社の業種をクリックして、画面に表示されるデザイン候補を絞ることができます。
シンプル
色や装飾を最低限に抑えた一番シンプルなWebサイトのデザインです。
スタイリッシュ
クールで洗練された印象を与えるWebサイトのデザインです。
フレンドリー
柔らかく親しみやすい印象を与えるWebサイトのデザインです。
「自由にデザインしたい」「かんたんに更新したい」を選んだ場合は、デザイン候補から自社のイメージに合うデザインの「選択」ボタンをクリックします。
ボタンをクリックした後、設定内容の反映が完了するまで、少々お時間かかります。
次の画面が表示されたら「次へ」をクリックして、ページ編集の操作を進めましょう。
3.ページを編集します
ここからは、Webサイトの編集画面を操作してページの作成を進めます。
3-1.ページの編集画面を表示します
ページ一覧から操作する場合、該当ページをクリックすると、ページの詳細情報が確認できるドロアーが表示されますので、ドロアー内にある「ページの編集」をクリックします。
ページの編集画面が、基本設定で選択したデザインの状態で表示されます。
3-2.パーツを編集します
ホームページ(Webサイト)を構成している、パーツのタイトルやテキストなどを編集していきましょう。
画面右側(コンテンツエディターと呼びます)に表示されている、メインエリアパーツをマウスで選択し、クリックします。
ここでは選択したパーツの下部と、画面右側のメニューにパーツの編集画面が表示されます。
※この操作が、パーツの内容を編集する際の基本操作になります。
画面右側のメニューでは、デザインと詳細設定の2つのタブから編集が出来ます。
デザインのタブでは、例えはテキスト編集では以下の編集が可能です。
-
パーツ
サイズ(幅・高さ)
絶対位置(親要素を基準にして要素の位置を指定する設定)
マージン(要素の外側の余白)
パディング(要素の内側の余白)
-
テキスト
テキストスタイル(見出しの大きさ)
フォント
サイズ(px)
太さ
行間(px)
文字間隔(px)
文字列の配置
テキストカラー
テキスト背景
影
表示(PC/SPのデバイスごとにパーツを表示させるか選択)
3-3.パーツを削除してみます
この手順では、あらかじめデザインに設定されているパーツを削除していきます。
※もしテンプレートどおりのパーツでホームページ(Webサイト)を公開したい場合には、この手順は飛ばして、各パーツのタイトルやテキストなどの情報を自社の情報へ差し替えてください。
削除するパーツを選択して、前の項目の手順と同じように、パーツの上にマウスを置くと右上に表示されるアイコンを表示します。
今回はゴミ箱アイコン(削除ボタンと呼びます)をクリックします。
選択したパーツが画面の右側(コンテンツエディターと呼びます)から、削除されます。
他にも削除するパーツがある場合は、同じ操作を繰り返します。
3-4.パーツを追加してみます
ページの内容を構成するパーツを追加していきましょう。
画面左側(パーツエリアと呼びます)のプリセットから、ここではセクション>特長・強みをクリック。
クリックしたまま、画面右側のエリア(コンテンツエディターと呼びます)まで引っ張って、離します。
※今回はエリアの間に追加します。
選択したパーツが追加されます。
※プリセットのパーツ情報は編集することも可能です。
4.ページの基本設定を設定します
この手順では、ページの情報となる基本設定を編集していきましょう。
4-1.画面右側の「ページ」をクリックします
4-2.タイトル、説明を入力します
クリックすると、画面右側のメニューが展開します。
タイトルはあらかじめ入力されているので、説明にページの説明を入力します。
ページプロパティでは、タグの追加など編集しているページの設定ができますが、今回の操作はこれで完了です。
5.公開前に確認します
これで、ホームページ(Webサイト)が公開できる手前まで完了しました。
実際に公開する前に、入力したタイトルやテキスト、ページ表示に問題がないかを確認しましょう。
5-1.画面右上の「プレビュー」ボタンをクリックします
実際に公開される表示と同じ状態で、ホームページ(Webサイト)が表示されます。
5-2.PC表示、SP(スマホ)表示、それぞれの表示を確認します
上のPC、SPのボタンを切り替えると、PC表示、SP(スマホ)表示と切り替えて確認できます。