!important #10 -ウェブと紙-

!important #10 -ウェブと紙- powered by FONTPLUS DAY

2018/12/8[土] 福岡開催 / !important #10 -ウェブと紙- powered by FONTPLUS DAY

博多のデジタルハリウッド内で開催された上記のセミナーを聞きに行きました。
ブログに慣れていないので箇条書きにて学んだこと、聞いたことを簡単にまとめてみました。
お話を聞かせていただきましてありがとうございました。
（ところどころ記憶違いがあるかもしれません…ご了承ください。）

セッション1：Adobe XDの基本と応用、アドビ最新事情

鷹野雅弘様

●Adobe製品について
Adobeのアイコンの角丸タイプはデスクトップアプリだけでなく、モバイルアプリも存在するという意味です。
新しいphotoshopはipad用が出るので角丸のアイコンになります。

●デザインの傾向／fluid interfaces
ビッグスクリーンのためUIを下に寄せているのが最近の傾向。

●xdの使い方概要
ワイヤーフレーム作成ツールとして
wires jp
UIキット　など便利なキットがあり、利用も可能。
https://blogs.adobe.com/japan/web-adobe-xd-ui-kit-wires-jp/
https://www.behance.net/gallery/67284971/Wires-jp

●xdの便利な機能
○アセット
○リピートグリッド
○連番ファイルの自動流し込み
○ファイル読み込み
＊ccライブラリを介して読み込み
＊psd、aiファイルも読み込み可能
○プロトタイプで画面遷移のシミュレーションが可能
○画面遷移いろいろ（トランジション、オーバーレイなど）
○プレビュー
＊デスクトッププレビュー
＊デバイスプレビュー（macは対応／WindowsではiOS、androidのテストはできない）

○共有機能
＊プロトタイプ共有
＊デザインスペック共有（画像サイズなどのコーディング情報の共有）

○書き出し形式は色々（gifは書き出しできない）
○マイクロインタラクション（自動アニメ機能など）の追加。プロパティパネルでアニメの動きの調整ができる。
○レスポンシブのリサイズ機能
○アドオン（プラグイン、UIキット）
例　PhotoSplash　画像を使えるプラグイン

●adobeの製品はエンタープライズ系が伸びている
ユーザーニーズにフォーカスしており、User Voiceの投票が多いと開発の優先順位が上がる。

●Adobe Sensei 人工知能　AIフレームワーク
コンテンツに応じる（Contents aware）
例　photoshop　画像補正で便利な機能として搭載（切り抜きなど）

【感想】
セミナーを聞きながら、新しいマイクロインタラクション機能の部分を触ってみました。
アニメーション作成ツールとしても、楽しめそうです。
コーダーとの連携作業フローをもっと知りたいと思いました。

セッション2：フォントおじさんのWebフォント最新事情

関口 浩之様

webフォントのお話

●W3C Recommendation(W3C勧告)　を読んでみましょう。
日本語翻訳ページ(非公式)
CSS Fonts Module Level 3
https://triple-underscore.github.io/css-fonts-ja.html

●ウェブフォントを使おう。
企業や自治体など様々なサイトの事例をご紹介いただきました。
おそらく5万以上のサイトで利用されているのではとのこと。
縦書き、斜めなど、複雑なレイアウトにも対応できます。
画像にAltタグを書くのはアクセシビリティ的に良くない。また、画像だと高解像度の表示に耐えられないので企業イメージ的にもマイナス。

●ウェブフォントサービスについて
fontplus
https://webfont.fontplus.jp/service
fontplus は実装がとても簡単。
fontplusのサイトから書き出されたコードを利用したいサイトのソースにコピー＆ペーストしてCSSでフォント指定するのみ。
フォントは使用文字のみ読み込んで配信しているので軽いそうです。
月額ビューによりますが、1080円から利用可能。
fontplusは配信側でプロポーショナルメトリクスができます。フォント指定をしているcssのセレクタ内で{pm}を記載するだけ。
windowsでフォントが読みにくくなる問題はなし（フォントの横線は飛ばないので大丈夫とのこと）。
なお、一番早く読み込ませたい見出しは、cssにフォントを直書きという裏技もあるそうです。

サイトで使える文字が色々試せます。
https://webfont.fontplus.jp

●絶対フォント感よりもフォントソムリエのようにフォントを使って味わおう。

【感想】
実装の方法をコンパクトに教えていただき、私でも気軽に使えそうだと思いました。詰め組もできていいですね。
電子書籍のEPUBのリフロー型とウェブフォントが連携できるのか知りたいなと思いました。

セッション3：筑紫書体のこれまで、と、これから

藤田重信様

