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