ホームページに動きをつけて訴求力を高めよう
当システムはお客様に常に快適に最新のシステムをご利用いただけるよう、日々改善と運用を続けています。
今回は2022年10月に追加された新機能を使ってホームページに動きをつける方法をご紹介いたします。
新機能を活用してさらに動きのある、魅力的なホームページづくりができるようになりました。
この機能を使ってご自身のホームページをさらに充実なものにしていきましょう！
１．ホームページに動きをつける新機能の概要
2022年10月のレベルアップでは、新機能として
- コンテンツへのアニメーションの効果設定
- コンテンツへのマウスオーバーエフェクト設定
という２つの機能が追加されました。
これらの機能を利用することで、さらに動きのある魅力的なホームページづくりが可能です。
設定については難しい操作は不要で、クリック１つで誰でも簡単に実装できます。
それではどのような効果なのか実際に見ていきましょう。
①コンテンツ – アニメーション設定
ホームページに掲載されている「文章」や「画像」といったコンテンツに、アニメーション効果を簡単に設定できます。
ページ内の各コンテンツにアニメーション設定した制作例がこちらです。
※実際にアニメーションを実装したホームページサンプルをご覧になりたい方はこちら（サンプルサイトを別タブで開きます）
アニメーションを設定することにより、閲覧者にさらにダイナミックで先進的な印象を与えることができ、ホームページのデザイン性・訴求力をアップさせます。
②コンテンツ – マウスオーバーエフェクト
ホームページに掲載されている「文章」や「画像」といったコンテンツに、リンク設定がされている場合、そのリンクにマウスを重ねた（マウスオーバー）時に様々な効果を設定できます。
ページ内の各コンテンツにマウスオーバーエフェクトを設定した制作例がこちらです。
※実際にマウスオーバーエフェクトを実装したホームページサンプルをご覧になりたい方はこちら（サンプルサイトを別タブで開きます）
マウスオーバーエフェクトを設定することにより、リンクであることが分かりやすくなり、見てもらいたいコンテンツへの訴求力を高めることができます。
２．コンテンツ – アニメーション設定方法
では実際に、コンテンツへのアニメーション設定方法をご紹介します。
設定方法はサポートサイトでも解説しております。そちらもご参照ください。
参考：サポートサイト｜コンテンツ編集 – アニメーション設定方法
１．まずは当システムにログインし、編集画面で編集したいページを表示します。
ログインの仕方～編集画面の表示については下記動画をご参照ください。
ホームページ作成講座｜ログイン
ホームページ作成講座｜ホームページ選択（ホームページを選択してダッシュボードを開く）
ホームページ作成講座｜編集・プレビュー（編集画面をつかう）
２．アニメーションを設定したいコンテンツにマウスカーソルを合わせると、左に「≡」アイコンが表示されます。
「≡」にマウスカーソルを合わせると表示されるメニューから、「アニメーション設定」をクリックします。
３．アニメーション設定の詳細画面が表示されます。
設定したいアニメーションの種類をクリックします。
アニメーションの種類｜なし
何もアニメーションを追加しない設定です（初期設定）。
アニメーションせず通常どおりコンテンツが表示されます。
アニメーションの種類｜フェードイン
コンテンツが徐々に現れるアニメーション設定です。
「スピード」で表示の速度を「速い」「普通」「遅い」の3段階からクリックして選択します。
アニメーションの種類｜スライドイン
コンテンツが滑り込みながら現れるアニメーション設定です。
「スライドの方向」で滑り込んで来る元方向の設定をします。「左から」「右から」「上から」「下から」の4方向の中からクリックして選択します。
「スピード」で表示の速度を「速い」「普通」「遅い」の3段階からクリックして選択します。
４．設定したいアニメーションをクリックして選択したら、「ＯＫ」ボタンをクリックして設定完了です。
５．設定されたアニメーションを確認するためには、編集画面ではなく、プレビューで「フレームなしで確認」から確認する必要があります。
編集画面上部、右から３番目の「プレビュー」ボタンをクリックします。
６．プレビュー画面がブラウザの別タブで表示されます。
プレビュー画面上部、右端の「フレームなしで確認」ボタンをクリックします。
７．フレーム（画面上部のパソコン・タブレット・スマートフォン切り替え枠）のない状態のプレビュー画面がブラウザの別タブで表示されます。
アニメーション設定したコンテンツまでページをスクロールして、編集内容に問題がないか確認し、プレビュー画面を閉じます。
８．編集画面に戻り、ホームページに編集内容を反映します。
画面左上の「ダッシュボード」ボタンをクリックします。
ダッシュボードへ戻るメッセージが表示されますので、「保存する」ボタンをクリックします。
※この段階では、公開されているホームページに編集内容が反映されていません。
９．ダッシュボードが表示されます。
「更新」ボタンをクリックします。
１０．ホームページを更新するメッセージが表示されます。
「更新」ボタンをクリックすると、公開されているホームページに編集内容が反映されます。
１１．公開したホームページを確認するには、ダッシュボード右上のＵＲＬをクリックします。
公開中のホームページが表示されます。
３．コンテンツ – マウスオーバーエフェクト設定方法
次に、コンテンツのマウスオーバーエフェクト設定方法をご紹介します。
設定方法はサポートサイトでも解説しております。そちらもご参照ください。
コンテンツへのマウスオーバーエフェクトは下記の３種類があります。
①リンク設定された文字のマウスオーバーエフェクト
②リンク設定された画像コンテンツのマウスオーバーエフェクト
③リンク設定された文字のせ画像のマウスオーバーエフェクト
はじめに ～ システムにログインして編集画面を表示する
まずは当システムにログインし、編集画面で編集したいページを表示します。
ログインの仕方～編集画面の表示については下記動画をご参照ください。
ホームページ作成講座｜ログイン
ホームページ作成講座｜ホームページ選択（ホームページを選択してダッシュボードを開く）
ホームページ作成講座｜編集・プレビュー（編集画面をつかう）
①リンク設定された文字のマウスオーバーエフェクト
１．リンク設定するテキストをドラッグして選択します。
上に表示されるメニューから「リンク設定」ボタンをクリックします。
２．リンク設定画面が表示されます。リンク先の種類を選択します。
リンク先の種類については下記を参照してください。
３．リンクの種類を設定したら、「マウスオーバーテキスト」を選択してマウスオーバーエフェクトを設定します。
下線あり
マウスオーバー時、リンク設定する文字に下線を入れる設定です。
下線なし（初期設定）
マウスオーバー時、リンク設定する文字に特に下線が入らない設定です（初期設定）。
４．「マウスオーバーテキスト」で「下線あり」をクリックして選択します。
「ＯＫ」ボタンをクリックして設定完了します。
５．リンク設定したテキストにマウスカーソルを合わせ、エフェクトが設定されているか確認できます。
マウスカーソルを合わせるとテキストに下線がつきます。
６．編集が終わったら、ホームページの編集内容を確認します。
編集画面上部、右から３番目の「プレビュー」ボタンをクリックします。
７．プレビュー画面がブラウザの別タブで表示されます。
編集内容に問題がないか確認し、プレビュー画面を閉じます。
８．編集画面に戻ります。
ホームページに編集内容を反映します。
画面左上の「ダッシュボード」ボタンをクリックします。
ダッシュボードへ戻るメッセージが表示されますので、「保存する」ボタンをクリックします。
※この段階では、公開されているホームページに編集内容が反映されていません。
９．ダッシュボードが表示されます。
「更新」ボタンをクリックします。
１０．ホームページを更新するメッセージが表示されます。
「更新」ボタンをクリックすると、公開されているホームページに編集内容が反映されます。
１１．公開したホームページを確認するには、ダッシュボード右上のＵＲＬをクリックします。
公開中のホームページが表示されます。
②リンク設定された画像コンテンツのマウスオーバーエフェクト
１．リンク設定する画像にマウスカーソルを合わせます。
上に表示されるメニューから「詳細設定」ボタンをクリックします。
２．リンク設定画面が表示されます。リンク先の種類を選択します。
リンク先の種類については下記を参照してください。
３．リンクの種類を設定したら、「マウスオーバーエフェクト」を選択してマウスオーバーエフェクトを設定します。
それぞれ単独もしくは複数併せて選択できます。全て選択無しもできます。
色を変更
マウスオーバー時、画像に色をのせます。色は12色から選択できます。
透明度を変更
マウスオーバー時、画像を透過させます。透明度をメーターにより調節できます。
画像を拡大
マウスオーバー時、画像を約1.2倍程度に拡大します。
４．マウスオーバーエフェクトをクリックして選択します。
「ＯＫ」ボタンをクリックして設定完了します。
５．画像にマウスカーソルを合わせ、エフェクトが設定されているか確認できます。
６．編集が終わったら、ホームページの編集内容を確認します。
編集画面上部、右から３番目の「プレビュー」ボタンをクリックします。
７．プレビュー画面がブラウザの別タブで表示されます。
編集内容を確認して、プレビュー画面を閉じます。
８．編集画面に戻ります。
ホームページに編集内容を反映します。
画面左上の「ダッシュボード」ボタンをクリックします。
ダッシュボードへ戻るメッセージが表示されますので、「保存する」ボタンをクリックします。
※この段階では、公開されているホームページに編集内容が反映されていません。
９．ダッシュボードが表示されます。
「更新」ボタンをクリックします。
１０．ホームページを更新するメッセージが表示されます。
「更新」ボタンをクリックすると、公開されているホームページに編集内容が反映されます。
１１．公開したホームページを確認するには、ダッシュボード右上のＵＲＬをクリックします。
公開中のホームページが表示されます。
③リンク設定された文字のせ画像のマウスオーバーエフェクト
１．リンク設定する文字のせ画像にマウスカーソルを合わせます。
上に表示されるメニューから「文字のせ画像編集」ボタンをクリックします。
２．文字のせ画像の設定画面が表示されます。
文字乗せ画像の編集については下記をご参照ください。
参考：サポートサイト｜コンテンツ編集 – コンテンツ追加 – 文字のせ画像
「リンク設定」をクリックします。
３．リンク設定画面が表示されます。リンク先の種類を選択します。
リンク先の種類については下記を参照してください。
参考：サポートサイト｜コンテンツ編集 – リンク設定方法
４．リンクの種類を設定したら、「マウスオーバーエフェクト」「ボタンのマウスオーバーエフェクト」を選択してマウスオーバーエフェクトを設定します。
それぞれ単独もしくは複数併せて選択できます。全て選択無しもできます。
マウスオーバーエフェクトの種類は下記です。
色を変更
マウスオーバー時、画像に色をのせます。色は12色から選択できます。
透明度を変更
マウスオーバー時、画像を透過させます。透明度をメーターにより調節できます。
ボタンのマウスオーバーエフェクトは下記です。
ボタンの色を変更
マウスオーバー時、ボタンに色をのせます。色は12色から選択できます。
ボタンの色をスライドアニメーション付きで変更
マウスオーバー時、ボタンにスライドアニメーションを付けられます。ボタンの色は12色から選択できます。
ボタンの透明度を変更
マウスオーバー時、ボタンを透過させます。透明度をメーターにより調節できます。
※「ボタンの色を変更」と「ボタンの色をスライドアニメーション付きで変更」は一緒に選択できません。
５．マウスオーバーエフェクトをクリックして選択します。
「ＯＫ」ボタンをクリックして設定完了します。
６．文字のせ画像にマウスカーソルを合わせ、エフェクトが設定されているか確認できます。
７．編集が終わったら、ホームページの編集内容を確認します。
編集画面上部、右から３番目の「プレビュー」ボタンをクリックします。
８．プレビュー画面がブラウザの別タブで表示されます。
編集内容を確認して、プレビュー画面を閉じます。
９．編集画面に戻ります。
ホームページに編集内容を反映します。
画面左上の「ダッシュボード」ボタンをクリックします。
ダッシュボードへ戻るメッセージが表示されますので、「保存する」ボタンをクリックします。
※この段階では、公開されているホームページに編集内容が反映されていません。
１０．ダッシュボードが表示されます。
「更新」ボタンをクリックします。
１１．ホームページを更新するメッセージが表示されます。
「更新」ボタンをクリックすると、公開されているホームページに編集内容が反映されます。
１２．公開したホームページを確認するには、ダッシュボード右上のＵＲＬをクリックします。
公開中のホームページが表示されます。
４．まとめ
今回は2022年10月に追加された新機能をご利用いただくための、アニメーション設定とマウスオーバーエフェクト設定の具体的な手順をご紹介いたしました。
これらの新機能を活用することにより、さらに動きのある、魅力的なホームページづくりができます。
ぜひご利用ください。