【あるある】ウェブデザイナーの今日この頃 05
なぜかヒラギノ角ゴに戻っている。
【あるある】ウェブデザイナーの今日この頃 04
* なぜか長体になっている。
デバイスフォントには何を使う？ 〜理由をきちんと理解する〜
デザインカンプを作成する際に、デバイスフォントには何を使えばいいのか？ということについて今回は考えていこうかと思います。
その前にまずはデバイスフォントの説明から。デザイナーなりたての頃「そこはデバイスフォントなので」みたいに言われて、なんだそれ？となった覚えがあります（笑）
このブログはウェブデザイン初心者による初心者のためのブログですよ、はい。
デバイスフォントとはコンピューターに予めインストールされているフォントのことです。
デバイスフォントの設定はCSSで行うことができ、複数のフォントを指定するとコンピューターにインストールされているフォントを使用して表示します。
画像の中に含まれるフォントではなく、各デバイスに搭載されているフォントということですね。ドラッグした時に選択できるフォントということです。
↓こんな風に。
さて、使用するデバイスフォントを単純に羅列してもいいのですが、まずは「なぜそのフォントなのか？」を理解しなくてはなりません。
「先輩のpsdを見たらこのフォントだったし、これでいいか」ではだめなんです。ディレクターやクライアントから「なぜそのフォントなんですか？こっちの方がよくないですか？」と言われて「あ、いや、その、先輩のpsdに…」では言い訳になりません。
それが既存ページの細かな修正だけだったとしても、ディレクターやクライアントからしてみればあなたがデザイナーで、デザインに関わる責任はあなたにあるのです。
なんてカッコつけて言ってますが、最近デバイスフォントの指定を間違えてしまった自分へのさ自戒込めて書いているだけです（笑）
それでは「なぜそのデバイスフォントを使用するのか？」を考えていきましょう。
【目次】
そのデバイスに搭載されてなければ意味がない
当たり前ですね。ですが、ウェブデザイナーになりたてだったり、ウェブ業界自体に入りたてだったりすると、当たり前のことを当たり前だと知らないものです。どの業界でも同じことが言えるかと思いますが、そんな初心者の方のためにこのブログはあるんですよ。
デバイスフォントは、閲覧するデバイスに搭載されているフォントを使うので、そもそも搭載されていなければ意味がありません。搭載されていないフォントを使ってデザインカンプを作成してしまうと、実際にテストアップされた時と見た目が変わってしまい「このフォント、違くありませんか？」なんて言われかねません（基本的にはそうなる前にデザイナーの先輩やディレクターが気づいてはくれますが）。
搭載されているフォントは予め調べて、その中から選ぶようにしましょう。
↓こんな感じでリストになっていたりします。
PCならWIndows？Mac？スマホならIPhone？Android？
あとはそれがPC用なのかスマホ用なのかを踏まえ、フォントを決めるだけです。
ちなみに私が勤務する制作会社ではPCであればWindows、スマホであればIPhoneを想定してデザインカンプを作成します。
PCの場合はシェアの多いWindowsに合わせているということになります。
スマホはOSシェアがiOS、Androidでほぼ半々（若干Androidが多い）といったところで、iOS想定でデザインカンプを作成します。
理由としては、
・Android端末でデザインカンプを作ろうとすると、画面サイズが多種多様になってしまう(iPhoneも新旧で画面サイズが異なりますが、それ以上に多くの場合分けが必要になります)。
・Androidのデバイスフォントはあまり綺麗でなかったり、以前は太文字(Bold)が使えなかったりと、積極的にAndroidに合わせる理由がない
という感じで、私が勤務する会社を例として挙げましたが、結局は事前にディレクターやクライアントと擦り合わせることが最も重要です。
また、デザインカンプでフォントにアンチエイリアスを設定するか否かということも考えておきます。
結論、私は設定します。
そこはデバイスフォントです、ということを伝えるよりも見た目としての綺麗さを優先しています。またこれは私の肌感覚ですが、アンチエイリアスのかかっていないフォントほど実際はジャギジャギしない、と思っているというのもあります。最近はデバイスフォントでも綺麗に見えますよね。
また、コーディングをおこなうエンジニアさんが、アンチエイリアスがかかっていたとしても「あ、ここはデバイスだな」と理解してくれるから、という理由もあります。要するに私の会社ではデザインカンプに指定しているフォントでデバイスか否かを判断してくれている、ということです。
少し長くなってしまいましたが、手っ取り早く周りの先輩などに聞いてしまうのがいいと思います。一番だめなのは「みんな使ってるから」という理由でフォントを選んでしまうことです。
常に理由を理解してから、日々のデザインに取り組んでいきたいものです。
【あるある】ウェブデザイナーの今日この頃 03
「こんなところにグラデーションかけたっけ？」と思ったら、モニターに付いた指紋。
【あるある】ウェブデザイナーの今日この頃 02
ブラッシュアップしたのに、「それじゃあ最後に、ブラッシュアップして提出してっ☆」と言われる。
これだけ覚えればOK！Adobe Media Encorderの使い方 〜ウェブサイトに動画があたりまえの今だからこそ〜
一昨年くらいから、背景だったり一部分だったりに動画を使用するサイトが増えましたよね。HTML5で動画再生が対応されたことに端を発し、通信コスト・制作コストの軽減も、大きな要因のように思えます。極端に言えばスマホで撮影できてしまいますからね。
デザイナーの皆さん、ディレクターやクライアントから「この動画使いたいから、軽量化して！」なんて言われたことありませんか？
そんな時のために、Adobe Media Encorderの最低限これだけ覚えておけばOK！という内容をお届けしますので、参考にしていただけると幸いです。
【目次】
- ファイル形式はこれ！
- ファイル容量の目安は？
- あとは「ビットレート」で調整するだけ
ファイル形式はこれ
ずばり、mp4（h.264）で用意しましょう。最新バージョンであればIE、chrome、Firefoxなど主要ブラウザは全て対応しています(この記事は2015年11月に書いています)。
そのサイトを使用するユーザーの多くが、古いバージョンのブラウザを使っているなどでない限り、基本的にはこの形式で問題なさそうです。
※書き出し設定の「形式」でMPEG4を選んではいけないですよ。きちっとh.264という項目があるので、それを使用しましょう。
ファイル容量の目安は？
容量に関しては、ずばりこれ！という数値を私は知りません…。知っている方がいたら教えてほしい…。
なので私は、同じように動画が使用されているサイトのファイル容量を参考にするというやり方にしています。ユーザー層が似たようなサイトであればさらにいいですね。
あとはテスト環境で実際に確認して、あまりにも重くなる場合は調整する、という形で進めています。
あとは「ビットレート」で調整するだけ
ここまでくれば、後は実際にエンコードするだけです。軽量化は基本的に「ビットレート」を下げることで調整します。
↓ビットレートに関してはこちらがわかりやすかったです！
いかがですか？たったこれだけです！普段あまり使わないアプリケーションだったりすると、インターフェースから理解するのに苦労したりしますが、実際に使うのはほんの一部です。
さくっと覚えて、仕事の幅を増やしていきたいですね。
動画を使ったウェブサイト…まだまだ増えていくんだろうなぁ。
みんなフォントってどう選んでるの？ 〜成り立ちを考えることで、その選択に“意味”を持たせる〜
いきなりですが、デザイナーの皆さんってフォントはどうやって選んでいますか？
デザイナーになってまだ日が浅い頃（と言っても未だに浅いけど）、会社から支給されるフォントの多さに戸惑って、何を選べばいいか、どうやって選べばいいかが全くわかりませんでした。
しかし今では、はっきりと一つの方針を持ってフォント選びをしています。
それは“フォントの成り立ちを知って、選ぶ”ということです。
↓こちらの本が非常にためになりました。非常に有名な良書ですね。
上記の著書でも紹介されていますが、例えばかの有名な「LOUIS VUITTON」。ブランドロゴには“FUTURA（フツラ）”が使用されています。
http://type.gs/culture/interview_kobayashi.html
↑このフォントの説明はプロに任せますが（楽をする）、重要なのはここですね。
カーブの具合や角の尖り方など、シェイプから受ける印象だけでなく、このようなフォントの成り立ちがあるからこその高級感、ということですよね。
また社内やクライアント向けの話にはなりますが、成り立ちから考えることで、なぜそのフォントを選んだのか？という説明がしやすいのです。
【悪い説明の例】
「高級感ということだったので、太過ぎなくて、カーブがこう、ゆったりしていて、それでいて…」
長いですね、そしてピンとこないですね。
こういった時、成り立ちの話から入れたとしたらどうでしょう？想像してみてください。どうですか？ちょっとやりやすくなった気がしませんか？
この「第三者への説明のしやすさ」というのは、デザインをする上で非常に重要なポイントになってきます。その話はまた後日ということで…
決して、印象だけでフォントを選んではいけない、ということではありません。先述した著書では、むしろ推奨しています。私たちは、生まれた時から多くのフォントに囲まれて育ってきたため、フォントから受ける印象というものを自然と理解しているようです。その印象は、むしろ大事にすべきです。それが一般性へとつながり、伝わるデザインへとつながっていくのではないでしょうか。
勉強すればするほど奥が深い…！
