“心に届く文字”でWebサイトの人格を作る｜伊達千代の「今日もフォントを探して」Vol.5

自他共に認める“フォントおたく”のデザイナー・伊達千代が、タイポグラフィが際立つWebサイトをピックアップし、デザインの奥に潜む意図を制作者に聞き出す本連載。今回は、合同会社エムケアーズのWebサイトを紹介します。

教えてくれた人

聞き手

「日々の小さなぬくもり」を表現したい

私たちは普段、文字を「読む」ことはあっても、「なぜこの文字なのか」を意識する機会はそれほど多くありません。どんなフォントを使うかはよく話題に上がりますが、それをどんな大きさで、どんな余白で組むのか。それだけで、同じ言葉でも伝わり方は大きく変わってきます。

今回紹介するエムケアーズのコーポレートサイトは、明るさと温かさ、風が通り抜けるような爽やかさ、そして優しく語りかけてくるような言葉の数々がとても印象的です。デザインを担当した、神戸の制作会社ウィルスタイル株式会社の岡本彩花さんに、Webデザインにおける文字やフォントの役割について話を聞きました。

岡本さんが最初にWebデザインに興味を持ったのは、中高生の頃だったそうです。

「当時は、個人ブログや個人サイトを自分でカスタマイズして運営する文化が盛んでした。フリーフォントやフリー素材を探しては自分だけのサイトを作ったり、遊びで知人から依頼を受けるようなこともしていました」（岡本さん）

岡山県の大学で幼児教育を学び、卒業後は4年間こども園で保育教諭として働いていた岡本さんでしたが、兵庫県への転居を機に退職。その後職業訓練校の「Webクリエイター養成コース」でIllustratorやPhotoshopの基本、HTMLやCSSなどを半年間学んだのち、2022年にWeb制作会社であるウィルスタイル株式会社に就職しました。

「実際にデザインを学べたと感じるのは就職してからです。先輩のデザインを見たり、実案件を手伝ったり、社内プレゼンで先輩方からフィードバックを受けるといったフローが定着していたので、実務を通して学ぶことはとても多かったです」（岡本さん）

ウィルスタイルは、「会いに行くWeb制作会社」というスローガンを掲げ、制作スタッフも直接クライアントと話をして仕事を進めています。ウィルスタイルのWebサイトは2026年5月にリニューアルされたばかり。こちらも透明感のある美しい仕上がりなので、ぜひ訪れてみてください。

今回のテーマであるエムケアーズのコーポレートサイトも、岡本さんをはじめとする制作スタッフがクライアントと密にやり取りを重ねて作り上げました。

エムケアーズは、医療福祉で人を幸せにするという理念のもと、兵庫県を中心に訪問看護と相談支援、グループホームの運営を通じて誰もが安心して暮らせる地域の環境作りを目指しています。保育教諭というキャリアを持ち、福祉に関わりの深い岡本さんが最初に考えたのは、「特別な奇跡」ではなく、「日々の小さなぬくもり」をどう表現するか、ということでした。

「利用者と同じ目線に立ち、優しくすくい取るように支える。そんな企業の姿勢を、サイト全体の空気感として作りたいと考えました」（岡本さん）

「心に届く深さ」を考えたフォント選び

今回のサイトで特に印象的だったのが、トップページいっぱいに大きく流れる映像でした。最近は動画を使ったファーストビューも増えていますが、岡本さんは「企業の人柄を伝えるには、写真より動画の方が向いている」と考えたそうです。

実際、サイトに登場するスタッフや利用者役の多くは、本当に現場に関わる人たちです。笑顔やちょっとした仕草、何気ない空気感を映像で見せることで、“エムケアーズらしさ”がストレートに見えてきます。

また写真のフレームやメニューなどのサイト全体に角丸を多用することで、フレッシュな印象と柔らかさを両立させています。ロゴとトップページ、各項目のアイキャッチには欧文フォントの「Chillax」が使用されており、角丸との親和性が高いタイポグラフィ表現になりました。

岡本さんは、Fontshareでこの書体を見つけたそうで、サイトと同時に依頼されていた「m.cares」のロゴにも「Chillax」を使用しています。

「フォント名の通り、“チル”と“リラックス”を掛け合わせたような空気感があるなと思って選びました。特徴はありつつもモダンで、人の気配や柔らかさを感じるフォントデザインです」（岡本さん）

さらに和文には、Zen角ゴシックNewの派生フォントであるMokuzaiさんデザインの「ひぐれゴシック」を使用。このフォントに施された角丸や墨だまりの処理によって、人の手のぬくもりを感じるニュアンスが感じられます。

一般的に医療・福祉というと、清潔感や信頼感が求められます。しかし、それだけでは冷たく見えてしまうこともあります。だからこそ岡本さんは、「機能的な美しさ」だけではなく、「どこか人を感じる書体」を選びたかったのだそうです。

「今回は、言葉を早く届けるというより、“心に届く深さ”を優先していました。読者の心に寄り添うような質感を演出したかったんです。写真やデザインがサイトの“表情”を作り、文字やタイポグラフィが“人格”を作る。そんなイメージで制作を進めました」（岡本さん）

フォント選びは「観察」から始まる

一方で、Webデザインのフォント選びは、デザインだけで決めることのできないさまざまな条件があります。ユーザーのデバイスも多様なので、あらゆる環境で読みやすいことは重要です。また可読性や表示速度、ライセンスなどもクリアしなければなりません。

「ウィルスタイルで携わることの多い中小企業案件では、有料フォントサービスの導入が難しいケースがほとんどです。使ってみたいフォントはたくさんあるんですけど、フォント使用料をお客様に負担していただくことになると、なかなか提案しづらい部分があります」（岡本さん）

そのため和文は、Google Fontsを中心に選ぶことが多いそうです。しかし今回のエムケアーズのコーポレートサイトで見て取れるように、限られた条件の中でも“その企業らしさ”を表現するための工夫はたくさんあります。

例えば、文字とその他のデザイン要素との融和性、文字の周囲にたっぷり余白を取ることで生まれる抜け感、文字と背景との配色のコントラストの調整による柔らかさなど。タイポグラフィによって、同じフォントでもさまざまな“表情”や“人格”のようなものを演出することができることがわかります。

最後に、これからタイポグラフィを学びたい人へのアドバイスを聞くと、岡本さんは「観察すること」と教えてくれました。

「街中の広告、看板、案内板。日常には、プロが考え抜いた文字があふれていて本当に参考になります。わたしも実務を重ねるうちに、このフォントだ！と気づくことが増え、そこから『なぜこの場面で使われているのか』を考えるようになりました」（岡本さん）

またウィルスタイルの社内では、何か見つけたときにはシェアする文化があり、デザイナー同士のチャットルームで「フォントはここを探すといいよ」といった情報をNotionに貯めているそうです。作り出したい“表情”に合ったフォントやその使い方について、普段から引き出しを増やしていることも重要なのかもしれません。

今回の取材を通じて印象的だったのは、岡本さんが企業や人の空気感といったものを自然に伝えるために、フォント選びだけでなく、余白や配置、コントラストまで含めたタイポグラフィ全体によって、“その企業らしい人格”を丁寧に作り上げていることでした。

取材・文：伊達千代、編集：栗原亮