かとのぼのマイコード・マイライフ

プログラミング初心者とアプリの個人開発者向けのブログ。たまに銭湯

僕はデザインを勉強し、そしてCSSを書かなくなった

この記事をシェアする

得意でも苦手でも「何でも」やるのが個人開発

個人開発の一番大変なことは、何でも一人でやらなくちゃいけないことです。

「何でも」とは、プロダクトの設計、コーディング、デザイン、マーケ、営業と多岐に渡ります。

一人だけで、デザイン、プログラミング、さらには営業までやれる人って何人いるでしょうか?

少ないはずです。

ドラクエで言えば、魔法使いと商人と戦士のジョブを全部使える冒険者のようなものです。個人開発に求められるのは、それぐらい別々の能力です。

よくあるパターンが、「デザインはできるけどプログラミングは出来ない」パターン、逆に「プログラミングは出来るけどデザインが出来ない」パターンです。

苦手な分野に関しては外注している人もいます。

私の場合は「プログラミングは出来るけどデザインが出来ない」パターンです。

それで、デザインが苦手なままではマズイと思って勉強をしています。(前にもいくつか記事を書きました。)

www.katonobo.com

www.katonobo.com

 

プログラミングで言えば、「デザイン=CSS」です。それで今まで作っていたウェブサービスだとかなりの量のCSSのコードを書いていました。それはもう試行錯誤の連続で…。

 

そして最近気づいたのです。

 

現在の自分の力量だと労力に合わない!!と。

 

自分のデザインレベルだと、ある程度の見栄えから一向にレイアウトが改善しません。そしてそれはCSSフレームワークの用意してくれるレベルと同等くらいだと気づいてしまいました。悲しい…。

 

この事実に気づいてからは作戦を変更し、CSSフレームワークを利用していかにオシャレに見せるかにシフトしました。

CSSフレームワークをフルに使えば、CSSのコードの記述量は減ります。現在の私のCSSのコードは、色の指定や全体の余白の指定くらいになっています。

 

CSSフレームワークを使い倒す。それが自分のベストなのです。

つまり、CSSのデザインを勉強したら、CSSを書かなくなったのです。

 

もちろん、デザインも諦めてはいません。いつかはオシャレなサイト作りたいなぁって思ってます。キラキラさせたい。

今は歯を食いしばってCSSフレームワークを最大活用して頑張ります。

 

参考までに、私がデザインで使っているツールを紹介します。

 

CSSフレームワークはBulma

一番の肝であるCSSフレームワークはBulmaを使っています。

bulma.io

Bulmaは優秀なCSSフレームワークです。

私がBulmaを選んだ理由は、日本だと比較的に使っている人が少ないからです。日本で有名なCSSフレームワークと言えばBootstrapです。しかし、Bootstrapは利用しているサイトが多いため、どうしてもデザインが見慣れてしまっていてオリジナル感がなくなってしまいます。Bulmaならオリジナルっぽくなるので選択しました。

 

デザインの参考にはDribbble

全体のサイトデザインにはDribbbleを参考にします。

dribbble.com

Dribbbleは、トップデザイナーたちがデザインしたポートフォリオを見ることができます。デザイナーはここから仕事のオファーを受けるため、気合が入ったデザインばかりです。また、このサイトにポートフォリオを載せるには紹介が必要であるため、質の担保もされています。ここから良さそうなデザインパターンを勉強すると力になります。

 

オシャレな色はColorZilla

世の中には、オシャレな色というのがあるようです。オシャレなサイトにはオシャレな色調が使われています。そこで、そのカラーを学ぶことがオシャレサイトの第一歩です。

www.colorzilla.com

このColorZillaは、オシャレなサイトで使われているカラーコードを調べることができます。

詳しくは以前の記事をご覧ください。

www.katonobo.com

 

私は、Dribbbleで気に入ったデザインをストックし、Bulmaを使って組み立て、色はColorZillaを使ってサイトのカラーとして利用するという方法を採用しています。

この方法ならCSSを自分で書くことはほぼ無くなりますし、デザインもしっかりしたものが作れるようになります。デザインに自信がない人は参考にしてください。 

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