COLUMN

現場から、届ける。

旅館・ホテルの経営に役立つ情報を、ADGRAPHYのスタッフがリアルな現場目線でお届けしています。OTA運用やWEB集客のノウハウから、補助金情報・業界トレンドまで、宿泊施設に関わるすべての方にお読みいただける内容です。

SCROLL

2022.12.12

ウェブデザイナーがよく使うゴシック体

大事な情報が読みやすいフォント

みなさんはウェブデザインでよく使うフォント(書体)ってありますか?

フォントかー、ヲタク的に好きなデザイナーは多いからね

みなさんもフォントヲタなんですか?

ヲタクとまではいかずとも好きなデザイナーは多いよね

私はフォントヲタといっても過言ではないぐらい好きですが

あ、じゃあ今回ゴシック体(サンセリフ)で、事例付きで見たいです!

ゴシック体かー、結構絞られたな

ヲタクは好きなことになると話が膨みやすいので

和風旅館のサイトをデザインするときは明朝体(セリフ)を使うことが多いけど・・・ゴシック体だったらPoppins(Google Fonts)かな

このフォントはウェイト(書体の太さ)のバリエーションが多いですよね

このサイトを制作した時に使ったよ
https://www.hyuga-daiichihotel.com/

ポップな感じがしますね

だけど可愛い過ぎず、シンプルで使いやすいんだよね。単純に文字のデザインも好きだし。あとは、数字がいい感じなんだよ

数字が見やすいことも重要ですよね

そう!特に電話番号などは大事な情報だから、可読性の高いフォントを使うように心がけてる

セリフっぽいけどサンセリフ?

私はEl Messiri(Google Fonts)が好き

えっ、これゴシックですか?先が細くなっているしセリフかディスプレイ系っぽいですけど・・・

Google Fontsでサンセリフにカテゴライズされてたからサンセリフらしいよ。世界のGoogleがそう言ってます!

なるほど、Google先生がそう言うなら・・・

ちなみにこのサイトで使ってるやつね
https://www.shoen.co.jp/

セリフっぽいけどサンセリフなところが、日本語の明朝体ともゴシック体とも合わせやすそうですね

ちょっと丸くてぽてっとしているのが親しみやすくてかわいいんだよね

ぽてっと・・・

ぽてっとしているけど上品さと柔らかい印象も出せて使いやすいのも選ぶ理由のひとつかな

植物がちょっと風でなびいてるっぽい感じなのもかわいいですね

ライニング数字とオールドスタイル数字

よく使ってるのはJosefin Sans(Google Fonts)です

おしゃれな雰囲気のフォントですね

このサイトで使いました
https://www.hotel-newgreen.com/nagaoka/

可読性もありつつおしゃれな雰囲気もあり、って感じですね

Helveticaが主流ですが、それだとちょっと違うなというときに使います。あと、数字が見やすいことが重要という話がありましたが、それがフォントを選ぶポイントになっていますね

具体的に数字を選ぶ時のポイントとかありますか?

アラビア数字には天地の高さが揃っている『ライニング数字』と、天地が揃っていない『オールドスタイル数字』の2種類があります。

『オールドスタイル数字』はたまに見かけますね

それも古典的なおしゃれがあり個人的に好きなのですが、宿泊施設のサイトでは基本的に「ライニング数字」のフォントを選ぶように気をつけています

雰囲気を優先して可読性が低くならないよう、バランスに注意しないといけませんね

日本語との相性で選ぶ欧文フォント

LATO(Google Fonts)が日本語の明朝と相性が良くて好きかな

他のフォントもそうですけど、細いフォント、太いフォント、イタリック体で結構印象変わりますね

一つのフォントのいろんなスタイルを使って、サイトの中で表現できるのがいいよね。LATOはこのサイトで使用したよ
https://genji-koh.kaiei-ryokans.com/

確かに。サンセリフだけど、明朝体との相性が良いんですね

別のフォントでRoboto Condensed(Google Fonts)も好きなんだけど、こっちは日本語のゴシック体と相性がいいなと思う

同じサンセリフの欧文フォントでも、日本語の明朝体、ゴシック体それぞれ相性の良さがあるんですね

まとめ

ちなみに私はこちらのサイトで使用した、
https://www.hachiyon-ph.com/
Questrial(Google Fonts)が好きです。曲線が緩やかで丸い形がかわいいなと思いました。

いろんなサイトを制作した中で、みなさん好きなフォントがあるようでした。雰囲気だけじゃなく、情報を伝える上で読みやすいフォントを選ぶことがポイントなんですね。勉強になります

CATEGORY: 見習いデザイナー
CATEGORY
常務ブログ
営業マンブログ
OTAお役立ち情報
セミナー
お知らせ
ニュースレター
新商品・サービス
補助金情報
旅行マーケティング
見習いデザイナー
お役立ち情報
サイト更新情報
ARCHIVE
2026年5月(6)
2026年4月(5)
2026年3月(9)
2026年2月(12)
2026年1月(23)
2025年12月(11)
2025年11月(5)
2025年10月(3)
2025年9月(10)
2025年8月(7)
2025年7月(41)
2025年6月(14)
2025年5月(2)
2025年4月(2)
2025年1月(1)
2024年12月(1)
2024年11月(1)
2024年8月(1)
2024年6月(1)
2024年4月(2)
2024年1月(2)
2023年12月(1)
2023年11月(1)
2023年10月(5)
2023年8月(1)
2023年7月(2)
2023年6月(1)
2023年5月(2)
2023年4月(3)
2023年3月(3)
2023年2月(2)
2023年1月(3)
2022年12月(9)
2022年11月(6)
2022年10月(9)
2022年9月(1)
2022年8月(1)
2022年7月(3)
2022年6月(3)
2022年5月(3)
2022年4月(6)
2022年3月(7)
2022年2月(12)
2022年1月(8)
2021年12月(13)
2021年11月(13)
2021年10月(13)
2021年9月(12)
2021年8月(23)
2021年7月(25)
2021年6月(16)
2021年5月(35)
2021年4月(10)
2021年2月(1)
2020年9月(1)
2020年8月(1)
2020年7月(1)
2020年6月(2)
2020年5月(12)
2020年4月(9)
2020年3月(1)
2020年2月(1)
2020年1月(6)
2019年12月(1)
2019年11月(4)
2019年9月(1)
2019年8月(2)
2019年7月(6)
2019年6月(1)
2019年5月(1)
2019年4月(2)
CONTACT

まずは
お聞かせください

いま困っていることからお聞かせください。ホームページ、販売、事業承継、現場支援まで、必要な支援を整理してご提案します。