Author Archives: susanna test

Flow and Redacted: Check out these new options for wireframes and other early-stage designs



Give your simulated text a realistic look while making it easy to add copy later on with Dan Ross’s Flow Fonts and Christian Naths’s Redacted.



Showing text in an early-stage wireframe can be distracting, even if it’s just Lorem ipsum placeholder copy. After all, a successful wireframe is clean and simple, with just enough information to communicate an idea. But how do you convey “this is text” without showing text? 


One popular technique is to draw shapes that resemble a block of redacted text. (Redacted text is usually used as a security or privacy measure in a document to make certain words unreadable.)


Another technique is to use handwritten scribbles. This creates a sketch-like look that’s especially suited to quick concepting.



Images of handwritten scribbles and a block of redacted text.


Examples of text substitution styles used in wireframing. Left: Redacted Script, a handwritten scribble style. Right: Redacted text style. 



But instead of simulating redacted text with scribbles or shapes, now you can use a typeface to achieve the same effect. 

Image of an app UI with Flow Rounded


Flow Rounded in use


Flow Circular, Flow Block, and Flow Rounded from Dan Ross and Redacted from Christian Naths are four redacted text options. For a handwritten scribble style, try Nath’s Redacted Script, which is available in Light, Regular, and Bold.


Flow and Redacted not only make it easier to give your wireframes the look you want, they also make it easier to drop in copy later on (since you won’t have to replace shapes with text or switch out components). Plus, since fonts don’t destroy the underlying text data, all it takes is a single click to go from text to redacted text—and back again. 


All five fonts are available now on fonts.google.com.


Posted by Sarah Daily, Brand and Content Consultant





Zenフォントのおはなし:大平善道さんとのインタビュー



[きむ]  本日はインタビューに応じていただき誠にありがとうございます。まず、大平さんについてご紹介いただけますでしょうか?どのような経緯でタイプデザイナーになり、Zenファミリーのプロジェクトを始めることになったのかぜひ聞かせてください。


[大平] ご招待くださりありがとうございます。私は写植でのDTPオペレーターを経験した際に、書体の美しさに触れ、私自身も書体を作りたいと思うようになりました。当時の組版発注者は、印刷、出版、映像、広告関係者でした。製作者によって指定書体に偏りがありましたが、その中でも共通する書体があることを知りました。Zen書体で目指したのは、どのような制作物にも共有できるオールマイティーな書体ファミリーです。そして、読みやすく美しい、息の長い100年続く書体を生み出したいと考えました。


Zenオールド明朝の3種類のウェイトと縦書き、横書きの使用例。あらゆる場面で使いやすく、格調を備えたオーソドックスなオールドスタイル明朝ファミリー。
Zenオールド明朝

[きむ]  Zenファミリーをリリースした当時の反応はどうでしたか?


[大平]   1997年、ZENオールド明朝-R(Regular)は1ウエイトだけのリリースでした。正直に言うと、当時の反応は殆どありませんでした。しかし、翌年から徐々にデザイナーさん達のコミュニティなどで書体が認知されるようになり、ZENオールド明朝を探し求め、購入者がどんどん増えていったことを思い出します。当時を振り返ると、小さなベンダーがライセンス事業で本当に成り立つのか?とても不安でした。結果的にファミリー化も実現し、ここまで継続できたことは非常に意義のある経験でした。



[きむ]  Zenファミリーをデザインする際に、高い可読性を持たせるためにどのようなことを意識しながら制作しましたか?


[大平]    伝統的なものは、親近感が湧くのでわかりやすい。美しいものには、惹かれるので違和感が生まれにくい。そしてメリハリは、強弱などがあり、可読にふさわしい心地よいリズムをつくると考えられます。これらの理由から「伝統的」や「美しい」、「メリハリ」には、質の高い可読性を呼び込む要因があると考えて、意識していました。


イラストで男性と女性がキャンプファイヤーを囲み、Zenアンチックについて話をしている。吹き出しはZenアンチックで書かれている。
Zenアンチック、ZenアンチックS

[きむ]  制作の際に、どのようなリサーチなどをされましたか?


[大平] 古い活字や古い書物をよく眺めました。文字の中に味わい深さを感じとり、可読性も感じられました。これらの文字から多くを学び、影響を受けました。私の書体制作の基盤となっています。



[きむ]  あのような画期的な書体を古い書物等からお作りになったのは素晴らしいですね。それまでにZenファミリーのような書体が存在してなかった作られなかったのはなぜだと思いますか?現代の技術と研究があれば、Zenファミリーのような書体をもっと作ることは可能だと思いますか?


