ホームページにコンテンツを追加する
Houzz Pro の Web サイト サービスを使用して自社ホームページを構築する際、自由にカスタマイズすることができます。たとえば、文字のサイズを変更したり、新しいセクションを追加したり、新しいウェブページを追加したりと、様々な変更を加えられます。
この記事では、Web サイトサービスでビジネス用ホームページを構築する上で重要な、編集ツールへのアクセス方法と、基本的なカスタマイズ(編集・追加)方法をご紹介します。

Web サイト サービス編集ツールにアクセスする
Web サイト サービスの編集ツールを起動するには、Houzz Pro の左端にあるナビゲーションで[会社]をクリックし、左メニューから[Web サイトサービス]をクリックします。
初めて Web サイトサービスを使用する場合は、ホームページのテンプレートを選択するページが表示されます。テンプレートをプレビューし、使用したいテンプレートが決まったら、そのテンプレートの右上に表示されている[このテンプレートを選択]ボタンをクリックします。

すでに Web サイトサービスを使用している場合は、[サイトを編集]ボタンをクリックします。
Web サイトサービスの編集ツールへ移動し、ホームページのプレビューが開きます。左側には編集ツールのパネルが表示されます。この画面から、セクションやコンテンツブロックを追加していきます。
セクションを追加・編集する
セクションとは、ページの構成を整理するための横長のコンテンツ ブロックです。各セクションには、テキスト、画像、グリッドや列などのレイアウト ブロックを配置できます。セクションを使うことで、ページを見やすく、かつ編集しやすいパーツごとに分けることができます。

セクションの追加
新しいセクションを追加するには、編集ツールのメイン パネルで、セクションを追加したい部分をクリックします。すると、セクションを追加するための黒丸の「+」マークが表示されるので、クリックします。

すると、「セクション」画面が表示されるので、左側のメニューから追加したいセクションの種類をクリックし、デザインを選択します。

セクションの編集
既存のセクションを編集するには、編集したいセクションをクリックし、右上に表示された[セクションの編集]ボタンをクリックします。

すると、「セクション」の設定画面が表示されるので、レイアウト(サイズや余白)を調整できます。また、アンカーや背景(画像や色)の設定もできます。
コンテンツブロックを追加・編集する
コンテンツブロックとは、セクション内に追加できるモジュールで、ホームページの機能性や視覚的な魅力を高めるために使用されます。コンテンツブロックの種類には、画像、ボタン、動画、問い合わせフォーム、スライドショー、ソーシャルリンクなどがあります。後述の「コンテンツブロックの種類」セクションもご覧ください。

ブロックの追加
新しいブロックを追加するには、編集ツールのメイン パネルで、ブロックがまだ追加されていないセクションをクリックするか、ブロックを追加したい部分の近くにある既存のブロックをクリックします。すると、ブロックを追加するための白丸の「+」マークが表示されます。

白丸の「+」マークをクリックすると、追加するブロックの種類を選択する画面が表示されます。

ブロックの編集
既存のブロックを編集するには、編集したいブロックをクリックし、右上に表示された鉛筆のアイコンをクリックします。
すると、そのブロックが編集モードになり、ブロックの種類に応じて入力された文字列を変更したり、設定を変更したりできます。
コンテンツブロックの種類
新しいコンテンツブロックを追加する場合でも、既存のコンテンツブロッを編集する場合でも、ブロックの種類によって設定する内容は異なります。以下に、いくつかのブロックについて説明します。

「画像」ブロック
「画像」ブロックを使用すると、ホームページに画像を追加することができます。画像を追加するには、「画像」ブロックを追加し、画像を選択します。
追加する画像には、以下のオプションがあります。
- プロジェクトの写真:自社の Houzz プロフィールにアップロードしてある写真から選択します。
- 画像をアップロード:パソコンから直接アップロードします。画像は PNG または JPEG 形式で、高さまたは幅が 2,500 ピクセル未満である必要があります。条件を満たさない画像は、保存時にエラーが発生する可能性があります。
- 別のウェブサイトから画像をリンク:画像の URL を入力してリンクします。 注意:リンク先の画像が削除されると、画像が表示されなくなります。この方法は、リンク先の画像を自分でコントロール可能な場合のみご使用ください。
- ストック写真:検索ボックスにキーワードを入力してストック写真を検索し、気に入ったものがあれば選択して使用できます。
画像の説明(alt text、代替テキスト)を入力して、アクセシビリティを向上させましょう。「キャプションとして表示」をオンにすると、画像の下に説明が表示されます。また、「プロフィール画像を使用する」をオンにすると、プロフィール写真を使用することもできます。

