「なんとなくいい感じに見える」Webサイトを作るためのポイントまとめ

※この記事は半分の冗談と半分の悪意で書かれています

この世には、美的センスが壊滅的なのにデザイナーがいないという理由でデザインを任されたプログラマや、ブログを開設してみたけど自分のセンスに絶望して結局テンプレしか使えない人間がいる。「なんとなくいい感じに見える」デザインがどう頑張っても作れないのだ。誰に聞いても明確なダメ出しをされず、何が正解で何が間違っているのか理解する手段がない、哀れな人種だ。

そんな迷える子デザイナ達に向けて、自己流「なんとなくいい感じに見える」サイトを作るためのコツを書いてみようと思います。対象者は、「なんとなくいい感じに見える」サイトが作れなくて、HTML,CCSの指定の仕方を理解している人です。


オシャレなフォントを使え、さすれば可読性が上がるだろう

洗練されたフォントを使えばサイトが美しく洗練されているように見えるものです。しかし自分でフリーフォントを探すのは骨の折れる作業であり、実際サイトに合わせてみると合わなかったりと手戻りが多い。読みやすいなと感じたサイトから拝借するのが効率的です。
参考になるサイト:タイポグラフィ入門 – 10のやってはいけない事 –


配色は自分で選ぶな、さすれば統一感のあるサイトが作れるだろう

特にセンスのない人間は特にカラーピッカーは使うべきではないと美的センス0マンは言っています。センスがない配色になるからです。ではどうするかというと、自分が良い色合いだな、と思うサイトの色を拝借して、自分のサイトの同じ箇所に適用するのです。これが一番早くてセンスのある配色になります。


余白を8の倍数で統一しろ、さすればバランスは保てるだろう

余白がなんか安定しなくてお悩みなら、余白だけと言わずサイト内のwidthheightpaddingmarginを8の倍数で統一してみるといいでしょう。
参考になるサイト:デザインは8の倍数でできている
超要約すると、ディスプレイとかiPhoneのUIが8の倍数でできているから、サイトの幅や余白、ブロックサイズに全て8の倍数(時々黄金比)を適用することで統一感がでて美しいデザインができます!という話。こうかはばつぐんですが、設定値が微妙な数字ばかりになるためcssが後から読みにくくなってしぬ。それが嫌な人は、作りたいサイトに似たレイアウトのサイトを見つけ、余白幅の数値を拝借しましょう。


まとめ:理想のデザインを見つけたら「右クリック+検証」

ここまで読んでいただければお判りでしょうが、センスのない人間がセンスのあるものを作るためにはセンスのあるものを真似る他ありません。もしあなたがあなたの理想に近いサイトを見つけたならば、率先してどんなCSSを使用しているか確認し、率先してそのサイトを真似ましょう。この世界には、10億を超える数のwebサイトがあります。その中の1つのサイトを真似たところで、一体誰に何を咎められましょう。また、1サイトのデザインが記号なら、一色一px違えず同じサイトを作ればそれはパクりと言われても仕方がない、しかし、記号と記号を組み合わせればそれはもう唯一無のオリジナルサイトです。どうか開き直ってください。

配色はこのサイト、ボタンのデザインはあのサイト、見出しはあのサイト…と組み合わせて君だけのサイトを作って、良いデザインライフを送りましょう!