フォント紹介のウェブサイト

あらまし

「ヒラギノフォント」の魅力やライセンスをわかりやすく伝えるウェブサイトの設計・開発・運用を担当しています。

技術

  • Jamstack構成による高速なインフラ
  • デザイントークンに基づくロジカルなコンポーネント設計
  • 配色と書体を動的に切り替えられる「試す」機能の実装

デザイン

  • ヒラギノフォントの魅力を伝えるアートディレクションとウェブデザイン
  • モバイルファーストの設計
  • アクセシビリティの向上を目指した配色などの設計

本プロジェクトの開発については、以下の記事でもご紹介いただいています。

ヒラギノフォントのウェブサイトのトップページ。「吾輩は猫である」の文章が明朝体の文字となって画面いっぱいに立体的に舞い、「メッセージをまっすぐ伝えるフォント」というコピーとナビゲーションが下部に配置されている
トップページ（PC）
フォント一覧ページ。左にカテゴリーとライセンスの絞り込みメニュー、右にヒラギノ角ゴ、ヒラギノ角ゴ オールド、こぶりなゴシック、ヒラギノ丸ゴ、ヒラギノ明朝などの書体がウェイト見本つきで並ぶ
フォント一覧（PC）
ヒラギノ角ゴの書体詳細ページ。W0からW9までのウェイト見本と、角ゴの文字が立体的に流れるビジュアル、特徴・字形・タイプテスターなどのメニューが表示されている
書体詳細ページ ヒラギノ角ゴ（PC）
「試す」パネルを開いた画面。ライト・ダーク・スプリングなど6種の配色と、UD角ゴセット・角ゴセット・明朝セット・丸ゴセットなどの書体セットを切り替えられ、ダークと丸ゴセットが選択されている
サイトの配色と書体を切り替えられる「試す」パネル

基本情報

プロジェクト名
クライアント
株式会社SCREENグラフィックソリューションズ
担当範囲
企画・設計・ウェブサイト制作・運用
プロジェクト期間
2026–

おもな制作体制

ウェブディレクション
萩原俊矢 (株式会社 スタジオ・オータム)
制作進行
江連亜衣 (株式会社 スタジオ・オータム)
アートディレクション・デザイン
花村太郎
実装
堀田昌史
インフラ・バックエンド
S2ファクトリー株式会社
RDF: JSON-LD / RDF/XML