Webフォントの導入

blogのフォントを変更しました。

スマートフォンの表示が良くなかった(モトヤが好みでなかった)ので、Webフォントを導入しました。Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Accessで提供されているNoto Sansを使っています。

@font-faceの記述の際に、フォントファミリー「Coluli」を定義し、ローカルフォントとして游ゴシックを組み合わせました。変更後は、

OSX:游ゴシック体(ミディアムとボールド)
Windows10:游ゴシック(ミディアムとボールド)
Windows8.1:游ゴシック(レギュラーとボールド) ◎ミディアムが入っていないため。
Windows7:メイリオ ◎游ゴシックが入っていないため。
スマートフォン:Noto Sans(デミライトとボールド)

で表示されていると思います。

InDesignでWebDesign

備忘録ですらない完全な独り言。Adobe InDesign CCがWeb(グラフィック)デザインツールとして最適なのではないかという仮説。

ひとりQ&A

Q. え? InDesign? あれは印刷物を作るアプリでは? なんでまたInDesignなんかでWebデザインを?
A. とにかく速いから。軽いからです。速さは正義。軽さは正義。

Q. どのくらい速い/軽いアプリなの?
A. Adobe XD(Adobe Experience Design CC)より速いと思います。
◎「ヌルサク感」はXDの方がよいので、体感的にはXDの方が速く感じるかも。

Q. Adobe XDなんて使ったことない。もっと一般的なアプリで比較して。
A. Photoshopよりも当然速いです。Illustratorよりも速いです(Illustratorはそもそも激重アプリ。使う人の気が知れない)。Sketchは使い込んだ事がないので保留ですが、バージョンアップを繰り返し重くなってしまったと聞いています。Fireworksも作業効率の良いアプリでしたが、総合的にはInDesignに負けます。

Q. 信用できない。
A. 一定数の文字列や画像を配置して、いろいろ操作してみてください。ファイルオープンの時間や保存にかかる時間、レインボーサークルの発生する頻度を比較すればわかります。

Q. 多少速いだけでは意味ないのでは?
A. 速さは正義。InDesignは「ページ」の概念があるアプリ。「アートボード」が数個あった程度で能率は上がりません。1〜数枚のデザインを作成するためのアプリと数十枚以上のデザインを同時に進めるためのアプリの違いです。

Q. 速いだけがメリットのアプリなの?
A. 商業印刷物製作のデファクトなめるな。圧倒的なメリットとなる特徴が他にも複数あります。もちろんデメリットもあります。

Q. 具体的なメリットとデメリットを教えて。
A. 独り言なんで詳細に書く根気がでません。とりあえず箇条書きで放置することとします。


メリット

  • 強力なテキスト制御による(日本語含む)デバイステキストのシミュレーション。
  • 強力なテキスト制御による文字画像の並行製作。
  • 「段落スタイル」によるcssライクで効率的なテキスト操作。
  • 「段落スタイル」によるcssライクなパディング処理。エレメント処理。
  • 「テキストフレーム」を利用したcssライクなパディング処理。エレメント処理。
  • 「文字スタイル」によるcssライクなインライン修飾。
  • 「段落スタイル」の継承による合理的な要素管理。
  • 環境設定とグリッド設定による厳密なpixelベースの作業。
  • 「マージン・段組」を利用した、合理的なグリッドシステムの適用。
  • 小数点以下の数値入力による、高解像度デバイスへの対応。
  • 「ページ」「マスターページ」の概念による、ページ間のグリッド・デザイン・共通要素などの連関維持。
  • 「フレーム」を使ったクリッピングマスク処理いらず、スマートオブジェクト化いらずの画像割り付けと作業ファイルの軽量化。
  • 読み込みファイル形式の充実と何も考えずに下処理いらずで放り込めるリンク管理。
  • 割り付けたオブジェクトは全て「リンク」として外部ファイルに。ファイル容量の軽減。
  • 「Links」フォルダ内の「暫定」画像を「本番」画像で上書けば、デザインファイルもアップデート。トリミング位置も維持。
  • 読み込み・書き出し時のシンプルで容易なカラープロファイル管理。
  • 背景透過png書き出しによる、基本的な画像書き出し(2x含む)対応。
  • 余白も制御可能なパーツ単位でのjpg書き出し・png書き出し。
  • PDF出力・紙出力との親和性。デザイン完成時にプレゼン資料も併せて完成。
  • 高品質なワイヤーフレーム作成ツールとしての活用。以降のデザイン開発へのシームレスな移行。

