スマートフォン最適化ノウハウコラム

スマートフォンサイトのデザインで使うべきフォント

スマートフォンはPCともガラケーとも違うデバイスです。デザインする時にも全く新しい分野という意識で取り組む必要がありますが、「デザインする時は何のフォントを使えばいいのだろう?」と思っている方も多いと思います。
iPhoneAndroidでは搭載しているフォントが全く違うため、適当なフォントでデザインを作ってしまうと実機で見た時に表示崩れを起こし、ユーザビリティも低下する恐れがあります。今回は機種に関係なくテキストの表示崩れを防げるフォントをご紹介しますので、ぜひ参考にしてください。

Mac制作環境なら「ヒラギノ角ゴPro W3」

iPhoneで表示できる日本語フォントは、「ヒラギノ角ゴPro W3」と「ヒラギノ角ゴPro W6」の2つです。この2つがあればフォントを使い分けて文字にメリハリを付けやすいですが、注意しなければいけないのは、Androidに標準インストールされているフォント「Droid Sans Japanese」には「ヒラギノ角ゴPro W6」に相当するフォントがないという事と、ボールドがないという事です。太さの違うフォントを混合させてもAndroidスマートフォンでは対応できないため、意図した表現が再現されません。そのため「ヒラギノ角ゴPro W3」のみを使用し、ボールド表現に頼らないデザインをする必要があります。

Windows制作環境なら「メイリオ」

Windowsでは「ヒラギノ角ゴPro W3」が標準インストールされていません。スマートフォンサイト制作にかかわる機会が少ない、または急いでいる場合など、フォント環境が整っていない方も多いと思います。そこで有効なのが「メイリオ」です。「ヒラギノ角ゴPro W3」と比較しても字幅の変化がなく、デザイン制作時と実機で見た時の差が抑える事ができます。

フォント表示サンプル

「ヒラギノ角ゴPro W3」と「メイリオ」は、日本語、アルファベット共にほぼ同じ字幅なのが分かりますが、「MS ゴシック」や「MS Pゴシック」では明らかに字幅の違いが確認できます。このように字幅の違うフォントでデザイン制作をすると、デザイン上では一行だったテキストが実機で確認したら改行されてしまった、という事が起きる可能性があります。

ボールド表現はしない

先にも書いたように、Androidに標準インストールされているフォント「Droid Sans Japanese」はボールドが表示できません。スマートフォン全体での表示を考えるなら、Mac、Windowsどちらでデザイン制作を行うとしても、テキストのボールド表現は避けてください。

WindowsXP用・メイリオのダウンロード

※iPhoneにインストールされているフォントリスト

