東京」に参加したレビューWeb制作WordPressデザインフォントシェアTweet2016年6月、日本最大のフォントメーカーであるモリサワとさくらインターネットが協業し、「さくらのレンタルサーバ」上のWordpressサイトに、モリサワが提供しているWebフォントサービス「TypeSquare」のうち30種類の書体が月間2.5万PVまで無料で使用できるようになりました。東京」が開催されました。今回はそのイベントに参加たレビューと、今後のWebフォントについての考察を紹介したいと思います。東京」は2016年秋にも開催予定だそうです。本記事では細かな内容までは紹介しないので、興味のある方は申し込んでみてはいかがでしょうか。エンタプライズ営業部の菊池さんより、WebフォントによってWebサイトにどのような恩恵があるのかが紹介されました。デザイン全般において重要な役割のあるフォントをWebサイト上でより活用できるようになることで、VIやCIを強固にできるということ。これまで画像で表現していたテキストをフォントデータで管理することで、その構築やメンテナンスが飛躍的に楽になるということがその内容でした。菊池さんのお話の中で特に面白いと思ったのは、「スマートフォンサイト表示用にコンデンスフォントを使用する」という概念です。今回「さくらのレンタルサーバ」で使用できるようになったフォントの中には、スマートフォンでの表示を目的とした二つのコンデンスフォントが含まれています。みなさんコンデンスフォントってご存知ですが?Web業界の人はあまりなじみがないかもしれませんが、グラフィックデザインの仕事では大変重宝している代物で、フォントの各文字が細長く設計されていることで、少ない行数で多くの文字を表示することのできるフォントです。一文字一文字はただ横幅を縮めているのではなく、その幅で美しくなるように個別で設計されています。上が幅90%のコンデンスフォント、下が通常のフォントです(モリサワWebサイトより引用)このコンデンスフォントは、例えば文字数が限られている狭い領域などで用いられているので、スマートフォンサイトにはまさにうってつけです。文字サイズを小さくせず、つまり読みにくくせずに情報量を増やすことができるので、デザイン的にもユーザビリティ的にもいいことづくしです。コンデンスフォントをスマートフォン向けに用意するといのは、フォントメーカーならではの発想だと思いました。モリサワ、という感じです。UXデザイングループの河原さんより、さくらのVPSというサービスのコントロールパネルで導入しているオリジナルのアイコンフォントの事例の紹介でした。Awesomeにないものは自作しているとのことで、その具体的な作成方法やアイコンフォントを導入することのメリットが紹介されました。私もアイコンフォント導入には賛成派で、矢印や三角などの記号は極力アイコンフォントを使用するべきと考えています。圧倒的にコーディングやメンテナンスが楽になるからです。都合のよいアイコンフォントが無い場合に自作しようという精神は素晴らしいと思いました。ビジネス推進グループの谷口さん・中島さんより、「さくらのレンタルサーバ」上のWordpressで具体的に「TypeSquare」のWebフォントを設定する方法や、今後さくらインターネットのサービスとしてどのような展開が予定されているのかが紹介されました。「TypeSquare」を指定するためのWordpressプラグイン「さくらのレンタルサーバ」上のWordpressで「TypeSquare」のサービスを利用するには、専用のプラグインを使用します。プラグインページ率直な意見を述べさせていただくと、このプラグインは改善の余地がかなりあるかな、という印象でした。かなりのWordpressビギナー向けに作られており、テーマを0から作るような人にとってはかえって使いにくそうな印象がありました。それからこのプラグインは、フォントテーマを設定することで、見出しタグ(h1,h2,h3,entry-titleクラス)、リードタグ(h4,h5,h6)、本文タグ(hentryクラス)、強調タグ(strong,b)それぞれに、そのテーマに合った別々のフォントが指定されるというものなのですが、デザインの基本として、「使用するフォントの数はなるべく少なくする」というものがあります。強調タグは本文タグに指定されたフォントの太字用のものが指定されているので問題ないですが、h1,h2,h3とh4,h5,h6と本文でフォントをバラバラにするのは、場合によってはデザインが損なわれかねないのでは?と思いました。(プラグインの設定画面です。フォントテーマを選択すると、各タグ、クラスに対してフォントを指定してくれます。)フォントには、見出しに適したもの、本文に適したもの、などの個性があるので、見出しと本文で二種類というならまだ許容範囲ですが、ちょっと注意が必要なプラグインだと思います。使用する場合は「カスタムフォントテーマ」機能を使って、使用するフォントを限定して使用された方がいいと思います。「投稿・固定ページでフォントテーマ設定機能を表示する」という機能があり、投稿ごとにフォントを変えられる変えられるのですが...これは完全に余計な機能です。大切なことなので二回言いますが、デザインの基本として、「使用するフォントの数はなるべく少なくする」というものがあります。使用される方は、こちらの機能は使わない方が良いでしょう。逆に欲しい機能としては、設定画面でフォントのビジュアルを確認できるとか、各フォントの解説の表示、各フォントが人に与える印象についての説明の表示など。利用者がTypeSquareのフォントに対しての理解を深めることができ、より的確に利用できるようになるものが必要かと思います。そのような機能が備われば、Webフォントの発展に貢献できる素晴らしいプラグインになるのではと思いました。TypeSquareの表示速度またこの会では、気になるTypeSquareの表示速度についての説明もありました。Fonts」の日本語フォントより早いとのことです。理由としては、以下のGoogle日本語フォントが遅い理由が、TypeSquareでは解消されているからとのこと。いらない文字を配信している(サブセット化していない)配信元が海外(Google)表示速度を実際のサイトで見せてくれていましたが、確かにそこまで遅い感じはしなかったです。自ら構築してみないとわからない部分もあるので、気が向いたら表示速度の比較測定でもしてみようかなと思います。全体的にわりとビギナー向けな内容ではありましたが、これまでなんとなく「モリサワはWebフォントも出してるな~」くらいの認識だったものが、実際のどのような代物なのかをしっかりと確認できたのはよかったです。この記事を書くにあたってモリサワのサイトできちんとWebフォントについてみてみたのですが、本当にクオリティの高いWebフォントがたくさんあるんですね。「TypeSquare」はもともと月間1万PVまでは無料で使用できるので、今回の協業による展開は画期的な新サービスというより、Webフォントを利用するきっかけをつくる/利用の間口を広げることが目的なのでしょう(私もそれに引っかかった一人ですね)。今後モリサワがよりWebフォントに注力し、展開していこうという意気込みが感じられます。モリサワの菊池さん曰く、この先Webフォントでプロポーショナルの対応なども検討しているようで、そうなると本当にフォントのクオリティが上がってくるでしょう。Webフォントの進化による、今後のWebデザイナーの仕事についてデザイナーに求められる技術やデザイナーの仕事内容は技術の進歩とともに変化するのが世の常です。Webデザイナーに関しては今後Webフォントやアイコンフォントが進歩することで、従来のようにデザインの画像データを作成してからコーディングするという手法から、画像のデザインデータを介さずに直接Webデータとしてデザインをオペレーションするようになるのではないかと思います。フォントやアイコンがWeb上でベクターデータとして扱われないのに、いったんベクターデータとしてデザインを作る意味がありませんからね。CSS3の登場以降あらゆる効果がCSSだけで表現できるようになっていますので、その流れにWebフォントの強化が拍車をかけるのではないかと思います。その時、Webデザイナーの仕事が今より増えるのか、減るのかはわかりませんが、もしオペレーションが楽になって仕事量が減るなら、Webデザイナーはフォントの選定や調整、アイコンの作成など、よりグラフィックデザイン的な能力が求められるようになるのではと思います。日々勉強せよということですね。Fonts一択という思考回路から、もう少し多様な選択肢があるということを認識することから始めてみます。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。デバイスフォント、Webフォント、画像データの違いと特徴あなたにオススメの記事2018.08.20Webデザインで使用できるフォント徹底解説。デバイスフォント、Webフォント、画像...2016.10.03オリジナルデザインのSNSシェアボタン実装方法まとめ!WordPress編2016.07.25永久保存版!Webサイト更新マニュアルの作り方。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。