今回は、ノーコードツールSTUDIOで画像や文字の自動スクロール機能を作成する方法を紹介します。「画像や文字を自動スクロールしたいけどやり方がわからない。」こういった疑問や不安をこの記事を読めば、解決できます。今回ご紹介する方法を真似して頂くと、自動スクロール機能を簡単に作ることができますので、ぜひ一緒に作っていきましょう。今回は、100枚以上の画像で、丁寧に解説しております。ちなみに、この記事を書いている私は、STUDIO関連の案件を50個以上こなしてきました。多くの経験があるので、信頼担保に繋がるのかなと。まとめSTUDIOで自動スクロール機能の作成方法を紹介それでは、ノーコードツールSTUDIOで自動スクロール機能の作成方法を紹介します。今回は、以下のような自動スクロール機能を作成します。※音が出ますのでご注意ください。https://design-yandy.com/wp-content/uploads/2023/07/39_1.mp4ちなみに、これまで、このような自動スクロール機能を作成する際は、Googleタグマネージャーとの連携が必要でしたが、STUDIOに新たに導入された新機能を使うことでとても簡単に作成できるようになりました。この機会に作成方法を覚えて下さい。今回は以下の2つの作成方法を解説します。文字の自動スクロール機能また、YouTubeにて徹底解説しました。文字情報よりも頭に入りやすいかと思いますので、基本的には動画を推奨します。画像の自動スクロール機能の作成方法まずは、「画像の自動スクロール機能」の作成方法を紹介します。STUDIOのサイトにアクセスまずは、STUDIOのサイトにアクセスし、右上の「新しいプロジェクト」をクリックして下さい。今回は、「空白」を利用して作成します。「空白」の上でマウスオーバーし、「空白からはじめる」をクリックしましょう。「プロジェクト名」を入力します。これで、管理画面にアクセスできました。それでは、早速、作成していきましょう。このように「画像」の自動スクロール機能を作成します。※音が出ますのでご注意ください。次に、自動スクロール機能の基盤となる「カルーセルの配置」です。左側の「エレメンツパネル」から「矢印」を押して、「エレメンツパネル」を開きます。右側にドラックアンドドロップして下さい。「矢印」を押して「詳細メニュー」を閉じます。これだけで、自動返信機能のベースとなる「カルーセルのボックス」を配置することができました。次に、「カルーセルの詳細設定」を行います。「文字」を選択し、「Delite」を押して下さい。「Delite」を押します。「スクリーンに戻る」を押しましょう。これで、「文字」と「ボタン」を削除することができました。次に、「画像」を変更します。何も選択していない状態で、「画像」の上で1回クリックして下さい。左上に「div」の文字が表示されますので、「div」をクリックします。すると、右側にこの「Carousel」の「ボックス」の設定タブが開きますので、そこから「画像」を変更します。このままの状態では、3つの「画像」がすでに登録されてしまっております。今回は2つの「画像」だけ利用しますので、1番下の「画像」を削除します。1番下の「画像」が見える状態で、右にバーをスクロールし、1番右の列の上にマウスオーバーすると、「削除」ボタンが表示されますので、「削除」ボタンを押して下さい。これで、1つ「画像」を削除できました。それでは、「画像」を変更します。1番上の「画像」の上で、1回クリックして下さい。すると、左側から「画像」を変更できる設定タブが開きますので、ここで「画像」を変更します。「orange」と入力し、「Enter」を押します。すると、いくつかのフリー素材が表示されますので、その中から青色の背景の「orange」を選択します。これで、1つ目の画像を変更できました。次に、2つ目の画像を変更します。検索ボックスに、「peach」と入力し、「Enter」を押します。「黄色」の背景の「桃」の写真を選択して下さい。これで、2つ目の画像も変更できました。それでは、次に、「画像」のサイズを変更します。「画像」を選択した状態で、上部のタブから「横幅」を「50%」、「縦幅」を「430px」にします。これで「画像」のサイズを変更することができました。この辺を押して、選択を解除します。それでは、次に、「自動再生」の詳細設定を行います。「画像」の上で1回クリックし、「Carousel」のボックスを選択します。「ホバーで停止」を「オフ」にします。この「カルーセル」の設定のポイントとして、「再生間隔」を必ず「1」に設定するようにして下さい。ここで、「再生間隔」を「1」にすることで、「画像」が切り替わる際のかたつきが無くなりますので、必ず「1」に設定することを覚えておきましょう。「送り時間」の単位は、「ミリセカンド」になっておりますので、「8,000」と設定すると、「8秒」という意味です。STUDIOでよく利用する設定になりますので、覚えておきましょう。これで、「自動再生」の詳細設定は終了です。最後に、とても重要な「イージング」の設定を行います。今回だと「横スクロール」する際の速さの緩急を調整するための設定となります。今回は、「横スクロール」を一定の速さにしますので、「緩急」は付けません。「緩急」をつけたくないときは、「イージング」を「直線」にする必要があります。デフォルトの状態では、なめらかな緩急がついた設定になっておりますので、これから「直線」に変更します。今回、「イージング」が設定されているこの「ボックス」は、視覚的にはわかりづらい場所にありますので、「レイヤーパネル」を利用して「ボックス」を選択します。「div」の左側の「矢印」をクリックします。すると、7つの「divタグ」が表示されますので、この7つの「イージング」に「直線」の設定を行います。「イージング」の上にマウスオーバーして下さい。下の丸マークを上に移動させて直線になるように変更して下さい。同様に、残りの6つの「divタグ」にも同様の「イージング」の設定を行いますが、実はこの1つ目の「divタグ」に設定した内容が他の「divタグ」にもすでに反映されておりますので、他の「diタグ」は何もしなくて問題ありません。これで、「イージング」の設定を「直線」にすることができ、横スクロールの速さに緩急が付かなくなりました。この辺をクリックして、選択を解除しましょう。「スクリーンに戻る」を押して下さい。それでは、作成した「画像」の「スクロール」機能を「ライフプレビュー」で確認してみます。「スタート」を押します。「URL」をクリックしましょう。すると、このように「画像」の「自動スクロール機能」を作成することができました。次に、このように、「文字」の「自動スクロール機能」の作成方法をお伝えします。※音が出ますのでご注意下さいhttps://design-yandy.com/wp-content/uploads/2023/07/42-1.mp4実は、最初にネタバラシをすると、この「文字」は、「画像」で作成しておりますので、先程と同様の手順で作成できます。今回、練習するこちらの「文字の画像」については、こちらからダウンロードできるようにしておりますので、事前にダウンロードされて下さい。それでは、簡単に手順をおさらいしながら「文字」の「自動スクロール機能」をご説明します。カルーセルの複製まずは、1つ目に作成した「自動スクロール機能」を設定したカルーセルを複製したいと思います。先程作成した、1つ目の「ボックス」を選択し、コピーアンドペーストして、複製して下さい。カルーセルの詳細設定そして、次にカルーセルの詳細設定です。右側の設定タブの「画像」をクリックします。左側のタブの「アップロード」を押しましょう。これで、「文字の画像」がSTUDIOにアップロードされましたので、選択して下さい。同様に、2つ目の「画像」も同じ「文字の画像」に変更して下さい。これで、「画像」を変更できました。次に、「画像」のサイズを変更します。現在2つの「ボックス」が配置されているもののうち1つの「ボックス」を選択します。「縦幅」を「190px」に変更します。これで、サイズを変更できました。この辺をクリックして、選択を解除します。「Carousel」のボックスを選択した状態で、上部のタブから「縦幅」を「auto」に変更しておきましょう。これで、「文字」の「自動スクロール機能」も作成できました。最後に、「ライフプレビュー」で確認します。「URL」をクリックしましょう。すると、このように「文字」も自動スクロールさせることができました。https://design-yandy.com/wp-content/uploads/2023/07/44.mp4これで、画像や文字の自動スクロール機能の作成方法は終了です。まとめ今回は、画像や文字の自動スクロール機能を紹介しました。この機能を活用すると、サイトのクオリティーがとても高くなりますので、ぜひ今回ご紹介した方法を参考に、色んな自動スクロール機能を作成されて下さい。初心者にもわかりやすいSTUDIO講座まとめ【50件以上納品した私が解説】ノーコードツールSTUDIOのわかりやすいSTUDIO講座を知りたいですか?本記事では、私がこれまでYoutubeやブログで発信してきたおすすめのSTUDIOの講座を紹介しました。ご自身のスキルに合わせたおすすめの講座を紹介しております。これからSTUDIOのスキルを高めたい方は、是非記事をご覧ください。DesignerYuta某大手企業勤務。2020年よりWEB制作やデザインの勉強を開始し、40件以上の案件を対応。Photoshopを中心にスキル上達コンテンツを無料で発信中。