MEMOGRAPHIX

sanographixの個人ブログ。日記、webデザイン、読書、写真など。

妙にジャンプ率の高いサイトをつくる

つくる、というか作った。

konel-works.com

↑ これをスマホで見ると、そこまで文字の大きさは気にならないと思うけど、PCだとこのように見えている。

f:id:sngrpx:20170808195613g:plain

幅1000pxくらいの迫力のある見出しが登場する。ちなみにこのサイトは同人誌の告知サイトで、前回の記事でも紹介を書いた。

text.sanographix.net

ポスターなどではジャンプ率の高いレイアウトをよく見かけるので、ウェブでも試してみたいと思いチャレンジした。というか、並行して作っていたポスターのデザインを流用した。IllustratorからSVGでそのまま書き出せるのでめっちゃ楽(色はRGBに変換する必要はあるが)。主観だけど、あまりジャンプ率高いサイト見かけない気がする。見かけたとしても、前衛的な印象のサイトだったりして、物珍しい雰囲気がある。ところでジャンプ率って「高い」「大きい」のどっちが正しい使い方なんですかね。

今回作ったところ、思いのほかモバイルと相性が良いことがわかった(さっきも書いたけど、スマホで閲覧すると自然な見え方になる)。図版や見出しはSVGで書き出せば、PCブラウザのような大きい解像度でもファイルサイズを軽量にできる。

文字とか

大きな文字を使うと字間を調整したくなる(特に見出し)。今回のサイトではTypesquareを導入したのだが、文字詰めの方法が案内されていた。

blog.typesquare.com

-webkit-font-feature-settings: 'palt' 1; // for Android 4.4
font-feature-settings: 'palt' 1;

この記述によってカーニングが施される。サポートブラウザを見ると結構広くて実用的な感じがする。Typesquareは多くの書体でこれをサポートしているが、ほかの状況でどのくらい使えるのかはちょっと調べてない。ちなみに使用書体は秀英角ゴシック銀で、とても美しくて使い勝手が良いので気に入っている(同人誌にも使った)。

ただ、カラム幅一杯にひろがる大見出し(サイトだと「この夏を〜」のとこ)では、さすがにウェブフォントではなく画像を使ったほうが楽だった。文字はなるべく画像で代用しないほうが良いので、見栄え上・実装上都合のいいところに限って画像で代用する、くらいが落とし所だと思う。

色とか

全面が黄色と青で、目に悪そうな色にした。普段は白とか黒みたいなサイトばかり作っているから、遊べて楽しい。毎日見るサイトがこんな色だったら体調悪くなると思うので、こういう期間限定のサイトでは変な配色を試したい。