待ちに待った4月1日。とうとう新元号「令和」が発表されましたね！
個人的には「レイワ」という響がクールな印象を受けて、思ったより好印象を受けましたが皆さんはいかがでしょうか？
そんな中、さっそく巷では新元号に便乗して色々イベントも起きているようで、
BiNDを使っている皆さんの中にもそういった方がいらっしゃるのではないかと、デジタルステージもお手伝いすべく意気揚々この企画が立ち上がりました！
お題はこちら↓↓
元号キャンペーンに使える！
デザイナーが「令和」をイメージしてテンプレートを作ってみました
元号をイメージしたテンプレート？？
正直なところ難しいお題ではありましたがやるしかありません。
今回作った令和デザインのテンプレートはプレゼントしますので、ぜひダウンロードして使ってくださいね。
「令和」のテンプレートを作ってみました
令和に込められた思いとして、「穏やかで幸福な世が始まること」を祈念する元号である、とありました。
また「令」には清らかで美しい語源があるとも言います。
そんな言葉の持つイメージからインスピレーションを得てできたデザインがこちら。
サイトを見る
デザインのポイント
デザインするにあたり真っ先にイメージしたのは、先に触れたように「クールな印象」でしたので、今回はその印象をメインに青ベース（少し透明感を意識しつつ）としました。あとは無難ではありますが和風テイストになるように要素を作っていきました。
- クールな印象
- 和風テイスト
和風テイストを目指すために
下記が和風っぽくするために意識した要素です。
- 縦組み文字
- 曲線と直線
- 柄やパターン
基本的には３つ目の「柄やパターン」や画像などでそれっぽくなるのですが、今回はそれ以外のところでも気を遣っていて、特に２つめ「曲線と直線」では和風っぽい丸みを入れつつも、先の印象の「クールさ」も残したかったので直線も残すようにしました。
あとはちょっと縦組みをやってみたいという思いがあり要素として取り入れてみました。
ちなみに縦組みは、現状のDressでは設定できないカスタム必須のチャレンジポイントとなります！
やり方については後で解説！
曲線と直線を適度に意識
アレンジしたいときのヒント
完成したものはサイトデータとして提供するので、ご自身で好きに文字や画像を変えて使えます。
そのときアレンジするためのヒントをまとめました。全てを丁寧に説明は難しいので要点だけでも。
縦組み文字
こちらは２箇所とも、画像ではなくテキストで表現しています。
前提として、縦組み設定自体はDressでは設定できません。「プロパティ設定」の「スクリプトと詳細設定」→「<head>内」に下記CSSコードを記述します。
<style>
.c-title {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-align: justify;
text-justify: inter-ideograph;
}
</style>
「.c-title」は段落スタイルの「タイトル」を示したセレクタ。
基本的には、上記を設定しておけば指定した箇所（今回は段落スタイルの「タイトル」）が縦書きになります。設定の意味を詳しくは知りたい方はこちら。
※古いブラウザなど環境によってはうまく動作しない場合があります
ビルボード用に調整
ビルボードの縦組みは、文字サイズや配置を変えたりするなど調整をしています。Dressでは「ビルボードエリア＞タイトル<h2>」が主な設定箇所です。
主な特徴として文字サイズに「vh」という単位を使用しています。これは「100vh=画面の高さ」を基準にしており、今回の「48vh」は１文字が画面の半分程度の大きさとなります。この単位を使うメリットとしては、画面の高さが変わっても文字サイズも変動してくれるのでデザインの崩れが起きにくい点です。
今回は「令和」の２文字を入れたかったので48vhとしていますが、3文字であれば30vhなどに調整すると良いでしょう。
あとは配置で細かい調整をしています。
ビルボードエリアを起点（relative）として、タイトルの位置を（absoluteで）調整しています。
詳しくは設定画面と、高度な設定についての記事を確認してください。
ビルボードの丸い部分
ビルボードの下がカマボコのような円形を描いています。こちらも画像化せず、Dressだけで表現しています。下記が設定箇所。
- ビルボードエリア＞after要素
- ビルボードエリア
少しイメージしづらいと思いますので分解すると、このようにビルボードエリアの上にカマボコの様な形を重ねています。
このカマボコ型の設定は「ビルボードエリア＞after要素」で擬似的にビルボードエリア内に擬似的にブロックを追加し、「角丸」で左上と右上にをそれぞれ50%に設定することで表現しています。
このまま使う分には不要な知識ですが、半円の表現を試したい方はぜひ参考にしてください。
※after要素については説明が長くなるので今回は割愛。気になる方は調べてみてください。参考
デザインと設定の微調整
実際にはこのカマボコ型の箱は、デザイン的に綺麗に見える様に横幅を長く（画面幅より大きく）しています。
しかしこのままだと画面からはみ出して横スクロールしてしまうため、ビルボードエリアに「はみ出し処理」設定で調整しています。
ビルボードエリアからはみ出した要素を隠す
こちらのカマボコも「令和」と同様、ビルボードエリアを起点（relative）として、位置を（absoluteで）調整しています。
斜め背景
上記と同じくブロックの背景に敷いている斜めの背景デザインは画像を貼りつけているわけではなく、Dressのみの設定です。
今回は「目次ブロック」を使用していますが、斜め背景部分は同じく「目次ブロック＞after要素」で追加したブロックを変形して表現しています。
ここでのキーポイントは変形ですが、こちらについては先日投稿した「高度な設定についての記事」をご確認いただければと思います。
https://bindup.jp/camp/bind/19296
Dressの設定で、skewY(-5deg)で斜めに変形
サイトデータを配布します
和を表現するにあたって、ちょっと高度なカスタマイズが入っていますが、このまま5月1日に向けて令和キャンペーンを準備するもよし、サイトデータの中身を解析して表現の勉強するもよし、ぜひアレンジして活用してみてください。
以下よりダウンロードしてください。
POINT
- 縦組み文字で和風感アップ
- 文字サイズを画面サイズと連動させる
- 背景を丸くしたり斜めにするテクニックはDressを活用