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

Kurotei Databook

高専でデザインを専攻してる人のwebやデザインの備忘録的なもの。

炎上について昔書いた記事が未だに下書きに入ってたのでウインドーズはクソ一周年記念に投稿する

始めに

最近自分のアイデンティティが炎上と厄介とダサダサになっている気がします。ブログを始めた当日に炎上したり、やはり天然の炎上の才能があるのかもしれません。あまりうれしくないです。
ここで、どうやったら炎上するのか、炎上はどのように広がっていくのかを炎上を何回か経験した身として述べていきたいと思います。

炎上する媒体をつくる

かなり重要ですね。ブログやホームページだけだと付くのはコメントだけですから、広まりにくく、炎上しにくいです。ここで使えるのがTwitterですね。他にもfacebook2chなどたくさんあります。これらは炎上の仲立ちをしてくれます。要は火が広がりやすいって事です。

炎上する物は残る物にする

炎上はいろんなところでするわけですが、特にブログ・ホームページは炎上しやすいです。Twitterで炎上するにしても、Twitterではすぐツイートが流れていきますから、炎上しにくいです。僕が前の前に大規模な炎上をしたときも、ホームページ関連でした。

たくさんの人が使っている/支持しているものをdisる

やめたほうがいいですが、炎上しやすいです。絶対やってはいけません。絶対ダメです。マジでダメです。たくさんの人が使っている人をdisると当然それを使っている人はdisって来ますし、大抵そちらのほうが詳しいのでdisの盲点を突かれてdisられます。支持されている人をdisるのはマジでやめましょう。下手にTwitterのアルファなどをdisると囲いや爆撃によって凍結、垢消しになることもあります。

悲しみしか生まない炎上にしない方法

悲しみしか生まない上に垢消しや特定、世間的に死ぬのは非常に残念です。

犯罪をしない/世間様に迷惑を掛けない

重要です。これをしなければ通報されることもないでしょう。

ネタ要素をいれる

これな
しかし変に入れると神経を逆なでしてしまうので慎重に。

disるだけではなく、改善されたり良いところを上げる

大切です。disるだけではただのクレーマー同然。良いところも悪いところ同様に見つけていくべきでしょう。

詫びる

ごめんなさい。

結論

炎上ダメ。絶対。

最近はそこまでkazookazooしたくなくなってきた件

「かずー氏〜〜〜〜〜〜〜〜!!!!!!」

とちょっと前は言ってましたが、最近はそうでもなくなってきました。そもそもblacktails2自体を動かすことが少なくなってきた。これは、学校での友達が以前より増えたのと、リア垢の居心地が良い所為だと思います。最近は友達とあいために学校に行ってるようなものだし、友人は尊い。やはり、Twitterよりも共通点の多い現実での友人の方が話しやすいし面白いですね。

メンヘラ Advent Calendar 20日目の記事でした。

メンヘラ Advent Calendar 2014 - Adventar

くろてい流 ベクターキャラアイコンの描き方(Illustrator)

はじめに

こんにちは、くろていです。

Kazoo04 Advent Calendar 2014 - Qiita
1日目、その2の記事です。フォントの種類 - kurotei databookでも書いたように、スケジュールがかわって一日に二つの記事を入れることにしました。
さて、今回は僕がイラレでアイコンを作るときの手順を紹介していこうと思います。生半可な技術で描いているため、未熟で無駄も多いと思いますが、良かったら参考になるといいなと思います。

描く

さて、前記事では「kazoo04要素なさすぎワロタ〜w」と何人かの人に言われたので、kazoo04を描いていこうと思います。
完成作はこれです。
f:id:blacktails2:20141201205141p:plain
かわいいですね。首から下はめんどくさかったので描きませんでした。ごめんなさい。
さて、手順を紹介していきます。

下書きを描く

イラレで一発描きできるほどのスキルはないので、アナログで下書きを書き、スキャンします。
どの線を実際に描くか考えながら描きましょう。迷い線が多いとトレスするときにわからなくなります。


イラレで取り込む

