デザインポリシー

今回のサイト更新では、雑多になりすぎたスタイル設定をリフレッシュすべく、デザイン再構築を行いました。

備忘録もかねて記録しておきます。

Color

まずは色のお話です。従来のデザインでは、初音ミクベクター化の時に作成したカラーパレットを元に、低刺激で視認性に優れる色を目指して調合した色を採用していました。今回もそれを踏襲し、多少追加をして今回の色を調合しました。

・mainColor  #137a7f ■
・darkColor  #004d53 ■
・lightColor #86cecb ■
・background #fffeec ■

三色問題じゃないですけど、テーマカラーが3つと背景色さえあれば十分ですね。

Fonts

最近沼り始めたのでなかなかしっかりやってます。引き換えにユーザートラフィックが増えてるのは内緒です()

Webフォントが表示されているフォントはAdobe fonts(旧Typekit)に登録するとデスクトップ・Webフォント問わず無料利用できるので是非試してみてください。Adobe Fonts配信フォントは、フォント名をクリックするとフォント詳細が新規タブで開きます。

貂明朝
- ~~本文やらなにやらもろもろ。~~本文には読みにくいので置き換えました。メインで使っています。IT黎明期の低dpiディスプレイ時代は可読性に優れるゴシック体が評価されてきましたが、高精細ディスプレイが幅を利かせる今日、再現性が増したことにより、手書きにより近い明朝体等が評価されているそうです。数多くある明朝体の中でもインク溜まりの表現が素晴らしく幽玄な雰囲気を醸し出している貂明朝をメインに採用しました。ウエイトが少ないのを除いたら最高のフォント。
- The quick brown fox jumps over the lazy dog. 1234567890
- いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
Adobe Garamond
- 元々は活版印刷の時代にインク消費量を抑えるためにデザインされたセリフフォントです。その独特な3の表現が目に留まり、コーポレートフォント的に採用しました。キャッチフレーズのGuys, Be creative!もこのフォントです。斜体別字形、いいっすねぇ～
- The quick brown fox jumps over the lazy dog. 1234567890
- The quick brown fox jumps over the lazy dog. 1234567890
Rajdhani
- 元はインド？のフォントです。独特な数字書体が気に入ったのでエントリメタ表示に採用しています。
- The quick brown fox jumps over the lazy dog. 1234567890
Ubuntu
- Linuxのディストリビューション？となってしまいそうですが、れっきとしたフォント名です。角が取れてるのが個人的に好きなんですが、どうもそこらへんがAdobeのコーポレートフォント「Adobe clear」に似たフォントですねw トップページのスライドショーのカラーコードはこのUbuntuの斜体です。どこか速度感があっていいですねぇ…
- The quick brown fox jumps over the lazy dog. 1234567890
- The quick brown fox jumps over the lazy dog. 1234567890
見出しゴ
- h1,h2といった上級見出し・強調表示に採用しています。うろこつきの伝統的ゴシックに、高級感漂う断面水平の英字体を採用しているモリサワのフォントです。とにかく格式が高く、すばらしいです。なにかと愛用しています。ちなみに当フォントはAdobeFontsのCCプランで使用できますが、今回はモリサワ公式のTypeSquareを使用しています。
- The quick brown fox jumps over the lazy dog. 1234567890
- いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
平成角ゴシック Std
- 上のUbuntuと併せて、h1,h2といった上級見出しに採用しています。見出しゴのが好きですが無料プランだと使えないので仕方なく… 将来的に見出しゴに置き換える予定です。
- 置き換えが完了したのでWebフォントの適用を解除しました。リンクだけ存置します。
Source Code Pro
- 等幅フォントなんてどれもそんな変わんないですが、Webフォント使えばどの端末でも同じ表示環境になるって点を評価して採用しました。日本語は対応してません。あえていうならiの表記が好きです。
- The quick brown fox jumps over the lazy dog. 1234567890
Product Sans(Webフォントなし)
- ロゴの.orgの表記に使用しているフォントです。Googleの新しいコーポレートフォントです。Android内部ファイルから手に入れたんですがどうも… まあいいでしょう() Futuraというフォントに似ているそうです。