セミナーレポート「パソナテックセミナー:広がる"日本語Web Fonts"の世界 Webデザインに"フォント"を取り入れるとは?」 #typesquare

この記事は鷹野雅弘によって執筆されました。
公開日:2012年4月13日、更新日:2012年10月15日

2012年4月12日、パソナグループ 本部 8階ホールで開催された「パソナテックセミナー:広がる"日本語Web Fonts"の世界 Webデザインに"フォント"を取り入れるとは?」に参加してきました。

モリサワ「TypeSquare」タイアップセミナーとのことで、モリサワの阪本さんによる"フォント"解説のミニセッションと、池田拓司さん(クックパッド)の2セッションで構成されていました。

池田さん(@tikeda)のセッションが非常に素晴らしく、特に、このセミナーのために作られたデモデータが充実していました。

日本語Web Fontsの遅延問題へのひとつのソリューション(読み込みを待って待ってフェード)

日本語Web Fontsを使っている場合、いったんデバイスフォントで表示された後、日本語Web Fontsに切り替わるのが不自然だという問題がありますが、池田さんのセッションでは、読み込むまで非表示にして、読み込み後、アニメーションを伴って表示させればどうだろう?という提案がされていました。

DTP Transitでは、見出し部分にTypeSquareを使っていますのが、さっそく、この効果を施してみました。

head要素内に次のJavaScriptを記述します。

<script type="text/javascript">
$(function() {
setTimeout(function(){
$("body").addClass('load');
},1000);
});
</script>

次のようにCSSを記述します。

h1.asset-name {
font-family: "Soft Gothic Bold";
opacity: 0;
-webkit-transition: all 1s ease;
-webkit-transform: translate(0, 10px);
} .load h1.asset-name {
opacity: 1;
-webkit-transform: translate(0, 0);
}

このサンプルでは、開始時に下に10ピクセル移動させ、アニメーションを伴って上方向に移動、その際に不透明度がオフになります。

追記(2012年10月15日):

半年たっての所感をまとめました。

『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』(増強改訂版)は、2011年発売の『10倍ラクするIllustrator仕事術』の改訂版。2014年に技術評論社から発売、現在5刷です。2011年版と合わせて35,000部のロングセラーとなっています。

詳しくはサポートサイトにて。

画像:『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』全都道府県縦断セミナーツアー、 47都道府県すべての県での開催が終了しました。ご参加ありがとうございました!

画像:『10倍ラクするIllustrator仕事術』改訂版

5つの「く」

画像:『10倍ラクするIllustrator仕事術』改訂版

DTP Transitのコアとなっている制作へ考え方「ムラなく、モレなく、直しに強く、手数を少なく、美しく」を5つの「く」としてまとめてみました。

オススメのスライド

お問い合わせ

メールマガジン

サイトの新着情報などを、月1回程度、メールマガジンでも配信しています(まぐまぐから配信。無料です)

オススメ記事

Illustrator

InDesign

Photoshop

その他

 

リンク

このページの上部に戻る