下書きをスキャンしたら、イラレで新規ファイルを作成します。大きさはいつも1000px×1000pxにしています。

そして、先ほどスキャンしたファイルを配置します。レイヤーは一番下にし、ロックをかけて起きましょう。そして、次に描く「目」のレイヤーを作ります。


目をかく


目をかきます。なんで目からかき始めるかと言うと、そのほうが生気が入ってなんか愛着が沸いて描きやすくなるからです。
目は、まつげの部分、白目の部分、黒目の部分、瞳孔、光を描きます。まつげは一本の線で描くよりも中塗りのオブジェクトとして描いた方が良いでしょう。
オブジェクトはこうなっています。

これで目は終わりです。

髪を描く

次に髪を描きます。理由は特にありませんが、後々顔を描くときにこっちの方がよかったりします。
髪は「顔より前にある部分」と、「顔より後にある部分」で分けることが重要です。髪は頭を覆っていますから、上下関係が入れ替わるからです。
ぐちゃぐちゃなので、上手く上下関係を利用して調整します。

このとき、顔より後にある髪は髪レイヤーではなく肌レイヤーの最下層に入れておきます。

顔を描く

顔を描いていきます。まず、顔の輪郭を描くのですが、このとき「前髪より背面」かつ「後ろ髪より前面」にレイヤーを配置し、髪の部分を塗るときは「前髪の塗りの背面」をぬっていくようにしましょう。そうしないと、髪に肌色が浮いてしまいます。

また髪や肌をいじって調整します。顔のパーツも適当に描きます。

眼鏡を描く


眼鏡をかけているキャラクターの場合、眼鏡は最前のレイヤーにしましょう。しかし、耳よりうしろにかかるので横の耳に描ける部分は耳より後に配置しましょう。
眼鏡は、眼鏡の外を描いてから、それをコピーし、縮小して配置し、左右のオブジェクトをグループ化した後複合パスを作成するとうまくいきます。

成し遂げたぜ。

ここまでくればほぼ完成です。線の太さや線の端の形などを調整し、背景などをつくれば完成です。お疲れ様でした。

おわりに

(イラストの)かずー氏はかわいい。
明日はなめたけさんの記事ですね。期待しています。このKazoo04 Advent Calendarが成功することを願い、終わりとさせて頂きます。
あと、これはイラレ特有の機能っぽいものはあまりつかってないのでiDrawとかInkscapeとかでもできると思います。

フォントの種類

はじめに

こんにちは、くろていです。
Kazoo04 Advent Calendar 2014 - Qiita 1日目 その1の記事です。本当は12/1と12/23に書く予定だったのですが、12/23をGrapswizさんに譲ったため1日目に2つにしました。スケジュール管理をミスり(11/31があるとおもってた)パスファインダの記事はなくなりました。(諸行無常)
それにしても、よくわからないAdvent Calendarにいろんな人が参加し、全員の枠が埋まり、とても嬉しいです。最初は僕が20日分くらい記事を描くハメになると思ってました。その2の記事もあります

くろてい流 ベクターキャラアイコンの描き方(Illustrator) - kurotei databook
さて、今回は日本語フォントの種類について整理していこうと思います。フォントに敏感で、ちょっと見ただけでどのフォントか見分けられるような人も居ますが、多くの人はフォントについて余り興味のない人が多いです。この前、AppleのプロモーションのフォントをMSゴシックに変えた比較コラ

が流れていました。それについたリプライに「やはりゴシックだと違うな」というものがあります。ある程度フォントに理解がある人から見れば「???????」となることでしょう。これら2つの写真はどちらもゴシック体だからです。
また、このような記事もあります。

3位「HG丸ゴシックM-PRO」2位「MS 明朝」、1位は? 社会人に聞いた、好きなフォントランキング(マイナビスチューデント) - goo ニュース
このように、一般の人からするとフォントは結構どうでもいいものなのかもしれません。しかし、最低限、どのような場所でどのフォントを使うべきかは知っておいてほしいところ。今回は、フォントに疎く、どのタイミングでどのようなフォントを使うべきかいまいちわからない人を対象に記事を書いていきます。 

