STUDIOでポップさを追求したLPを作ってみた！
記念すべき第1回の投稿は、私が大好きで応援しているツール「STUDIO」。どこまでSTUDIOでポップさを表現できるのか試してみました！
なぜSTUDIOで制作したのか
私はコーディングができないので、ノーコードでサイトを作れるサービスにもともと興味がありました。今回のLP制作で、必要にかられてノーコードサービスを調べ始めたのがSTUDIOを知ったきっかけでした。笑
数あるサービスの中で、私がSTUDIOを選んだ一番の大きな理由は日本語対応していたからだと思います（←英語苦手）。
直感的に操作できたり、デザインが好きだったのも、とっつきやすさに繋がっていたなと思います。
使ってみた感想
基本的な操作なら実際に触りながら覚えられました！
少し難易度が高いカルーセル等は少し調整に時間がかかったりしましたが基本的には一人で制作できました◎
私が一番躓いた点は、公開時の設定です。
うまく独自ドメインと紐付けられず苦戦しましたが、そこはSTUDIOのチャットサポートやSlackコミュニティ、知り合いのエンジニアさんに質問させてもらい助けてもらいました！（ありがたや〜）
なんだかんだ作っていて楽しいという点が、STUDIOを利用し続けられている理由なのかもしれません♫
使いやすさの感じ方は、ある程度コードの知識があるのと、ないのとでは差がでるかもしれません。
私の場合、ほんの少し基礎知識があったのでまだとっつきやすかったのかな？と思っています。ある程度知識がある人はスムーズに制作できるかと思います。
LP制作の流れ
私は、大きく分けると3つのステップで進めています！
デザインは制作せずにそのまま実装に入る人もいますが、私はそんな器用ではないので必ずデザインを作ります、、笑（器用な人羨ましい！泣）
今回チャレンジした2つのこと
今回、個人的に大きな２つのことに挑戦してみました！
① メインビジュアルの顔文字だけアニメーションさせる
② 波のようなモチーフでポップさを表現する
■①絵文字だけアニメーションさせる
皆でワイワイ楽しそうにコミュニケーションしている感じを表現したくて、絵文字がフワフワ動いたらより躍動感を演出できるのではないかと、アニメーションづくりからチャレンジしてみました！
＜制作方法＞
（１）アフターエフェクトでアニメーションを作成
初めてアフターエフェクトを使ってみたので、色々調べながら進めたのですが、ざっくり説明すると、一番下のレイヤーにメインビジュアルの画像を貼り付け、その上に実際に動かしたい絵文字たちを並べて動きを追加していきました。（←初めてのことで色々調べまくってなんとか完成しました笑）
（２）movまたはmp4をgifに変換する
STUDIOでアニメーションを読み込む場合、gifでのアニメーションをアップロードしなければいけません。ただ、アフターエフェクトはgifで書き出せないので、movまたはmp4をgifに変換する必要があります。
そこで参考にしたのが以下の記事です。
ざっくり言うとPhotoshopを介してgifに変換しようぜ！ということです。
▼参考サイト
アフターエフェクトからGIFアニメーションを書き出す方法 【GIF】
（３）メインビジュアルにgifアニメーションを入れ込む
ここは根気が必要でした...笑
まず背景として人物の写真と絵文字を配置、その上に真中の白丸部分（テキストやボタン含む）を置こうと思ったのですが、レスポンシブなので思っていたよりもイラストとテキストのバランスがとれずかなり苦戦しました、、泣
色々試して結果的に落ち着いたのが、gifアニメーションを2枚に切ることでした。
2枚に切ったgifアニメーションと、真ん中の白丸テキストを3列に並べることでなんとか最低限バランスをとることに成功！笑
タブレットとスマホは、それぞれ背景画像を別で作って対応しました。
（アニメーションはPCのみです！）
■②波のようなモチーフをつくる
上記のような波のモチーフをどうやって作ったかというと、とっても簡単だったんです！（←先輩の作品を見て私もやってみた！）
⇣こんな画像を用意して画像として配置するだけ！
配置したらその下にくるコンテンツの背景色もベージュに合わせて通常通り組んでいくだけ。
メインビジュアルの波は、波＋背景画像を一枚の画像として書き出したものを使用してます！
さいごに
長くなってしまいましたが、近頃STUDIOで作る格安ウェブサイトをサービスとして打ち出している企業や個人の方も見られ、簡単なサイトに関してはSTUDIOで制作するのに何ら問題がないと思っています。
運用も簡単ですし、個人的にとてもおすすめなツールの１つです。
私ももっと詳しくなれるように勉強したいと思ってます！
ここで、ちょっとしたお知らせです。
現在、コミュニティを運営されている方に、リアルタイムにコミュニケーションが取れるオンラインの集い場としてworkeasyを無料提供する予定です。もし、ご興味がある方がいらっしゃればinfo@workeasy.jpまで「note見ました！」とご連絡ください。
ではでは、最後まで読んでくださりありがとうございました！
この記事が気に入ったらサポートをしてみませんか？