TRIPULL｜旅行予約サイト Webアイキャッチ制作

2026年9月13日 2026年9月13日

misa-connect

旅行予約サイト「TRIPULL」のWebアイキャッチを制作しました。
最初のきっかけは、CrowdWorksのコンペへの応募でした。

ただ画像をつくるのではなく、実際に掲載されるサイトや一覧画面を確認しながら、「このサイズで何を一番に伝えるべきか」を整理して制作しています。

1回目の採用で得た気づきを次の制作へ活かし、2回目の案件でも採用につながりました。

AIで素早く案を出しながら、最後に「何を伝えるか」を判断し、実際の掲載環境に合わせて整えた制作事例です。

旅行予約サイト「TRIPULL」のWebアイキャッチ制作。最初はCrowdWorksのコンペ応募から始まりました。

1回目の採用後、実際の掲載ページや一覧表示を確認し、「制作画面で見やすいこと」と「掲載先で伝わること」は違うと実感しました。その気づきを次の制作に活かし、2回目は最初から掲載環境やスマートフォンでの見え方まで意識して制作しています。

最初に採用されたのは、バンコク発の貸切チャータータクシーのWebアイキャッチです。

制作時に優先したのは、「貸切チャータータクシーの商品であることが、一目で分かること」。観光地の写真を目立たせるだけではなく、サービス内容がすぐ伝わるよう、文字情報の優先順位を整理しました。

また、4時間・6時間・8時間・12時間から選べる商品であることなど、予約を検討する人に必要な情報を整理しながら構成しました。

この作品が、CrowdWorksでの初採用となりました。

採用後、実際にTRIPULLのWebサイトへ掲載された画面を確認しました。

「制作画面で見やすいこと」と「実際の掲載場所で伝わること」は同じではない。

商品ページだけでなく、一覧画面では画像が小さく表示されます。スマートフォンでは、さらに表示サイズが小さくなります。

そのため次の制作からは、実際の掲載サイトを見ること、一覧画面での見え方を確認すること、スマートフォンサイズまで縮小して確認すること、一番伝えたい情報を先に決めることを、自分の制作ルールとして取り入れました。

完成画像だけを見るのではなく、実際に使われる場所まで確認することが、Web制作では大切だと学んだ案件です。

一覧画面では、他の商品と並んだ状態でも内容が一瞬で伝わる必要があります。

商品ページでは、アイキャッチが大きく表示され、内容と予約情報をつなぐ役割になります。

次に制作したのが、「ピンクのガネーシャと3つの寺院めぐり」のWebアイキャッチです。

今回は1回目の制作経験をもとに、最初から実際の掲載環境を意識して制作しました。主役は、ひと目で印象に残るピンクのガネーシャ。

そのうえで、「3」「3つの寺院めぐり」を強く見せ、3か所を巡る旅行商品であることが、小さなサムネイルでも伝わる構成を優先しました。

その後、「日本語ガイド・専用車付き」という情報を追加する際も、情報を増やしすぎず、評価されていた構成を壊さないことを優先。必要な情報だけを追加し、全体の情報量と見やすさを調整しました。

こちらの作品も正式採用となりました。

TRIPULL商品ページでの掲載例

今回の2つの制作では、完成したアイキャッチ単体だけでなく、実際にWebサイトへ掲載された状態まで確認しています。

制作物は、完成した瞬間がゴールではありません。文字は読めるか、商品内容が伝わるか、他の商品と並んだときに埋もれないか、スマートフォンでも意味が伝わるかまで確認することで、次の制作に使える判断基準が増えていきました。

1回目の結果を見て、2回目の作り方を変える。その積み重ねも、今回の制作の大切な成果だと考えています。

05｜この制作で得たこと

今回のTRIPULLの制作で得た一番大きなものは、「採用された作品が2つ増えたこと」だけではありません。

1回目の制作で得た気づきを残し、実際の掲載結果を確認し、その判断基準を次の制作へ使えたことに意味がありました。

制作の経験を、その場限りで終わらせず、次の仕事に使えるKnowledgeとして積み上げる。

AIを使えば、案を出すスピードは上げられます。でも、何を伝えるのか、何を残すのか、何を削るのか、どの状態を「完成」とするのか。最後に判断するのは人です。

AIで速く、人が判断する。

今回の制作を通して、misa.connectが大切にしている「想いを、伝わる形に整える。」という考え方を、実際の仕事の中でも一つ形にすることができました。