和風の縦書きサイトを作る時に気をつけたこと

和風の縦書きで綺麗なサイトのデザイン作りたいな…
依頼が来てから考えても遅い！ということで実例を元にデザイナーとして和風の縦書きサイトを作る時に気をつけたことをご紹介します。

和風の縦書きサイトを作ることになった経緯

まずは経緯から。あるクライアントさんからコーポレートサイトリニューアルのご相談をいただきました。ヒアリングをしていく中でいくつかの「キーワード」が浮かび上がってきました。
そのキーワードが以下。
「伝統」「日本」「女性」「和」「ゆっくりした時間」「高い品質」…。

ふむふむ。キーワードを元にデザインコンセプトを固めていく最初の段階で、頭の中には「縦書き+明朝体が絶対に合う！」という確信がありました。Webサイトの多くは横書きですよね。日本の文化でもある縦書きの表現は伝統、日本らしさを伝えることができると感じ、提案することにしました。

「縦書き、横書き」のバランス

縦書きは右から左に読んでいきますが、Webサイトは左から右に読み、上から下に進むのがスタンダードです。サイト全体を右から左進む仕様も可能ですが、使いづらさを感じてしまう可能性があります。こられを踏まえて、全てを縦書きにするのではなく、使いやすさ読みやすさを考慮する必要があります。

印象的に見せたいコピーやメッセージには縦書きを、長い文章や補足部分は横書きにしました。一部を縦書きにすることでグンと引き立ち、サイトの印象が随分変わります。

「明朝体、ゴシック体」の割合

多くのWebサイトではフォントにゴシック体が使用されているため、ゴシック体の方が読みやすく感じます。印刷物と違い閲覧環境によって見え方が違うことがゴシック体が多く使われている要因かなと感じています。全てのフォントを明朝体にすると世界観が統一されてよいのですが、明朝体の小さいフォントは可読性が弱い印象を受けます。

こちらも同じくタイトルやリードには明朝体を使用し、文章や注意書き等はゴシック体を使用することにしました。

同じフォントサイズでも明朝体とゴシック体では違ってみえる

明朝体とゴシック体では同じフォントサイズでも明朝体の方が少し小さく感じませんか？明朝体ベースで進める時は少し注意しておきましょう。

文字間や行間は広めがいい？狭い方がいい？

今回のキーワードにはまるのは広めです。広めの方がゆっくりした時間、日本の伝統を感じます。キーワードが「安い」「スピード」「男性的」だと普通〜少し狭い方が合うのかなと思います。

デバイスフォントどうする？

デバイスフォントで明朝体を使用する時にぶつかった問題…。
そう、Androidではデバイスフォントに明朝体がありません！！！
※2017年12月現在。今後使用できる可能性を期待しています。

ちなみにMacOS、windows、iOSにはデバイスフォントに明朝体があるため問題はありません。デザインの統一性を考えるとMac、windows8以降、iOSで共通で表示できる「游明朝」がおすすめです。

スマートフォンでの閲覧が大半を占めるようになってきているので、できれば全てのデバイスで世界観を統一させたいですよね。今回3つの対応策を考えました。

1）googleが提供している日本語webフォント
googlefonts.github.io/japanese
フリーで使用できるため、コストがかかりませんが、現時点では明朝体が3種類しかなく選択肢が少ないです。さわらび明朝、はんなり明朝は縦書きにすると、文字が重なり崩れることから現実的ではないかもしれません。改善されることを祈ります。

2）Adobeが提供している「Typekit」
typekit.com/plans
種類もウェイトも多いです。但し、有料のAdobeの「Creative Cloud」メンバーへの登録が必要になります。
※自分が制作サイドの場合はクライアント側での登録が必要になります。

3）モリサワが提供している「TypeSquare」
typesquare.com/ja/service/plan
MORISAWA PASSPORTプランに入っていれば利用可能書体数、ドメイン数に制限がありません。無料プランもありますが、月に1万PVまでと制限があるため、有料プランの方が安心と言えます。

今回はスマートフォンからのアクセスが多いこともあり、モリサワの「TypeSquare」を使用しました。

まとめ

「縦書き」「横書き」の組み合わせは、余計な装飾をせずに目線を定めることができる
全てのフォントを明朝体にするより、文章によってはゴシック体を使う
ゴシック体より明朝体の方が小さく感じるのでフォントサイズは慎重に
和風で伝統を伝えたい時には文字間、行間は広めがおすすめ
Androidで明朝体を表示させたい場合は、Webフォントでの対応が必要
Webフォント「Google Fonts+ 日本語早期アクセス」の明朝体を使用する場合は縦書きはまだやめておこう

参考サイト

縦書き、和風のデザインを進めるに辺り、世の中の縦書きサイトを漁りました。最後に印象に残ったサイトをいくつかご紹介します。

千總

www.chiso.co.jp

う、うつくしい…！着物がきれいに見えるように縦長の写真を使用しており縦書きとの組み合わせが素敵です。縦書きと横書きで見せる所の切り分けが上手です。PCとスマホ版で振り分けています。

白鶴天空

www.hakutsuru.co.jp/tenku

「原点から頂点へ。」強いこだわりが感じられます。こちらもPCとスマホ版で振り分けています。Parallaxで表現することにより、品質のよさが際立ちます。

衣のいのち

www.suzunoya.com/kinu

全身で美しい着物は縦長で配置されており、それに合わせた縦書きのバランスが綺麗です。スクロールで表示されるセンターのメニューの出し方、クリックして出るメニューの動きもすごく好きです。ポイントで使用しているカラーが日本らしさを感じます。レスポンシブでWebフォントの筑紫明朝を使用しており、どのデバイスから見ても世界観が統一されています。