デメリット

  • 「pixel by pixel」表示の概念がない。作業中は脳内補正が必要。
  • 作業中の表示がそれなりに粗い(「書き出し」後の画像ファイルは完璧)。
  • ブラウザプレビュー、外部デバイスプレビューなど、完成イメージを何度も素早くチェックする機能がない。
  • Photoshopの「アセット」のような、実装用画像切り出しの効率化を助ける機能はない。
  • 切り出し画像に事前にファイル名を付与しておくことができない(書き出しごとに1枚ずつ逐次命名)。
  • 書き出したpngファイルにカラープロファイルが付かない(jpgには付く)。
  • jpg書き出し時に細かな圧縮率の調整ができない。
  • 「透明」カラーの操作が貧弱。
  • (バイキュービック/ニアレストネイバーなど)画像拡大縮小の方法は選べない。拡大縮小時のシャープネス追加も行えない。
  • (今となってはもう不要だが)アンリエイリアス無しのデバイス文字はシミュレーション・作成不可。
  • 文字画像書き出し時のフォントのレンダリング方法(「クリスプ」「滑らか」など)は選べない。

Windowsタブレット

DSCN0850

2015年の初頭にWindowsタブレット「インテル入ってるタブレット2(Si02BF)」を購入しました。ちょろっと使ってみて、その後ほとんど使わなくなり、先日処分しました。

タブレットとして使ってみて

Windowsタブレットはそもそも「タブレット」ではないような気が。タッチ操作だけではまともに使えませんでした。出来の良いアプリを見つけられなかっただけかもしれませんが、使うにはキーボードが必須のように感じます。

ただ、これまでも外付けのキーボードをスマホやタブレットで試してみましたが、使い続けられたことがありません。キーボードをメインで使いつつ時々画面を触る、といった操作の流れはどう考えても使いづらい。キーボードありで使うなら、ノートパソコンのほうがずっとよいです。
でもノートパソコンは既に持っていました。

デスクトップパソコンとして

hdmi出力端子があるので外付けの大型ディスプレイに接続できます。Bluetoothのマウスやキーボードとセットでファンレス・超小型のデスクトップパソコンとして使えるような気がしていました(実際使えると思います)。
でもデスクトップパソコンは既に持っていました。

家庭用サーバーとして

タブレットに充電しながら使えるUSBハブを買って、イーサネットアダプターやHDDを繋いで、省電力・無停電電源装置付きの家庭用サーバーにも使いまわせるような準備をしてみました。
でも自宅用のファイルサーバーは既に持っていました。

我ながら何をやっているのだろうかと思います。こんな買い物ばかりしています。

Nokia Lumia 520

P1000051

MVNOにMNPした時にNokiaのLumia 520も買いました。新興国向けのローエンドのWindows Phoneです。Amazonで13,000円でした。

RAMは512MB、フロントカメラ無し、デュアルコア1GHz、画面は非レチナの480×800ドット。LTE非対応です。

この手のミニマムな仕様の機械は大好きです。Android Oneとか、Facebook Liteとか、「新興国向け」を大義名分にした、ロースペック/低価格の禁欲的なプロダクツにはとても惹かれます。これもその一つです。

スペック的にはiPhone3以上、iPhone4未満くらいの貧弱なモデルですが、OSは最新のWindows Phone 8.1です。まだ全然切り捨てられていません。

Microsoft謹製の同期ソフトがあるのでMac版iTunesとの同期も普通にできます。残念ながら曲のレート(★)の同期はできないようです。

きびきびと動きます、とは言えません。全体的にかなり緩慢な動きです。ですが、ユーザーの操作に対する反応が適切なので「ん? 返事しろよ」的な不快さはありません。

基本的にはとてもよい印象ですが、メモ用途のためのDropbox上のテキストファイルと自動同期するテキストエディタ(iOSのTextforce for Dropboxのようなアプリ)をみつけられなかったので、ちょっと使い続けられません。少しの期間しか使っていませんが、しまい込む事になります。


余談|OSのUIについてちょっと

ホーム画面のTile designばかりが喧伝されていますが、Modern UIは、下位階層の方が面白いです。タイポグラフィの極端な抑揚だけで構成されたインターフェイスはとても新鮮です。面分割も罫分割も使われていません。全て余白だけで分割。ボタンの角丸も無し。日本語環境ではメニューもどデカい日本語。潔いです。画面の効率的な利用はあまり考慮されていないので、スワイプ/スクロールがたくさん発生しますが、使っていて納得感はあります。疑似立体表現も使わない表現縛りなど、UI的にはなかなか厳しいとは思いますが、他のOSを真似しない態度はとても好みです。

