高品質なサムネイルのギャラリーサイト、Thumbnails.JP をリリースしました。（サムネイルは順次追加予定です）🎊

Thumbnails.JP で採用したWeb技術やサイト構築のモチベーションについてご紹介します。

サイト構築の動機

Thumbnails.JP は、少し前から自分がサムネイルの依頼を受け始めた頃にまで遡ります。当時、デザインの知識は少しあったものの、Photoshop の使い方すらもままならず、苦戦しながらサムネイルを作っていました。Web デザインはできてもグラフィックデザインとなると、また違った能力を求められます。書籍や、YouTube で様々なサムネイルを見ながらグラフィックデザインの知識を深めていきましたが、高品質なサムネイルを探すのはとても非効率な状態でした。

そこで思いついたのが、高品質なサムネイルを集めたギャラリーサイトでした。高品質なサムネイルを集めて、様々なメタデータによって分類し、アクセスしやすいようにフィルターやソート機能を整えようと思いました。

本番環境

インフラは、AWS（Amazon Web Services） を採用しました。お馴染みの AWS です。AWS は、一般的なレンタルサーバと比べて堅牢性、柔軟性、セキュリティ、パフォーマンスなどが優れています。やや敷居が高く、専門用語が飛び交う IaaS ですが、慣れてしまうと一般的なレンタルサーバでは物足りなくなるほど優れたサービスです。Cloudflare R2 なども候補に挙がりましたが、あまりサービスは分散させたくなかったので、すべて AWS で完結するように構築しました。AWS のサービスで利用したものは、以下の通りです。

S3 // 静的ファイルをホスティングする Web サーバとして利用
Route 53 // DNSサーバとして利用
Certificate Manager // SSL/TLS 証明書の発行として利用
Cloud Front // CDNとして利用
API Gateway // APIを管理するエンドポイント作成として利用
DynamoDB  // サイト内のメタデータをKVSとして管理するため利用
Lambda // API Gateway と DynamoDB の中継として利用
WAF & Shield // DDoS 攻撃や悪意のあるトラフィックの防御として利用

AWS は従量課金制のためコストは青天井です。たくさんサービスを利用しているため、その分だけコストがかかるように思えますが、トラフィックが増えても月に約 1,000 円程度だと思います。もちろん、コストは可能な限り圧縮できるように、いくつか工夫をしています。

Webサイトの構成

Web サイトはシンプルな構成が好きです。階層構造も、ケースによっては強力は構成だと思いますが、今回はもっとシンプルなスター構造でいきます。つまり、トップページが中心にあり、各ページにはそこから１クリックでいける単純な 2 階層構造です。

カテゴリや、他のメタデータによって階層を作る構成も考えましたが、それらはすべてフィルター機能によって実現し、階層を 1 つでも減らす方針で作りました。大雑把な言い方をすると、すべてのデータをダウンロードし、フィルター＆ソート機能によって、目的のコンテンツだけを一覧で並べる方式を採用しています。

すべてのデータをダウンロードすると聞くと、通信量がとても大きくなるように聞こえますが、最初にダウンロードするのはメタデータの集合である 圧縮済みの JSON ファイルです。これは、サムネイルのデータが増えたとしても、1 枚の画像データよりも小さいデータです。

画像データのダウンロードは、フィルタリング後のデータのみになるため、通信量はそこまで大きくありません。また、遅延読み込みの処理も入れており、画面に表示されている分のサムネイルしかダウンロードしないため、通信量を節約することができます。さらに画像データは JPG の他に、すべて Webp を用意してあるため、そこでも通信量を少しだけ減らすことができます。

コンテンツ管理とJSONファイル

Thumbnails.JP は、サムネイル画像とJSONファイルが命です。Web サイトの訪問したユーザは、JSON ファイルを読み込み、必要なサムネイル画像をダウンロードしているだけになります。

その重要な JSON ファイルはどのように作成しているのかと言うと、半分プログラム、半分人力です。プログラムで動画やチャンネルのメタデータを YouTube Data API で取得し、JSON ファイルに書き込みます。また、画像処理を行い、サムネイルに使われているメインカラーを抽出します。色検索も実装したいため、近似色もあわせて求めます（完全一致の検索では 1677 万色から探すため、同一色のサムネイルがまずヒットしないため、近似色でヒットさせるようにします）。近似色は 256 色にしました。どのカラーコードであっても 256 分割された、いずれかの色に入ります。ここまではプログラムの作業です。

残りの人力での作業は、画像の分類です。つまり、画像のスタイルやテイスト（「かっこいい」や「かわいい」など）は、プログラムで評価できないため、すべて人力でメタデータを振っていきます。それらが終わると、AWS にデプロイされ、Web ページにサムネイルが新しく表示されます。今後、サムネイルを 1,000 枚以上追加していく予定ですが、ここが一番大変だったりします…。

メタデータの管理

サムネイル以外にも、サイト内で使用されるメタデータが 3 種類あります。それは、「閲覧数」と「高評価数」と「ブックマーク数」です。これらのデータは AWS の DynamoDB によって管理されています。