フォントの大まか種類

日本語フォントは大まかに3つに分けられるでしょう。
f:id:blacktails2:20141201014319p:plain
左から、

  1. 明朝体
  2. ゴシック体
  3. 特殊書体(右2つ)

次に、これらを一つづつ解説していきます。

ゴシック体

ゴシック体は字の線の太さが一定で変わらない書体です。
しかし、明朝体よりは太いのであまり長い文章には向きません。なので、タイトルなどに使うと良いでしょう。また、ウェイトを細くすることで本文にも用いることができます。
しかし、webではこの限りではありません。ディスプレイでは明朝体の細い字を表すのに限界があるため、本文でもゴシックを使うことが多いです。ロゴなどは画像にして使われることもあります。
f:id:blacktails2:20141130234530p:plain
ゴシック体はいろいろありますが、以前自分が書いたWebフォントの記事でも述べたように、MSゴシックは避け、ウェイトを調節できるフォントを使うと良いでしょう。
Windows8なら游ゴシックそれ以前ならメイリオMacならヒラギノ角ゴが良いでしょう。また、Adobe製品を入れている場合は小塚ゴシックやりょうゴシックがウェイトの調節もでき、良いでしょう。
f:id:blacktails2:20141130235310p:plain
また、有料ではありますが、モリサワ新ゴなどは有名なフォントです。他にも、UD書体という読みやすく判読しやすい書体も出ています。(自分は持ってないので画像は貼れません。すいません)

明朝体

明朝体は字の線の太さが横は細く、縦は太くなっており、文字の端にウロコがあります。
本文に用いると読みやすくて良いですが、太い明朝体は本文に使わないようにしましょう。また、タイトルに使うと遠くから見たとき細くて見えなかったりするので、タイトルや見出しはゴシック体が良いでしょう。しかし、あくまで印刷したときの観点なので、webなどでは本文はゴシックを用いると良いでしょう。
f:id:blacktails2:20141201013407p:plain
フォントの選び方はゴシックとほぼ同じです。MS明朝は避け、游明朝、ヒラギノ明朝、小塚明朝などを使いましょう(しかし、メイリオには明朝がないため、windows8以前のwindowsではMS明朝になります。)
f:id:blacktails2:20141201013432p:plain

ちなみに、これらの二つでは「タイトルはゴシック」「本文は明朝」と述べましたが、本文でも細ければゴシックで良いですし、タイトルも太ければ明朝でもかまいません。しかし、これらはあくまでディスプレイ・DTPの観点から述べたものなので、スライドなどの遠くから見たり、文が長くならない簡潔な文章などはゴシック体を使うと良いでしょう。

特殊書体

特殊書体と便宜上まとめましたが、特殊書体と言っても、江戸書体からポップ体まで幅広くあります。なので、これらに関しては有名なものだけ説明していこうかと思います。
また、特殊書体はまず本文には用いません。(楷書体などを除く)大抵、見出し、ロゴ、町中ならば看板などに使われます。特殊書体はつかいわけをはっきりすることが大切です。しっかりと使い分けることができれば、「それっぽさ」を十二分に引き出すことができます。

丸ゴシック体

ゴシック体の端っこが丸いやつです。ゴシック体より少しやわらかい印象をもっています。本文にも使用できます。ソフトな感じですがいまいち使いどころがわかりません。すいません。

教科書体

小学校とか中学校とかの毛筆のやつですね。手書きに近く、読みやすいのが特徴です。日本的で伝統的な印象を与えます。筆順書体といったものも似た一種です。

新聞書体

明朝体の縦にちょっと潰されていて、判読性が高い書体です。

隷書体

古めかしく伝統的な、横べったいフォントです。どこか中国的な印象も持っています。また、不気味ととらえられることもあります。和風なところで使いますが、個性が強いので、使いどころが難しいでしょう。

楷書体

