COLLECTION

カスタムLPで取り入れられる、インタラクションの見本集です。導入する目的から選べます。気になる動きがあれば、LINEでお伝えください。

個性を生み出すインタラクション

カスタムLP専用

LPのテンプレート(ベーシック)とは別に、カスタムLPで取り入れられる動きの見本です。「何のために入れるか」で3つに分けました。

ページ全体の雰囲気を変える

ページの印象そのものを調整したいときに。配色・書体・見せ方を切り替える動きです。

  • 別ページ / 体験

    DESIGN PLAYGROUND

    配色・書体・構成を選ぶと、デザインが18通りにその場で変わります。

  • 別ページ / 体験

    DESIGN DNA

    信頼感・遊び心・高級感の3つのつまみで、同じ内容の表情が変わります。

  • 別ページ / 体験

    FUSION LAB

    「世界観」「動き」「メッセージ」を組み合わせると、同じ内容が別の体験に変わります。

  • 別ページ / 比較

    BEFORE → AFTER

    境界線を動かして、同じ内容でも見せ方で印象が変わることを体験できます。

  • 別ページ / スクロール

    SCROLL RUNWAY|FULL BODY

    スクロールに合わせて、全身コーディネートの写真が切り替わります。(写真:Unsplash/通信が必要)

  • 別ページ / スクロール

    COUNTER SCROLL

    スクロールすると、左右の画面が逆方向に動きます。

キービジュアルにインパクト

最初に目に入る部分で、印象を残したいときに。ページを開いた瞬間の見え方をつくる動きです。

  • 別ページ / オープニング

    PARTICLE TYPOGRAPHY

    粒子が集まり、koa →「目的から考える。」→「可能性を作る」と文字になるオープニング。

  • 別ページ / キャラクター

    REALITY BREAKER|CHARACTER EDITION

    スクロールすると封印が解け、キャラクターが画面の枠を越えて現れます。

  • 別ページ / アニメーション

    IDEA TO REALITY

    散らばった発想が集まり、ワイヤーフレームを経て、ひとつの画面になります。

  • 別ページ / ロゴ

    KOA STROKE

    koaのロゴが、一筆ずつ書かれるように現れます。最初の画面で、ブランド名を印象づけたいときに。

ページの中でアクセント

読み進める途中で、目を止めてほしいときに。流れの中に、小さな驚きや遊びを添える動きです。

円筒ギャラリースライド見本を回して見せる

koaのホームページを題材にした、12枚のスライド見本です。場面ごとに、伝え方のパーツを並べました。円筒をドラッグして回し、拡大して見られます。各スライドの「伝える優先度」と話すときのメモも付けられます(セットオプション)。

01 / 12

  1. 表紙。大きなkoaのロゴと「目的から考える。可能性をつくる。」

    重要 ここでは細かい説明をしない。「何の話か」と「誰の資料か」だけ伝えて、次の課題へ進む。

  2. 「目的が曖昧だと、伝わらない。」誰に・何を・どうして、の3つの問い

    最優先 最初に伝えたいのは、制作の前にまず「誰に・何を・どうして」を決めること。ここで相手に「自分のことだ」と思ってもらう。

  3. 大きく「5,500円〜」ホームページ制作の料金

    補足 数字は1つだけ。細かい内訳は次のスライドに回し、ここでは「5,500円から」という入口だけ覚えてもらう。

  4. 「料金は、すべて税込の支払総額で公開している。」主な料金の棒グラフ

    重要 主張を先に言い、グラフで裏づける。料金は税込の支払総額で公開していること、後から増えないことを伝える。

  5. 青空の下で仕事をする人物の写真に「仕事も、AIも、Web制作も。」

    補足 理屈を一度休み、感情に届ける1枚。読ませず、見せて、30秒の間をつくってもよい。

  6. 左がありがちなご案内、右が伝わる設計のビフォーアフター

    重要 同じ内容でも、伝える順番を変えると印象が変わる。左右を見比べてもらい、設計の違いを実感してもらう。

  7. 「目的から考える、3つのこと。」3つのカード

    最優先 koaの考え方の核。3つとも読み上げず、「目的から考える」という一言を軸に説明する。

  8. ご依頼の4つの段階を横一列に並べた流れ図

    補足 依頼から納品までの流れを見せて不安をなくす。詳細はSERVICESで確認できると添える。

  9. ベーシックとカスタムの料金・期間・特徴の比較表

    重要 ベーシックとカスタムの違いを、料金・期間・特徴でそろえて比較する。選ぶ判断材料をつくる。

  10. 広い余白の中央に「目的から考える。可能性をつくる。」

    補足 情報を足さず、余白で言葉に重みを持たせる。直前の説明を受け止める時間をつくる。

  11. 最優先・次に・最後に、の優先度つきまとめ

    最優先 持ち帰ってほしい順番を決める。時間が足りない場合は、このスライドだけでも伝わるように作る。

  12. 「まずは、LINEでご相談ください。」の行動を促す最終スライド

    重要 最後は行動をひとつに絞る。LINEでご相談、という次の一歩だけを示す。

※ koaのホームページを題材にした見本です。実際のご依頼では、用途に合わせて構成します。

スライド見本を一覧で見る ↗(新しいタブで開きます)

  • 別ページ / 奥行き

    DEPTH GALLERY

    フリックすると、LPが画面の奥から近づき、手前を通り抜けます。仕組みの解説(HOW IT WORKS)も付いています。

  • 別ページ / ロゴ

    MAGNETIC KOA

    指やカーソルを近づけると文字が引き寄せられ、離すと元に戻る、触れるロゴ。

  • 別ページ / 体験

    DESIGN X-RAY

    画面をなぞると、その場所だけデザインの設計線が透けて見えます。

  • 別ページ / 体験

    DISCOVERY LENS|VIDEO READY

    部屋の気になる場所をタップすると、その場の動画が開きます。動画は開いたときだけ読み込みます。(動画はデモ用の公開サンプル)

  • 別ページ / ゲーム性

    THE ESCAPING BUTTON

    押そうとすると逃げるボタン。追い詰めると、最後は素直に押させてくれます。

  • 別ページ / 体験

    SCROLL THROUGH IDEAS

    スライダーを動かすと、課題から実装へ、言葉の奥行きの中を進みます。

※ ここに並ぶのは、表現を試すためのコンセプトデモです。制作実績ではありません。