blog

ブログ

「!important 10 -ウェブと紙」セミナーレポート

| カテゴリー : イベント

※この記事はi.Design Advent Calendar 2018 18日目の記事です。

こんにちは!寒さに非常に弱いデザイナーはやしです。
先日、楽天でふるさと納税をしたのですが、その数日後に「ふるさと納税超ポイントバック祭!」みたいなキャンペーンが始まったのが最近落ち込んだことです。ハイっ!

12/8(土)に、デジタルハリウッド福岡校さんで開催された「!important #10 -ウェブと紙- powered by FONTPLUS DAY」に参加してきました。

なぜ参加しようと思ったのか?もうカバー画像を見れば一目瞭然であろう…

  • CSS Nite 主宰者:鷹野雅弘さん
  • 筑紫書体の生みの親:藤田重信さん
  • フォントおじさん:関口浩之さん

ウェブと紙、さらにはフォント…こんな広義なテーマでどんなお話が聞けるのか、当日を楽しみにしておりました。そして感想は…最高すぎた。
とてつもなく濃厚な約5時間でした。

その中でも自分が特に印象的だった言葉をピックアップしてレポートしたいと思います。

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

5-7年周期で変化する仕事の環境

世の中にスマホが登場したのは2007年、2020年にはAIとロボットが一般的になりると言われています。Webの世界でも「Sketch2Code」という「手書きのワイヤーフレームをAIが自動的にHTMLでレイアウトする」サービスが誕生し、確実にその「未来」がやってきているという…常に新しい技術や情報をキャッチし、「AIと戦う」のではなく「AIをうまく活用して働き方を変えていくのが大切」だということでした。

Adobe XDも、数年後にはWeb制作の当たり前になているのかもしれないですね。
そう言えば先日、今からデザイナーを目指したいという方とお話をしました。「XDって、フォトショとかより全然軽いんだよ!」と熱弁したら「(昔を知らないので)重たかったことを知らない」と言われました。ハッとさせられました。
自分の当たり前が当たり前じゃない世代がいる…新たな時代を感じさせる瞬間でした。

なぜXDのアイコンは「角丸?」

恥ずかしながら知らなかった。。気づいていたけど調べなかった。。
スクリーンショット 2018-12-16 15.20.40.png (185.2 kB)
なんとこれ「モバイルアプリがあるツールが角丸」なんだそうです。
本当だ。最近リリースされた「Adobe Premiere Rush」もモバイルアプリあるので角丸でした。

XDの使いやすさと最新事情

XDの魅力は何と言っても「使いやすさ」。
ツールの数はなんと8しかない!対してイラストレーターは86!!学習コストは低いが高いパフォーマンスを見せてくれる、ワイヤーフレーム制作には最適なツールです。

最近では「Adobe XD Plugin APIの一般公開」が話題になっております。その中でも鷹野さんがオススメされていたのは「Photosplash」。XD内でカンプ画像を検索しハメこんでくれるというウソのようなホントのプラグインでした。

Adobeの急成長の秘訣

  • Adobeは、GoogleやAppleを凌駕する成長率で注目を集めています。
    その背景には月額制のサブスクリプションサービスが収益の安定を生んでいること・派手な機能よりもユーザーニーズを重視する姿勢に方向転換したことが背景にあると言います
  • Adobe Sensei(=AdobeのAIフレームワークの総称)も進化している。
    代表的な機能であるPhotoshopのコンテンツに応じる(=コンじる)は、初心者でもAdobe製品を使えばそれなりのデザインを作ることを助けている。これを「クリエイティブの民主化」と呼んでいる。

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

当たり前にWebフォントを使う時代がやってきた

Webの世界で、搭載フォントが少なく完全にフォントが置き去りにされてしまった20年前。そこから現在はHTMLとCSSでどんな書体もテキストで表現できる時代になりました。関口さん調べだと、日本語Webフォントを導入したWebサイトは5万を超えていると言います。そこにはどんな理由があるのでしょうか?

  • 画像ではなくテキストデータなのでalt属性を説明する必要がない
  • 文言修正時、デザイナーがわざわざ修正して画像を書き出さなくとも誰でも編集が可能
  • 全てのデバイス環境で書体が統一できる
  • 導入方法がどんどん簡単になっている
  • 限りなく画像文字を廃止して、Google 翻訳に対応できる(多言語化)

