読者です 読者をやめる 読者になる 読者になる

CrowdWorks Designer Blog

クラウドワークスのデザイナーが書くブログ。深いような、そうでもないような知識、体験、考察をお届けします。

文字について考えよう Vol.1

f:id:humcooh:20170517163940p:plain

「文字には不思議なちからがあります」とTRICKというドラマで山田里見(野際陽子さん)が言っていたのを、ふと思い出しました。

はじめまして、CrowdWorks UXデザイングループの浜野です。文字が好きすぎるデザイナー(グラフィック歴6年:Web歴1年半)です。

突然ですがみなさん、好きな書体はなんですか?

私がいま一番好きな書体はBrandon Grotesquです。

f:id:humcooh:20170517152341p:plain

可愛らしい印象を持ちながら、シンプルで力強いイメージも持っている、とても魅力的なフォントです。Cap & Lawの相性がいまいち悪く、使う時はもっぱらAll Capsで使ってしまっていますが…

和文であれば、A1明朝やこぶりなゴシックなどのフォントを溺愛しています。

嫌いな書体はDINです。

f:id:humcooh:20170517152453p:plain

正確に言うと、訳もなく使われているのが見えてしまうDINが可哀想で目も当てられないのです。

 フォントには生まれた国や歴史、文化などがあり、もちろん得手不得手があります。DINは1930年頃ドイツ工業規格(Deutsche Industrie Normen)のために作られたフォントで、ドイツの道路看板などに使用されています。日本でいうところの「公団ゴシック*1」にあたります。

※ちなみにこの「公団ゴシック」は高速道路というスピードの高い環境下で、的確に情報を認識させるために、棒を数本少なくしたりと本来の文字としての正確さを犠牲にしているので、興味深いですよね。

 必ずしも、日本のデザインにドイツのフォントを使ってはならない、ということではなく、歴史や文化を理解した上で適切なフォントチョイスをしよう、ということです。

さて前置きが長くなりましたが、そんな文字バカが文字について日々悶々としていることをお話ししたいと思います。

日本語っておもしろい

日本語はとても特殊な文字だと言えます。いまこの記事を読まれている横組みの場合と、小説などで目にする縦組みの2種類が存在します。欧文など横組みがメインとなる文字とは違い、縦横2方向からのアプローチを考慮する必要があります。

一方、横組みだけの欧文はシンプルに感じがちですが大文字小文字という区別があるため、和文とは異なる特殊な構造をしています。

さて、突然ですがデザイナーが嫌う半角記号ですが、これはなぜ嫌っているのでしょうか。スペースも省略できるし、いいことづくめだと思いますよね。

しかし、先述したとおり欧文には「大文字」と「小文字:特に j y p qなどのディセンダラインまで到達する文字」が存在するため、記号はそのどちらでも違和感の無いように、ベースラインより下になっているんです。

f:id:humcooh:20170517152927p:plain

私はこれを「半角落ち」と呼んでいます(半角記号が使われて少し下に落ちているから)。この違和感こそ、私たちが半角記号を嫌っている理由です。

※全角記号を使用すると、左右に変な間隔が開いてしまうのですが、最近では約物を認識して間隔をツメるCSSや、全角約物を半角のようにスペース調整をしたWebフォントを作られている方がいるので、尊敬の念を抱いております。

そして欧文は、和文と文字を定義する基準が異なります。

f:id:humcooh:20170517154124p:plain

正方形のプロポーションを持ち縦横2方向からのアプローチを考慮する日本語と、大文字小文字があり上下のバランスを考慮する英語。これら基準の異なる言語を組み合わせるときには、考えなくてはならないことがたくさんあります。

和欧混植で一番理想的な方法は

Adobe IllustratorやIn Designなどの日本語をイジるのに最適なツールを使うことです。合成フォントを使用することにより、欧文と和文の大きさやベースラインを細かく調整することができます。 f:id:humcooh:20170517154300p:plain

※合成フォントを作るときに注意する点:和文と欧文が同じ大きさ、同じ重さ(見た目のバランス)になるように ※この設定は本文中の和文と欧文の割合、フォントの組み合わせにより微調整が必要になります(欧文は抜けの空間が和文に比べて大きいので欧文が多い場合はスカスカに見えてしまうため)

f:id:humcooh:20170517170419p:plain

Adobe IllustratorやIn Designで文字のバランスを調整する感覚で、Webの文字も簡単に微調整できたらいいのに、と思うのです。モヤモヤします。

そもそも日本語にとってに最適な環境って何なの?

先述した通り、和文と欧文では大きく基準が異なります。欧文の基準をそのまま和文に適応するとどうなるでしょうか。

f:id:humcooh:20170517154625p:plain

行間の開きがまったく異なって見えますよね。和欧混植の場合、まったく同じline-heightを設定していても、和文がメインの場合と欧文がメインの場合ではその行間は全く違って見えてしまいます。このことから、和欧混植の組版をする場合(文字サイズの微調整ができない場合)は、どちらがメインなのかを考えて行間を設定してあげる必要があります。

そして和文の場合、行間の考え方はいくつかありますが…

基本的には文字サイズを基準とし、25%単位で行間を捉えるのが伝統的な考え方です。文字サイズの50%を開ける場合は二分(ニブ)アキ、25%を開ける場合は四分(シブ)アキと呼び、75%を開ける場合は二分四分(ニブシブ)アキと呼びます。

Adobeなどでは、この二分四分アキを基準とし、日本語が読みやすい行間としています。line-heightだと1.75になります。

もちろんこれも、テキストエリアの幅や端末などの環境(閲覧者の目とデバイスの距離など)やフォントの種類やサイズによって異なります。読みやすいかどうか、を常に考える必要があるんですね。