欧文はSegoe、日本語は游ゴシックのはずですが、漢字に簡体フォントの「Yahei」が頻出します。調べてみたところ、OSの問題ではなく個々のアプリの不備のようです。多言語対応を適切に設定していないアプリが多数あるようです。

細野晴臣の「Close to You」。

tumblrを閲覧していたらカーペンターズ(バート・バカラック)の「Close to You」のカバー曲(をYouTubeにアップしたもの)がrblgされてきました。

これです。

とても良い感じです。
調べてみたところ、Jim O’Rourkeのアルバム『All kinds of People ~love Burt Bacharach~』に収録されている曲のようです(※1)。入手することにしました。

AmazoniTunesストアにはありましたが、320kbps/DRMフリーのMP3で提供しているXbox Music(※2)には登録されていません。急いでいるわけではないので結局GEOの宅配レンタルにしました(※3)。

旧作なので50円(※4)でした。50円? 50円……。10曲入りのアルバムなので、1曲あたり5円……。

う〜ん。音楽配信ビジネス、デフレ、著作権収入……。いろんなことを考えてしまいます。

結論は特にありません。


※1. 細野晴臣のアルバム『Heavenly Music』に収録されているバージョンとは違います。
※2. AmazonやiTunes Storeは256kbpsです。
※3. レンタルしたCDは48.000kHz(44.100kHzでなく)/320kbpsのMP3形式で取り込むことにしています。
※4. 送料は別ですが……。

外付けHDDをExFATにしました。

2014年の年末に、自宅の外付けHDDのファイルフォーマットをExFAT形式にしました。MacintoshとWindows双方で標準対応する形式です。
テラ単位のHDDが複数台あったので、玉突きコピーで数日かかってしまいました。

Paragon NTFS for Macなどを使っていた時期もありましたが、KEXT(kernel extension)を色々加えるのはどうも気持ちが良くないので使うのを止めました。

今のところ意図通りに役立っており特に困ってはいませんが、検索するとExFATにまつわるトラブル話もいくつか見かけます。一抹の不安は残りますが、Macintosh標準のHFS+も必ずしも完璧なファイルフォーマットというわけではないようなのであまり気にしないこととします。

ちなみにExFAT形式はAndroidやlinuxには標準で対応していないのですね。
追加でドライバをインストールする必要があるようです。フォーマットし直した後で気付きました。
Androidの場合、root権限が必要なのでそれなりにハードルは高いです。

源ノ角ゴシックとNoto Sansをcssで指定

源ノ角ゴシック(Source Han Sans)とNoto Sans内のメタデータを調べたので、cssのfont-familyとしてあてがってみました。

源ノ角ゴシックとNoto Sansをcssで指定してみるテスト

◎確認するにはあらかじめフォントをインストールしておく必要があります。

Preferred Family(日・英の2つ)だけが「ファミリー」でフォントを命名していますが、それ以外はウェイト込みの名称となります。源ノ角ゴシックは「Normal」、Noto Sansは「Regular」を使用しました。

異なるnameIDに対して同じ命名(文字列)をしている箇所も多いので、実際には数個(源ノ角ゴシック:5個)で済みました。Noto Sansは言語別の命名をしていないのでさらに少なく(Noto Sans:3個)なります。

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • NotoSansJp-Regular(Postscript name)

複数のOS、ブラウザで表示を確認してみていますが対応はバラバラです。昔からちっとも変わっていません。ざっくり調べてみたところ、

Macintosh Chrome:

  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • NotoSansJp-Regular(Postscript name)

Macintosh Safari:

  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • NotoSansJp-Regular(Postscript name)

Macintosh Firefox:

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • NotoSansJp-Regular(Postscript name)

Windows Crome:

  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • NotoSansJp-Regular(Postscript name)

Windows IE11:

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • Noto Sans Japanese(Windows用・Preferred Family)

Windows Firefox:

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)

の記述が有効でした。ただし、「Preferred Family」が機能してもその際に表示されるウェイトはまちまちです。

ウェイト含めて意図通り表示させようとするとさらにブラウザごとの表示が変わります。

源ノ角ゴシックExtraLightとNoto Sans Thinをcssで指定してみるテスト

実際に使う際には、複数の名称を重ねる必要があります。また、ユーザーが源ノ角ゴシック/Noto Sansのどちらをインストールしているかはわからないので、両方とも記述する必要があります。エラーの発生する(が反応してしまう)指定を先に記述すると、意図する表示が実現しません。

さらに、Bold(<strong>タグ)の再定義も必要だと思います。