Web・App業界に見る和文文字組のデザイン －「文字組デザイン講座」を受けて－
こんにちは。UXUIデザイナーのasakoです。
私は、現在WebやAppを制作するデジタル系のデザイナーとして働いていますが、もともと印刷系のグラフィックを専門として学んできました。
業界を変えて、様々なギャップを壁に感じることもありましたが、反面それぞれの良さも感じています。
本記事では、「文字組デザイン講座」を経て得た気付きや学びをまとめたいと思います〜🙌
1.「文字組デザイン講座」
今年の1,2月に、デザインノート企画のこちらの講座に行ってきました。
講師の工藤先生の専門は本の装丁やポスターで、特に和文のタイポグラフィを得意とされるグラフィックデザイナーのお一人。尊敬する恩師です。
この講座を受けて、改めてデザイナーとして大事にしたいと思う信念や、クラフトマンシップ精神の重要性、両業界の視点の違いを感じました。
2. 印刷とデジタルって何が違うの？
大まかなな違いとしては、以下のようなものがあるのですが…
色の表現の幅や再編可という視点から、一般的にデジタル領域の方が自由度が高く「助かる〜」「嬉しい〜！」ということも多いのですが、実は「文字」のレイアウトという視点で見ると、条件によっては印刷の方が自由な面もあったりします。
それはどのような場合でしょうか？
例えば、文字組の要素にある「混植」。IllustratorやInDesignの中にもある機能で「合成フォント」というものがあります。「漢字はAというフォント、送り仮名はB、英数字はC」など、組み合わせたフォント設定のことです。
デジタルデバイス上でこういった文字組をすることは稀ですよね👀
どうしてもこのような表現をする場合は、テキストとしてではなく画像として扱うことになることが多いです。
印刷の場合、流し込んだテキストに細かい字詰めを行ったり、ベースラインを揃えたり、見た目の美しさ、読みやすさの追求、視覚情報整理のための演出を行ったり、より職人的なテクニックを使った調整は必須になります。（グラフィックデザインという切口の方が正しいかも）
3. 講義）どのようにして良い文字組を仕上げていくか
この観点に関しては、デジタルも印刷も変わらず大事にできることだと思ったので、ご紹介します。
テキストを詠む・分解する
A）ポスター/フライヤー/本などその媒体がどういう役割を持っているか知ること
→ファクターのインパクト・優先順位・サイズ感に影響
B）内容/文脈を理解すること
→フォントの選定にも影響
→雰囲気だけでなく、その書体がいつ・誰に・どういう経緯で作られたのか、などの知識も合わせて持っておく必要がある
C）読ませるではなく見せる（見て入って来させる）デザインにする意識
→文字の緩急
例えば、上記Cの文字の緩急については、下の画像のように、フォントを変えたりサイズを変えたりすることで、「思考」→「と」→「感情」と、情報を正しくかつ直感的に認識することができます。（左の場合、縦に「考と情」とも読んでしまう）
02.アイデアスケッチをする
内容・文脈からコンセプトキーワードを辿り、組み方や書体を検討
# 柔らかい or # 硬い？
# クール or # 暖かい？
# 新しい or # 伝統的？
など、紐づけられるコンセプトを書き出しておくと方向性もブレないですし、展開が足りない視点も意識できます。
03.デザインの詰め
5つのファクターのバランスが肝になる
①書体とウェイト
②サイズ
③字間
④行長
⑤行間
例えば、媒体が広告ポスターやパッケージだったりする場合、もしくはデジタルだとLPのTOPやバナー画像の際は、「情報として「何を優先的に見せたいか（見せると効果があるか）」の視点で理論を組みながら詰めていくことが多いです。そうすると、デザインプレゼンの際にもなぜその書体を選んだのか、レイアウトした位置やサイズの意図は何か、を含めながら話すことができます。
デザインを詰めていく上で「感覚的な美しさ」はもちろん大事ですが、共通言語にできる基本的な論理でのベースがあってこそ、自らの「審美眼」が生きてくるはずです。審美眼は、先天的なものももちろんありますが、日頃の観察と訓練で養っていけるものなので、今後も日々意識をしていきたいです💪
また、「2. 印刷とデジタルって何が違うの？」でも触れたように、印刷とデジタルの差分でわたしがよくモヤっとしてしまう壁が、文字組の要素に必須である「字詰め」（カーニング）です。
文字には見た目の「字面」と「仮想ボディ」というものがあり、テキストボックスにベタ打ちの状態だと、文字の空間に見た目のばらつきが出てしまい、美しさはもちろん読みやすさにも影響してきます。
ざっくりですが、例えばベタ打ちだとこんな感じ。
webやアプリでも、タイトル画像にしてしまう時なんかは調整しています。逆に雑誌などであっても、時間的制限やコスト次第で本文（ほんもん）全てに調整をかけることは稀です…。条件的に調整が可能なときは、是非詰めていきたい点です◎
カーニング視点に慣れていくと、「ああ…！ここの文字、カーニング！詰めたい…」と思うシーンが日常でも出てきます。
こちらの記事わかりやすくまとめられていたのでご参考に🙇♀️（また別のasakoさん☺️）
04.仕上げ
なるべく実寸大での検証
装丁やパッケージなど場合はダミー（カンプ）を作ってプレゼン
実際に使用予定の紙素材を使ったり、売り場に並べられたときの状態を合成で見せたりすることで、よりリアリティを持ってクライアントに判断もしてもらえますし、この段階で、PCの画面上では気づかない別の問題点が見えたりすることもあります。
デジタルでも、実際にスマホやブラウザの環境で検証するのと同じですね！検証→改善がしやすい環境は、デジタル領域の圧倒的な強みだと思います◎
4. 実践）Appデザイナーが使える書体見本帖はじめ
受講した講座には、最後に課題があり、私は日常業務で使えそうな「書体見本帖」にトライしました。
書体見本帖ってどんなもの？
参考:こういう感じのものです
書籍もたくさんありますし、各フォントメーカーさんがサンプルでくれたりします。
書体見本帖って何に使うの？
端的にいうと、書体選定のスピードUPに役立ちます。
和文の書体見本帖にあるといいもの
・フォントタイトル
・ウェイトのバリエーション
・ダミー文言：数サイズ
・トラッキング（文字間隔）違い：数バリエーション
・漢字・かな・カナ・英数・約物（記号類）
・メーカー/フォントデザイナー/作成における背景など
・使える条件（権利や料金、媒体など）
これらは全て必須ということではないので、自分が業務上デザインするにあたって必要になる観点に絞ったり、決まった制限があるという方は、その条件下でカスタマイズして作っておくのがベストです◎
個人的には、「2. 印刷とデジタルって何が違うの？」でも触れた、「混植」の見本帖を作るのもいつかトライしてみたいです。
私の業務はスマホApp画面を作ることが多いので、「フォントはOS準拠で」という頻出する条件でまずテンプレートをFigmaで作ってみました。
書体見本帖を作成時に対面した課題
HIGとMaterial Designの文字組ガイドラインが、和文においては曖昧ということでした。欧文フォントに関しては一般的なデザイン上のセオリーも固まっていて、OSにおけるレギュレーションも各々細かく指定があるのですが、和文（正確には日・中・韓）には詳細指定はありません。現時点では、基本的にアルファベットより和文は字面の設計が大きいので、並べる際には調整が必要といった記載です。Material Designでは多言語フォントの特徴についても記載があったので、参考になりそうです。
Google Fontsも見本帖の役割としても活用できそうですね！
日本のフォントレギュレーションについては、私たち日本人デザイナーで解釈を詰めていく必要があるのかなと思いました。どこか外部のデザイナーさんも交えて一緒にやってみたいです🙌
わたしの見本帖のブラッシュアップ課題
・スマホデバイス環境で読みやすい和文の行長・行間・文字間の追求
・実寸大で見れるという条件にするなら、スマホデバイスで見れるフォーマットにする（現状pdf）
・テンプレをベースに、アプリに実装難易度が低いフォントで展開する
・ビジュアルコンセプトワードで分類するタグを作る
・iOSとAndroidの近いフォント情報を載せる
・チームで平準化できるツールにする
5. 感想・まとめ
印刷でもデジタルでも、ルールや条件はもちろん切って離せないことなのできちんと理解して寄り添いながら、プラスαで価値の上がる表現を提案するのを忘れないようないにしたいな〜と思いました。
また、業務上の制限に囚われてばかりいると、細かいビジュアル上の詰めや自由な表現力が失われていってしまうので、時間を切り分けてトレーニングの時間も作っていきたいです〜〜💪
おまけ）参加者は意外にもWeb業界の方が多かったのが意外でした👀
講師の工藤先生のこちらの本も、レイアウトや組版の基礎を学ぶバイブルとしておすすめです。