名刺や判子など、様々な場所で使われています。また、本文、見出しどちらにも使えます。厳しさや日本的、丁寧な印象を与えます。旅館や居酒屋、神社、寺などで使われます。教科書体に似てる(教科書体は楷書体の点を線で書いたものらしいです)

行書体・草書体

楷書体をつなげたり、崩した書体です。楷書体より柔らかい印象を与えます。楷書体と同じく和風のサイトで使われます。草書体は、行書体をさらに崩したものです。どちらも読みやすいかと言うとそうとは言えませんが、年賀状などでも使われます。

古印体

FontFactoryを見ていて初めて見つけたのですが、不気味な感じです。字が所々とぎれています。お化け屋敷などで使えそうですね。不気味な雰囲気を出すのにはぴったりだと思います。

篆書体・印相体

秦代より前に使用されていた書体・・・らしいです。漢字は「漢字の成り立ち」のようなものを感じさせますね。かなはかわいらしい印象を与えます。ロゴなどに使えますね。全体的に縦と横で構成されています。

ペン字体

楷書体の細いようなものから行書っぽいものまで、それぞれ個性があります。そこまで日常生活では使わないでしょう。

勘亭流体

江戸時代に歌舞伎や落語で使われていた書体です。文字が詰まっているように見えるのは、歌舞伎や寄席で満席になる(詰まる)ことを願ったからとも言われています。右肩上がりとも言うように、売上が上がっていくよう右に上がっています。日本感を伝えるには申し分ないでしょう。居酒屋ややきとりなどにぴったりのフォントではないでしょうか。また、バーゲンセールなどのチラシにも。

江戸書体

勘亭流に似た書体です。これも個性があり一概にどのようなとは言えませんが、全体的に太いです。勘亭流と同じく、日本感を伝えることができます。

筆文字

教科書体や行書体を筆で書いたような感じの書体です。

手書き書体

そのままです。手書きっぽいです。手紙とかで使えるのでは。

ポップ体

お ま た せ
その名の通り、ポップな感じのフォントです。使いどころさえ上手くやれば親近感のわくフォントですが、安っぽい印象も与えます。乱用すると安っぽさが半端ないです。また創英角ポップ体という書体を使うと周りからネタにされたり叩かれたりするのであまりおすすめしません。学校とかの資料でこれにワードアートの波やアーチ、シャドウやグラデーションをかけたものをよくみたことがあるのではないでしょうか。
といっても、人目を惹きやすく、明るく元気な印象を与えることができるので、チラシ・看板などには良いでしょう。あくまで乱用はしないように注意しましょう。あくまでアクセントに用いましょう。

創英角ポップ体は2014年もアツかった | 教育番組

デザイン書体

上のような括りに入らない、デザインされた個性的な書体をデザイン書体といいます。それぞれの個性に合わせてロゴなどに使えるといいでしょう。

だいたいこんな感じでしょうか。プレビューしたいときは、

和文・デザイン書体のダウンロード販売|フォントファクトリー
をみると良いでしょう。様々なフォントがあるので面白いです。

おわりに

案外特殊書体が長引いてしまい、また今回もグダグダしてしまいました。この後アイコンの記事も書くと考えると厳しいですね。
フォントは人に与える印象を大きく変えます。受け取る側に立ちどのフォントを使うか決めると良いでしょう。
Kazoo04 Advent Calendar 1日目その2もあります。

くろてい流 ベクターキャラアイコンの描き方(Illustrator) - kurotei databook

アクセス解析を見て

f:id:blacktails2:20141007210105p:plain

は?(憤怒)

自分はよくアクセス解析を見ます。どんな人が僕のブログを探してきているのか、どのような人が求めているのかを見るためです。
しかしデザイン初心者やCSS初心者向けにブログを書いていたはずだったが、いつの間にか漫画コラブログになっていた・・・(困惑)
f:id:blacktails2:20141007210331p:plain
yahoo検索の一位が圧倒的に三銃士って・・・たまげたなぁ ちなみに"ラーメン三銃士 素材"でググると3番目に出てきます。
まあTwitterから来る人はまともな記事が多いし、多少はね?ってところがあるけど、悲しい。