[大平] 過去の古い活字には高い可読性を持ったオールドスタイルの書体はたくさんありました。私はその古い書体から多くのヒントをいただき作品に反映させてきました。そして、オールドスタイルを重要視して読みやすさを追求した結果、Zenファミリーの「良い可読性」が得られたと思ってます。どこにアプローチするかが大切です。様々な可読性へのアプローチがあれば書体に多様性を育みます。そして、高い可読性を持つ書体がたくさん生まれてくると考えてます。


Zen丸ゴシックの縦書き、横書きを含めた5種類のウェイトの使用例。おしゃれで可愛らしい、柔らかくて優しいといったキーワードでのコミュニーケーションに最適。
Zen丸ゴシック

[きむ]  今後大平さんの書体を多言語展開をしたいと思いますか?Zenファミリーと似た方向性のほかの日本語書体の中で多言語展開しているものはありますか?


[大平] 文字の拡張や多言語展開はとても有意義なことだと思うので、ぜひ挑戦してみたいです。Zenファミリーに似た他の日本語書体で多言語展開しているものはないと思います。


Zen角ゴシックの10種類のウェイトの使用例。
Zen角ゴシック



[きむ]  フォントを利用するユーザーのみなさんに、フォントによっていかに「読みやすさ」が変わるかを認識してもらうためには、どんなことができると思いますか?見た目のデザイン的な要素だけでなく、目的や読み手によってフォントの選定基準が変わることをもっと知ってもらうために、わたしたちができることはなにがあると思いますか?


[大平] 私の体験談をお話します。以前、バリアフリーに関わる公共施設のサイン計画について、デザイン会社から相談の依頼がありました。私はZenファミリーフォントを提案しましたが、クライアントはなぜそのフォントが適しているのか詳しく説明して欲しいとのことでした。そこで、私はいかにZen書体が読みやすいか詳しく説明しました。後日、クライアントから「今まで以上に書体と可読性の関係性について理解でき、書体の見方が変わりました」との連絡をいただきました。ユーザーと接するなかで「読みやすさ」について認識されている方は少ないと感じてます。ユーザーや書体デザイナーが気軽にフォントについて相談できる場所の提供や、意見を共有できる仕組みが必要なのかも知れません。


Zen紅道の使用例。中心に縦書きで大きく”紅道”、左横に赤い鯉の絵が書かれている。
Zen紅道


[きむ]  今現在のフォントやタイポグラフィ業界における課題はなんだと思いますか?


[大平]   フォントや書体デザイナーの数が年々増えていますが、記憶に残るデザイン、良い可読性を持つフォントが少ないように感じてます。使われ方、目的、需要などを熟慮し、貴重な時間を惜しみなく使い、制作に挑んで欲しいと思います。フォント制作に挑むには多くの時間を必要とします。書体デザイナーの取り巻く環境、経済的な問題をクリアーできる仕組みも必要ではないでしょうか。



[きむ]  貴重なお時間をありがとうございました。最後になりますが、大平さんの書体やタイポグラフィにおける次の旅はどこに続きますか?


[大平] 今はわかりませんが、たぶん、文字との出会いを大切にした放浪の旅に出るかも知れません。



白黒の写真で白いYシャツ着用し、黒縁のメガネをかけた大平義道氏
大平義道氏のプロフィール写真


大平善道

文字組版と向かい合う中で、いつしか書体デザインに携わる。これまで和文23書体、欧文3書体の作品を製作し、代表作は、和文の伝統的な美しさを追求した「ZENオールド明朝Nファミリー」など。現在は印章で用いる古代文字(篆書)に関心を抱き、オリジナルデザインの文字で金属製印鑑を製作している。Zen Fonts

きむみんよん
日欧韓トリリンガルのUIUX&タイポグラフィコンサルタント。専門は多言語タイポグラフィ。日本の大手タイプファウンダリにてフォントのプロジェクトマネージャーを経て、現在は個人事務所Em Dash(エムダッシュ)を立ち上げ、様々なプロジェクトに参加している。近年ではGoogle Fontsとの日本語および韓国語のフォント開発、Adobe Creative Cloudの東アジア言語のUXリサーチ&デザイン、D&AD Awards 2021にてタイプデザイン部門の審査委員などに携わっている。タイポグラフィの知識を活かし、フォントの可能性を広げ、より多くの人々に文字とフォントの楽しさを伝えていくことを目標としている。 @mintoming  AtypI presentation 


Zenフォント: 新しい日本語フォントコレクションの登場 – 日本語フォントの複雑な美しさについて –


筆者: きむみんよん

