デザインセンスは”ルール”で改善！
みなさんこんにちは。ProgLearn編集部です。
突然ですが、サイトのデザイン、みなさんはどうしてますか？
どんぶラッコ
えっと、適当にCSSで色つけて、適当にpadding設定しています
編集部
うわ、しんどい
そんなしんどい思いをせずとも、Webデザインをするときにはそれっぽくなるルールとそれっぽくなるツールが存在します！
今回は、そんなお役立ち情報をいくつかご紹介します！
色のパターンに迷ってます…
まずは配色パターンに迷ってしまった場合。この時は、さるわかさんの配色パターン４０選がとても参考になります！！
いろんな配色パターンがあるのはもちろんのこと、その配色を実際に適用させたプレビューが確認できるのが嬉しいですね！
空白をどれくらいにしたらいいのかわからないんです…
基本的には8の倍数で指定すると綺麗に見えます。
iPhoneの余白がこの比率で余白が設計されていたりなど、あらゆる場面で8の倍数が使われているためです。
詳しい解説はこちらのサイトにあります。
めんどくさい人は「8の倍数！」だけ覚えておきましょう。
そもそもCSSが上手く使いこなせないんです…
そんな場合は、CSSフレームワークも活用してみましょう！
有名な所としてはBootStrap, Materializeでしょうか。
個人的にオススメのフレームワークはBulmaです。
特徴としてはクラス名を文章のように記述することができる点です。
例えば、.columnクラスをモバイルでも適用したい場合は下記のように指定すればOKです。
<div class="columns is-mobile">
...
</div>ね、文章みたいでしょ？
他にもグリッドシステムが12グリッドシステムとカラム指定の２種類から選ぶことができたりなど、レイアウトの作り方にもかなり柔軟性があります。
もし希望があればBulmaについてもうちょっと詳しくご紹介しますね！
いかがだったでしょうか？
既存のサービスやフレームワークを活用することで、デザインセンスがなかったとしても、綺麗なサイトは作成することができてしまいます！
ぜひ活用してみてください！