プレゼン・ポスターで"格好いい"矢印を使うために その1

*補足 格好いい矢印とは とか言っときながら格好いい矢印載せてなかった。次の記事で載せます、ごめんなさい。(14/10/3 11:31)

始めに

こんばんは、くろていです。最近ボードゲームにはまっていて、友達と毎日遊んでいます。個人的にはおばけキャッチが好きです。

さて、今回はプレゼン等で使う矢印について、如何に「カッコよく」「見栄えよく」使うかについて書いていこうと思います。
スライドやプリントを見たとき、こういう矢印、見ませんか?powerpointの標準の図形にはいっている矢印を短く、太くした物です。このような矢印を見る機会は多いのでは無いでしょうか。小学校・中学校で配られるプリントなんかもこんな感じです。
矢印は、使い方次第でスライドをわかりやすく・綺麗にしてくれます。そのような使い方が出来るようにするためにはどうすべきか、今一度考えてみましょう。

矢印の意味

個人的には、矢印とは図をわかりやすく視覚的に順序を伝える物であり、物から物へ移行するときには非常に有用な手段だと考えています。しかし、矢印はあくまで図形を補助する物であり、主役ではないことを分かった上で使うべきだと考えています。矢印に過度な装飾をして、矢印だけが目立ってしまうと、伝えたかった図がしっかり伝わらないこともあると言うことを覚えておくべきでしょう。

見やすく格好いい矢印とは

ということで、格好いい矢印について考えて行きましょう。矢印を使う際、二つの方法があります。

  1. アプリケーションに入っている標準の矢印(以後標準矢印)を使う
  2. 自分で作る

自分で作る方が良いのですが、作る環境が無く、標準の矢印を使う機会もあるでしょう。まずは、標準の矢印を用いる方法について考えて行きます。

標準矢印を使うときの注意

まず、標準矢印を使うときに注意する点を考えて行きましょう。

縦横比


標準矢印を使う際、縦横比を整えることは最重要な項目と言って良いでしょう。
前述した矢印のように、変に短くしたりするとかっこわるくなってしまいます。なので、標準矢印を使うときは「縦横比を変えない」「入りきらないときは全体的に小さくする」と言うことに留意しておきましょう。
また、細くするのは多少は大丈夫ですが、細くしすぎると先っぽが極端に小さくなり、不格好なので辞めた方が良いでしょう。

角度



標準矢印に限ったことではないですが、矢印を配置する際、斜めに配置するのは辞めた方が良いでしょう。基本的に90度単位、細かくても45度単位で配置しましょう。また、オブジェクトの配置も、斜めよりも縦横をきっちり揃えた方が良いでしょう。

細い標準矢印


標準矢印には、このように細い物もあります。細い物の方がスマートに、かつ拡大縮小せずともシャフト(棒の部分)だけを伸び縮みさせるだけなので良いのですが、グラデーションやシャドウなどで見にくいです。あまり標準の物は使わないか、色を変えた方が良いでしょう。(色については後述)

自分で矢印を作る

先ほども言ったとおり、標準の矢印を使うより自分で作った方が格好良いです。また、標準といえども、標準矢印はどこかバランスが悪く感じてしまいます。
まず、どのように矢印を作るかを考えましょう。

PowerPointで作る

PowerPointでは、二つの図形を組み合わせて矢印を作ります。

このように、棒と三角形のオブジェクトを90度回転した物をくっつければ簡単に矢印を作れます。棒の太さを変えても良いですが、細い方が良いでしょう。矢印は"主役"ではないと言うことを忘れてはいけません。

illustratorで作る

illustratorはそのまま作ってもブラシで作っても良いですが、ネットにも調べれば多数のフリーの矢印素材があるため(【保存版】完全無料の矢印ベクターデザイン素材、350個あつめました。 - Photoshop VIP これとか)、自分で作る必要性はあまりないように思います。しかし、環境によって素材がダウンロードできない時などには、自分で作っても良いでしょう。

