60L.design へのメールフォームです。 ご質問、お問合せ、お見積り等、お気軽にお送りください。
データの送信は firestorage 等の転送サービスをご利用ください。

お名前 ※必須項目 お名前を入力してください
会社様名
お返事先メールアドレス ※必須項目 お名前を入力してください
お問合せ種別

お問合せ内容 ※必須項目 お問合せ内容を入力してください
次の2つの数字を足して入力してください。 ※必須項目 半角数字を入力してください。

+

=

閉じる
お気軽にお見積り、
お問合せ下さい
フォントの基本を知らないwebデザイナーさん多し?

いい加減作りかけで放置して幾数年のブログを改め、サーバを引っ越そうと思っていたのですが、今年も早半年が終わろうとしています…。今年も休みがほとんどない状態で半年経ってしまいました…orz
どうしても今年の夏までには引っ越し&作り直しをしなければ、いろいろなプロジェクトに影響があるので、今年の夏こそは!と思っております。

1ヶ月400時間ほど働いたりもしていますが、そんな忙しい時にでも毎年作ろうと決めているウェアとかもこっそり作ったりしていました。たまに息抜きで描いたら結構いいのができてしまったりするので複雑な気になります。
とりあえずパーカとポロシャツを作ったのですが、あっという間に暑くなったのでパーカは半年先まで着れません…。

さて、そんな中、もうどうしても不思議なのが『webデザイナーさんで、フォントの基本を知らない人が多すぎる気がする…』ということです。
もちろん世の中にはしっかり知識を身につけているwebデザイナーさんの方が圧倒的に多いのでしょうが、私の取引先(の社員さんや外注デザイナーさん)で、複数の方…というかほとんどの方が、学校の教科書未満の知識しかお餅じゃなかったりしています。
私のようなレベルの低いwebエンジニアには同程度のデザイナーさんのお仕事になっても何の不思議もないのですが、非常に不安になる方も働かれていて、それなりに名の知られた企業様のweb制作に携わられたりしています。

というわけで、笑われてしまうかもしれませんが、ちょっと酷いかな〜と思ったフォントについての取引先とのお話を。

1:世の中の全ての端末に小塚ゴシックが入っている。

堂々と『本文は小塚ゴシックで』と指示が来ます。フォントがクライアント依存ということから説明しないといけません。小塚ゴシックはAdobe製品にバンドルされるので、入社したら必ずPCに入っているので、自宅でPCを使わない方にはありそうな間違いです。
最近はびっくりすることもないのかもしれませんが、システム開発会社にも『PCは持っていません』という方も普通に入社して来てました。自宅で仕事を、とは言えませんが、自宅で勉強する環境がないのは、システムやデザインなど、日進月歩、毎年新技術が出てくる分野では大きなマイナスだと思ってます。

2:Google Fontsを指定しまくり

webフォントの存在を知った方が陥りやすいのですが、とにかくGoogle Fontsを使いまくったデザインが来ることがあります。
可能ではありますが、webフォントはページ閲覧の際にダウンロードされて使われます。もちろんキャッシュされるでしょうが、データの通信量が多くなるのは間違いなく、和文フォントは(いいのがあるかは知りませんが)無視できない通信量になると思います。
データの通信量を考えない方も多いのですが、高速回線が広まっている現在でも、ページのデータ量は極力ダイエットするようにするべきです。というのも、スマフォなどのモバイル端末ではデータ量が少なければ少ないほどいいのです。都市部の電車移動などを考えると、ページの読み込みに時間がかかる=回線が途切れてページ表示が止まる、ということでユーザー離脱の機会がぐっと増えてしまうので、スマフォが広く普及した現在こそ、軽いページにするべきだと思っています。無料ブログなど、広告が大量に出るページなどは移動しなくても読み込みに時間がかかったりしていますし。
そんな中、Google Fontsを指定しまくるデザイナーさんはちょっとユーザビリティなどの方まで考えが回ってないかと思います。というか、普通デザインって、フォントが3種類より多くなるとぐちゃぐちゃするので控える、という基本があったかと思います。
また、フォントデータの適用は比較的優先度が低いため、多分ページのレンダリングの後半にフォントが変わる、と言った少し変な表示もあります。その場合は、そもそもページのデータ量が少しオーバー気味、という気もします。

3:テキスト量の増減を考慮していない固定領域

フォントが変わる、ウィンドウサイズが変わる、ブラウザでテキストサイズを変える、といった場合、テキスト領域は増減しますが、それを考慮しない固定領域で組んだデザインが非常に多いです。
ボックスを2つ横並びにして、テキストを流し込むとき、2つのボックスの高さを同じに揃えてデザインしている方がいらっしゃいますが、『テキストの量が変わると高さは変わりますよ』『ボックスの高さを揃えるなら、テキスト量が増えたとき溢れますよ』と言ってもわかってもらえません。jQueryでサイズを揃えるようなこともできなくもないですが、費用をいただかないといけませんし、そもそもそういう部分に依存したデザインであってはいけない、webの基礎を理解してもらわないといけない、と思っています。
よっぽど揃えたい場合は、ボックスとテキストをまとめて画像として貼り付けることになります。そっちの方が楽ですが、可能な部分は極力テキストで記述したいところです。

