おしゃれなWebをつくるには。

おしゃれなWebデザインをつくるTipsを、備忘録としてまとめます。

#フォント

###Font family
日本語でも、google fontを使う。
https://developers.google.com/fonts/
https://fonts.google.com/

サンセリフ系

"Josefin Sans",sans-serif;
'Roboto', sans-serif, 'Noto Sans Japanese', sans-serif, 'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

セリフ系

"Cinzel",serif,"游明朝体","ヒラギノ明朝 Pro W3",HiraMinProN-W3,"Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;

###font-smooth
アンチエイリアスをかける。

    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;

※モダンブラウザ：Chrome, Firefox, Safari対応。IE非対応。
font-smooth - CSS | MDN

###font-weight

font-weight: 200;

###letter-spacing
少しでもレタースペースをとるとオシャレ。

letter-spacing: 0.1em;

###line-height

line-height: 1.5em; 

###シャドウ

text-shadow: 1px 1px 3px rgba(0,0,0,0.6);

###color
黒ではない色を使うとおしゃれ。
例：color: #323232;

#その他
Box要素には、
shadowをかけるとおしゃれ。

border: #EBEBEB 1px solid;
box-shadow: 3px 3px 0 rgba(8, 1, 2, 0.03);

あとは、写真、マイクロインタラクションを工夫するなど。

メモ：
写真をぼかす/半透明フィルターかけて背景にする。
ボックスの右・左上に三角や、タイトルをいれる。

タイトル：日本語・記号・英語でサンドイッチするとおしゃれ。