Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS
m eguro.css#2
2018.07.27Fri.
@um irem ix
テキストの
右端がバラバラ
テキストの
右端が揃っている
CSSで均等配置を指定
文字量が多くフォントサイズが小さいテキストに
均等配置(均等割付)を使うのがおすすめ。
iPhone5のとき
比率 2:3 比率 2:3
30px 30px
20px20px
同じ比率
ジャンプ率が
保たれない
ジャンプ率が
保たれる
30px
38.9px
25.9px
25.9px
iPhone8Plusのとき
比率 2.59:3 比率 2:3
・ジャンプ率が高い→活気がある、若々しい
・ジャンプ率が低い→知的、落ち着いている
など印象が異なってくるほか、
メリハリや訴求力にも影響を与えてしまいます。
※ジャンプ率とは本文サイズに対する見出しサイズの比率のこと。
CSSで文字のジャンプ率を保つ
タイポグラフィーや、画像のテキストが多いページ、
メインビジュアル付近などで使うのがおすすめ。
font-size:calc(フォントサイズ /基準の画面幅 *100vw);
/*
*画面幅640pxのときにフォ...
不自然に折り返して
しまっている
改行させない
ようにする
自然な改行
を作る
CSSで文字の折返しを調整
.wrap{display:block;}
.inner{display:inline-block;}
white-space:nowrap;
改行させないときはwhite-space:nowrap;を使用
突然ですが質問です…
「iPhoneは非常になめらかに動くが、
なぜあそこまでやる必要があるのか?」
と聞かれたらどう答えますか?
・スタイリング(装飾)である。
・カッコイイ洒落た演出のため。
・流行性のもの。
このように捉えているとしたら、
iPhoneの良さは理解できていません。
「指とグラフィックとの動きの連動性で
情報に直接触れているかの感触を与え、
存在を意識せずiPhoneを利用できるから」
のようにスタイリングではなく
インターフェイスデザインと考えると◎
存在を意識させない自然なアニメーションで、
ユーザーにもっと心地よい体験を届けよう!!
CSSTransitions
.btn{
background:#ccc;
transition:.1s;
}
.btn:hover{
background:#ddd;
transition:.1s;
}
このようなCSSの場合、個人的に.5s...
CSSAnimations
@keyframesload{
0% {
-webkit-transform:rotate(0deg);
-ms-transform:rotate(0deg);
tranform:rotate(0deg);
}
10...
これより複雑なアニメーションをしたいときは
JSの方が向いている場合があります。
CSSとJS併用するなどの工夫も必要です。
今回はCSSの回なので詳しく紹介しませんが、
VueとCSSアニメーションの相性が良いので、
凝ったインターフェイスデザインを作りたい場合は
Vue.jsやNuxtはとてもおすすめです  
インターフェイスデザインを
学びたい人におすすめの本
融けるデザイン
ハード×ソフト×ネット時代の新たな設計論
渡邉恵太氏(著)
サンプルのCSSは全部ブログに
掲載していますので御覧ください。
http://umiremix.com/blog/megurocss/
ご清聴ありがとうございました!!
CSSでクオリティをよりよくする
CSSでクオリティをよりよくする
CSSでクオリティをよりよくする
CSSでクオリティをよりよくする
CSSでクオリティをよりよくする
CSSでクオリティをよりよくする
Upcoming SlideShare
Loading in …5
×

CSSでクオリティをよりよくする

1,255 views

Published on

Meguro.css #2 @ oRoでLT登壇させていただきました。

Published in: Technology
  • Be the first to comment

CSSでクオリティをよりよくする

  1. 1. CSS m eguro.css#2 2018.07.27Fri. @um irem ix
  2. 2. テキストの 右端がバラバラ テキストの 右端が揃っている
  3. 3. CSSで均等配置を指定 文字量が多くフォントサイズが小さいテキストに 均等配置(均等割付)を使うのがおすすめ。
  4. 4. iPhone5のとき 比率 2:3 比率 2:3 30px 30px 20px20px 同じ比率
  5. 5. ジャンプ率が 保たれない ジャンプ率が 保たれる 30px 38.9px 25.9px 25.9px iPhone8Plusのとき 比率 2.59:3 比率 2:3
  6. 6. ・ジャンプ率が高い→活気がある、若々しい ・ジャンプ率が低い→知的、落ち着いている など印象が異なってくるほか、 メリハリや訴求力にも影響を与えてしまいます。 ※ジャンプ率とは本文サイズに対する見出しサイズの比率のこと。
  7. 7. CSSで文字のジャンプ率を保つ タイポグラフィーや、画像のテキストが多いページ、 メインビジュアル付近などで使うのがおすすめ。 font-size:calc(フォントサイズ /基準の画面幅 *100vw); /* *画面幅640pxのときにフォントサイズが30pxであれば、 *font-size:calc(30/640*100vw); * *※Android4.3以下の標準ブラウザでは、 * PC* PC版のpx指定継承もしくは別途px指定が必要。 */
  8. 8. 不自然に折り返して しまっている 改行させない ようにする 自然な改行 を作る
  9. 9. CSSで文字の折返しを調整 .wrap{display:block;} .inner{display:inline-block;} white-space:nowrap; 改行させないときはwhite-space:nowrap;を使用
  10. 10. 突然ですが質問です… 「iPhoneは非常になめらかに動くが、 なぜあそこまでやる必要があるのか?」 と聞かれたらどう答えますか?
  11. 11. ・スタイリング(装飾)である。 ・カッコイイ洒落た演出のため。 ・流行性のもの。 このように捉えているとしたら、 iPhoneの良さは理解できていません。
  12. 12. 「指とグラフィックとの動きの連動性で 情報に直接触れているかの感触を与え、 存在を意識せずiPhoneを利用できるから」 のようにスタイリングではなく インターフェイスデザインと考えると◎
  13. 13. 存在を意識させない自然なアニメーションで、 ユーザーにもっと心地よい体験を届けよう!!
  14. 14. CSSTransitions .btn{ background:#ccc; transition:.1s; } .btn:hover{ background:#ddd; transition:.1s; } このようなCSSの場合、個人的に.5s以上だと違和感を感じます。 ※easingやアニメーション箇所、世界観によって違和感を感じるポイントは様々。
  15. 15. CSSAnimations @keyframesload{ 0% { -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); tranform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); -ms-transform:rotate(360deg); tranform:rotate(360deg); } } .loading{ animation:load1slinearinfinite;/*IE9はanimation非対応 */ }
  16. 16. これより複雑なアニメーションをしたいときは JSの方が向いている場合があります。 CSSとJS併用するなどの工夫も必要です。
  17. 17. 今回はCSSの回なので詳しく紹介しませんが、 VueとCSSアニメーションの相性が良いので、 凝ったインターフェイスデザインを作りたい場合は Vue.jsやNuxtはとてもおすすめです  
  18. 18. インターフェイスデザインを 学びたい人におすすめの本 融けるデザイン ハード×ソフト×ネット時代の新たな設計論 渡邉恵太氏(著)
  19. 19. サンプルのCSSは全部ブログに 掲載していますので御覧ください。 http://umiremix.com/blog/megurocss/ ご清聴ありがとうございました!!

×