4:サーバにヒラギノを置く

びっくりしましたが、『サーバにヒラギノを置いたのでこれを読み込ませてください』とお膳立てしてくださった取引先もいらっしゃいました。丁寧にご説明して、それは違法で過去も5000万円の損害賠償命令が出た判例もあるので、と何度もお話しして取り下げていただきました。
ディレクターの方も『かもしれないと思った』と言ってましたが、ディレクターもデザイナーもこれが非常に悪いことだと理解していなかったと、背筋が凍る思いをしたことがあります。
しかもヒラギノというところが…ただでさえ大手のフォントを…(汗)
ちなみに、和文フォントは安くなって来たと言ってもwebフォントとしてはハードルが高く、前述のデータ通信量もそうですが、ライセンス形式やPV制限等もあって普及はしばらくないかと思われます。

6:フォントサイズがバラバラ

小数点の場合は自然数に揃えてください…というか拡大縮小してそのままなんでしょう。
また、ページ内でフォントがバラバラだったりします。よほど糸がなければ、本文、見出し、小見出し、脚注、と言ったパターンを作って、それを適用するのがベターかと思います。私はパターンからスポイトで吸うようにしてます。

7:Google Fontsのライセンス

Google Fonts使いたい症候群はわかる部分もあるのですが、Google Fontが全てフリー使用可能とは思わないでください。バッチリライセンスが決まっているものもありますので、注意して欲しいところです…というか、英語もしっかり読むようにしてください。というかスペルミスだらけのデザインデータが来た場合は頭を抱えてしまいます…。なんでそういう部分に限ってアウトライン化してくるのでしょうか…(´Д`;)

8:テキスト増減を想定していない(追加)

テキスト量が増減を想定していないレイアウトにする方が多いです。求人情報が1行追加されたらこのテーブルは破綻しますよ、とか。WPでもタイトルの長さがこのくらいになったら溢れますよ、とか。テキストをセンタリング指定していますがリキッドレイアウトだからウィンドウサイズでは折り返しが変なところで入りますよ、とか。
テキストの領域がwebでは担保できないことや、テキスト量(原稿)の増減は前提としないといけないことは知って置いていただきたいところです。

ちょっと時間が来てしまったので打ち切りますが、このような問題が毎度のように出て来ます。
取引先とのやりとりでは営業の方が多いのですが、営業さんにこのようなことを理解していただくのもハードルが高く(というか何度ご説明しても理解してもらえない)、こちらで黙って吸収するのがいいのかな〜と悩んでいるところです。

根本として、webってどういう仕組みで、サーバとクライアントがあって、ブラウザではどういう仕事をしているのか、というところをご存じないところから来ているかと思います。HTMLの発祥とか、W3Cのお仕事内容とか面白い話なんですけどね…。
そんなわけで、もしwebデザイナー志望の方がこの文章を読んでくださったなら、フォントについては是非1時間でいいので勉強していただけたらと思います。フォントの販売価格、人気のフォント、フォントの作り方、OSごとの基本フォント、くらいでいいので…。

と言った内容を綺麗にまとめて、いつか『webデザイナーさん、このくらいは知って置いて!!』というような本を出したいと思っています……が、完全週休2日の状態が3ヶ月ほどあれば……(汗)

『ふうらい姉妹1巻』読んでいて主人公の生活が非常に不安になる、超シュール系4コマ。

『LIAR GAME 18』最終戦、四国志ゲーム開始!19巻は4月中に発売なので完結直前です!

『野崎まど劇場』なんて酷いラノベだ…と、爆笑しました。フリーダムな短編集。将棋のアレも…。

『iPhoneアプリ開発の教科書』カラーでイラスト多くて、まずはこれを読んでみようと購入しました。

『数論の世界』高校レベルの知識での面白い数論の話。高校の時にこの本を知っていたら…。

『ミーティアわんわん』古賀亮一先生の電撃新連載!もったいないので少しずつ読んでます。

『新ゲノム5』相変わらずの古賀亮一マンガです。とにかくギャグの密度が高い…!

『HTML5&CSS3ポケットリファレンス』技術評論社のPRシリーズは鉄板です。

『容疑者Xの献身』今更ながら、こんなに面白い邦画に出会えるとは…!悪い予想を上回る結末。

『ゆるめいつ』シュール系脱力4コマ!この作品に触発されて4コマを描き始めました。