＊クライアントワークではなく自主制作物です。
概要
友人Aの誕生日プレゼントに、友人Aが制作している小説のファンアートがランダムで表示される「ガチャ」風のページをデザイン・実装しました。
「ガチャ」：主にスマートフォンゲームの有料コンテンツで、イラストやキャラクターがカプセルトイのようにランダムで排出されるもの
テイスト：ポップ, ゴージャス
仕様：WordPress カスタム投稿タイプ実装
実装したページ： https://libsy.net/komachi2023
経緯の詳細な解説（ブログ記事）： https://libsy.net/blog/2910
実装内容
- 友人Aからリクエストされたイラスト6点の制作（Procreate, Adobe Photoshop）
- 共通の友人B,Cに企画を説明し、作品（小説1点・イラスト1点）を発注
- ページデザイン（XD）
- ロゴデザイン制作（Adobe Illustrator）
- 背景画像制作（Adobe Photoshop）
- WordPress カスタム投稿タイプ 実装（HTML, SCSS, JavaScript, PHP）
ロゴデザイン・UI部分（ボタン）
誕生日プレゼントなので、王冠などを用いてゴージャスな雰囲気にしました。
ゲームの「ガチャ」が着想元であること・全体にこのページがジョークで作られていることから、あまりレトロ・ゴージャスな雰囲気には寄せずに、ポップな雰囲気も押し出しています。
XDカンプ：https://xd.adobe.com/view/33d3fed7-c53e-46da-a1cf-d36b9b4fded1-6680/
背景
ゲーム風の宝箱の写真（https://www.pakutaso.com/20161250356post-9891.html）に、宝箱へのスポットライト、玉ボケの追加、テキストの可読性を上げるために背景の一部のぼかし加工を行いました。
実装（JavaScript）
ジョークで実装したページなので、TOPページの背景はやや過剰にキラキラさせました。TOPページにはParty.js（https://party.js.org/）を使い、タップ・クリックで紙吹雪が舞います。
ページ遷移アニメーションは、舞台のカーテンが開くようなイメージで作成しました。
JS部分は Vanilla で書いています。
実装（WordPress）
自分のWordPress製のサイト内にカスタム投稿タイプとして追加しました。
日本語文字組版の改善（CSS）
ランダム排出される作品に小説が含まれるので、小説の見え方を改良しました。
和文組版のダッシュは、組版ルールではダーシ（—）記号を2個並べて「——」と表します。Webでは、フォントやブラウザによってダーシ記号の隙間が空いてしまう・ダーシの途中で改行されることがあるので、ダーシの分離を防ぎました。
例：「吾輩は——猫である。」
HTML：吾輩は<span class="letter-dash">——</span>猫である。
SCSS：
.letter-dash {
padding: 0;
display: inline-block;
color: transparent;
background-image: linear-gradient($fontcolor, $fontcolor); //文字色と同じ色
background-position: center center;
background-size: 87.5% 1px; //後述
background-repeat: no-repeat;
text-decoration: none;
}
テキストはダーシ記号のまま、テキストを透明色にして `liner-gradient` で横線をひいています。
`background-size: 100% 1px;` では前後の文字とダーシが詰まる（アキが0になる）ため、ダーシの前後8分アキ(文字サイズの1/8の長さのアキ)になるように、100% * 14 / 16 の値をとりました。
文中の文字はダーシ記号のままなので、文章の意味とアクセシビリティを損ないません。
今回はページ内で使われているダーシの数が少ないので、原稿でダーシが使われている箇所を検索・置換しました。点数が多い場合やサイト全体に実装する場合は、JSで検索・置換するのが良さそうです。