【無料で配布】サイトの印象が変わる、BiNDupでできる縦書きアレンジ

ホームページ制作サービス「BiNDup」では、この秋のアップデートでサイト内の文字を部分的に縦書きに設定できるようになりました。設定方法やサンプルを紹介しますので、見出しやリストなど、デザインのアクセントとして使用してみてください。

ページの最後にはアレンジ済みのサイトデータを用意しました。無料でダウンロードできますので、設定が分からなかった場合はサイトデータをご活用ください。

サンプルサイト

縦書きの種類：文字の方向について

縦書きにするためには、BiNDupのデザイン編集機能 Dressで「文字の方向（writing-mode）」を使用します。選択できる縦書きは2種類です。

縦書き（右から左へ）

縦書きのテキストを右から左側に向けて配置します。日本語で一般的な書き方です。

縦書き（左から右へ）

縦書きのテキストを左から右側に向けて配置します。
日本語ではあまり使用されませんが、リストを左から並べたいときなどはこちらを使用するとよいでしょう。

設定例【1】見出しを縦書きにしてみよう

見出しのような1行〜数行の短いテキストを縦書きにするための設定例です。

ステップ1：文字の方向を縦にする

（1）パーツを選択

Dressで縦書きにしたいパーツを選択し、詳細デザインを開きます。その中から縦書きにする項目自体を選択します。
詳細デザインの中に項目がない場合は「＋」ボタンから追加してください。

（2）高度な設定をオンにする

縦書きを使用するには高度な設定を使用します。高度な設定をオンにしてから、「＋」ボタンをクリックしてください。

（3）「文字の方向」を追加

段落スタイルの中にある「文字の方向」を選択します。

（4）縦書きを選択

プルダウンから「縦書き（右から左へ）」を指定すれば、選択した項目が縦書きになります。

ステップ2：高さを調整する

一部ブラウザでは縦書きにしたパーツが文字数に合わせた高さにならないことがあるため（2019年10月時点）、対策のために高さを指定してください。
見出しのように文字数にある程度上限がある（長いテキストが入らない）パーツであれば、高さの代わりに「表示形式（display）」でインラインブロックを指定する方法でも大丈夫です。

［高度な設定］中央に配置する

縦書きにしたパーツを中央に配置する方法はいくつかありますが、周辺に他のパーツがなければ「配置方法（position）」と「変形（transform）」で調整することができます。

※ 一部ブラウザではmarginのautoでは中央配置にならないため、今回の例ではpositionを使用しています（2019年10月時点）

設定例【2】リストを縦書きにしてみよう

シンプルな箇条書きタイプのリストを縦書きにする設定例です。

ステップ1：文字の方向を縦にする

パーツを選択

Dressで縦書きにしたいパーツを選択し、詳細デザインを開きます。その中から縦書きにする項目自体を選択します。
詳細デザインの中に項目がない場合は「＋」ボタンから追加してください。

文字の方向を縦書きに

見出しの手順の（2）〜（4）と同じ手順で文字の方向を縦にします。

ステップ2：表示サイズを調整する

高さを調整する

そのままでは長いテキストも1行で表示されてしまうので、高さを指定します。テキストが長くなる時に折り返せればよいので、サンプルでは「高さの上限」を指定しています。

参考：emという単位

「em」とは親要素の文字サイズを基準にした単位ですが、日本語フォントの場合、1emでだいたい全角1文字分と考えるとわかりやすいです（当てはまらない場合もあります）。余白なども考慮する必要がありますが、16emであれば1行あたり約16文字分の高さになります。

幅を指定

Webサイトのデフォルトでは左端を基準にパーツが配置されます。縦書きに合わせて、パーツを右端からスタートしたい時は幅を100%に設定します。

スマホサイトでは横書きが正解

縦書きにしたパーツのテキスト量が多い時、パーツ自体の幅は内容に合わせて拡がってしまいます。スマホのように小さな画面で閲覧した時、テキストが長いと横にはみ出してしまって見えなくなる恐れがあります。リストのように項目数が多くなるパーツは、モバイル向けの設定は横書きにしておくとよいでしょう。
※ BiNDupは段組には対応していません。

高さの指定などもモバイル向けに設定するのを忘れないように注意してください。

縦書きデザインに合うオススメ日本語フォント

BiNDupには日本語Webフォントが多数搭載されていますが、なかでもペン書き風や毛筆風など和風デザインのフォントは縦書きデザインと相性が良いです。おすすめのフォントをいくつかピックアップしてみました。

見出しを毛筆風にして、本文を明朝体にした組み合わせ例です。

アレンジは多彩。すぐに使えるサンプルデータを用意

上級者は、フォントや装飾を組み合わせていろいろアレンジしてみてください。

今回紹介したサンプルのサイトデータを配布します。
サイトデータは2019年10月1日にアップデートした最新のBiNDup環境でお使い頂けます。
※サイトデータのダウンロードにはログインが必要です。