2019年、Google Fontsは日本語フォントコレクションの大幅な拡大プロジェクトを始めた。当時Google Fontsには10ファミリー程度の日本語フォントしかなく、そのほとんどは基本的な明朝体やゴシック体のみだった。それが今では、本文用から見出し用まで様々なスタイルの38の書体が、18組のデザイナーより追加され、豊富で多彩な日本語コレクションとなった。これら新しく追加された日本語フォントは、すべてGoogle Fontsを通して誰でも簡単にダウンロードして、どのようなプロジェクトにも使用することができる。


7種類のZenフォントファミリーの名前と、薄紫、緑、赤、黄土色のそれぞれの背景色にさまざな太さの黒いラインでグラデーションが描かれている
Google Fonts最大規模の日本語フォントコレクション、Zenフォントファミリー

この日本語コレクションの拡大において最も力を注いだものの一つは、大平義道さんによるZenフォントコレクションの招致だった。ZenフォントはGoogle Fontsの新しい日本語コレクションにおける最も大きいファミリーとして、明朝体、ゴシック体、丸ゴシック体、そしてデザイン書体など全部で23の日本語書体と3つの欧文書体が加わり、更にはAdobe Fontsでも利用可能となった。(より詳しくは:『Zenフォントのおはなし:大平義道さんとのインタビュー』


日本語のコンポジションはひらがな、カタカナ、漢字などさまざまな字種を混ぜて文書を作ります。それそれの字種の部分にタグが貼られている。
日本語を書くときは様々な字種を使用する。

日本語フォントの構造を理解する

日本語フォントには他の言語にはない独特の機能やシステムがある。それらを理解しクオリティの高い日本語フォントをリリースするため、Google Fontsチームはこの独特なタイポグラフィカルチャーを学ぶ必要があった。そのため、私はタイポグラフィコンサルタントとして、クオリティの高い日本語フォントが持つべき重要な特徴を評価する新しい基準を設けた。


日本語は複雑な文字である

日本語は文字のるつぼかもしれない。日本語を書くためには、5種類の文字が必要だ。大昔の日本では、中国より漢字を借りて当て字をしていた(これを万葉仮名という)。1100年ごろになって、万葉仮名をくずして書いたひらがな、省略して書いたカタカナが生まれ、現代ではカタカナは外来語表記に使われている。さらに、アラビア数字と、欧米圏の言語表記のためのラテンアルファベットが加わった。これらすべての文字種を含む日本語フォントが主流だが、中には収録している漢字の数が少なかったり、漢字が全く入っていないけれども素晴らしいクオリティの日本語フォントもある。


多様多彩な文字セット

欧米圏のユーザーのために作られた欧文書体に比べ、漢字を含む日本語フォントは膨大な文字数を持っている。最も大きい日本語の文字セットでは、なんと2万3千を超える文字が収録されており、日本語のタイプデザイナーは単純に描かなければいけない文字数が多いだけでなく、たくさんの種類の文字セットを扱わなければいけないのだ。これら日本語文字セットには様々な区分と基準が存在する。


漢字の文字セット:Adobe、JIS、常用漢字、そして教育漢字

日本産業規格(JIS)に則った漢字の区分は4つの水準があり、一般的な漢字の文字セット分類の一つである。「人名用漢字」は戸籍に人の名前として登録できる漢字のうち常用漢字に含まれないものを言い、JIS漢字区分の各水準に分散して収録されている。最も小さい漢字の文字セットの「教育漢字」は、小学校で学ぶ漢字を収録しており、6つの段階で分かれている。「常用漢字」は高校までで習う漢字領域で、法令、公用文書、新聞、雑誌、放送など、一般の社会生活において現代日本で必要不可欠な2,136字の漢字を収録している文字セットである。


多くの日本語フォントはAdobe-Japan 1に準拠しており、Adobe Japan 1-3(9,354文字)が最も一般的で、Adobe-Japan 1-6が最も大きい文字セットだ。

これらはJISの漢字水準とも繋がっており、例えばAdobe-Japan 1-3はJIS漢字の第二水準に相当する。この文字セットは一般生活で必要な漢字に加えて、利用頻度が低めの珍しい漢字もいくつか収録している。Adobe-Japan 1-6はJIS漢字の第四水準まですべて収録しており、どのような日本語文章も組むことができる。


  • JIS 第一水準:  全ての教育漢字と常用漢字の一部を含めた2,965文字を収録している。

  • JIS 第二水準: 第一水準に3,390文字を追加しており、一般生活で必要な漢字が含まれている。Adobe-Japan 1-3文字セットに相当する。


  • JIS 第三水準: 第二水準にさらに1,259文字が追加された、Adobe-Japan 1-4に相当する文字セットだが、中途半端な範囲なため、近年開発される日本語フォントの多くはJIS第二水準もしくは第四水準のどちらかの文字セットを収録している。


  • JIS 第四水準: JIS漢字水準のうち最も大きい文字セット。第四水準で追加される2,436文字のほとんどは極めて珍しい漢字だが、出版物や行政書類などで必要な単語や固有名詞を記すのに必要となる。


JIS 第一水準は永、花、円、英など馴染みのある漢字が含まれ、JIS 第四水準では飂、蘞など日常では滅多に目にすることない漢字が含まれる。
 JISの水準が高いほど、より複雑で珍しく画数も多い漢字が多くなる

Google Fontsの日本語フォントコレクション拡大において、膨大な数のフォントを開発・管理しなければいけなかったため、文字セットの理解はとても重要だった。ほとんどのフォントは最も一般的な文字セットのAdobe-Japan 1-3に準拠していたが、JIS第三水準に準拠したフォントや、教育漢字のみ収録しているフォントなど、様々なフォントがあった。


かなフォントのPalette Mosaicから、JIS第三水準までカバーしているDela Gothicまで4種類のフォントの使用例。
日本語フォントの様々な文字セットの例。すべてGoogle Fontsから利用することができる


漢字の異字体切替

同じ漢字でも異なる形の「異体字」が存在することをご存知だろうか?


現在デジタルフォントで見る漢字と、ペンや筆で書くときの漢字は字体が異なることがある。フォントはよりシンプルで簡素化した形をしているが、そこから漢字そのものの構造や字形を学ぶことは難しい。異体字の中にはこのように実際手で書くときの字体に近い楷書体的な特徴を着せた字形をしているものもある。これによって読者はより見慣れた形の漢字を目にすることができ、子供たちの漢字学習にも役立つ。


さらに、異体字の中には旧字体の漢字を含むものもある。出版物や公式文書、意図的なデザインとして利用されることが多いが、旧字体と言っても中には生活でまだよく目にする、使用頻度の高いものもある。


逢, 葛,祇, 噌の異体字切替。
漢字の異体字切替の例。

日本語フォント内のラテンアルファベット(従属欧文)

日本のタイプデザイナーは、日本語フォント内に入っているラテンアルファベットを「従属欧文」と呼ぶ。一般的な欧文書体は文字によってそれぞれ異なる字幅を持っているが(これをプロポーショナル字幅と言う)、漢字は全角で描かれているため、ほとんどのラテンアルファベットより横に長い平体に見えてしまう。これを解決すべく、日本語フォント内の他の字種と調和させるために、字幅を若干広くする、アセンダーやディセンダーを狭くする、カウンター(ふところ)を大きくするなどの調整を施したものが従属欧文である。加えて、他の言語では類を見ない「全角アルファベット」の収録も日本語フォントでは一般的である。


“Hello Type”の文で比較する従属欧文と純欧文の違い
2つの文章は、各自、上は日本語フォント「しっぽり明朝」の従属欧文、下はTimes New Romanと異なるラテンアルファベットで組まれている。比べて見ると、日本語フォントの従属欧文のほうが、純欧文よりも字面が大きく、カウンター(ふところ)も広く描かれている。

デザインコミュニティにとって日本語フォントコレクション拡大が意味すること

Google Fontsの日本語コレクション拡大は、単にフォントの数が増えるという事実以上の意味を持っている。グローバルフォントプラットフォームに日本語フォントが多数追加されることは、Googleがいかに日本語フォントと文化に注力しているかの証明でもあるのだ。現在、日本や韓国では、フォントの利用は国内でのみ可能で、海外からの購入やサブスクリプション契約はできないことが多い。今回の日本語フォントコレクション拡大により、Google Fontsを通して、全世界のユーザーが日本語フォントが使えるようになっただけではなく、日本語という独特な言語の美しさと出会い、体験することができるのだ。



きむみんよん
日欧韓トリリンガルのUIUX&タイポグラフィコンサルタント。専門は多言語タイポグラフィ。日本の大手タイプファウンダリにてフォントのプロジェクトマネージャーを経て、現在は個人事務所Em Dash(エムダッシュ)を立ち上げ、様々なプロジェクトに参加している。近年ではGoogle Fontsとの日本語および韓国語のフォント開発、Adobe Creative Cloudの東アジア言語のUXリサーチ&デザイン、D&AD Awards 2021にてタイプデザイン部門の審査委員などに携わっている。タイポグラフィの知識を活かし、フォントの可能性を広げ、より多くの人々に文字とフォントの楽しさを伝えていくことを目標としている。 @mintoming  AtypI presentation