「ルビンの壺」から考える、新しい視点で世の中を見るために大切な三つのこと

今回はフォントの話はちょっとお休みして、このサイトでお伝えしていきたい「新しい視点で世の中を見る」ということを考えたいと思います。

 

みなさんは「ルビンの壺」というのをご存知でしょうか?


Rubin2
By John smithson 2007 at English Wikipedia – Transferred from en.wikipedia to Commons by PHansen., Public Domain, https://commons.wikimedia.org/w/index.php?curid=13901986


上のような、黒地と白地の図形で、白を図としてみれば壺にも見えるし、黒を図としてみれば向かい合った二人の顔にも見える、というもの。

子供の頃、国語の教科書に載っていたのを憶えています。
もともとエッシャーとか「ペンローズの三角形」のようなだまし絵が大好きで、それと同じような感覚で、単純に面白いと思って印象に残ったのかもしれません。

しかし、あらためて考えてみると、この「ルビンの壺」、視点というものを考える上でとても大事なことを教えてくれるような気がします。

以下、もう当時の教科書は持っていないので、もし同じようなことを書いていたとしても深層意識のなせる業としてご容赦ください(笑)

 

1. はじめて見た時に「壺」だと思う人と、「顔」だと思う人に分かれる

当時、私がこの図形を「壺」だと思ったのか、「顔」だと思ったのか。

それはもう憶えていませんが、たぶん授業の流れで、どちらだと思う? と手を挙げさせられたのだと思います。

私が先生だったらそうしますもの。

そしてこれもきっと、全員の手がどちらかに挙がるわけではなく、偏りはあるにせよ、どちらにも票が入ったに違いないのでは、と思います。

 

もっとわかりやすいのが、こちらの絵でしょうか。


My Wife and My Mother-In-Law (Hill).svg
By William Ely Hill (1887–1962) – „Puck“, 6. Nov 1915, パブリック・ドメイン, https://commons.wikimedia.org/w/index.php?curid=3836554


こちらの絵、若い女性と老婆、どちらにも見えるというものですが、もう自分は最初、どう見ても若い女性にしか見えず、老婆に見えるという意見が理解できなかったことを憶えています。

 

まったく同じものを見ているのに、です。

 

まったく同じものを見ているのに、人によって見え方が違う。

それを理解できないと思うか、それもひとつの視点だと思うか、それだけで、世界の広がりがまったく変わってきます。

 

2. 「壺」と「顔」を同時に見ることはできない。

さて、人によって見え方が違うことが理解できたとして。

その相手に、どうしたらそう見えるのか? を教われば、だんだん、自分でもその見方をすることができるようになります。

ただし、ここでも注意が。
それは、たとえこの図を「壺」としても「顔」としても見られるようになったとして、同時に「壺」と「顔」を見ることはできない、ということ。
「壺」だと思って見ている瞬間は、顔の部分は地として消えてしまって、「顔」だと思って見ている瞬間は、壺の部分は消えてしまう。

どうやら、人間とはそういうものらしいです。

 

つまり、意識して見方を切り替えようとしなければ、どちらか一方の視点で固定されてしまう、ということ。

最初に持っていた視点も、かけがえのない、あなただけの視点かもしれません。

どちらか一方の視点だけでいい、というものではありません。

 

3. といいつつ、「ルビンの壺」と言っている時点で、「壺」であると印象操作されている。

最後に、実はいちばん大切かもしれないこと。

 

はじめに「ルビンの壺」という表現をしてしまっているので、もしこの図形のことを何も知らない人が見ても、大半は「あっ、これ壺なんだ」と思ってしまうのではないでしょうか。

何も言われずに見たら、「壺」だと思う人と「顔」だと思う人が半々かもしれないのに。

 

新しい視点を提供するために今までにない表現をする、というのは、もちろんとても効果的。

 

けれど、自分に都合のいいように、自分と同じ視点を読み手に強要するように、表現や記事のタイトルを言い換えてしまっている例は、残念なことに世の中にたくさんあります。

悪意だけでなく、善意からであったり、ほとんど無意識にそうしてしまうこともあるので、伝え手としても気をつけたいところ。

 

そして、受け手としても、それに惑わされないようにするためにも、いくつもの視点を切り替えられるようになっておくことが大事。

 

 

今回は、「ルビンの壺」…もとい、「ルビンの何かに見えるもの」をテーマに、「視点」ということを考えてみました。

丸明オールド

