―HOMEABOUTSERVICEWORKSRECRUITBLOGACCESSCONTACTBLOGTOPBLOG2015/04/23モバイルフレンドリー対応_GoogleとAppleの推奨フォントは?こんにちは、内藤です。モバイルフレンドリー対応の連載、第2回目です。今回は、GoogleとAppleの推奨するフォントについて調べたので、それをお伝えしたいと思います!とはいえ、ウェブ制作をされている方ならご存知の方は多いと思いますので、今回はさらっとおさらいしていただければと思います。第6回:「記事をページ分割するメリット・デメリット」それでは第2回、いってみましょう。フォントの設計にある程度の正解は存在するウェブは誰のものでもないので、良くも悪くも「このルールに従って作りなさい」というものがありません。日々、ユーザ調査を行い、ユーザにどのように情報を提供されると効果的なのかについて制作者は考え、その時に一番良いとされるもので設計を行います。その設計は「誰がどのように使うのか」を基準に色々なことが決定されるため、正解はありません。一方で、ウェブを使う時は大抵の人がGoogleの検索エンジンサービスを利用するため、Googleが自分たちの決めたルールに従わせる力をある程度持っているのも事実です。4月21日に始まったGoogleのモバイルフレンドリー評価がスマートフォンサイトでの検索結果に影響を与えるため、慌ててスマホサイト版をつくったり、モバイルフレンドリーのテスト結果を見てGoogleのルールに沿ってサイトの改善を行ったところは多かったのではないでしょうか。ウェブサイトではありませんが、同じスマートフォンでの閲覧という意味ではアプリのルールも無視することはできません。Appleの提供するiPhoneで販売するアプリはAppleの審査を通過しないといけないため、Appleのアプリ制作ルールに従う必要があります。言うまでもありませんが、このGoogleとAppleは何も自分たちの力を誇示するためにルールを敷いているわけではなく、彼らもユーザにとって使いやすいものを追求しており、そのための調査をし、「こう作ったらいいよ」という最適解を私たちに共有してくれているので、それに従わない理由は特にありません。このウェブで力をもっている2つ会社の提唱するフォントルールについて見て行きましょう。Googleの提唱するフォントサイズは16px、行間は1.2emGoogleの定義する「読みやすいフォントサイズ」はこのページで確認することができます。サマると、こんな感じです。ピクセルの基本フォントサイズを使用する。基本サイズに対して相対的なサイズを使って、フォントの拡大縮小を定義する。さまざまな端末でフォントが期待どおりに拡大縮小されるように、ビューポートを設定する。このページの最終更新日は2014年4月11日、ちょうど1年前くらいですね。その約1年前の2013年には、IMJ社が900名を対象に行った「タブレット端末でのサイトユーザビリティ調査」でも、16pxが一番好まれるフォントサイズだとリポートしているので、現在の最適解としては一番適切なものだと感じます。標準フォントサイズでは、同じGoogleでもAndroidはどうでしょう。以下がAndroidのデザインガイドラインによるフォントサイズです。そのため、必ずしもpxと同じ前提のもとでの比較となりませんが、参考資料としては十分かと思います。行間についてのルールは特にありませんでした。Type」に対応することを推奨しています。これに対応することによって、ユーザ側で好きなフォントサイズを設定することができます。※以下追加参照)にはしないように、と明記されています。Androidほど細かくルールはありませんが、ユーザが好きなフォントサイズを選べるように、選択肢を用意することを推奨する考えは同じですね。追記(2015/4/28):「1ポイント0.75px」は計算が間違っていました。1.33...px」です。よって、Appleのアプリのガイドラインである、11ポイントというのは、約14.6pxとして考えていただければと思います。以上を基準にフォントサイズを決定することを推奨というかんじでしょうか。フォントサイズは標準を、16〜18pxくらいで設定しておくのがよさそうですね。サイトやアプリによってターゲットが異なりますから、この標準を意識した上で適切な設計をしていくのがいいと思います。次回は、世の中のサイトではどのようなフォントサイズを設定しているのかを見て行きたいと思います。第6回:「記事をページ分割するメリット・デメリット」シナップではサイト内最適化、UI改善のお手伝いを行なっております。お気軽にお問い合わせください。シナップは、Webサイト、アプリ、IoTなどインターネットとつながるユーザー接点すべてをデザインし、クライアントのビジネス立ち上げ、サービスの継続的発展をサポートすることを得意としている会社です。公式アカウントブログの更新情報やシナップからのお知らせを配信しています。SINAPシナップの活動報告や、IT業界のトレンド情報などを発信しています。ご相談・お問い合わせお仕事のご依頼やご相談など、お気軽にお問い合わせください。