多角形ツールの三角形を利用する矢印は、アローヘッド(矢印の先っぽの部分)が正三角形となります。

正方形を作ってからアンカーを一つ減らすことで、直角二等辺三角形を作ることができます。こちらの方法の方が、三角形を潰して作るより楽です。

色について考える

最初に述べたように、矢印は主役ではありません。なので、色は矢印だけ黄色や赤などといった色にするのではなく、矢印を介する図形の色に合わせるのが良いでしょう。また、矢印は細かい物なので、ドロップシャドウやグラデーションなどをかけると見にくくなってしまいます。なので、Powerpoint等の標準のグラデーションなどは消して運用すると良いでしょう。グラデーションや影などを消すことによって、細い標準矢印も効果的に運用できます。Powerpointでは"SmartArtのスタイル"より、グラデーションを消したものを選ぶことを出来るので、それを使いましょう。

カラフルの場合はそのままで良いですが、単色での運用をするときは矢印も図形の色に合わせると良いでしょう。

この通り、細い矢印も影をなくすことで大分見えやすくなりました。

終わりに

本当はこの後に矢印の配置方法などを述べていきたかったのですが、だいぶぐだぐだして来た上やる気もhas gone...したので記事を分けることにしました。PowerPointIllustrator,Keynoteなどスライド・ポスターを作る手段はたくさんありますが、どの手段であろうと格好良く作ることは出来ると思います。見やすいスライドを目指して作っていきましょう。
色については記事のなかで解説するのはつらいと思うので、スライドの色だけで1記事いつか書こうと思っています。

どの環境でも「きれいなフォント」をCSSのfont-familyで指定するにはどうすべきか?

はじめに

こんにちは、くろていです。先日、TwitterにてWindows/Mac間の違いにおいてのフォントの表示、内蔵しているフォントについて少し話し合いをしました。その内容を受け、「様々な環境の視点から」どう「きれいなフォント」を表示するかを考え、それをまとめ、みなさんに知って欲しいと思い、記事を書きました。

実装案

各OSに入っているデフォルトのフォントを把握する

様々な環境の視点からフォントを考え、指定するときには、もちろんそれぞれの環境のデフォルトに内蔵されているフォントを知ることが最重要です。それをまとめ、整理してみました。(ゴシック体のみ)

  • Android: Droid Sans Japanese, モトヤLシーダ3等幅(4.0以降)
  • Adobe系ソフトウェアをインストールしている: 小塚ゴシックProN EL~H

となっています。游ゴシックは日本語フォントの中でも癖があまり強くない上、美しいフォントです。Windows-Mac間での搭載は非常にありがたい限りですが、最新バージョンだけでの搭載なので、今後に期待したいところです。

自分がサイトのfont-familyを変えることにした理由

実際どう指定するかだけ知りたい人は読み飛ばしてもかまいません。

前までの指定方法

以前、僕のサイトではWebフォントを使い小塚ゴシックProN Lightを指定していました。
実際の指定の仕方としてはこんな感じ。

@font-face{
    font-family: "kozL";
    src: url(KozGoPr6N-Light.otf);
}
body{
    font-family: "kozL";
}

といった感じです。これは、どの環境においても細字で美しいフォントを表示したかった故です。(小塚ゴシックに関しては様々な意見があり、あまり好きではない人もいるそうですが、自分のサイトのコンセプト上こうしていました)
しかし、とあるWindowsユーザーのフォロワーからの意見やkazoo04から様々な問題を指摘され、直す次第となりました。

問題点

小塚ゴシックをWebフォントで使用する上で、二つの問題点がありました。

  • Windows機でつぶれたり、汚くなったりする。

これは、自分がMacしか持っていなかった故の過ちといったところでしょうか。一応bootcampでwindowsは持っていましたが、ディスプレイがretinaだったこと、MacTypeを使用していたことで一般的なWindowsの環境からサイトを見ることができず、Webフォントだったら大丈夫だろう、という慢心が原因です。



