デザインの良し悪しを語るのに必要な「分解」について【書体編】

前置き（長い）

先日、というか結構まえの話になるのですが、とあるSNSを閲覧していたところ「明朝体で喋る人が好きなのだけれど大体の人がゴシック体で会話をしておr…（以下省略）」といった内容を発信している方をお見かけました。
こちらの投稿は「その感じ、とてもよくわかります」と言う分かる派と「明朝体やゴシック体といったものは文字として表されるものにも関わらず、それを用いて喋るとは一体どういうことなのか？」と言った分からない派が発生し、書体について様々な意見が投じられていたようです。
しかし「分かる派」の方々でも具体的な説明を求められると、「そいつはなかなか難しい」という様子で双方の理解は平行線を辿り、霧散、といった具合です。

筆者はいちおうデザイン的なそれを生業としており、先の投稿にあったような「明朝体」「ゴシック体」という類のものを意識する時間が非デザイナーの人よりは相対的に多いような気が何となく、しなくもないかな、と感じています。 そういった事情もあり「明朝体で話す感じ」については一定の理解が可能であるのと同時に、「意味がわからない」とおっしゃる方の言い分も確かによく分かります。 なぜならこういったやり取りは書体に限ったことではなく、主にデザイン界隈、すなわち「意匠」について語られる時によく見かける風景で、昨日今日に始まったことではないからです。

例えて言うなら、ある意匠（デザイン）を見て「うわぁ、これめっちゃイケてる、最先端、それでいてダウナー」的な感想を持ったとしても他の人が「全くそうは思わない、なぜそう感じるのか説明しろ」と言われて具体的な説明ができなければ先ほどの事例と同じことで、お互いの意見はいつまでたっても平行線、一生お互いの良いと思った素敵なデザインについて理解しあえないままで終わることになり、とても悲しい、的なことになりかねない。

とまあ極端な例ですけど、でもデザインが醸し出すイメージ・印象を具体的な言葉に変換して伝えることはそんなに難解なことなのか？といったら案外そうでもないハズです。 それはデザインされたものを「分解する」ことで誰でも簡単にできることだと思います。

ひっじょーに長くなりましたが、取りあえずそういうことで今回はデザインを「分解する」的なものが何なのかについて、「書体」を例に考えていきたいと思います。

基礎を知る

まず、はじめに分解しようと思う要素の基礎を確認する必要があります。 筆者自身がよく行う事ですが、既に知っている事であっても分解していこうと要素については調べ直すようにしています。 知っていると思っていた事柄も過大解釈していたり、思い違いをしていたり、偏った見方をしていたり、という場合も決してゼロではありません。 基本的には自分の知識や記憶をあてにしない、というスタンスでいることが大事なことかもしれません。

ということで、まずは書体の基本をざっと確認していきます。

書体の基本

書体とフォント

書体の英訳がフォントと考えている人もいるため混同されがちですが、厳密には違います。

書体：統一されたデザインを持つ文字の集まり
フォント：書体をディスプレイ表示や印刷などで使えるようにデータ化したもの

このような違いがあるものの実際には「書体」のことを指すときにも「フォント」と言いがちですし、仕事以外の場ではその違いを意識して使うことはあまりないかもしれません。 ちなみに書体の英訳として相当するのはtypefaceらしいです。

和文書体と欧文書体

そして「書体」と一口に言っても世界には数え切れないほどの、ありとあらゆる種類が存在しています。 すべてを確認するのはこの場ではムリな気がする。 なので理解しやすいように大きく２つに分けてみるとまずは「和文書体」と「欧文書体」に大別することができます。 読んで字のごとくですが、

• 和文書体：日本語（ひらがな/カタカナ/漢字/その他）をデザインした書体

• 欧文書体：アルファベット表記の文字をデザインした書体

簡単に説明するとこのようになります。

明朝体とゴシック体

さらに和文書体も大きく２つの種類に分けることができるのですが、それが先述した「明朝体」と「ゴシック体」です。 これらは馴染みがある書体ですよね。 それぞれの特徴は

• 明朝体：縦の線は太く、横の線は細くデザインされており、筆で書いたような「うろこ(※)」「はね」「はらい」などもデザインされた書体

• ゴシック体：線の太さがほぼ均等で直線的にデザインされた書体

(※)うろこ：線の右端、曲がり角の右肩につけられる三角形のこと。毛筆で書いた文字にある「押さえ」。

セリフ体とサンセリフ体

また、欧文書体も「セリフ体」と「サンセリフ体」の２つに大別できます。

• セリフ体：縦線が細く、セリフ(※)をもつ書体。欧文書体の中でもっともスタンダード。

