デザインがWebサイトになる瞬間。

こんにちは、N.Mです！

最近はWebデザインだけではなく、HTMLやCSSを使ったコーディングにも取り組んでいます。

Figmaで作ったデザインを実際にWebサイトとして表示していく作業です。

最初はコードを見ても、

「英語と記号がいっぱい……」

という印象でした（笑）

ですが、実際に触っていくうちに、少しずつコードの意味が分かるようになってきました。

デザイン通りにならない！

Figmaではきれいにできていたのに、実際にブラウザで表示すると、

「文字の位置が違う」
「画像が大きすぎる」
「余白が合わない」

など、思っていた通りにならないことがあります。

CSSを修正して、ブラウザを更新。

また修正して、もう一度更新。

この繰り返しです。

少し直しただけで別の場所がずれてしまうこともあり、「なんで！？」となることもあります（笑）

原因を探すのも勉強

うまく表示されないときは、どこに原因があるのかを一つずつ確認します。

最初は何を確認すればいいのかすら分かりませんでした。

ですが最近は、

「余白の指定かな？」
「横幅の設定かな？」
「ここのCSSが影響しているかも」

と、少しずつ原因を考えられるようになってきました。

自分で原因を見つけて、思い通りに表示されたときはかなり嬉しいです！

作って終わりじゃない

Webデザインを学び始めた頃は、Figmaできれいなデザインを作れたら完成だと思っていました。

でも、そのデザインを実際にWeb上で再現するところまで経験してみると、また違った難しさがあります。

同時に、自分が作ったデザインが本当に動くWebサイトになっていくのは面白いです。

まだ分からないコードもたくさんありますが、一つずつ理解できることを増やしていきたいと思います。

いつかデザインからコーディングまで、自信を持って制作できるようになるのが目標です！