2025.09.10: コーディング

【AI画像生成コンテスト】入社してから一番難しかったLP制作の裏側

: しょうしょ

入社以来、さまざまなランディングページ（LP）の制作に携わってきましたが、その中でも特に難しく、時間をかけて取り組んだのが「AI Canvas 1周年記念コンテスト」のLP です。

対象のLPはこちらです。
AI Canvas 1周年記念コンテストLP
この記事では、コーダーとして直面した技術的・運用的な課題を振り返り、どのように解決していったかを解説します。

INDEX

プロジェクト概要
「難しかったポイント」3選
まとめ

プロジェクト概要

目的：AI Canvasの1周年を記念し、画像生成コンテストを開催。参加者を募集すると同時に、ブランドの認知度を高めること。
使用技術：HTML5, CSS3, JavaScript

「難しかったポイント」3選

複雑な背景表現 – ザラザラ感、グラデーションの繋ぎ

デザインから要求された微細なテクスチャを実現するためにCSSでの表現を工夫しました。
背景カラーの上にザラザラしたテクスチャの画像を組み合わせることで、望む質感を再現しました。

.background{
	background: linear-gradient(180deg, #4db5ff 0%, #365eff 30%);

	&::before {
		background-image: url("../images/bg_noise.png");
		background-repeat: repeat;
		background-size: 100%;
		content: "";
		display: block;
		height: 100%;
		left: 0;
		opacity: 0.2;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: -1;
	}
}

ノイズ画像を半透明で重ねることで、グラデーションの境界が自然に馴染み、デザイン通りの雰囲気を再現できました。

beforeafter

デザインに合わせた縦書きテキストの表現

縦書きレイアウトにはCSSのwriting-modeプロパティを活用し、ブラウザ互換性を保ちながら、正確な日本語の縦書きを実現しました。

▪ writing-mode: vertical-rl;とtext-orientation: upright; の組み合わせ
日本語の縦書きを自然に表現するために、文章全体を縦方向へ流すレイアウトを採用しました。
これにより、通常の横書きテキストでは出せない「日本語らしい縦の流れ」が表現できます。

▪ 句読点の位置調整
縦書きでは句読点の位置が横書きと異なり、右寄せにしないと読みにくくなります。
そこで inline-block と transformを使い、自然な位置にくるように調整しました。
例えば「、」「。」が文字の右上に寄るように配置しています。

▪ 特殊文字の表現
text-orientation: mixed; を使って「…」などを縦方向に表示。
text-orientation: sideways;を使って「『夏』」のカギ括弧部分だけ横向きにして自然な位置にくるように調整しました。

//HTML
<div class="text">
    <p>ひまわり<span class="is-right">、</span>海<span class="is-right">、</span>花火<span class="is-right">、</span>浴衣<span class="is-right">、</span><br>夕暮れ<span class="is-right">、</span>夏祭り<span class="is-right">、</span>入道雲<span class="is-vertical">…</span><span class="is-right">。</span></p>
    <p>あなたが思い描く<span class="is-sideways">「</span>夏<span class="is-sideways">」</span>の情景や記憶を<span class="is-right">、</span><br>AIで自由に表現してください<span class="is-right">。</span></p>
    <p>季節の情緒や風景<span class="is-right">、</span>感情の断片など<span class="is-right">、</span><br><span class="is-sideways">「</span>夏<span class="is-sideways">」</span>から連想できるものであれば何でもOKです！</p>
</div>

.text {
	display: flex;
	flex-direction: row-reverse;
	gap: 60px;
	justify-content: center;

	p {
		line-height: 2;
		text-orientation: upright;
		writing-mode: vertical-rl;
	}
}

.is-right {
	//右寄せ
	display: inline-block;
	text-align: right;
	transform: translate(0.6em, -0.5em);
	width: 1em;
}

.is-vertical {
	//縦書き
	text-orientation: mixed;
}

.is-sideways {
	//横書き
	text-orientation: sideways;
	writing-mode: vertical-rl;
}

投稿数とパフォーマンスの両立

コンテストへの応募作品を一覧表示するにあたり、投稿数が増えるほど表示速度が低下するリスクがありました。
さらに、ユーザーがアップロードする画像はサイズや比率がバラバラで、レイアウト崩れをどう防ぐかも課題でした。

そこで以下の工夫を取り入れました。

▪ JavaScriptによる非同期処理での追加読み込み
初期表示では必要な枚数だけを表示し、スクロールに合わせて次の要素を JavaScript で非同期に取得・表示。これにより、読み込み負荷を分散し、スムーズな操作感を実現しました。

▪ object-fitによるレイアウト調整
画像サイズの不揃いは、CSS の object-fit を利用して統一。比率が異なる画像でも枠内に自然に収まり、一覧表示の見やすさとデザイン性を確保しました。
結果として、大量の投稿が集まってもパフォーマンスを維持しつつ、ビジュアル的にも整ったコンテンツ一覧を実現することができました。

その結果、大量の投稿が集まってもパフォーマンスを維持しつつ、美しく整った作品一覧を実現することができました。