• サンセリフ体：すべての線の太さがほぼ均等で、セリフをもたない書体

(※)セリフ：明朝体でいう「うろこ」と同じ（ような）もの

こうやって比べてみると、和文書体も欧文書体も同じような大別の仕方で、「あしらい」なども非常に似ていることがわかります。

と、ここまでの解説は書籍やwebなどにももっと詳しく解説されていますのでもっと知りたい方は自力で調べて下さい。

「書体」とはいったい何なのか（「分解」的なことの実践）

それでは「書体」がどういったものか大まかにわかったところで、実践です。

「書体」とは上記の『書体の基本』にも書いたように【統一されたデザインを持つ文字の集まり】です。 ではその「文字」とは何か？ 端的に言ってしまえば「言葉/言語」を表す「図形」と言い換えられます。

ではその「図形」は何なのか？ それは「点と線」で構成された形です。

つまり、人はある特定の「点と線」の重なりを「文字」と認識しているわけです。

ではここで、２つの線を見比べてください。

「力強い線」はどちらで「繊細な線」はどちらでしょう？
通常、左の線を力強く、右の線を繊細と感じるのではないでしょうか。
このように、人は「線」の太さ・強弱に対して共通する印象・イメージを持っていると言えます。

では

• 「線（と点）」の重なりを「文字」を認識していて

• その「線」の強弱に特定の共通するイメージを持っている

ということは 持ってもらいたい印象・イメージを、線に強弱をつけることによってコントロールされた「文字」が「書体」ということになります。

便宜的に線の強弱と書きましたが、もちろんそれだけではありません。 「文字」を織り成す線には直線もあれば曲線もあり、また途中で曲げて角をつけることもあれば、その角度の付け方にもイメージが宿ります。
つまりは人が共通で持ち得る「あしらい」に対するイメージを積み重ねることよって、「書体」に「雰囲気」を持たせているのです。

例：ゴシック体

上記のことを前提として、「ゴシック体」の持っている雰囲気的なそれを例として書き出しておきたいと思います。

ゴシック体のイメージ ：強い、重さ、頑健 なぜそういうイメージを持つか？：濃さは密度を連想させ、塗りの部分が多いため字が重く見える。また、角張っていてゴツゴツとしている所に男性的な印象を持つ。輪郭もはっきりとしているので、擬人化するとハキハキと大きな声でしゃべる男性が想像される。

(もう少し例を出しておきたいところですが、体力の限界なので終わります)

このように細かく分けて考えていくことで、「これめっちゃイケてる」と思った時に説明の手がかりになるはずです(多分)。

参考書籍：タイポグラフィの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック-[デザインラボ]

タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック-[デザインラボ]

あと【書体編】と明記してありますが続きものというワケではないのでこれで終わるかもわからないなぁ…と 自分のプレッシャーにならない程度にゆるいペースでまとめて逝きたいです。

書体について教えてくれる人が居たら弊社にお越し下さいませ。

【モバイルフレンドリー対応：実例紹介】デザイナーが最低限考慮するべき3つのポイント

アスタミューゼデザイン部のMatsumotoです。
早いもので2017年も折り返し。
弊社では、半年に１回人事考課があり、ちょうど先日2017年上期プロジェクトの振り返りを行っていました。

今回のエントリーでは、その考課期間に行ったastamuse.comのモバイルフレンドリー対応の一部を紹介したいと思います。

プロジェクト概要

astamuse.com 「モバイルフレンドリー対応」プロジェクト

現在8月9日時点の対応範囲

• 技術一覧
• ヘッダー＆フッター
• 技術詳細ページ
• キーワード詳細ページ

背景

年々増えてくるモバイルからのトラフィックと、Googleがスマホ対応が不適切なサイトの検索順位引下げ発表により、リリース当初（2012年）はPC環境で使われることを想定してデザインしたastamuse.comもその状況を無視できなくなり、アクセス数が多いコンテンツからモバイルフレンドリー対応を行うことになりました。