フォント名 ポストスクリプト フルネーム スタイル
ヒラギノ角ゴ ProN HiraKakuProN-W3 ヒラギノ角ゴ ProN W3 Regular
HiraKakuProN-W6 ヒラギノ角ゴ ProN W6 Regular
黒体-日本語 STHeitiJ-Light 黒体-日本語 ライト ライト
STHeitiJ-Medium 黒体-日本語 ミディアム ミディアム
黒体-韓国語 STHeitiK-Light 黒体-韓国語 ライト ライト
STHeitiK-Medium 黒体-韓国語 ミディアム ミディアム
黒体-簡 STHeitiSC-Light 黒体-簡 ライト ライト
STHeitiSC-Medium 黒体-簡 ミディアム ミディアム
黒体-繁 STHeitiTC-Light 黒体-繁 ライト ライト
STHeitiTC-Medium 黒体-繁 ミディアム ミディアム
Academy Engraved LET AcademyEngravedLetPlain Academy Engraved Let Plain:1.0 Plain
American Typewriter AmericanTypewriter-CondensedLight American Typewriter Condensed Light コンデンス・ライト
AmericanTypewriter-Condensed American Typewriter Condensed コンデンス
AmericanTypewriter-CondensedBold American Typewriter Condensed Bold コンデンス・ボールド
AmericanTypewriter-Light American Typewriter Light ライト
AmericanTypewriter American Typewriter レギュラー
AmericanTypewriter-Bold American Typewriter Bold ボールド
Apple カラー絵文字 AppleColorEmoji Apple カラー絵文字 レギュラー
AppleGothic AppleGothic AppleGothic Regular Regular
Arial ArialMT Arial Regular
Arial-BoldMT Arial Bold Bold
Arial-ItalicMT Arial Italic Italic
Arial-BoldItalicMT Arial Bold Italic Bold Italic
Arial Hebrew ArialHebrew Arial Hebrew レギュラー
ArialHebrew-Bold Arial Hebrew Bold ボールド
Arial Rounded MT Bold ArialRoundedMTBold Arial Rounded MT Bold Regular
Bangla Sangam MN BanglaSangamMN BanglaSangamMN Regular
BanglaSangamMN-Bold Bangla Sangam MN Bold Bold
Baskerville Baskerville Baskerville レギュラー
Baskerville-SemiBold Baskerville SemiBold セミボールド
Baskerville-Bold Baskerville Bold ボールド
Baskerville-Italic Baskerville Italic イタリック
Baskerville-SemiBoldItalic Baskerville SemiBold Italic セミボールド・イタリック
Baskerville-BoldItalic Baskerville Bold Italic ボールド・イタリック
Chalkboard SE ChalkboardSE-Light Chalkboard SE Light Light
ChalkboardSE-Regular Chalkboard SE Regular Regular
ChalkboardSE-Bold Chalkboard SE Bold Bold
Cochin Cochin Cochin レギュラー
Cochin-Bold Cochin Bold ボールド
Cochin-Italic Cochin Italic イタリック
Cochin-BoldItalic Cochin Bold Italic Bold Italic
Courier Courier Courier Regular
Courier-Bold Courier Bold Bold
Courier-Oblique Courier Oblique Oblique
Courier-BoldOblique Courier Bold Oblique Bold Oblique
Courier New CourierNewPSMT Courier New Regular
CourierNewPS-BoldMT Courier New Bold Bold
CourierNewPS-ItalicMT Courier New Italic Italic
CourierNewPS-BoldItalicMT Courier New Bold Italic Bold Italic
DB LCD Temp DBLCDTempBlack DB LCD Temp Black Black
Devanagari Sangam MN DevanagariSangamMN Devanagari Sangam MN Regular
DevanagariSangamMN-Bold Devanagari Sangam MN Bold Bold
Futura Futura-CondensedMedium Futura Condensed Medium コンデンス・ミディアム
Futura-CondensedExtraBold Futura Condensed ExtraBold コンデンス・エクストラボールド
Futura-Medium Futura Medium ミディアム
Futura-MediumItalic Futura Medium Italic ミディアム・イタリック
Geeza Pro GeezaPro Geeza Pro レギュラー
GeezaPro-Bold Geeza Pro Bold ボールド
Georgia Georgia Georgia Regular
Georgia-Bold Georgia Bold Bold
Georgia-Italic Georgia Italic Italic
Georgia-BoldItalic Georgia Bold Italic Bold Italic
Gujarati Sangam MN GujaratiSangamMN Gujarati Sangam MN Regular
GujaratiSangamMN-Bold Gujarati Sangam MN Bold レギュラー
Gurmukhi MN GGurmukhiMN Gurmukhi MN Regular
GGurmukhiMN-Bold Gurmukhi MN Bold ボールド・イタリック
Helvetica Helvetica-Light Helvetica Light Light
Helvetica Helvetica レギュラー
Helvetica-Bold Helvetica Bold ボールド
Helvetica-LightOblique Helvetica Light Oblique Light Oblique
Helvetica-Oblique Helvetica Oblique イタリック
Helvetica-BoldOblique Helvetica Bold Oblique ボールド・イタリック
Helvetica Neue HelveticaNeue-CondensedBold Helvetica Neue Condensed Bold コンデンス・ボールド
HelveticaNeue-CondensedBlack Helvetica Neue Condensed Black コンデンス・ブラック
HelveticaNeue-UltraLight Helvetica Neue UltraLight ウルトラ・ライト
HelveticaNeue-Light Helvetica Neue Light ライト
HelveticaNeue Helvetica Neue レギュラー
HelveticaNeue-Medium Helvetica Neue Medium Medium
HelveticaNeue-Bold Helvetica Neue Bold ボールド
HelveticaNeue-UltraLightItalic Helvetica Neue UltraLight Italic ウルトラ・ライト・イタリック
HelveticaNeue-LightItalic Helvetica Neue Light Italic ライト・イタリック
HelveticaNeue-Italic Helvetica Neue Italic イタリック
HelveticaNeue-BoldItalic Helvetica Neue Bold Italic ボールド・イタリック
Kailasa Kailasa Kailasa Regular レギュラー
Kailasa-Bold Kailasa Bold Bold
Kannada Sangam MN KannadaSangamMN Kannada Sangam MN
Regular
KannadaSangamMN-Bold Kannada Sangam MN Bold
Bold
Malayalam Sangam MN MalayalamSangamMN Malayalam Sangam MN Regular
MalayalamSangamMN-Bold Malayalam Sangam MN Bold Bold
Marker Felt MarkerFelt-Thin Marker Felt Thin シン
MarkerFelt-Wide Marker Felt Wide ワイド
Noteworthy Noteworthy-Light Noteworthy Light Light
Noteworthy-Bold Noteworthy Bold Bold
Oriya Sangam MN OriyaSangamMN Oriya Sangam MN Regular
OriyaSangamMN-Bold Oriya Sangam MN Bold Bold
Palatino Palatino-Roman Palatino レギュラー
Palatino-Bold Palatino Bold レギュラー
Palatino-Italic Palatino Italic レギュラー
Palatino-BoldItalic Palatino Bold Italic レギュラー
Sihala Sangam MN SinhalaSangamMN Sihala Sangam MN Regular
SinhalaSangamMN-Bold Sihala Sangam MN Bold
Bold
Snell Roundhand SnellRoundhand Snell Roundhand Regular
SnellRoundhand-Bold Snell Roundhand Bold Bold
SnellRoundhand-Black Snell Roundhand Black Black
Tamil Sangam MN TamilSangamMN Tamil Sangam MN Regular
TamilSangamMN-Bold Tamil Sangam MN Bold Bold
Telugu Sangam MN TeluguSangamMN Telugu Sangam MN Regular
TeluguSangamMN-Bold Telugu Sangam MN Bold
Bold
Thonburi Thonburi Thonburi レギュラー
Thonburi-Bold Thonburi Bold ボールド
Times New Roman TimesNewRomanPSMT Times New Roman Regular
TimesNewRomanPS-BoldMT Times New Roman Bold Bold
TimesNewRomanPS-ItalicMT Times New Roman Italic Italic
TimesNewRomanPS-BoldItalicMT Times New Roman Bold Italic Bold Italic
Trebuchet MS TrebuchetMS Trebuchet MS Regular
TrebuchetMS-Bold Trebuchet MS Bold Bold
TrebuchetMS-Italic Trebuchet MS Italic Italic
TrebuchetMS-BoldItalic Trebuchet MS Bold Italic Bold Italic
Verdana Verdana Verdana Regular
Verdana-Bold Verdana Bold Bold
Verdana-Italic Verdana Italic Italic
Verdana-BoldItalic Verdana Bold Italic Bold Italic
Zapfino Zapfino Zapfino レギュラー
.Helvetica Light .HelveticaLight .Helvetica Light Regular
.HelveticaLight-Oblique .Helvetica Light Oblique Oblique
.Helvetica LT MM   Helvetica LT MM  
.Helvetica Neue ATV .HelveticaNeueATV .Helvetica Neue ATV レギュラー
.Helvetica NeueUI .HelveticaNeueUI .Helvetica NeueUI レギュラー
.HelveticaNeueUI-Bold .Helvetica NeueUI Bold ボールド
.HelveticaNeueUI-BoldItalic .Helvetica NeueUI Bold Italic
ボールド・イタリック
.HelveticaNeueUI-Italic .Helvetica NeueUI Italic イタリック
.HKGPW3UI HKGPW3UI HKGPW3UI Regular
.Lock Clock LockClock-Light Lock Clock Light Light
.PhoneFallback .PhoneFallback .PhoneFallback Regular
.PhoneKeyCaps .PhoneKeyCaps .PhoneKeyCaps Regular Regular
.PhoneKeyCapsTwo PhoneKeyCapsTwo .PhoneKeyCapsTwo レギュラー
.PhonepadTwo PhonepadTwo PhonepadTwo Regular
.Times LT MM   TimesLTMM  

※iPhone実機で閲覧していただくことで、フォントが確認できます。
QRコードはコチラ

↑このページの上部へ