DAY24の課題は「サイトをより見やすくオシャレにするには」になります。
Bootstrapを使うと便利に早くWebサイトが作成できますが、似たようさサイトになりがちで「Bootstrap臭」という初心者臭さが出てしまうようです。そんな「Bootstrap臭」を消すためのテクニックが紹介されています。
これも実在するお店のLP制作をやりながらの学習になりますが、LP制作にそのまま直結する内容になってますね。
Bootstrap臭さを消す特ニック
Bootstrap臭を消すために参考にすべきサイトとしてまず紹介されているのがうわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。です。
このサイトによると「Bootstrap臭」が出るのは欧文をベース作成されたテンプレートに文字の構造が異なる日本語を記載することで出る違和感が原因とのことです。
この違和感を取り除くテクニックとして以下のようなことが紹介されています。
- line-heightで行間に余裕を持たせる(フォントにもよるが、文字サイズの1.5倍)
- letter-specingで字間を空けると文字がきれいにみえる（kernings.jsを使って「、」「。」などのスペースを調整するとなお良し)
- text-alignを使って文章の両端を揃える(文章全体が四角形になるようにする)
- font-familyの指定をそれぞれのOSフォントを先頭に追加すると可読性を高めつつBootstrap臭を消せる
- modalウィンドウの余白を広くする
- 背景が白の場合は文字色はデフォルトの黒ではなくブルーグレーなどの少し落ち着いたものにする
- グリッドはレスポンシブデザインを意識をして一行あたりの文字数、余白をコントロールする
フォントに関しては商用OKのフリーの日本語フォントの紹介サイトも紹介してくれています。
2019年用、日本語のフリーフォント377種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
ショーへーさんはGoogleのM+1というフォントをされています。
自分の今回作成している実在するお店のLPはバリバリの日本イメージなので、明朝体の中から選びました。
SierでWindowsを使って開発してた時はメイリオ一択でしたが、いろんなフォントがあって場面場面で使い分ける必要があるんだなと思い知らせれましたね。
良いデザインのサイトのマネをする
サイトのデザインを採点してくれるawardsが紹介されていますが、とにかく色んなサイトを見て良いと思ったものをマネして鍛えていきましょうって感じですね。
自分が良く参考にさせていただいているHPcodeでも紹介されているようなWebデザインの書籍を見て引き出しを増やすのもいいと思います。
まとめ
- Bootstrap臭を消すには行間・文字間・文字色・余白・フォントを意識する
- 日本語フォントはいっぱいあるからサイトのイメージに会うのを選ぶ
- 良いデザインをマネして鍛える
