【初心者向け】STUDIO構築前に気を付けること1選

こんにちは！ももさかです！

「デザインを学んだ！次はSTUDIOでサイトを構築してみたい！」

と意気込んでいたのに、いざSTUDIOで構築してみると、

「あれ？デザインどおり実装できないぞ…」「思ったとおりのかたちにならない…」
こんな風に感じたことがある方も多いんじゃないでしょうか。

わたしも始めてSTUDIOを触ったときは、理想の実装ができなくて心がボキボキに折れたことを覚えています。。。

それでも、くり返し学習していくことで、今ではお仕事がもらえるまでになりました。

今回は、これまでの経験で身に付けた「STUDIOで実装するときに気を付けること１選」を記事にしました。

STUDIOを使って初めてのオリジナルデザインを構築したい方、まだ経験が浅くて学習中の方などの参考になるように、デザインの画像や注意点も入れてわかりやすく書いています。

クライアント案件や実務で炎上しないように、ひとつひとつチェックしながら構築していきましょう！

デザインを作るときに、STUDIOで構築できるデザインにする

STUDIO構築前に気を付けること、それは、

「STUDIOでちゃんと構築できるデザインカンプをつくること」です！
（ちゃんと、っていうところがポイントですよ。）

「え？」「何を言ってるの？」と思ったかもしれませんが、ちょっと待ってください。

みなさん、デザインを作っているときSTUDIOで構築するときのこと、ちゃんと考えていますか？
デザインを作ることに夢中で、実装するときのことを忘れていませんか？

ここをちゃんと考えてからデザインを作らないと、

こんなふうに途中で挫折してしまい、結局デザインを最初から作りなおす、なんてことにもなっちゃうわけです。（わたしも苦すぎる経験があるのでよくわかります…）

では、構築しやすいデザインとはどういうデザインなのか、実際のデザインカンプを見ながら説明していきます。

STUDIOでの構築が難しいデザイン

STUDIOでの構築が難しいデザイン、それはこんなデザインです。

どうですか？よくあるデザインにも見えますね。

でも初めてSTUDIOを構築するような方にはとても難しいデザインカンプになっています。

要素が多いと難しい

デザインを見てください。

たくさんの要素がありますね。

こんな風に、いろいろな種類の要素を組み合わせる構築は難しいです。

STUDIOに限らずですが、Web制作は１つ１つの要素がブロックになっています。

そのブロックが重なったり、はみ出したりするデザインは難易度が爆上がりするわけです。

「そんなこと言ったって、私はいろんなあしらいとかを使ってデザインしたいんです！！」

そうですよね。気持ちはわかります。

それでもどうにかこうにか、無理やり形にしたとしましょう。

断言しますが、「レスポンシブが絶対うまくいきません。」（ドン）

ちょっと画面幅を広げたり、縮めたりすると大きく崩れます。
そしてスマホサイズのデザインを整えようとしているうちに、心が折れます。

複雑なデザインは慣れてから少しずつチャレンジしていけばいいわけです！

まずは１サイトを完成させて、自信を付けていくことを考えましょう。

ここでは、要素が多いと難しいということを説明しました。

できるだけシンプルな構成を考えてデザインすることをオススメします。

要素を区切れるデザインにする

では、どういったデザインが実装しやすいのか、こちらが参考のデザインです。

シンプルですね。

でも、シンプル過ぎておかしい、ということもないと思います。
（逆に見やすいんじゃないかな）

ここで伝えたいのは、「ブロックごとに要素を区切れるデザインにしよう」ということです。

デザインを見ていただければわかりますが、、１つ１つの要素を線で区切って分けられますよね。
これがブロックごとに分かれている、ということです。

ブロックごとに分けていると、それぞれのブロックの大きさを決めて配分していけばいいので、構築がすごく楽です。

お互いが干渉してないからです。

レスポンシブについても、要素がはみ出していませんから、画面を広げても崩れない。

画面幅を縮めてスマホサイズにするときも、横並びのBOXを縦並びにしてあげればいいだけです。

あとはテキストや要素のサイズを調整していけば完成。

もしかしたら、「シンプル過ぎてイヤだ！」っていう方もいるかもしれませんね」。

そんなときでも、ブロックの中であしらいや素材を入れたり、見出しのデザインを工夫したりすれば、キレイで魅的なデザインを構築することはできます。

ぜひいろいろ試してみてください。

とはいえ、レスポンシブ自体はクセがあるので、それはまた別の記事にしようと考えています。

まとめ

以上、「STUDIOを構築する前に気を付けること」という内容でご説明しました。

特にデザインを始めたばかりのときって、いろんなあしらいや素材を使ってデザインしたくなりますよね。めっちゃわかります。

もちろん、STUDIO自体に慣れてくれば、今回紹介したような構築が難しいデザインも実装できるようになります。

でも初めて構築するときって、今までにない感覚の作業なので、うまくいかないと諦めてしまう人も少なくないです。

今回紹介したポイントに注意して、まずは１つサイトを構築できたら、それから２つ３つと少しずつ難しい実装にもチャレンジしながらレベルアップしていければいいんじゃないかなと思います。
（私はそうやってやってきました。）

この記事ですが、初めてSTUDIOに関して書いた記事です。
内容がためになったとか、全然意味がわからなかった、とかなんでもいいのでコメントもらえると今後の参考になります。ぜひ感想を聞かせてください。

また、STUDIOについてのこんなことが聞きたいとか、わからなくてつまずいている、教えてほしいなどあれば気軽にXのDMへメッセージしてください。

私自身も勉強になるし、みなさんの役に立てればうれしいな、と本気で思っています！

ではまた！