typ stroke


タイポグラフィー stroke

まず、今回のデザインの特徴ですが、太字の文字が一列、細い文字が2列で表示されます。
カードでもパッケージでも用いられる一般的な構成で用途はたくさんあるかと思います。
また、細字の2行目は長い文章で折り返しをしていますので注意してください。

それからtyp strokeという名前についてですが、特にデザインとは関係ありません。
あるとすれば、タイポグラフィーの専門用語を借りて名前付けをしているくらいです。
フォントの並びなど、デザインの作りや構成に名前はないので、当初はコンテンツの名前付けに悩んでいました。

そのため、何か別のものから名前をとる形で、最終的には、タイポグラフィーの専門用語を用いることに落ち着きました。
strokeはフォントの形の種類を表すのですが、これらの種類は比較的多く、またかっこいい英単語ばかりなので気に入っています。
他に、Stem,Swash,Armなどがあります。デザインするためのテキストとして最適ですよね。

SVG画像について

これまで、ユーザーの方が使っていただく上で理解しやすいようにと、ACTIVE-FRAMEの画像形式についてあまり具体的なことは述べてきていませんでした。
率直にいうと、SVG画像という形式で記述しています。
ここでは、SVGのメリット、デメリットを知ってもらおうと思います。

SVG画像が何かについてはこちらが参考になります。
https://helpx.adobe.com/jp/illustrator/using/svg.html
上記のサイトはSVG画像の利点が詳細に書かれています。
サイトの内容についてまとめると以下のようになります。

  • Web 用のビットマップ画像形式(GIF、JPEG、WBMP、PNG)は、ピクセルによって画像を描画するが、これらの形式のファイルはサイズが大きく1 つの解像度にしか対応できないうえ、Web 上でネットワークに負荷をかける傾向がある。
  • しかし、SVG は、シェイプ、パス、テキスト、フィルター効果を使用して画像を描画するベクター形式なので、SVG 形式のファイルはサイズが小さく高品質なグラフィックを得ることができる。
  • ユーザーは、鮮明さ、明瞭さ、ディテールを犠牲にすることなく、画面上で SVG 画像を拡大表示することができる。

SVGを利用するメリットはたくさんあることがわかるかと思います。
次のセクションでは、SVGのデメリットについて書いていきます。

SVGのデメリット

ACTIVE-FRAMEはSVGの技術を利用することで先ほどの多くの恩恵を得ることができたわけですが、もちろんSVGはメリットばかりではありません。
その点を理解した上で、皆さんにはAVTIVE-FRAMEを利用していただきたいです。
本題ですが、SVGのデメリットは一つだけです。(だと僕は思っています。)

それは、画像の表示がブラウザに依存するということです。
-11/5追記
コードを見直して、基本的に、SVG標準の要素で記述するようにしました。
これにより、ブラウザごとの差異の問題を大幅に解消し、IEにも対応いたしました。

↓過去の文章です。

つまり、Chrome,Safari,Firefoxなどそれぞれのブラウザでは、多少なりとも色合いや形が変わってくる、ということになります。
それらの変化がなるべくないように、気をつけてコードは書いているつもりですが、必ずいくらかの差異は生じますので、その点はご了承ください。

また、一番の問題はInternet Explorerです。
こちらは古いバージョンの場合、最悪表示さえできない恐れがあります。
IEでは、バージョンが上がるにつれて、対応していくようになってきてはいますが、依然として他のブラウザよりも対応は遅れている状況です。

ACTIVE-FRAMEを使用する際には、IEでの表示は想定しているデザインのものより差異が大きくなる、と頭に入れておいていただくと助かります。