前回は、日本語フォントの基本形である明朝体とゴシック体についてお話ししました。
そして、ゴシック体には丸ゴシック体があることをお話ししました。

それなら、丸明朝体というものはないの?

はい、あるんです。

それが、カタオカデザインワークス(現・砧書体制作所)の丸明オールド。

丸明朝体

IMG_8393_2-1813

※制作者の片岡朗さんが書かれた「文字本」(誠文堂新光社)の表紙から引用しています

明朝体の特徴である、ウロコのところが丸くなっています。

 

はじめて使われたのは、サントリーモルツの広告。

明朝体の伝統を活かしながら、まったく新しい丸明朝体というカテゴリーを作り出したフォント。
それが話題になり、今ではさまざまなところで目にすることができます。

 

たとえば、新しい東京土産として評判の、「東京カンパネラ」。
【東京のお土産】人気のお菓子は「東京カンパネラ」!

 

そして、ここでも。

あなたの思う福島はどんな福島ですか?

今日も生きていることに感謝。南相馬市出身、広報課の久保川です。
いつも福島県に心を寄せていただき、本当にありがとうございます。

本日の全国紙朝刊をご覧になったでしょうか。県のクリエイティブディレクタ…

ふくしまから はじめよう。さんの投稿 2016年3月11日

東日本大震災から5年、全国紙朝刊に掲載された福島県の全面広告にも、丸明オールドが使われています。

 

実を言うと、これを知って、その想いに胸を打たれ、すぐにこの記事を書きたくなりました。
伝統と、新しさ。未来への挑戦。

そんな想いを伝えるのに、ぴったりなフォントです。

明朝体とゴシック体

今回は、日本語フォントの基本形、明朝体とゴシック体についてお話しします。

Google Fonts の説明をしたときに、明朝体とゴシック体を引き合いに出したのですが、そういえば、このふたつの違いをしっかり解説してないな〜、と思い至りました。

 

あるフォントが、明朝体なのかゴシック体なのか。
見れば、なんとなくわかる、という人は多いと思うのです。

 

じゃあ、具体的に何が違うのか? と訊かれて答えられるでしょうか。

 

実際に並べてみましょう。

mincho-gothic

 

明朝体(みんちょうたい)は、その名の通り、中国の明の時代ごろに使われていた文字を基にしたフォント。
なので、筆遣いを表現する、「ウロコ」があるのが特徴です。

小説の本文など、伝統や格調の高さを感じさせるフォントです。

 

ゴシック体は、もう少し幾何学的なかたち。
基本的には、横棒と縦棒の長さが同じになるように作られています。

読みやすく、現代的な印象を受けます。
もちろん同じ明朝体・ゴシック体の中でも、フォントによってその形は様々で、そこに個性が出て面白いところ。

 

街にあるさまざまな看板。

本屋さんに並んでいる本の表紙。

 

眺めながら、どうしてこのフォントを使っているのか? ということを考えると面白いです。

 

ちなみに、街にあるゴシック体の中には、線の角が丸い、いわゆる「丸ゴシック体」が多いことに気づきます。

 

IMG_6064-1453
なんだか、ちょっとなつかしい感覚をおぼえます。

なぜ、日本の看板には丸ゴシック体が多いのか?
気になった方は、こちらの本をどうぞ(笑)


 

はじめての Web Font (3) – 日本語フォントを使ってみよう

前回は Google Fonts によるWebフォントの使い方を説明しました。

今回は、それ以外の日本語フォントサービスを紹介します。

 

 

まず紹介するのは、TypeSquare

 

TypeSquare は日本の大手フォントメーカー、モリサワによるWebフォントサービス。

プロ向けの印刷物にも使われる、高品質なフォントが多数ラインナップ。

 

でも、お高いんでしょう…?

 

と思いきや、なんと。

会員登録することで「1万PV/月」「1ドメイン」「1書体」にかぎり無料で使える「スタンダード無料プラン」が利用できるのです!(2016年3月10日現在)

 

メールアドレスと氏名・住所などを入れて会員登録後、ログインすると、プランの設定詳細が見られます。

まず試してみて、本格的に使いたくなったら、有料プランに移行できるというのは嬉しいですね。

Shot 2016-03-10 22.33.22

大好きな丸明朝体フォント、「解ミン」も使えます!

 

また、既にモリサワのフォントライセンス「MORISAWA PASSPORT」を契約している方は、追加料金なしで TypeSquare が使用可能です。

テキスト装飾の CSSサンプル集も参考になります。(会員登録しなくても見られます)

 