クライアントに有料フォントサービスを説明をするとき

「フォントにお金がかかるの?なんで?」
これは僕の長年の課題でした。
このようなクライアントの質問に対して、どのように説明すれば納得してもらえるのか?予算として計上してもらえるのか?その答えを聞きたい!それが僕のこセミナーに参加した目的の一つでした。そんな疑問に対して、関口さんがセッション中に衝撃の答えをいただきました。

「説明しなくていいですよ!」

  • アクセシビリティ、SEO…そんな難しい話から説明されるとクライアントは困惑する
  • 今はどこも使ってますよ!
  • 素敵なフォントで作りました!入れときました!

それぐらいの自信を持って、良いWebサイトを作るために当たり前ですよ!と伝えてくだい。そして論より証拠、導入されているサイトを見せてみましょう、とのことでした。

案件の規模にもよりますが、自分も自信を持ってWebフォントを使いましょう!と言えるような素敵なWebデザインをしていきたいと思います!

日本語Webフォント、重くない?問題

日本語Webフォントは「全部で2万字以上のフォントを読み込みに行くから、表示が遅い(重い)んじゃない?」という一般的な印象があると思います。確かに、これだけの文字だと容量は全部で約12MBはあるらしい。

しかし、FONTPLUSさんのサービスは違う!

読み込み字にJavaScriptで必要な文字だけを読み込んで表示し、この問題を解決。実例のブログ記事では、全体で400字だけ読み込み、容量は50KBだよ!ということでした。

「読み込んだ時に、一瞬システムフォントがチラッと見えるのが気になる…」ということも全くありません。

衝撃!文字詰めできるの!?

Webフォントは表示できても、文字詰めができてないフォントだと意味がない…
そんなことも解消されていました。

「プロポーション メトリクス(pm)」というタグを使えば文字詰めも自動で行ってくれるとのこと。そのタグを埋め込んでいるWebサイトを知り合いの人が使っていたので見てみると、まあーーーーー美しい文字感でした。
ま、参りました…

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

筑紫(つくし)書体の生みの親である藤田さんご本人から、筑紫書体が生まれた背景や、フォントの特徴・魅力をお話いただけるのはとても貴重な機会でした。

現在開発中の書体のお話もあり資料公開はNGでしたが、活版印刷の時代から、そしてこれからの日本語書体についてみっちり食らってきました!

<メモ>
  • 筑紫書体は「活版時代の滲み」と「写植時代のボケ」を取り入れた
  • 一般的な明朝体仮名より約2度右肩上がり、これによって「人が書いている感」を生み出している
  • さらに、横書きの際には「次の文字へ連動している」効果を生み出している

筑紫=なぜ “つくし” と読むのか?

「つくし」= 九州北部全体を指す古称だったそうです。
歴史の重みを感じて、より筑紫書体が好きになった小生であります。

お馴染みの博多駅のアレは「筑紫口(ちくしぐち)」。
フォントは筑紫(つくし)書体。

はいこれテスト出るよー!マストで覚えましょう!

当日参加できなかった方にはこちらのインタビューを…
フォントワークス株式会社:デザイナー藤田重信のこだわり

まとめ

今の自分の制作にとって最も重要なツールである「Adobe XD」のお話から、自分がこれからどう仕事をしていくのか?ということのヒントを鷹野さんに教えていただきました。

そして関口さん、藤田さんからはフォントを「使う側」と「作る側」の両面から、文字が持つ魅力や使い方を教えていただきました。

特に講師の皆さんが、「これからの未来のこと」をお話ししている瞬間は非常に印象的でした。

年末に最高のインプットの場所になりました!
主催の01waveさん、ありがとうございました!

経営課題解決のためのWebマーケティング提案、ネットショップ構築や採用サイトの企画・制作も承っております。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。