年々増えていくモバイルトラフィック (astamuse.com全体の割合）

2012年　15%
2013年　15%
2014年　22%
2015年　27%
2016年　32%

目標

• Googleのモバイルフレンドリーテストのアラートすべてクリアして、モバイルフレンドリーの基準を満たす。
• 社内でユーザビリティーテストを行い、UXの向上を確かめる評価をもらう。

効果

• モバイルフレンドリー対応により、各数値（滞在時間、直帰率、離脱率）の改善。
• 検索順位UPにより、モバイルからのトラフィック増加。

はじめに

デザインをスタートさせる前に、まずは、Google Search Consoleのモバイルフレンドリーテストで現状把握。
みごと、モバイルフレンドリーテストで失格。

エラー項目

• テキストが小さすぎて読めません
• コンテンツの幅が画面の幅を超えています
• クリック可能な要素同士が近すぎます

上記エラーをひとつひとつクリアにしていくために実践した、最低限考慮すべき3つのポイントを紹介していきます。

ポイント1：ベストなフォントサイズにする

まずは、エラー項目「テキストが小さすぎて読めません」の対処。モバイルフレンドリーにおけるベストなフォントサイズを調べることからスタートしました。

技術詳細ページ（公開公報本文）の文章は長い、長い。
同じようにコンテンツのテキストが長いサイトといえば、ニュースサイト。参考にさせていただきました。 結果、長文が読みやすいなと感じたサイトの多くは基本フォントサイズは16pxでした。

ちなみにGoogleが推奨するフォントサイズも16px。
一番小さいサイズの推奨は12pxです。

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

引用/参考： 読みやすいフォント サイズを使用する  |  PageSpeed Insights  |  Google Developers

弊社も世の中の読みやすいとされるフォントサイズに習い、本文のフォントサイズは最適とされる16pxにしました。
行の高さ1.75、1行の文字数は21文字に。（こちらも、他サイトを参考にベストな値で調整）

ポイント2：リンク範囲と間隔のベストバランスを見つける

次に、エラー項目「クリック可能な要素同士が近すぎます」の対処。
スマートフォンは画面が小さいため、設置したリンクとリンクの間隔が十分にないと、指でタップする際に、うまく押せないことが多々あります。

具体的には、ページ上に密接して配置されている「ブックマーク」と「PDF」のボタンの箇所が、エラーを引き起こしていたと思われます。 ということで、クリックしやすいように、下記2点を考慮してデザインしていきました。

• リンク範囲は大きくとる
• リンク同士を近づけすぎず、十分な間隔を確保して、押し間違えを防止する（水平方向と垂直方向で5ミリ(32CSS ピクセル)以内に他のタップターゲットを配置しない）

参考： Size Tap Targets Appropriately  |  PageSpeed Insights  |  Google Developers

ポイント3：コンテンツの幅に要注意

次に、エラー項目「クリック可能な要素同士が近すぎます」の対処。
スマートフォンの画面からはみ出している場合、このようなエラーがでます。 左右にスクロールしなければならない状態は、モバイルフレンドリーではないと評価されてしまうので、要注意。

さて、問題の箇所はどこだったかというと、ドロップダウンメニューの箇所。 タップのしやすさとタップゲートの間隔を十分にとったモバイルフレンドリーなUIに変更しました。

参考： Size Content to Viewport  |  PageSpeed Insights  |  Google Developers

結果

• Googleモバイルフレンドリーテストのエラーすべてクリア。モバイルフレンドリーの基準満たす。
• 直帰率改善（3.17％減）
• 離脱率改善（1.63％減）

※技術ページ・モバイルトラフィックのみに絞って計測（リリース前後1ヶ月で比較）
※直帰率、離脱率の数値については、非公開とさせていただきます。

数値の結果は、なんとも微妙でわずか数パーセントの改善のみ。 引き続き定点観測していき、継続して改善していく必要がありそうです。

ただ、目標の一つであった、Googleモバイルフレンドリーの基準はひとまず満たすことができたので、最低限の課題はクリアできたと思っています。

また、社内のレビューは好評でしたので、実際のユーザーさまの声もぜひ聞かせていただけると嬉しいです。

日頃アスタミューゼをお使いのユーザーの皆さまへ

スマートフォン向けに新しくなったastamuseの技術ページをご覧いただき、読みやすさ、使い心地などのご意見・ご感想などTwitter@astamuseLabにお寄せいただけると嬉しいです。

先月世の中で話題となった特許より、astamuse.com技術ページのリンクをご紹介させていただきます。 ぜひスマートフォンにてご覧ください。

バーチャルホームロボット「Gatebox」

21世紀の“2次元の嫁？”として注目のバーチャルホームロボット。

参考： 【特許取得のお知らせ】Gatebox、「キャラクターとの対話関連技術」に関する特許を取得｜Gateboxのプレスリリース

特許のたまご

卵かけご飯に合う卵として7年かけて開発。

参考： 開発7年「卵かけご飯に合う卵」、東日本で先行発売 - ITmedia ビジネスオンライン

デザインの参考になる（かもしれない）映画8選＋α

おつかれさまです、krtです。

この度はデザインの参考になる（かもしれない）映画作品をピックアップしてみました。
何がどのように参考になるのか、イイ感じなのか、をまとめましたので併せてご覧下さい。

ムーンライト

こちらは2017年に開催された米アカデミー賞で初めてLGBTをテーマにした作品での「作品賞」受賞とのことで非常に話題になった作品です。

本作の何がデザイン的にすごいかと言えば、スクリーンに映し出される黒人俳優たちの美しさです。
常にキラキラとした陽光が画面に降り注ぐ日中のシーンでは主人公達の肌は彫刻のようにそれを照り返し、夜間のシーンでは青白い月明かりの下で肌が発光しているかのように映し出されるのです。 これは単に撮影技術が優れているだけではありません。
美しさの最も大きな要因のひとつは、撮影されたあとで俳優の肌にデジタル加工を施していることが挙げられます。 本作はアレックス・ヴィッケルというカラリストが全シーンのカラーバランスを調整し、主に肌の色にこだわって美しい肌つやを実現し、映像をさらに美しく見せているのです。

写真のレタッチでも分量が多いだけで気が滅入るのに、動画となるともう…想像するだけで気が遠くなりますね。 今後は日本でもこういった動画のカラー調整及びレタッチのような仕事もぐんと増えてくるかもしれません。

映画『ムーンライト』予告

※詳しくは下記の記事をお読み下さい www.indiewire.com

ネオンデーモン

こちらも今年に日本公開されたニコラス・ウェンディング・レフン監督の作品です。
本作に限ったことではなく、彼の作品はハイコントラストなカラーリングが特徴的で、その極彩色の世界観によってグロテスクな空間を作りだすのが得意な監督です。

最近知ったことなのですが彼は中間色が見えづらい色覚異常があるためハッキリした色でなければ画面の識別がしづらいとの告白をしていました。 だからといって作品全てのシーンがハイコントラストというわけではなく、淡い色をベースにまとめたシーンも見受けられます。
ネオンカラーがまばゆい作品ではありますが、コントラストを付けるだけでなく淡い色の変化の中でもきっちりとした色調の差によってクリアな画面を作り出すヒントになる作品だと言えます。

The Neon Demon Official Trailer #1 (2016) - Elle Fanning, Keanu Reeves Horror Movie HD

タンジェリン

こちらはなにが驚きかというと、全編iphone5sにアナモレンズを取り付けて撮影された作品であるということです。
短編作品や学生の作品などではスマホ撮影の映画はさほど珍しくはないかもしれません。 また長編作でもワンシーンだけ利用されることもあるのですが、本作は88分の中編作品でそれなりの上映時間です。 変化球の機材を使用した映像作品は「これで撮影された」という触れ込みが出オチになってしまうため、1時間以上観客の興味を持続させるには骨が折れる作業だったに違いありません。
ただiphoneを使って撮影されたという以上に試みとしてチャレンジングな作品であったと言えます。 そのチャレンジとクリエイティビティをぜひ一度見てみることをお勧めします。

Tangerine - Red Band Trailer

ハードコア

先の『タンジェリン』はiphone5sでの撮影とのことでしたが、こちらはなんと全編GoProで撮影されています。
撮影で使用されたカメラはGoPro HERO3 Black Edition。

http://www.tajima-motor.com/gopro/hero3/www.tajima-motor.com

しかしながらこちらは米国GoPro社の全面バックアップがあったとのことで、多少なりともプロモーション的な意味合いもあったのかもしれません。
またGoPro撮影といったらもうお分かりかと思いますが、全編主人公目線のPOV形式のアクション映画なので大画面でSPF動画を観ているような感覚です。 つまりは画面酔いが著しいので三半規管が弱い人は見る際に十分気をつけましょう。

『タンジェリン』にも言えることですが、トリッキーな撮影機材を使用するということ、つまりは作るための道具（ツール）を変えるという単純なことによって、もしかしたら世界の見方を変えられるのではないか？そして想像もしていなかった新しいコンテンツを創ることができるのではないか？という可能性を感じさせてくれる作品になっています。

映画『ハードコア』日本版予告編

グランド・ブダペスト・ホテル

本作は2014年公開のウェス・アンダーソン監督作品です。
この監督作品もかなり特徴があり、画面構成がとにかくキッチリしたシンメトリーで構成され、徹頭徹尾カラーコーディネートされています。 小道具から大道具、衣装、風景、全てにおいて神経質なまでに配慮が行き届き、ポップであるにもかかわらず濃密な作家性が作り出されています。

ここまでキレイにバランスが取れた画面構成はデザイナーの方だと見ていて気持ちが良いくらいなのではないでしょうか。
『神は細部に宿る』、とはよく言ったもので細部まで計算して設計することの美しさがよく分かる作品の1つです。

映画『グランド・ブダペスト・ホテル』特報

フェイズIV 戦慄!昆虫パニック

打って変わってこちらの作品は1974年の作品です。
グラフィックデザイナーの方には馴染みのある、ソール・バスが監督した作品です。 彼は映画のタイトルバックデザインの先駆者とも言われており、タイトルバックデザインに初めてコンピューターグラフィックを取り入れたのも、キネティック・タイポグラフィを導入したのもソール・バスです。
googleロゴでも彼の作品動画を制作していたので知っている人も多いのではないでしょうか。

Doodle for Saul Bass' 93rd Birthday

そんな彼の本作のテーマは虫。虫っていうか主に蟻。
パニックホラーのようなタイトルなので手に取りにくい作品かも知れませんが、やはりそこはソール・バス、映像表現が巧み。
いや、匠。
普通の蟻を撮影しているだけなのですが、無言の蟻たちの意識が手に取るようにわかるその演出、映像表現は普通の映像作家とは違ったの世界観を作り出しています。
グラフィックデザイナーの方は話の種に、ぜひ一度ご覧になることをオススメします。

Phase IV (1974) Trailer （※後半のフラッシュの点滅にご注意ください）

ソング・オブ・ザ・シー 海のうた

こちらはもう…キュート・プリティー・ビューリフォー！
しかし本作はただ可愛いだけではなく、キャラデザイン、特にデフォルメのバランス感覚が卓越しています。
アイルランドに伝わる神話を元に製作された本作は、ピクト文化という古代から伝わるデザインを取り入れているとのことです。
古くから存在するデザインパターンやイメージを取り込んではアップデートし、それによって新しいコンテンツを製作するという試みは日本が得意とするアプローチ方法でもありますが、本作はそのアプローチを最も洗練した形で応用している作品と言えるでしょう。

「ソング・オブ・ザ・シー 海のうた」ミュージッククリップ

ユーリー・ノルシュテイン作品集

ロシアのアニメーション作家、ユーリー・ノルシュテインの6本の短編（『25日･最初の日』『ケルジェネツの戦い』『アオサギとツル』『キツネとウサギ』『霧の中のハリネズミ』『話の話』）を集めた作品集です。

6本それぞれの特徴を上げると、『25日･最初の日』はロシアン・アヴァンギャルド的でありつつもキュビズム的な立体感があり、『ケルジェネツの戦い』は宗教絵画的でフレスコ画やテンペラ画を彷彿とさせます。 『アオサギとツル』は日本の浮世絵や水墨画から着想を得た作品らしく、また初めて複数の背景を重ねる手法を取り入れた画期的な作品のひとつです。 『キツネとウサギ』『霧の中のハリネズミ』の2作は童話的で絵本の世界観がそのまま動いている、という印象なのですが『キツネとウサギ』はロシアの民話を元にしたストーリーで、ガラジェッツ絵画と呼ばれるデザインパターンを取り入れた色彩が豊かな作品となっています。 一方『霧の中のハリネズミ』は背の低いハリネズミが空を見上げたり、霧の中に迷い込んだりするシークエンスは奥行きを感じさせる演出で、こちらは多層にしたガラス面に切り絵を配置して奥行きを演出する、マルチプレーンという手法が用いられています。
最後の『話の話』は上記の一連の手法やテーマを総括した作品のように見えます。また、そこに観念的な要素が組み合わさっていため1回観るだけだとなかなか理解が難しい作品でもあります。

このように様々な手法を柔軟に取り入れた作風なのですが、全ての作品に統一感があります。 新しい手法を積極的に作品へ取り込む柔軟性と応用力の高さ、また取り入れるだけでなく自分のものにしている部分などは、分野・時代が違えど見習うべき美徳であります。

ユーリー・ノルシュテイン監督特集上映「アニメーションの神様、その美しき世界」予告編

おまけ

アート・オブ・デザイン www.netflix.com

これは映画ではなく、ネットフリックス制作のデザイナーに焦点をあてたドキュメンタリードラマ（？）です。

全8回で1作40分前後なのでさくっと見ることができます。 また、取り上げられている作家はイラストレーター、フットウェアデザイナー、舞台デザイナー、建築家、自動車デザイナー、グラフィックデザイナー、フォトグラファー、インテリアデザイナー。 とっても幅が広い。 見るだけで創作意欲が刺激されますし、そもそもデザイナーに焦点を当てるというのも少々珍しく貴重で素敵なドキュメンタリーだと言えます。 ぜひ2シーズン目も作成していただきたいものです。

以上8本＋αのご紹介でした。