LoginSignup
83

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-07-31

おしゃれな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 Pゴシック", "MS PGothic", sans-serif;
Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;

セリフ系

"Cinzel",serif,"游明朝体","ヒラギノ明朝 Pro W3",HiraMinProN-W3,"Hiragino Mincho Pro","MS P明朝","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);

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
83