はじめに

こんにちは！@aucfan-ohtaです。
今回は、ローディング画面をイラストで作ってみたいと思います。

みなさん、知っていましたか？
LPやサイトなど、訪問した際にわずか3秒で離脱するか滞在するかが決まるそうです。

そもそもサイトの読み込みが遅いとローディング中に離脱してしまうのでは...
そう思い、興味を惹くようなローディング画面を作ってみようと思い今回チャレンジしてみました！

使用するソフトは
・Illustrartor（ver.2020を使用しています）
・Editor（SublimeTextで書きます）

イラストは、Illustratorで描きます。（ローディングの部分をSVGで書き出したいため）
Editorでは、html・JavaScript・cssを書くために使います。

それでは、ローディング画面作っていきましょう！！

Illustratorで描いたイラストを用意する

今回はローディング画面のアニメーション部分で使うイラストを用意してみました！
どうやって動かすかはこの時点ではまだ考えておりません。

クリスマスっぽく、リースにしてみました！

イラストの画質が低下しないよう、SVGで書き出しています。

SVGの書き出しの設定ですが、前回の記事でも書きましたが、Webに使用するデータとして書き出す設定がありますので
ざっくり解説していきます！

カラーモードの設定

今回はWebで使用するものですので、RGBに設定しましょう。
設定方法は、添付の画像の通りです。

ファイル→ドキュメントのカラーモード→RGBカラー
で設定完了です！

SVG書き出し

作成したファイルを別名で保存し、添付のようにSVGを選択します。

SVG書き出しの設定

保存を押すと、下記のような画面に切り替わります。
スクショのように設定してください。
ちなみに、デフォルトで表示のされ方が違う場合は、詳細オプションを押すと、詳細が出てきます！

詳細オプションにチェックが付いている場合は全て外してください。

それぞれの役割については、より詳しく書いてある参考サイトがありましたので
共有させていただきます！
SVG書き出しの参考

ローディング画面を作る

さあ、いよいよここから本題になりますが、
今回は前回作ったイラストが動くページにローディング画面を追加します。

CSS3のアニメーションで動かしていく

リースはcssのanimationで動かします。

animationは下記サイトを参考にしました。
▼参考サイト
animationの参考

loading.css

.illust {
  width: 100px;
  text-align: center;
  animation: float 3s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes float {
  0% {
    transform: translateY(0)
  }
  30% {
    transform: translateY(-6px)
  }
  66% {
    transform: translateY(0)
  }
  100% {
    transform: translateY(0)
  }
}

イメージはこんな感じです。
暖かみのある色味でほっこりするような動きにしようと思います。

htmlはこんな感じで記述しています！

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>クリスマスカード</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap">
        <link rel="stylesheet" href="./assets/loading.css">
    </head>
    <body>
        <!--ローディング画面-->
        <div class="init">
            <div class="wrap">
                <div class="block">
                    <object type="image/svg+xml" class="illust" data="./assets/wreath.svg" width="100" height="100"></object>
                    <h1 class="loading">Now Loading...</h1>
                </div>
            </div>
        </div>
        <!--コンテンツ-->
        <div class="main">
            <img class="card" src="./assets/card.png" alt="">
        </div>
        <script src="./assets/loading.js"></script>
    </body>
</html>

ちなみに、svgを埋め込む場合はimgタグよりもobjectタグで埋め込む方が良いそうです。

JavaScriptでローディング画面を作成する

文字も少し動かしたかったので、
・文字の色が１文字ずつ変化していく
・色の変化が終わった後に背景を消す
の2つができる参考があったので使ってみました！
▼参考にしたサイトはこちら
JavaScriptの参考

サーバーに上げてみる

▼cssで色味など調整して、出来上がったものがこちらになります！

DEMOページ

See the Pen loading by aucfan-ohta (@aucfan-ohta) on CodePen.

## まとめ今回はとてもざっくりですがローディングで読み込みの待ち時間も視覚的に楽しめるようなものを作ってみました。まだまだJSは一から書くのは難しいのですが、サイトに色々な動きをどんどん取り入れて行きたいと思いました！イラストでほっこりしていただけたら嬉しいです！みなさま、良い年末をお過ごしくださいませ。ここまで閲覧いただき、ありがとうございました！