つまり

いろいろ長々とお話ししましたが、今回お伝えしたかったことは

  • 和文と欧文は異なる基準で成り立っているので同じ数値を与えても見え方は変わること

  • 欧文は和文よりも小さいからバランスに注意すること(書体によっては例外があります)

  • 半角約物を使うときは違和感に注意すること

  • 和欧の比率や文字量、テキストエリアの大きさによって適切な行間は異なるので、読みやすいかどうかは逐次考えよう

懐古主義、紙媒体至高主義というわけではなく、日本語をより読みやすく試行錯誤してきた先人たちの知見を、日本語を使う身としては大切にしたいと思うのです。より情報を伝えやすくするために、何ができるかを考えたいですね。

この記事を読んで、少しでも文字に興味を持っていただけた方、今日はちょっと視点を変えて、いろいろな文字を眺めてみるのはいかがでしょうか。

もっと色々と書きたかったのですが、かなり膨らんでしまったため、この続きはまた次回お話しできればと思います。

さいごに

CrowdWorks UXデザイングループについて「もっと知りたい!」という方や、デザインについて話してみたい、好きなフォントについて熱弁したい方、ぜひとも恵比寿にあるオフィスまでお気軽に遊びに来てください。

www.wantedly.com

それではー。

*1:2010年まで使用されていましたが、現在はヒラギノ角ゴシックW5に変更されています

デザイナーとデザイナーじゃない人でデザイン組織を作る(UX & Service Sketch #27 登壇レポート)

f:id:takeru0757:20170510171135j:plain

こんにちは。エンジニアの廣瀬です。連休中に『ラ・ラ・ランド』観てきました。とても良かったです。もう一回観に行きたいです。

さて、冒頭に書いた通り、僕はエンジニアで、つい最近までは他のエンジニアと一緒に開発チームで実装などを行っていましたが、今年の春からは“UXデザイングループ”というデザイン組織でデザイナーと一緒に仕事をしています。

とは言っても、ジョブチェンジをしたわけではありません(社内では「廣瀬、エンジニアやめるってよ」みたいな誤解も一部ありました)。いわゆるデザイナー、ビジュアルデザイナーになるつもりも今のところはありません*1

それではなぜエンジニアがデザイン組織に所属することになったのか?――そのあたりも含めて、先日、弊社のオフィスで開催された『文化の違いを多角的に捉える UX & Service Sketch #27』(Media Technology Lab. さん主催)というイベントでお話をさせていただきました。

mtl.connpass.com

*1:色々あって「UXデザイナー」という肩書は増えました。

続きを読む

デザイン組織で初めて読書会をやってみて良かった3つのこと

f:id:yusuke-tamura:20170428184104j:plain

はじめまして。

先月からクラウドワークスにジョインしました、デザイナーの田村と申します。

突然ですが、あなたは「読書会」というものに参加したことがありますか?

読書会とは、複数のメンバーで集まって本を輪読したり、本の内容について議論をしたりと、読書を通したコミュニケーションを行う会合のことです。

実は先日から、わたしの配属されたUXデザイングループでも初めて読書会を開催してみたのですが、実際にやってみると良いことがたくさんありました。

この読書会の良さを、ぜひたくさんの方に伝えたい…!

そこで今回は、そもそもなぜ読書会を開いたの?というところから、実際にやってみて良かったことまで、読書会の良さをご紹介したいと思います。

続きを読む

グラフィックデザインばっかやってきたデザイナーがWeb事業会社での仕事を通してわかってきたこと。

どうも、みなさま初めまして。

クラウドワークス 経営企画室
ブランディングPRチーム
アートディレクター(長い)

鈴木雄大です。

前職では、某広告代理店直の制作会社で紙媒体広告をメインに、しこしこデザイナーやってました。

続きを読む

リクルートテクノロジーズ主催 UI BATTLE vol.2 の優勝チームのUIデザインプロセスを公開してみる

はじめまして。 デザイナーの上田と申します。

最近は社外への露出が少しずつ増えてきて、少しでも覚えてもらいやすいようにということで、思い切って髪の毛を白髪にしてみました。イベントでお会いした際はどうぞよろしくお願いします。

さて、2017年3月に開催されたリクルートテクノロジーズ主催 UI BATTLE vol.2 に参加し、 「MATRIX SEARCH」という新たなUIを提案し、クラウドワークスのデザインチームが優勝しました。

f:id:ueda1023:20170405191354j:plain (THE GUILD 深津さんとUXデザイングループの参加メンバー)

f:id:ueda1023:20170405191536j:plain (MATRIX SEARCHのプレゼン資料の表紙)

イベントの様子や私たちのプレゼンテーションはログミーさんにレポートしていただいているので、 この記事ではアイデア発想やプロトタイピングのプロセス、自分たちなりに意識したポイントを共有できればと思います。

logmi.jp

続きを読む

デザイナーブログ始めました。

Hello, world!

ザザ・・・ザ・・・・

どうも初めまして。聞こえますか。

こちら、クラウドワークスです。クラウドワークスのデザイナー 一同です。

あなたが見ているこのブログは、クラウドワークスのデザイナーが書くブログです。深いような、そうでもないような知識、体験、考察を、デザイナーが持ち回りでお届けしていく予定です。

末長いお付き合いを、よろしくお願いします。

ザ・・・ザザ・・・・

あらためて、はじめまして。

えっと・・・変な導入ですみません。クラウドワークスの新(アタラシ)といいます。デザイン組織でジャーマネ的なものをやっております。最初ということで、最初っぽい記事を書こうと思います。

続きを読む