サイトに動きをつけよう。

サイトに動きをつけよう。

サイトアニメーション機能を設定して、「静から動へ」印象に残るワンシーンを演出する事ができます。ユーザービリティの向上にもつながりますのでぜひ設定しておきましょう。

グローバルメニューを設定する。

ユーザーの導線をスムーズに整える

このセクションでは、サイトのグローバルメニューを設定していきます。
グローバルメニューとは、サイト上部などに表示される、主要なページへのリンクメニューのことです。
メニューをきちんと設定することで、サイトに訪れたユーザーを見てほしいページへスムーズに誘導できます。
その結果、サイト全体の使いやすさ(ユーザビリティ)が大きく向上します。
※このメニューは、サイト運営にとって重要な機能のため「非表示」にすることはできません。必ず設定を行ってください。


ヘッダー設定画面へ進む。

ダッシュボード→鳴雷全体設定→鳴雷ヘッダー設定。
ヘッダー設定をクリック。
プレビュー下より設定を開始。

グローバルメニューのデザインを設定する。

「グローバルメニュー設定」をクリック
グローバルメニューの背景色、ボタンの背景色を設定
ハンバーガーアイコン(3つ線が縦に並んでいるもの)と矢印アイコン(表示を閉じるときに出るアイコン)のカラーを選択する
各メニューリストのアンダーラインの色を設定する。
メニューテキストの色を選択する。

グローバルメニューのテキストとリンクを設定する。

「タイトル」箇所にリンクページのタイトルを入力する。
「リンクURL」にリンクするページのURLを入力する。※今はまだ入力しなくて良い。
さらに追加したい場合は「フォームを追加する」ボタンで追加可能です。
設定を保存で完了。

ローディングアニメーションを設定する。

選べる3種類のローディングアニメーション。

ローディングアニメーションとは、トップページの読み込み中に表示される演出のことです。
読み込み時間がかかるトップページでも、アニメーションを表示することで「待たされている」と感じにくくなり、ユーザーの離脱を防ぐ効果があります。
サイトの第一印象にも関わる大切な要素ですので、ぜひ設定してみましょう。
※ローディングアニメーションを使いたくない場合は不使用にする設定も可能です。


右スライド

サークル

カーテン

アニメーションタイプを選択する。

「サイトアニメーション設定を選択」
ローディングアニメーションのパターンを4つの中から選択してください。アニメーションの動きは「PREVEIW」のボタンを押すと動作し確認できます。
動く背景の画像を選択してください。

お店のロゴを設定する。

お店のロゴを選択し、表示される「loading」の文字色を選択してください。背景色と被らないように設定するのがコツです。
保存を押して設定完了。

02,サイトに動きをつけようが完成しました。

思い通りの素敵なデザインは完成しましたか?次は「トップページを作ろう。」です。「鳴雷トップページビルダー」というツールを使用し、トップページを作成していきます。12セクションのオリジナルのブロックを並べるだけで、デザインされたトップページが完成する優れものです。