●筑紫明朝の特徴
活版のにじみ、写植のボケを取り入れている。漢字を仮名に近づけ、柔らかい印象にしているとのこと。
仮名のデザインは漢字の10倍ぐらい気を使うそうです。
右払いは右横に綺麗に抜ける形となっています。
S字、逆S字のライン、墨だまりを意識してデザインしている。力強い外反りが特徴。
右上がりにすると、字はカッコよくなる。従来の書体よりも右に１〜２度上がった角度をつけると手の動きが強めに感じられる。
（筆者補足：筆者も最近書道教室に通っておりますが、楷書を書く時に右上がりにするように注意されるので、なるほど！と思いました。）
横組みにすると右方向へさざ波のような運動が働く。これが読みやすさに繋がる。
本文と見出しの両方で使われている。バリエーションの多いシリーズである。
見出しに耐える明朝体として使われる理由の一つは、先端が丸いため。先端がぶつ切りでない。
（戸田ツトム氏の言葉を要約すると）「金属活字が優れていると感じる。筑紫明朝にはその遺伝子が入っている。」

●筑紫Q明朝
今までになかった明朝体
そもそも本文用としてデザインをしていない。より異端な書体。

●筑紫ゴシック
今までになかったゴシック。ふところが小さい。

●楷書体のように懐の小さい明朝体が過去140年開発されなかったのはなぜ？
→明治期の明朝体の活字仮名は長方形もある。時代が新しくなっていくにつれ、教科書体のような正方形になっていく。少ないページに情報を詰め込んでいたので、正方形いっぱいに文字を配置し大きく見せる必要があったのかも？。写植の時はデザインのバリエーション自体を広げる方向に向かっていたため、明朝体そのもののバリエーションが増えなかったのかもしれない。
楷書などの文字固有の形は三角形。しかし活字は正方形。筑紫では三角形を目指して、台形に。

●筑紫Bヴィンテージ明朝
福沢諭吉の「啓蒙手習之文」を参考に「ふ」の翻刻を元に作成。今田欣一氏の「ふみて」とは違う翻刻。翻刻する人が変わると大きく変わる。

●秀英3号、游築36ポとは違う形で、オリジナルなアイデアで復刻させたい。異端の所以。

●筑紫オールド明朝
石井明朝オールド　重厚感　安定感　高い商品が似合うイメージ。
スーシャは新しい。でも若者向け。
18歳のとき、本欄明朝は近代的でクリーンで美しく未来感を感じた。
30歳のとき、石井明朝オールドの良さがわかる。
2008年筑紫明朝オールドを作成。長年の夢だったそうです。
石井オールド明朝は「ありがとうございます」の言葉を丁寧で美しい音声で発するように感じる文字。
筑紫オールド明朝はその流れを受け継ぐ。
Aヴィンテージ明朝はさらに上品な音を感じるよう意識されたとのこと。

筑紫オールド明朝 ABCをリリースして、どんどん使われている。
使う人は作る側の発想を超えた使い方をしている。和洋折衷の商品パッケージなどにも似合っている。

筑紫オールド明朝を男女関係に例えるとしたら。
筑紫A　華麗
筑紫B　危険
筑紫C　妖艶

●筑紫丸ゴシック
色々なデザイナーから石井丸ゴシックのような丸ゴシックが欲しいと要望があり、作成した。
Aは金属活字の五号丸ゴチックを再現。石井丸ゴシックも金属活字を踏襲している。
スーラよりも懐が狭い。
より筆書き調のB丸ゴシックも作成。欧文も専用に作成。

●アンティーク丸ゴシックを開発中。
アンティーク丸ゴシックは「日」の上部を小さくすぼめている。錯視のレベルをきつめに調整している。
先端も真円にしている。

●フーツラにあうAMゴシックを開発中。

●筑紫シリーズについて
装丁における筑紫書体の使用割合が年々増えている。
テレビ、ゲームへの使用も増えている。
筑紫は伝統の「発展」を目指している。

【感想】
筑紫書体の全体の俯瞰図を見ることができ、より理解が深まりました。
本文には美男子、美女が並んでいるようにしたい、というお話が印象的でした。
筑紫書体のシリーズはタイトル周りに使いやすく華やかなイメージがあるのには、そういう理由もあるのかなと面白かったです。

なお、どの書体が好きですか？というアンケートがありましたが
筆者としてはどの文字も良いと思いました。どちらかというとサンプル文の「草枕」にあっているかどうかで判断しました。
筑紫は華やかなイメージがあるので、「草枕」のサンプルで好き嫌いを答えるのは難しいのかもしれないな、と思いました。

パネルディスカッション

●藤田さんのお話
パスで文字を作成するときは極点を気にせず作成した方が良い動きがでる。極点はソフトで自動生成でつける。

●会場からの質問「Nつきフォントは使うべき？」
→Nつきフォントについては進行形の話であり、使うべきかどうかはっきり言えない。

【感想】
Nつきフォントについては、電子書籍の話とどのように連携するのかとても気になりました。