まったくの初心者が「STUDIO」を始めてみた！モーダルとアニメーションを活用してみた！

まったくの初心者が「STUDIO」を始めてみた！今回はモーダルウィンドウとアニメーションをいろいろと利用して、サイトを作ってみた。
特段、サイトのイメージとかは無いのでアートイベントとかライブ等の単発サイトということで、、、

STUDIO - Live Preview

1.モーダルウィンドウを使ってみた！

個人的にモーダルウィンドウは利用したほうがいいと持ってるタイプです。もし案件とかやるうえで特段指定等がない場合は、ぜひ利用してもらいたいと思う。基本的にポップアップとかモーダルみたいにページが移動しないサイトのほうが、見やすくて動作も早いと思ってる。
トップサイトがシンプルにタイトルとサブタイトルのみなので、右上のリストボタンを押してモーダルを表示させている。
ついでにモーダルのSNSボタンを押すともう一段階モーダルを表示させ、シンプルに表示できるようにしている。

2.アニメーションを試してみた！

まずサイトが表示されたらタイトルが下から浮かび上がるようにした。そして時間差でサブタイトルも下から浮かび上がるようにしてみた。それだけでだいぶおしゃれに見える。
ギャラリーページの写真もホバーで大きく表示させたり、リストボタンもホバーで大きくしたりしている。（単調な使い方、、、）
ただ、時間や動きのカーブがうまく使いこなせてない、、思ってる動き方と違ったりスピードが微妙な作りがチラホラ。
これも使いこなすには少々時間が必要かな！

3.CMSの使いどころ

今回はCMSを使わなかったが、ギャラリーはCMSを使って更新しやすくしたり一つ一つに情報を詰め込むべきだったなーと作ってから思った。（CMSを組み込む気力はなかった、、、）
次回はCMSを有効活用していこうと思う！

4.スクロールなしサイト

今回のサイトは何もイメージがなくただシンプルに作っただけである。利用されることは少ないだろうと自分自身思ってはいるが、スクロールが少ないサイトも需要はあると思っている。インパクトが違うし、多少おしゃれな感じもある。
背景を目立たせたいときはこのようなサイトもありかなーと、、、
でもお客様ありきなので、今回限りで封印します。

5.まとめ

モーダルの練習がてら作ったサイト。一応リンクも飛ばしてサイトとしては成り立つようにしてみた。アニメーションも混ぜてみたりなど勉強になることばかりだった。
今回の練習は思ったよりも充実した気がする。制作時間もそこまでかからなかったので、何度も練習できる！（シンプルすぎだから当たり前だけど）
もう少し情報量を増やして、CMS等を組み込むことで実用性のあるサイトにも挑戦していこうと思う！

ってことでまだまだ頑張りますか！