WordPressサイトに画像スライダーを簡単に作成！#12
こんにちは、webデザイナーのShokoです。
今回の動画では画像スライダーをノーコードで簡単に設置する方法をお伝えします。
この方法を知っていると
クライアントへの提案の幅が爆増。
結果的に単価アップが狙えます。
実際に私も、今日お伝えするような
スキルの引き出しを増やせたことで
受注率も2倍UPしています。
この動画を見るだけで簡単にスキルアップできるので
ぜひ最後までご覧ください。
スライダーをつけるメリット
まず初めに、画像スライダーを設置できるようになると次の5つのメリットがあります。
①サービスや商品の魅力がひと目で伝わる
②動きのあるデザインで洗練された印象を与える
③ブランドの雰囲気を演出できる
④スペースの有効活用
⑤サイト滞在時間がUP
画像スライダーは、サービスや商品の魅力を直感的に伝えながら、動きのあるデザインでホームページ全体に洗練された印象を与えます。さらに、ブランドの雰囲気を効果的に演出し、限られたスペースを有効に活用することで情報を効率的に届けられます。その結果、訪問者の興味を引きつけ、サイトに長く滞在してもらえるため、コンバージョン率向上にもつながります。
画像スライダーにはこういったメリットがあります。
今回お伝えする方法は、これをノーコードで簡単に使えるようになるので
webデザイナーとしては次の３つのメリットがあります。
webデザイナーとしてのメリット
①効率的な作業ができる
ノーコードツールを活用することで、画像スライダーの設置や調整を素早く行えます。コーディングの手間を省けるため、他のデザイン作業に集中でき、作業全体の効率が向上します。
②デザインの自由度がUP
コードを意識せずにスライダーのレイアウトやアニメーション効果を調整できるため、クライアントの要望に応じたカスタマイズが簡単になります。これにより、提案力も高まり、より多彩なデザインを提供可能です。
③スキルの幅を広げ、競争力がアップ
ノーコードツールの活用で、初心者デザイナーでもプロフェッショナルな仕上がりを実現できるため、自身のスキルセットを強化できます。これにより、低コストかつ短期間での納品が可能になり、競争力が高まります。
本題
それでは、ここからは実際にインストールから実装までを解説していきます。
この記事では、「Smart Slider 3」の使い方をご紹介します。
Smart Slider 3 インストール
プラグインの新規追加で「Smart Slider 3」と検索。
「今すぐインストール」→「有効化」をしましょう。
WordPressダッシュボードから、
「Smart Slider」→「ダッシュボード」→「Don’t show again」をクリック。
無料版とプロ版
今回の動画では無料版を使っていきますが、
もっと色々な機能を使いたい方はプロ版もあります。
まずは無料版でも十分な機能が揃っているので
まずは無料で試してみるのをおすすめします。
スライダー作成
「NEW PROJECT」をクリック。
「Create a New Project」をクリック。
無料版ではこちらを選択します。
「名前」には、後から自分が管理する時にわかりやすいスライダーの名前を任意でつけておきます。
ユーザーには表示されないのでご安心ください。
画像を追加
「スライドを追加」→「画像」をクリック。
画像を追加したら、一旦保存しましょう。
右下にある「保存」をクリック。（なぜかグレーがかってるけどクリックできます。笑）
この個所を設定していきます。
サイズ
幅や高さはお好みで設定してください。
下の方にある「全幅を強制」をOFFにする。（デフォルトだとここがONになっています。）
操作
ここの好きなように設定してください。
今回は、スライダーにどんな画像があるのかわかりやすいよう、サムネイルをつけます。
サムネイルは、この部分のことです。
「サムネイル」をON。
すると、「Hide ON」という欄がでてきます。
こちらはデフォルトでは「モバイル」にチェックがついています。
どういうことかというと、「スマホではサムネイルを表示しない」という意味です。
スマホでもサムネイルを載せたい場合は、ここのチェックを外します。
その他
あとは、「アニメーション」・「自動再生」・「スライド」をお好みでカスタマイズしてください。
「最適化」・「開発者」は特にいじらなくてOKです。
設定が完了したら「保存」をクリック。
ブロックエディタでの使い方
「＋」をクリック。
「Smart Slider 3」をクリック。
検索で「slider」と打ったら出てきます。
「Select Slider」をクリック。
先ほどSmart Slider 3のダッシュボードで作成したスライダーが表示されますので、
載せたいスライダーをクリックし、「INSERT」ボタンをクリック。
すると、スライダーが簡単に挿入されました。
スライダーの画像を変更・追加したい場合は、Smart Slider3のダッシュボードで編集すると自動的に反映されます。
コメント