サムネイルの詳細ページを開いたら、閲覧数が +1 される仕組みです。同様に、高評価やブックマークをクリックすると +1 され、もう一度クリックすると -1 する仕組みです。これらのデータは、ソート機能や人気のサムネイルで並び替えるときのパラメータとして採用しています。

また、その他にもブラウザのローカルストレージ機能を利用して、ユーザごとの閲覧履歴、ブックマークしたサムネイルの一覧を保存しています。ローカルストレージの機能を利用することで、ユーザ登録やログインの必要なしに閲覧履歴やブックマーク機能を利用することができます。もちろん、これらの履歴やブックマークは、Web ページから簡単に削除することができる機能も設けてあります。

サイトツアー

それでは、早速サイトの中身をご紹介致します。

トップページ

トップページは、必要最低限なパーツのみを配置し、ユーザはすぐにサムネイルの一覧を確認できるユーザ体験を提供します。ロゴ、ハンバーガーメニュー、検索、ソート、それだけです。

ソート機能は、投稿日順、閲覧数順、高評価順、ブックマーク数順を用意しました。もっと様々な切り口でのソートを用意できましたが、選択肢が多くなってユーザが迷うデメリットよりも、あえて選択肢を絞ったシンプルなソートのみを提供しています。

検索では、すべてのサムネイルから該当のキーワードを含むサムネイルを高速にフィルタリングします。インクリメンタル検索に対応しているため、文字を打ち込むたびに検索を行うため、結果が常に表示されます。

ハンバーガーメニューには、グローバルナビゲーションと、フィルタリング条件を盛り込みました。フィルタリングは、現在どのような条件でフィルタリングされているのかがチェックマークにより確認することができます。

フィルタリング、およびソート条件は、重ねがけをすることができます。それらの条件は「Fliter & Sort」に表示され、現在どのような条件で抽出されているのかをハンバーガーメニューを開かなくても確認できます。また、条件はすべて独立しており、個別に削除する（デフォルトの ALL に戻す）こともできます。すべての条件をまとめてクリアしたい場合は、「条件をクリア」ボタンを押すことでクリアできます。

サムネイルの詳細

トップページからサムネイルをクリックすると、サムネイルの詳細ページに遷移します。サムネイルの詳細ページでは、主にサムネイルが使われている動画の情報、サイト内のメタデータ、サムネイルのカラーパレットなどが確認できます。

サムネイル検索

サイト内検索は、全文検索サービスの SaaS である Algolia を採用しています。このサービスは、日本語検索や、ゆらぎ検索などにも対応しており、また高速に動作します。トップページにある検索は完全一致の検索ですが、Algolia のサービスは、もっと柔軟に検索できるため、別サービスとして切り出しました。チャンネル名、動画タイトル、動画タグなどを検索対象にしているため、動画に適切なキーワードが設定されていれば、瞬時に目的のサムネイルを見つけることができます。例えば、以下では「うた」と「歌」を区別せずに検索できています。

人気のサムネイル

人気のサムネイルは、独自のスコアリングによりランキングを決定しています。YouTubeのチャンネル登録者数、再生数、高評価、サイト内での閲覧数、高評価、ブックマーク数などです。再生数や閲覧数と高評価数の割合も考慮し、ボーナス・ペナルティも与えています。（ただし、このアルゴリズムはまだ調整の余地があります。）

閲覧履歴

閲覧履歴は、これまでに閲覧したサムネイルの一覧を提供します。サムネイルの詳細ページを開いたとき、ローカルストレージに閲覧したサムネイルの ID が記録されます。閲覧ページではそれらを読み込み、リスト化しています。ローカルストレージにすでに存在するサムネイルの詳細ページを再び開いた場合、そのサムネイルの ID はリストの先頭に移動します。

これらの履歴は、アイテムにマウスをホバーしたときに現れる右上のゴミ箱アイコンをクリックすることで簡単に削除することができます。

ブックマーク一覧

本サービスは、多くのサムネイルを取り扱うために、あとからサムネイルを振り返りたい場合に備えて、ブックマーク機能を実装しました。ブックマークはトップページ、およびサムネイルの詳細ページから行うことができます。ブックマークボタンを押すと、ローカルストレージにサムネイルの ID が記録されます。これらの機能は閲覧履歴と同じ実装方法になっています。ローカルストレージを使用することで、ユーザ登録やサインインなどが不要で利用できるメリットがあります。

素材配布サイト

今ではすっかり見かけなくなったリンク集です。本サイトは、サムネイルのギャラリーサイトですが、サムネイルを作成するサポートまで手を広げています。サムネイルを作成するにあたって、高品質な素材を配布しているサイトをいくつか列挙しています。

このサイトについて

最後に、このサイトについてのページです。ここでは Thumbnails.JP がどのようなサイトなのか、管理人はどんな人なのか、その他多くの Web サイトに書かれているようなルールなどを記載してあります。

いかがだったでしょうか。出来立てほやほやの Thumbnails.JP ですが、是非ご利用してみてください。フィードバックもお待ちしております。フィードバック先は、X（@murashun）にまで投げて頂けると助かります。
それでは、また。

P.S.
今回のWebサービスは、全部手打ちで作ってます(´・ω・｀) 1 文字 1 文字、心を込めて手打ちしました。是非、ご利用ください。