◆当ページにはプロモーションが含まれています

プログラミング学習

センスなくてもWebデザイン!既存のルールやサービスを活用しよう!

デザインセンスは”ルール”で改善!

みなさんこんにちは。ProgLearn編集部です。

突然ですが、サイトのデザイン、みなさんはどうしてますか?

どんぶラッコ
どんぶラッコ
えっと、適当にCSSで色つけて、適当にpadding設定しています
編集部
編集部
うわ、しんどい

そんなしんどい思いをせずとも、Webデザインをするときにはそれっぽくなるルールそれっぽくなるツールが存在します!

今回は、そんなお役立ち情報をいくつかご紹介します!

色のパターンに迷ってます…

まずは配色パターンに迷ってしまった場合。この時は、さるわかさんの配色パターン40選がとても参考になります!!

いろんな配色パターンがあるのはもちろんのこと、その配色を実際に適用させたプレビューが確認できるのが嬉しいですね!

空白をどれくらいにしたらいいのかわからないんです…

基本的には8の倍数で指定すると綺麗に見えます。

iPhoneの余白がこの比率で余白が設計されていたりなど、あらゆる場面で8の倍数が使われているためです。

詳しい解説はこちらのサイトにあります。

めんどくさい人は「8の倍数!」だけ覚えておきましょう。

そもそもCSSが上手く使いこなせないんです…

そんな場合は、CSSフレームワークも活用してみましょう!

有名な所としてはBootStrap, Materializeでしょうか。

個人的にオススメのフレームワークはBulmaです。

特徴としてはクラス名を文章のように記述することができる点です。

例えば、.columnクラスをモバイルでも適用したい場合は下記のように指定すればOKです。

<div class="columns is-mobile">
  ...
</div>

ね、文章みたいでしょ?

他にもグリッドシステムが12グリッドシステムとカラム指定の2種類から選ぶことができたりなど、レイアウトの作り方にもかなり柔軟性があります。

もし希望があればBulmaについてもうちょっと詳しくご紹介しますね!


いかがだったでしょうか?

既存のサービスやフレームワークを活用することで、デザインセンスがなかったとしても、綺麗なサイトは作成することができてしまいます!

ぜひ活用してみてください!

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です