![見出し画像](https://assets.st-note.com/production/uploads/images/90567310/rectangle_large_type_2_b1201876ddd66e8c02f8e51dcfcbd634.png?width=1200)
まったくの初心者が「STUDIO」を始めてみた!練習3作目~バーとかそんな感じ
まったくの初心者が「STUDIO」を始めてみた!
練習の3作目はバーとかレストランみたいな、ちょっと暗い感じの店にありそうな感じで作ってみた!
まだまだバランスだったり、色合いだったり、出来損ないのところが多いがセクションやテンプレだけに依存しないよう頑張ってみた!
![](https://assets.st-note.com/img/1667669769387-eSoQyn2MdW.png)
![](https://assets.st-note.com/img/1667669799108-3x0oiGm8Dw.png)
1.背景を暗い色にしてみた
いつもはとりあえず白背景から始めてみたが、今回は暗い青で作ってみた。そうなるとイメージに出てきたのはBAR!暗い青に白い文字がくっきり見えるサイトがパッと出てきた。
でも暗い青といってもたくさんあるわけで、見やすくいけど明るすぎない感じの色。
まあでも、ちょっとしたパターンが入った画像を背景にするのもおしゃれだったかなと思った。
2.Twitterを組み込んでみた!、、が、、
やはりSNSは必要だと思いタイムラインを埋め込んでみたものの、、、明るすぎる!
もうちょい暗くあってほしかった!
今のところ、色を調整するところが見つからないのでこのままだが、ここだけ目立つ。そしてタイムラインが目立つから画像が余計暗く見える。
逆に画像をもう少し明るくすれば統一感が出るかもしれないかな、、
3.レスポンシブを丁寧にする
全体的にはレスポンシブも上手くできてはいる。ただ、画像の大きさを小さくするように組んどけばもう少しオシャレになってたかもしれない。写真が縦長になってしまったので、スマホでは正方形で小さく表示にすれば、見やすいしスクロールが少なくすんだはず!
4.アニメーションの使い方
写真ホバーで浮き出てくるようには設定した。これだけでなかなか出来てるサイトに見える。ただ時間や動きのメリハリは勉強していく必要がある。
あと、こういうサイトはスクロールして横や下からスッと浮き出てくるアニメーションが合う気もした。今回は挑戦できなかったから、次回組み込んでみようかな!
5.まとめ
一応シンプルだけど多少工夫して作ることはできた。引き出しは徐々に蓄積され始めている!こうしたい、とかっていう願望も増えてきてるのでいろいろ参考にしていきたい!
まだリンク設定とか付けてないので、サイトや見出しに飛ぶようにはしてない。そこらへんも付け加えながら、サイトとして完成するように勉強していこうと思う。
さて次はどんなサイトを練習で作ってみようかな?