!important #10 -ウェブと紙-

こんにちは、01waveの冨永です。2018年12月8(土)にデジタルハリウッド STUDIO福岡で開催された「!important #10 -ウェブと紙-」に参加してきました。

今回はなんと満員の55名!
こんなに大勢の方が集まるセミナーは久しぶりに参加しました。
しかも、スタッフとしての参加です!受付だけでも緊張しました^^;

Adobe XDの基本と応用、アドビ最新事情 / 鷹野雅弘さん

株式会社スイッチ 鷹野雅弘さんによる「Adobe XDの基本と応用、アドビ最新事情」

登壇者は株式会社スイッチの鷹野雅弘(たかの・まさひろ)さん。

今回はAdobeXDについてのお話がメインです。
「AdobeXD」とは、ウェブサイトやモバイルアプリなどのデザインに特化したAdobeツールのことです。
AdobeXDの存在は知りながらも実際に使用したことがなかったので、今回お話が聴けることをとても楽しみにしていました♪

AdobeXDの特徴として、まずは何と言っても「起動が速い」とのこと!
ツールが必要最低限の「選択範囲、長方形、楕円形、線、ペン、テキスト、アートボード、ズーム」の全8種のみ。
Photoshopはツールの数だけでも約3倍ありますからね…。AdobeXDでは起動が速くなるのも納得です。

今回、衝撃だったのがAdobeXDの「リピートグリッド」と「自動アニメーション」の機能!

リピートグリッド1つ要素を作成した後にリピートグリッド機能を使うことで、グリッド内の要素が連動して編集可能になります。
余白や各要素をまとめて編集することができる大変便利な機能です。
言葉での説明より実際に見てもらった方がわかりやすいため、下記URLをご参照ください。
参照サイト:AdobeXD 繰り返しエレメントの作成
自動アニメーションアートボード間の差分をアニメーションで繋ぐ機能です。
Photoshopのように何枚もレイヤーを重ねることなく、起点と終点だけ選択し設定することで簡単にアニメーションが作成されます。
実際に車が移動するアニメーションの作り方を見せていただきました。
また、アニメーションの設定にはイージングの設定項目があり、その項目をアニメーションCSSに応用できるため、コーダーとしては非常に助かるツールだなと思いました。
詳しくは下記URLをご参照ください。
参照サイト:AdobeXD 自動アニメーションを使用してプロトタイプを作成する

また、AdobeXDで足りない機能に関しては、プラグインが用意されています。
AdobeXDのメインメニューより「プラグイン」→「プラグインを見つける」から追加することができます。
プラグインについて調べてみると、たくさんの種類がありました!
日々、新しいプラグインも追加されているため、自分の環境によってオリジナルのカスタマイズが楽しめそうです♪

他にも、Adobe最新事情のお話も聞くことができました。
「Adobe Sensei」と呼ばれるAIフレームワークが導入され、クリエイティブ制作での自動化の時代が近づいてきているそうです。
身近な例でいうとPhotoshopにある「コンテンツに応じる」(通称「コンじる」というそうです!)もその一つだそうです。

フォントおじさんのWebフォント最新事情 / 関口 浩之さん

ソフトバンク・テクノロジー株式会社 関口 浩之さんによる「フォントおじさんのWebフォント最新事情 」

登壇者はソフトバンク・テクノロジー株式会社の関口 浩之(せきぐち・ひろゆき)さん(通称:フォントおじさん)。

今までウェブサイトで表示できるフォントには限りがあり、見出しなどの飾り文字は画像で表示されることが主流でしたが、Webフォントができたことにより、HTML/CSSでどんな書体も表現できるようになったため、今まで画像で作成していたものがテキストで表示される時代になってきました!

「Webフォントを当たり前に使う時代へ」!

2018年12月、Webフォントを使っているサイトは5万サイトを越えたそうです。
それだけ、Webフォントを当たり前に使う時代が近づいてきていますね!

今回私が衝撃を受けたのは、画像を使わずにテキストで作成した時のメリットについてのお話です。

画像を使わずにテキストで作成した時のメリット

・文字の修正依頼があった時、画像の差し替えではなくテキストの一部修正だけで行える。
・店名や日時などテキストで表示されているとコピペで情報を取ることができ、二次利用に便利。
・画像のalt属性に文字を全て入れる手間がなくなる。
・画像は拡大すると文字が粗くなるが、テキストであれば拡大しても粗くならない。
・テキストで作成することにより、多言語にも対応できる。(各言語の画像を作る必要がなくなる)
・SEO的にもテキストの方が望ましい!

