【セミナー】さくら×モリサワ webフォントの夕べにいってきました

さくらのレンタルサーバーモリサワフォントが使えるようになると耳にし、

併せて開催されたセミナーにひょこひょこ参加。

www.sakura.ad.jp

 

以下備忘録。

ーーー

#さくら×モリサワ webフォントの夕べ

 

##webフォント最新事例紹介

株式会社モリサワ エンタプライズ営業本部 菊池諒さん

 

###webフォントのメリット

・イメージの統一
・制作の手間を大幅改善
・レスポンシブ対応
・情報の検索性向上
 googleで優遇される事も。思いがけない上位表示に繋がる ←衝撃※あとで調べる

 

さくら×モリサワのwebフォント提供はwordpress経由のみ!!!!

フォントで一番見分けやすいのは「な」

 

あとは使用サイトの事例共有でした。

やっぱフォントが綺麗だとそれだけでおしゃれ~~~かっこいい~~~。

会社のコーポレートwordpress、さくらのレンサバにのせかえたし、、。

 

##アイコンフォントinさくらのVPSコントロールパネル

さくらインターネット UXデザイングループマネージャー 河原覚さん

 

###アイコンフォントのつくりかた

1.サイズを決める
2.グリッドを設定
3.描く
4.SVGにする
5.webフォントにする

 

たとえば14px、16pxが基準のサイトなら

14px 14×128=1792px
16px 16×128=2048px

 

###アイコンフォント綺麗に見せるコツ

・14の2分割などでグリッドをひく
・線の幅、カーブ始点終点のエッジなどグリッドにあわせると奇麗
・最後に複合パスにするとSVGにしたときに壊れない
・iconMoon - https://icomoon.io/
・GRUNT webfont

 

本題と違うかもしれないけど、グリッドの使い方が実践的でとても参考になた!

 

##(急遽)Wordpressでのフォント設定講座

さくらインターネット ナカジマさん
さくらサーバーコントロールパネル・webフォント利用ドメインの設定

独自ドメインの設定(wordpressプラグイン)※ドメインひとつまで

 

##フォント設定講座

さくらインターネット 谷口さん

 

###上級者向けのカスタマイズ

ウィジェットにはデフォルトで適応されない
・font-familyの指定!importantなどで魔改造するしかない
プラグインアップデートでとれちゃうかもね

 

###webフォントの表示速度について

・いらない文字を配信してる(サブセット化してない)
・配信元が海外(google)
モリサワxさくらはページ内で使ってる文字だけ
→国内IDCより配信

・一般的なwebサイト(文字数2,731)
webfont off-on
84kb-184kb
2.0sec-2.6sec
・一般的じゃないほど文字量の多いサイト(文字量40,000〜)
2.5sec-3.4sec
→画像の方が格段に重いよね

 

###webフォントの用途

・見た目のインパク
・読みやすいUD書体を使いたい
・CSS3のテキストエフェクトを使いたい

 

 

##質疑応答

###font-weightの指定は?

weightを含んだデザインになっているので、基本はfont-family名で指定。(m,lとか)

 

###wordpressでデフォルトフォント→webフォント切り替えのカクつきが嫌

wordpressの場合デフォルトフォント非表示の制御をしてるから大丈夫です

 

ーーー

 

会場でもらったフォーチュンクッキーがやたらおいしかった。ごちそうさまでした。