「ボタン」ブロック
「ボタン」ブロックを使用すると、さまざまな移動先へリンクできる、クリック可能なボタンを追加することができます。ボタンを追加するには、「ボタン」ブロックを追加します。
「ボタン」の設定画面が表示されるので、ボタン上に表示される文字列を入力し、ボタンの種類(「メイン」または「サブ」)を選択します。ボタンの種類は、「スタイル」タブで設定できる、ボタンのデザイン(配色など)が異なります。
その後、リンク先の設定を行います。以下のオプションがあります。
- サイト内のページ:自社のホームページ内のページを選択できます。
- プロジェクトページ:写真をアップロードしたプロジェクトページから選びます。
- ブログ記事:投稿済みのブログ記事を選択できます。
- アンカー:アンカーを設定したセクションへのリンクを作成します。
- Web アドレス:外部ウェブサイトの URL を入力します。ボタンをクリックした人が自社サイトに留まるよう、「新しいタブで開く」オプションを選択することをお勧めします。
- メールアドレス:クリックした人のデバイスで、宛先にそのメールアドレスが入った状態でメールアプリが起動します。
- 電話番号:スマートフォンでクリックすると、電話アプリが起動します。
- Houzz の機能:
- 打ち合わせの設定:Houzz Pro の打ち合わせ予約用リンクへのリンク。設定は Houzz Pro アカウントで編集できます。
- レビューを書く:自社 Houzz プロフィールで顧客がレビューを投稿できます。
- ファイル:訪問者がダウンロードできるよう、5MB までの DOCX または PDF 形式のファイルをアップロードできます。

「動画」ブロック
「動画」ブロックを使用すると、ホームページに動画を埋め込むことができます。動画を追加するには、「動画」ブロックを追加し、動画を選択します。
「動画」の設定画面が表示されたら、YouTube または Vimeo の動画リンクをボックスに入力します。または、自社の Houzz プロフィール上にアップロードされている動画を選択することもできます。
注意:Houzz プロフィールにアップロードした動画は、Houzz の担当チームにより内容の承認される必要があります。未承認の動画はプロフィールやホームページに掲載されません。

「連絡先」ブロック
「連絡先」ブロックは、会社の連絡先情報を表示するのに使用します。連絡先情報を追加するには、「連絡先」ブロックを追加します。
自社の Houzz プロフィールの情報があらかじめ入力された状態になっています。「プロフィールの連絡先情報を使用する」ラジオボタンをオフにすると、表示内容を編集することができます。内容を変更するには、直接その欄をクリックして書き換えます。
また、アイコンとラベルを表示するか、ラベルのみを表示するかも選択できます。

「スライドショー」ブロック
「スライドショー」ブロックを使用すると、Houzz プロフィールにある写真をスライドショー形式で表示することができます。スライドショーを追加するには、「スライドショー」ブロックを追加します。
メモ:「スライドショー」ブロックで表示できるのは、自社の Houzz プロフィールにアップロードしているプロジェクト写真のみです。

「スライドショー」の設定画面では、スライドショーに表示する内容を以下の方法から選ぶことができます。
- 自動更新:最新のプロジェクトのカバー写真を使用します。このオプションでは、表示する写真の枚数を指定できます。また、「全プロジェクトのカバー写真を表示する」を選択すると、すべてのカバー写真が表示されます。
- 写真を手動で選択:「プロジェクトのカバー写真を元にスライドショーを自動更新する」のラジオボタンをオフにすると、自社の Houzz プロフィールから写真を手動で選択できます。

写真を手動で選択するオプションを選択した場合は、表示したい写真をクリックして選択します。画面の下方にある「スライドショーする画像の順番」で写真をドラッグ&ドロップすることで、写真の表示順を入れ替えることができます。

続いて、左のメニューから「レイアウト」を選択し、スライドショーのサイズ(高さ)を指定します。
「画像のトリミング」では、それぞれの写真のサイズ調整方法を設定できます。「高さと横幅を合わせる」を選択すると、写真のサイズを統一できるのでお勧めです。
「1スライドあたりの写真数」では、1つのスライドに表示する写真の枚数を調整できます。
「アニメーション効果の設定」では、スライドの表示方法や切り替えの速度をカスタマイズできます。
さらに、「自動再生」のオン・オフを切り替えることができます。

「ソーシャルリンク」ブロック
「ソーシャルリンク」ブロックを使用すると、ソーシャルメディアのリンクを表示することができます。ソーシャルメディアのリンクを追加するには、「ソーシャルリンク」ブロックを追加します。

Houzz プロフィールに登録されているリンクを使用することもできますし、「プロフィールの情報を使用する」ラジオボタンをオフにすれば、Instagram など手動で URL を入力することも可能です。

より高度なレイアウト用のブロック
「カード」、「列」、「グリッド」、「画像と文字」といった、高度なレイアウト ブロックを使用すると、より自由なレイアウトでホームページをデザインできます。これらのブロックは組み合わせて使うことができ、構造の整ったホームページを作成できます。
これらの要素をうまく組み合わせることで、機能的で魅力的、かつプロフェッショナルな印象を与える独自のウェブサイトを作り上げることができます。
関連情報
Web サイトサービス編集ツールの使い方 -「ページ」タブ編
Web サイトサービス編集ツールの使い方 -「スタイル」タブ編
その他、Houzz Pro の Web サイトサービスで構築したホームページやその編集方法などに関するヘルプ記事は、こちらをご覧ください。