前回はSTUDIOで作成する美しいUIボタンに焦点を当てましたが、今回はより大きなスケールで、STUDIOを使ってどのように魅力的なウェブサイトのトップページをデザインできるのかを解説します。カルーセル機能とLottieとの連携を駆使して、訪問者を魅了するトップページの作成方法を紹介します。

WEBサイトのトップページとは？

ウェブサイトのトップページは、訪問者が最初に目にするページです。そのため、サイト訪問者の第一印象の決定に大きな影響を与えます。魅力的なデザインと機能は、ユーザーの興味を引きつけ、サイトの信頼性とプロフェッショナリズムを伝える重要な役割を果たします。

【基本】カルーセル機能の利用

カルーセル機能の設定方法

カルーセル機能とは、複数の画像やコンテンツをスライドショーのように表示する機能です。STUDIOでは、カルーセル機能を実現するための既存のコンポーネントパーツが準備されているので、画像が自動もしくは手動でスライドショーのように表示されるようにすること自体はすごく簡単です。

これだけで、画像と文字がスライドショーのように見えるカルーセルを作成することができました。

カルーセル機能の調整

STUDIOのカルーセル機能のパラメーターを修正すると、見え方がどう変化するかご紹介します。
先ほどの動画のライブプレビューでお見せした見え方を、デフォルトの見え方として見ていきます。
（※デフォルトの設定は＜再生時間：3000＞＜送り時間：600＞となっています。）

「送り時間」を変更した場合

「送り時間」を小さくすると画像がスライドする速度が速くなり、「送り時間」を大きくすると画像がスライドする速度が遅くなります。＜送り時間：１＞にした場合は下記の動画のように、もはやスライドしているようには見えなくなります。

「再生時間」を変更した場合

「再生時間」を小さくすると画像が表示されている時間が短くなり、「再生時間」を大きくすると画像が長い時間表示されるようになります。

【基本】Lottieアニメーションとの連携

Lottieは軽量なJSONベースのアニメーションファイルです。STUDIOでLottieアニメーションをウェブサイトに組み込む方法を解説します。

①まず、LottieFiles側での作業を行います。LottieFilesのサイトへアクセスし、「無料で始める」ボタンを押してログインもしくはアカウントを作成します。

②ログインできたら、ダッシュボードの一番上の検索窓をクリックします。すると、下記の画像のように「Search for free animations」というリンクが出てくるので、そこをクリックしてフリーアニメーションを探すページに遷移します。

③フリーのアニメーションを探すページが表示されたら、左上の検索窓にどんなアニメーションが欲しいのかに合わせたキーワードを入力します。（※今回は例として、コーヒーショップっぽいWEBデザインに使用するアニメーションを探してみました。右下のアニメーションが可愛かったので今回はこちらを使用していきます。）

④使いたいアニメーションをクリックすると下記のようなポップアップが表示されます。ポップアップ内にある「Save to workspace to generate」ボタンを押して、アニメーションをワークスペースに保存します。

⑤下記のような新しいページが表示されるので、「Enable Asset Link」のトグルスイッチをONにして、「Embed HTML」のコードをコピーしてください。

これでLottieFiles側での作業は完了です。

⑥次にSTUDIO上での作業を行います。以下の動画のように、EmbedのBlankをクリックして追加します。そして右側に表示された「埋め込みコード」の欄に先ほどLottieFilesでコピーしてきたコードを貼り付けます。

ライブプレビューで確認すると、先ほど選んだアニメーションが動いていることを確認できました。

【応用】TOPページデザインの紹介

ここからは、今まで説明してきたカルーセル機能、Lottieとの連携の機能を使って、より洗練されたWEBサイトのトップページのデザイン例をご紹介します。

今回の記事では、僕がココナラでフリーランスとしてSTUDIOを使ったWEBサイト制作をしている中で、作成したトップページのデザインをご紹介します。その他にも、僕がいろいろなWEBサイトを見てきた中で、個人的にオシャレだと感じたものをSTUDIOで作成してみました。

これらのトップページのデザインを実際にみてみたい方は以下のリンクからご覧いただけます。
＜カルーセル機能を使ったトップページ＞
＜Lottieと連携したトップページ＞

※1.上記のURLのページでは、どのボタンを押しても、別の画面へ遷移しないようにしています。
※2.上記のURLのページでは、レスポンシブを設定はしていないので、スマホの画面で見ると、上の動画とは少し違った見え方になるかもしれません。

【宣伝】ココナラで出品中のサービス紹介

もしこの記事を読んでSTUDIOを使ったデザインに挑戦したくなった方、自分だけの魅力的なWEBサイトが欲しいと思った方は、私がココナラで出品しているサービス「STUDIOを使ったWEBサイト制作」をご検討ください。WEBサイトのデザインからSTUDIOを使った制作まで一貫してご対応させていただきます。一緒に素敵なWEBサイトを作成しましょう！

STUDIOでオリジナルWEBサイト作成します 修正制限無し！デザイン/画像/文章丸投げOK!【２名様限定】

以前作成したWEBサイトの参考例は、Instagramをチェックしてみてください！
https://www.instagram.com/kreai_design?igsh=dmdqNXdudmlxNWZv&utm_source=qr

まとめ

STUDIOを用いて、カルーセル機能やLottieとの連携を駆使した魅力的なウェブサイトのトップページのデザイン方法をご紹介しました。訪問者を引きつけるトップページは、サイトの成功への重要な第一歩です。もっと専門的なサポートが必要な場合は、ぜひ私のココナラサービスをご利用ください。