WEBサイトの自然な設計とは | 長期有給インターン生の日常|株式会社ガーディアン | 初期無料サブスク型のホームページで成果を上げる東京のガーディアン

こんにちは、WEBプログラマコースの池田駿です。

パーツ制作を行っていて、最近WEBサイトには「自然な」設計があり、それに則ったやり方をしなくては、と意識しています。では自然な設計方法とは何かというと、「保守・運用がしやすい設計」だと思います。例えば以下のような構図を作るとき、どうやってタグ付けしてCSSを書きますか？

普通➀➁➂をひとくくりにして外枠の中に縦に並べ、外枠どうしをflexで配置しますよね。

例えばこれを➀と④をflexで横並びにして、後から外枠をpositionで無理矢理指定すると、コードを読んだ人はどの行がどのデザインに対応しているのかわかりづらいですし、きっとレスポンシブデザインにもしにくいはずです。

また➀➁➂間やと外枠との間の余白はどう指定したらよいでしょうか。余白を作る者にはmargin,padding,gap,それからpositionでの設定、widthでの設定などいろいろとやり方がありますが、私なら外枠にpaddingをつけて、➀➁➂の間はgapで指定します。なぜかというと、余白変えたいな、と思ったときに一気に変更できるからです。これが「保守・運用がしやすい」ということだと思います。

個人でWEBサイトを作っていたらこのあたりを意識するまで時間がかかりそうですが、ガーディアンでは作ったパーツを提出するときにフィードバックがもらえて、より早くWEBのスキルをアップさせることができていると思います。

それでは！