エンジニアの私でもサイトをデザインする時に最低限必要だったツールやサービス
あっぱれなほど私にはセンスがありません。
欠けているというよりは、もとよりそこにないって感じ。
ただ、悲しいことにサイトを作ったら、逃げて通れないのがデザイン...
pythonメインで使う私からすると、ここが本当に辛い。
そんな私でもデザイン頑張ってやって、そんな中でこれは必要！となったものは、きっと私のようにセンスない系の他のエンジニアがサイトをデザインするときは必要になるかと思います。
デザイナーのようにオシャレ度を高めるための高尚なツールというよりかは、本当に最低限必要だったツールやサービスをつらつら書いていきます。
ちなみに作ったのはこんなサイト。
参考サイトを見つけるウェブギャラリー
オシャレサイトが見れるウェブギャラリーです。
センスのない私は、自分のセンスで作るとまるで90年代に作られたかのようなサイトを素で作ってしまいます。
なので一切、自分のセンスは信じず、このウェブギャラリーにのっているサイトを徹底的にパクります。
ウェブの構成や色が似ているサイトを見つけてきて、ずーーーーーっとそれを見て、パクります。
センスのある人は、そこから自分の味を出していくそうですが、私は自分の味を出すと負けるので、徹底的にパクります。
きっとウェブのデザインをするときに一番心がけているのは、これですね。自分の味を出さない、パクる。
イメージカラーからもサイトを選べるので、自分が使っているメインカラーに合わせて参考サイトを見つけることができます。
かなり重宝しています。
気に入ったサイトに使われている色のカラーコードがわかるツール
FireFoxでも他のブラウザでも何かしら似たものはあるはずです。
基本的には、サイトの検証でCSS見たらいいですが、こっちほうが楽ですし、画像とかの色も拾えるので重宝しています。
自分の使いたい色と相性の良い色を見つけれるサービス
色には組み合わせがあるそうで、どの色とどの色を組み合わせるとオシャレになるかは決まっているそうな！
例えば、紫と緑は相性が良くて組み合わせるとオシャレになるそう！
たしかにエヴァンゲリオンとかそうっぽい。
正直、センスない私の理解の範疇を超えているので、自分で配色するのは自殺行為です。
この色を使いたいけど、もう一つ色を選ぶとすると何色が良いんだろうか、みたいな状況は、このサイトを使います。
配色のサービスはかなりあるんですが、自分が色をカラーコードで指定できるのはあまりない印象です。
なので、重宝しています。
ダサいサイトでもオシャレな画像使えば、ちょっと誤魔化せる説
freepikの画像を使っています、ということを明記すればフリーで使える画像サイト。
めっちゃオシャレな画像多い。
ここの画像使ったらダサいサイトでも、ちょっと誤魔化せる。
重宝する。
ダサいサイトでもオシャレなフォント使えば、ちょっと誤魔化せる説
Arial（←デフォルトのやつ）はセンスのない私でもダサいフォント認定をしています。
アルファベットだと、そこまで気にならないですが、日本語のデフォルトだと本当にやめてほしいくらいダサいですね。
せっかく頑張ってデザインしても、サイト中に散りばめるフォントがダサいと、頑張った意味半減です。
ブラウザに指定したら使えるフォントは、日本語勢は「游ゴシック」以外は、壊滅していると思っています。
しかも、なぜか「游ゴシック」はスマホからだと指定できないという謎の現象がおきます。
そのため、どうあっても、フォントをダウンロードするなりして、デフォルトのフォントからは脱する必要があるのです。
そこで見つけたのが、typesquareです。
1万アクセスまでなら、無料でオシャレなフォントが使えます。（モリサワのフォントもある！）
野良サービスには十分なキャパです。（1日300アクセスくらいまでなら耐えれる）
重宝しています。
Web開発フレームワークの王道「BootStrap4」
書くか迷うレベルでしたが...
今回のサービス開発で1年ぶりくらいにhtml、cssを書くことになったのですが、前にbootstrapを使った時はバージョン3でした。
4に進化していました。
また学習するの面倒だしbootstrap3を使おうかなぁと思ったのですが、保守な姿勢の自分に嫌悪して、bootstrap4を使いました。
これが大正解。めちゃいい。
bootstrap3派は、すぐに乗り換えるべき。
同じbootstrapなので言うほど変わっていませんが、個人的にはマージンやパディングの設定がしやすくなりました。
とっても重宝しています。
まとめ
まだまだサイトはオシャレ追求中です。
オシャレなサイトを見てから、自分の作ったものを見るとどうしても見劣りするので、ちょっとづつ見劣りする部分を修正していく所存です。
以上、終わり！
