INDEX of This Page
前談
本ページで紹介する「鎌倉観光App 源 -MINAMOTO-」は、企画元「LINE Apps『鎌倉市観光App』作品紹介」で検討した構想をもとに、観光体験をUIと紹介サイトとして可視化した提案です。
企画段階では、鎌倉観光をより便利に、より楽しくするために、観光情報、移動、スポット案内、現地での回遊を支えるアプリの方向性を整理していました。
このページでは、その発想を踏まえて、観光アプリの世界観と機能価値を、どのようにビジュアルとして伝えたかをポートフォリオとして紹介します。
Design Concept
制作コンセプトは、「鎌倉観光の魅力と、観光を支えるアプリの利便性を、ひと目で伝えること」です。
この制作では、アプリそのもののUIだけでなく、観光地としての鎌倉の空気感と、現地で使うサービスとしての実用性が同時に伝わることを重視しました。
観光系のサービスは、機能説明だけでは印象に残りにくいため、最初に地域の魅力を感じてもらい、そのうえでアプリがどのように役立つのかを自然につなげる見せ方を意識しています。
特に意識したのは、「観光地のブランドイメージ」と「サービスの説明」を分断しないことです。
そのため、ビジュアル面では鎌倉を象徴する写真を大きく使いながら、スマートフォンのモックを組み合わせることで、土地の魅力とアプリ利用シーンを1画面の中で結びつける構成にしました。
単なる観光サイトでも、単なるアプリ紹介でもなく、“鎌倉を巡る体験を支えるサービス”として見せることが、このページの大きな狙いです。
また、紹介サイトとしては、情報を細かく詰め込みすぎず、まず世界観で惹きつけ、その後に機能理解へ進ませる導線を意識しました。
ポートフォリオとしての見どころは、表層のビジュアルだけでなく、観光体験をどう見せればアプリの価値まで伝わるかを考えて構成している点にあります。
画面全体の設計意図
この1枚では、観光地の印象、アプリの存在感、サイトとしての情報導線を一度に伝えることを意識しました。
左側の大きなメインビジュアルで鎌倉らしさを印象づけ、右側のスマートフォンモックでサービスの実体を見せ、中央のタイトルでブランドとしての軸をつくっています。
そのため、ユーザーは最初の数秒で、「鎌倉観光のサービスであること」と、「スマホで使うアプリであること」を同時に理解しやすい構成になっています。
【1】ファーストビューの工夫
ファーストビューでは、鎌倉を象徴する大仏の写真を大きく使うことで、地域性がひと目で伝わるようにしました。
観光アプリの紹介では、UIの説明から入るよりも先に、「どの土地の、どんな体験を扱うサービスなのか」が伝わることが重要だと考えています。
そのため、背景写真には説明的な素材ではなく、鎌倉を直感的に想起しやすい象徴的なモチーフを採用し、ページ全体の第一印象を強くしています。
また、空の青を大きく見せた構図にすることで、写真全体に開放感が生まれ、観光サービスらしい軽やかさも感じられるようにしました。
重厚感のある大仏と、明るい青空のコントラストによって、歴史的な土地の深みと、観光に出かけたくなる軽快さの両方が出るようにしています。
単に「鎌倉の写真を使った」のではなく、観光の期待感を高めるためのファーストビュー設計として考えました。
【2】スマートフォンモックの見せ方
右側のスマートフォンモックは、観光地の世界観だけで終わらせず、サービスの具体性を伝える役割を持たせています。
背景ビジュアルだけでは「観光サイト」の印象に寄りやすいため、実際の画面イメージをしっかり見せることで、アプリとして利用するサービスであることが自然に伝わる構成にしました。
ファーストビューの時点で、世界観と機能の両方が把握できるようにした点が、この画面のポイントです。
スマホUIの位置を右側に置いたのは、写真の強い印象を活かしながらも、視線の終点としてサービス本体に着地させるためです。
左から右へ視線が流れる中で、最初に「鎌倉らしさ」を受け取り、最後に「その体験を支えるアプリ」を認識できるため、観光の魅力からサービス理解へつながる視線誘導が生まれます。
ポートフォリオとしては、ビジュアルのインパクトと、情報理解のしやすさを両立させたレイアウトとして見せられる部分です。
【3】タイトル・ロゴまわりの工夫
中央に配置したタイトルやロゴは、観光地紹介とアプリ紹介をつなぐ“ブランドの核”として設計しました。
写真とスマホの間にタイトルを置くことで、単なる装飾ではなく、両者をつなぐ意味のある要素として機能させています。
これにより、ユーザーは「鎌倉観光のためのアプリである」という関係性を、視覚的に理解しやすくなります。
また、英字表記と和のモチーフが混在する見せ方にすることで、観光地としての和の印象と、現代的なデジタルサービスらしさを両立させました。
観光系サービスでは、伝統や土地の魅力を表現しつつ、使いづらそうに見せないことも重要です。
そのため、タイトルまわりでは、地域らしさとサービスの親しみやすさのバランスを意識しています。
【4】ナビゲーションと情報設計の工夫
ファーストビュー下のグローバルナビゲーションでは、紹介サイトとして必要な情報を過不足なく整理しました。
ページ全体の印象はビジュアル重視ですが、そのままだと「何が見られるサイトなのか」が曖昧になりやすいため、ナビゲーションでは情報の入口を明確にしています。
HOME、プラットフォーム構成、アプリ紹介、課題と狙いなど、企画から機能理解へ進める順序が感じられる構成にすることで、閲覧者が内容を追いやすくしました。
ここでは、観光サイトらしい雰囲気を壊さずに、説明ページとしての読みやすさも担保することを意識しています。
ビジュアルだけで完結させず、企画背景や機能意図までたどれる導線を用意することで、ポートフォリオとして「考えて作っていること」が伝わる構成にしました。
【5】下部構成の工夫
ファーストビューの下に続く白背景のエリアでは、情報を一度落ち着いて読めるようにし、ビジュアルの強さとのバランスを取っています。
上部で鎌倉らしさとサービスの世界観を強く印象づけたあと、下部ではタイトルやメニューを整然と配置することで、紹介サイトとしての整理感を補っています。
この切り替えによって、最初は感覚的に惹きつけ、次に内容理解へ進ませる流れを作りました。
観光サービスのページでは、写真だけを見せ続けると雰囲気は出ても内容理解が浅くなりやすく、逆に説明を増やしすぎると観光の高揚感が弱くなります。
そのため、このページでは印象づけるパートと、理解させるパートを分けることで、感性と情報の両方に届く構成を目指しました。
この設計は、単なるビジュアル制作ではなく、閲覧体験そのものを意識したレイアウトとしてアピールできるポイントです。
ポートフォリオとしての見どころ
この制作では、観光アプリの機能を説明するだけでなく、鎌倉という土地の魅力とサービス価値を一体で伝える見せ方を設計したことがポイントです。
ファーストビューで地域の印象をつくり、スマホモックでサービスの実体を伝え、ナビゲーションと下部構成で企画内容へつなげることで、ブランド性と実用性の両方が伝わる紹介サイトを目指しました。
そのため、表層のデザインだけでなく、観光体験をどうビジュアル化し、どう理解につなげるかまで考えて設計した点が、この作品のアピールポイントです。