こんなにもメリットがあるんですね!
全てのメリットに対し、頷きながらお話を聴いていました。

Webフォントの実装方法も教えていただきました。

  1. FONTPLUSに登録します。
  2. Webフォントを使用するURLを登録すると<script>が表示されます。
  3. <script>をサイトの<head>内に読み込ませ、CSSで「font-family」を指定します。

非常に簡単で驚きました!
「えっ?!これだけでいいの?」と思いましたが、これだけでいいそうです。

また、日本語は1万文字程度あるためデータ容量の重さが心配ですが、そのサイトに必要な文字数だけ取ることで容量も抑えることができるそうです。
他にも、Webフォントで一番使用されているのは「筑紫ゴシック」のお話や、いつも見慣れている街並みの景色にある「病院の看板」や「止まれの標識」など、身近には「丸ゴシック」が使われていることも教えていただき、とても楽しい時間でした。

フォント選びでは「シーンや情感にあったフォント選び」が重要で、コンテキストに応じたフォントを選び(context(文脈)× fonts(書体)= コンじる)を心がけるといいそうです。
こちらでも「コンじる」が重要ワードになっていました(笑)

筑紫書体のこれまで、と、これから / 藤田重信さん

フォントワークス株式会社 藤田重信さんによる「筑紫書体のこれまで、と、これから」

登壇者はフォントワークス株式会社の藤田 重信(ふじた・しげのぶ)さん。

フォントの開発のお話のため、あまり多くのことを書くことができませんので断片的になってしまうことをお許しください。

「筑紫(つくし)書体」には明朝体・ゴシック体・丸ゴシックなど数多くあります。
写植時代のにじみやエッジのボケなど、文字本来の形をデザインに取り入れた素敵な味のある書体です。

墨溜まりを表現するために止めの部分を丸くしたり、逆S字、コーナーの丸さ、右上がりなど細部へのこだわりを一つ一つ丁寧に説明していただきました。
話を聞けば聞くほど説明に愛情が滲み出る素敵なお話でした。

筑紫書体の素敵なところは、和洋折衷選ばずに違和感なく馴染む書体のため、チラシや書籍、ポスター、パッケージ、テレビなど実際に使われている写真を見せていただきました。
自分が意識していないだけで身近に使われていることに驚きました。
これから身の回りのフォントを意識して見ていきたいです!

また、フォントを見分ける時は「な」の文字を見ると見分けやすいそうです!
「な」の文字を意識して、少しでもフォント感を身につけたいと思います。

「筑紫書体」の「筑紫」読み方は「ちくし」ではなく「つくし」と読みます。
福岡の古称で、九州北部全体を指す言葉で昔は「つくし」と呼ばれていたため、「筑紫(つくし)書体」と読むそうです。
なぜこの読み方なのか、ずっと気になっていたので説明を聴いてスッキリしました!

現在も新たな書体を開発中とのこと。新たな書体が増えるのが楽しみですね♪

まとめ

とても貴重なお話を聴くことができ、刺激のある1日でした。

AdobeXDの便利な「リピートグリッド」や「自動アニメーション」など、忘れないうちに実際に使ってみたいと思います。
プラグインに関しても調べてみるとたくさんの種類があったため、いろいろ試して必要なものを取り入れていきたいです!

フォントおじさんのお話については、画像ではなくテキストで作成した時のメリットを聞き、「テキスト情報はテキストで作成する」という当たり前なのに見落としていることに気づくことができました。後々の修正や二次利用のことを考え、Webフォントを利用しテキストで作成していきたいです。
また、フォント選びで悩まないためにも「コンじる」を心がけ、普段から周りの書体を意識しながらフォント感を身に付けたいと思いました。

筑紫書体の開発のお話は、なかなか聴けない貴重なお話でした。
これだけたくさんのフォントがあると、新しい書体を作るのって難しすぎるのではないかと思い、懇親会の時に訊ねてみると、10人集まって10人が紙に文字を書くと一人一人の字が異なるように、フォントも無限大に生まれることができるそうです。
今後もどんどん新たなフォントができるかと本当に楽しみです!

懇親会も盛り上がり、たいへん楽しい1日を過ごすことができました。
登壇者の方をはじめ、ご参加いただいた皆々様ありがとうございました!