彼のツイートを見れば分かるとおり、綺麗どころがむしろ読みづらくなっています。これなら標準のMS Pゴシックの方が良いとわかります。

  • ロードが遅い

自分のサイトはロードに応じてロード画面を表示していますが、3G環境などあまり早くない回線ではめちゃくちゃロードが長いです。これは日本語フォントをWebフォントとして使っているからで、欧文フォントをWebフォントとする場合にはロードはあまり問題在りませんが、日本語フォントは非常に文字数が多く、ロードに多大な時間を要します。UXが悪いのは大問題で、これはkazoo04から36894回くらい注意されました。ごめんなさい。

新しい表記方法

これらの原因をうけ、新しくfont-familyを指定し直すことにしました。
指定し直すのにあたって、それぞれの環境での「きれいなフォント」を見直す必要があると考え、整理しました。

「きれいなフォント」の整理

全般

自分のサイトは小塚ゴシックがコンセプトフォントなので、できれば小塚を利用したいと思っています。

Mac

デフォルトのヒラギノ角ゴシックで十分でしょう。游ゴシックも良いですが、ヒラギノの次と言った感じでしょうか。

Windows

できるなら游ゴシックが良いですが、バージョンの関係上メイリオも仕方ないと言った感じです。XPユーザーはサポートが切れたとはいえ一定数いるので、MS Pゴシックが使用される可能性もあります。

Linux

完全に忘れていましたが、Sans-serifで大丈夫でしょう。

Android

Sans-serifでよい

このようになりました。これを元に、font-familyで記述する優先度を考え、実装していきます。

表記の優先度


表記の優先度をkazoo04と考えた結果、こうなりました。こんなかんじ→
まず、僕のサイトの場合は何度も記述しているとおりできれば小塚ゴシックを使いたいので、小塚ゴシックが一番となります。

  • 小塚ゴシック

次にヒラギノ もしくは游ゴシックを指定しますが、Mavericksではどちらもあるため、先にヒラギノを指定し、次に游ゴシックを指定します。

  • 小塚ゴシック>ヒラギノ角ゴシック>游ゴシック

游ゴシックが入っていないWindows機のため、メイリオを指定します。

これでだいたい良いでしょう。Android,Linux,WindowsXP以前の環境では、この後にsans-serifを付ければ自動でデフォルトのゴシックフォントを割り振ってくれます。(わざわざMS Pゴシックを指定する必要はありません。自動で設定される上、OfficeがはいっているMacでの表示を防ぐためです。)

となります。これをCSSで書いていきます。

実際のCSS

CSSを書いていきます。
font-familyの指定の方法としては、

  1. 優先度順に指定する
  2. スペースがある場合や全角文字がある場合はシングル/ダブルクオーテーションで囲む

ということに留意しておきましょう。

一般的なサイトにはこれを使うと良いでしょう。

font-family:  "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif;

となります。英語表記をすればiOSでもヒラギノで対応できます。
しかし、古いバージョンのブラウザでは英語表記のフォントでは認識してくれない場合があるため、古いバージョンのブラウザのために日本語のフォント名を記すのも良いでしょう。

font-family:  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;

こうなります。

なお、自分のサイトは小塚ゴシックを加え、こうしました。

font-family: "KozGoPro-Light", "小塚ゴシック Pro L", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;

めでたしめでたし。

欧文フォントは???

と思う人もいるでしょう。欧文フォントだけArialにしたり、Helveticaにしたい人も居るでしょう。ですが、欧文と和文でフォントが違うと問題が発生するんですよね。
萌えないごみの日: 【CSS】font-familyを指定するな。ユーザー選択に任せよ。
この記事をみて、「あ、こんな違いが出てしまうんだ。」と思ったのであえて僕は表記しないことにしました。ここは個人個人の判断に任せるべきだと思います。
印刷物ならば、欧文フォントを分けていても調整して印刷し、それを近くで見ようと遠くで見ようとウェイトが変わる、なんてことはあり得ませんが、webならあり得うることなんですね。Webと印刷物の違いを大きく感じさせられます。

おわりに