その他、日本語フリーフォントが使えるWebフォントサービスは、以下のようなものがあります。

 

 

最後に、Webフォントを使う際の注意点。

 

日本語の特徴は、数字・記号・アルファベットだけでなく、ひらがな・カタカナ・そして漢字と、多くの文字が必要なこと。

そのため、フォントデータの読み込みに時間がかかることがあります。

また、古いブラウザではWebフォントの表示に問題があることも。

 

ただ、今後の技術の進歩やサービスの広がりによって、ますます便利になることは間違いないでしょう。

ブログやウェブサイトを運営される方は、ぜひ一度 Webフォントという世界を覗いてみてください。

 

はじめての Web Font (2) – Google Fonts

前回は、想いを文章にする上で、フォントを意識して選ぶというのが大事だということをお伝えしました。

そのための仕組み、Webフォントについて今回はお話しします。

 

もう一度、Webフォントの仕組みを簡単に言うと、Webサーバ上にフォントのデータを置いておき、表示する文章とあわせてダウンロードすることで、思い通りのフォントで表示させることができます。
ところで、ここで注意がひとつ。

フォントというものは、誰かが作ったものです。

コンピュータができる前から使われていた活字や筆文字をもとにしたフォントもあれば、最初からデジタルで作られたフォントもありますが、基本は同じ。
誰かが作ったものなので、そこには著作権があります。

なので、自分が持っているフォントを勝手にWebサーバにアップロードすることはできません。
無償で使える、いわゆるフリーフォントであっても、Webフォントとして使ってよいかはライセンスを必ず確認してください。

 

 

なんだか難しそう…と思ってきましたか?

 

大丈夫、自分でフォントを用意しなくても、Webフォントを簡単に使えるサービスが世の中にはあるのです。

もちろん、基本的には有料のサービスが大半ですが、まずは気軽に試せる、無料のWebフォントをご紹介します。

 

今回ご紹介するのは、Google Fonts
その名の通り、Googleが提供しているサービス。

上記のページで、使いたいフォントを選びます。

Google Fonts - Choose

左上の Filters のところでおおまかな分類を選べます。

ちなみに Serif(セリフ)というのは「ひげ」という意味で、日本語フォントでいうと明朝体に近い雰囲気のフォント。
San Serif(サンセリフ)というのは「ひげがない」、日本でいうゴシック体に相当します。

気になるフォントを選んで「Add to Collection」をクリックすると、コレクションに追加されます。

Google Fonts - Use

右下の「Use」をクリックして、さらにスタイル(太字や斜体)を選びます。
画面をスクロールすると、Webフォントの使い方の説明があります。

  • この文をコピーして、HTMLのヘッダ部分に追加 ※Wordpress の場合、テーマヘッダー (header.php)

<link href='https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif' rel='stylesheet' type='text/css'>

  • この文をコピーして、CSSの使いたい要素に追加 ※Wordpress の場合、スタイルシート (style.css)

font-family: 'Noto Sans', sans-serif;

たったこれだけで完成です!

 

WordPressを使っている場合、さらに簡単に使えるプラグインがあります。

たとえば「Easy Google Fonts」プラグインを使えば、外観のカスタマイズで「Typography」というメニューが追加されます。

Shot 2016-03-08 22.09.32

こんな感じで、Webフォントを使うことができます。

 

あれ…?
でもこれ、アルファベットしか変わってなくないですか?

 

はい。
残念ながら、2016年3月8日現在、この方法で利用できる日本語フォントは存在しないようです。

 

でも、実は Google Fonts には日本語フォントもあるのです。

それが Noto Sans Japanese

もともと「No tofu(豆腐・文字化けをなくす)」という目的で作られた多言語対応フォント。

現在は試験的に(?)Webフォントとしても提供されているようです。

Easy Google Fontsプラグインでは対応していないので、直接HTMLファイルとCSSに以下の記述を行います。
<link href='http://fonts.googleapis.com/earlyaccess/notosansjapanese.css' rel='stylesheet' type='text/css'>
font-family: 'Noto Sans Japanese', sans-serif;

これを適用すると、こんな感じになります。なかなかかわいいです! よね!


 

Shot 2016-03-08 22.47.58


今回は、Google Fonts でWebフォントを使う方法を説明しました。

次回は、それ以外のWebフォントサービスの使い方と、Webフォントの注意点をお話しする予定です。

 

2016/06/17 追記

Google Fonts がリニューアルされたので、新しく解説記事を書きました。→ Google Fonts がマテリアルデザインを採用してリニューアル