ノーコードの極限、FunTech x Framer / Pushing No-Code to Its Limits: FunTech × Framer

Session by：
橋本 卓磨 / FunTech株式会社
菊地 史登 / Framer

Takuma Hashimoto / FunTech, Inc.
Fumito Kikuchi / Framer

Spectrum Tokyo Design Fest 2026 Day 1 (2026/02/14)

Transcript

1. ノーコードの極限 FunTech x Framer
2. Takuma Hashimoto Lead Designer / Motion Designer FunTech Jumpei Horino Designer FunTech Fumito Kikuchi Japan Country Lead Framer
3. Build better sites, faster Framerはプロフェッショナルデザイナー向けの グローバル 水 準のWebサイトビルダーです。
5. FUNTECH IS ϑΝϯςοΫͱ͸ 『 電撃級クリエイティブを作りたい11期 目 の制作会社 』 • たまにあるご質問FAQ 1 .何が強い会社？ a. インタラクティブなWebクリエイティブ&ブランディング、映像制作 4 .アムステルダムとか熊本だとかなんだとか？ a. 熊本は閉めて、2025年にアムス 支 社を 立 ち上げグローバル展開に挑戦中 2 .どんなメンバー集まってるの？広告代理店出 身 者多め？ a. 太 田 学 生 起業（経営学部出 身 ）、営業出 身 などほぼ未経験者、広告代理店出 身 1、美 大 出 身 ０ 3 .会社の成り 立 ちは？ a. 学 生 団体引退後その仲間と10プロジェクトくらい作って、そのうち 一 つ「学 生 が安くWeb制作 やりますプロジェクト」がFunTechって名前だった
6. KEY DOMAINS ஫ྗྖҬ Experts
7. PROJECT01_NEU ϓϩδΣΫτ঺հɿNeuίʔϙϨʔταΠτ੍࡞
8. PROJECT SUMMARY ϓϩδΣΫτ֓ཁ GOAL PROJECT BACKGROUND 創業期を抜けた企業成 長 フェーズにおける独 自 性の表出化 広告にかける「変態性」の表現 『圧倒的世界観に魅了され依頼してみたかった』
9. DESIGN σβΠϯ ゼロから挑んだFramer。その 目 的と挑戦。 01 めちゃめちゃ驚かせたい！ とにかく、アッ！！っと 言 わせるような電撃級のクリエイティブを 目 指した。 Framer制作の案件も 見 かけるようになってきたタイミングだったので今までにないものを体現したかった。 02 σβΠφʔ͔ͩΒग़དྷΔ௅ઓ ࢥ͍͍ͭͨ࣌ʹɺࣗ༝ʹૉࡐ͕࡞Εͯɺॊೈʹ࣮૷ΛਐΊΔ͜ͱ͕Ͱ͖Δɻ
 ؾ߹͍ͱ޻෉ͰΤϯδχΞͱ͸ҧ͏֯౓Ͱ߈Ί͍͚ͯΔʂʂ 03 Ͳ͜·ͰϊʔίʔυͰग़དྷΔͷ͔ɻΪϦΪϦ·Ͱݕূ ࠓޙͷFramerҊ݅ͷྐʹͳΔΑ͏ɺϊʔίʔυ্Ͱ࣮૷Ͱ͖ΔΪϦΪϦΛ߈Ί͔ͨͬͨɻ ίϯϙʔωϯτҎ֎͸جຊతʹΧελϜίʔυແ͠Ͱ࣮૷͖͠ΔࣄΛ໨ࢦͨ͠ɻ TAKUMA HASHINMOTO
10. DESIGN σβΠϯ 遊び 心 と狂気性の両 立 テキストの羅列だけだと、整頓されすぎて遊びが 足 りない。 綺麗に並べるだけでなく、Neuさんのカルチャーも表現する必要があった。 立 体的に重なりあった帯により狂気性を演出。また縦横無尽に流れるテキストに より狂気性を演出し、常時変動していく、業界もここで印象付けてる。 この段階でFramerでどう実装するか、再現するかを慎重に検討しながら進め た。(この時点でまだ触ってない、、) TAKUMA HASHINMOTO
11. DESIGN σβΠϯ あとはひたすらデザインの模索。反転させたり、平 面 に戻したり、、 平 面 から 立 体まであえて発散 下層に馴染むよう 立 体表現(陰影)を無くして完成 → TAKUMA HASHINMOTO
12. DESIGN σβΠϯ 表 面 的だけでなく実際には 見 えない裏側まで続く狂気性を出すためにblenderで作成 ロゴ＋CIビジュアルが決定 実際のKV素材 → TAKUMA HASHINMOTO
13. MP4Ͱॻ͖ग़ͯ͠SVGͰϚεΫʂഎܠ͕ಁաʂʁ ࣮૷ͯ͠ߦ͘தͰൃݟͨ͠ϚεΫػೳΛݟͯࢥ͍͍ͭͨʂ͜ΕͰΠέΔʂʂ → 01 MP4Ͱblender͔Βө૾Λॻ͖ग़͠ 02 ಉ͡γϧΤοτͷSVGͰFremerͰϚεΫ 03 എܠ͕ൈ͚ͨಈ͘Ϟνʔϑͱͯ͠࢖༻ → → DEVELOPMENT ࣮૷ TAKUMA HASHINMOTO
14. DEVELOPMENT ࣮૷ カスタムコード未使 用 の流体シェイプボタン 01 ΧελϜίʔυ͸࢖Θͳ͍ 02 པΈͷίϯϙʔωϯτ͸safariະରԠ 03 framerͷػೳ͚ͩͰ࠶ݱʂίϯτϥετ΍ඳըΛௐ੔ TAKUMA HASHINMOTO
15. DEVELOPMENT ࣮૷ 遊び 心 と狂気性の両 立 ίϯϙʔωϯτͷԠ༻ ίϯϙʔωϯτΛ࢖༻ɻຊདྷ͸ը૾Λ࿈ଓతʹ Χʔιϧ௥ैͤ͞Δ΋ͷ͕ͩɺࠓճ͸PNGͰॻ͖ग़ͨ͠ ςΩετΛ൓ө͠ɺKVͰ࢖༻ͨ͠୯ޠ͕มଶతʹ༙͖ग़Δԋग़ʹɻ TAKUMA HASHINMOTO
16. DEVELOPMENT ࣮૷ カーソルアニメーションの 工 夫 Frame特有のトランジションの難しさ ࣮͸ViewΤϦΞͷ্Լίϯςϯπʹ΋εέʔϧμ΢ϯͨ͠ಁ໌ͳΧʔιϧΛ ౰͓ͯͯΓɺʮViewʯʹΧʔιϧ͕৐ͬͨ࣌ɺγʔϜϨε͔ͭؾ࣋ͪͷྑ͍ ΠʔδϯάͰग़ݱͱফࣦΛՄೳʹ͍ͯ͠Δɻ
 (͖ͬͱଞʹ؆୯ʹղܾͰ͖Δ͔΋͕ͩɺ৭ʑࢼͨ݁͠Ռ͜Ε͕Ұ൪៉ྷ ͩͬͨ) TAKUMA HASHINMOTO
17. DEVELOPMENT ࣮૷ ヘッダーを駆け抜ける流体シェイプ layout template × ︎ Variants VariantsػೳͱϨΠΞ΢τςϯϓϨʔτΛۦ࢖࣮ͯ͠૷ɻ ϖʔδભҠͨ͠ࡍʹ్੾ΕΔࣄͳ͘ɺϔομʔͷಈ͖Λ࢒ͨ͠··ભҠͰ͖ ΔΑ͏ʹɻ
 ͜ͷลΓ͸Studioʹ͸ແ͍ػೳͳͷͰ৽͍࣮͠૷ํ๏Λ୳Δ͍͍ػձͩͬ ͨɻ TAKUMA HASHINMOTO
18. RESULT ݁Ռ ノーコードでやりたかったと挑戦を成し遂げ、驚かせるクリエイティブができた！ Framer΍͹͗ͯ͢ϓϩάϥϜͯ͠αΠτ࡞Δҙຯ͕͍Α͍Α੍࡞අͷ໘Ͱ͔͠ݟग़ͤ ͳ͘ͳ͖ͬͯͨͳ framerͳͷ͔…ແ਺ͷখ͞ͳ޻෉ͷࣀ෺…͍͢͝… Framer…ʂʁ͜Μͳ͜ͱ·ͰͰ͖ΔΜͩ… ͜ͷσβΠφʔͷํͳΒɺଞͷπʔϧͰ΋Ϋʔϧͳ΢ΣϒαΠτΛ࡞ΕΔͰ͠ΐ͏Ͷɻ߂๏ චΛબ͹ͣɻ ؾ࣋ͪΑ ϑϩϯτΤϯυΤϯδχΞͰFramerͰ੍࡞ͨ͠΋͜ͱ΋Կճ͔͋Δ͚Ͳ͜͜·ͰͰ͖ΔΠ ϝʔδ͕શ༙͔͘ͳ͍ɻɻ FunTech ͞ΜͬͯԿ৯ͬͨΒ͋Μͳੌ͍΋Μ͹͔ͬ࡞ΕΔΜͩʁ ͜ΕΛະܦݧऀ͕ϊʔίʔυͰ࣮ݱͨͦ͠͏.ૉ੖Β͍͠ੈքʹͳͬͨ αοΫαΫͩɻ FramerͰ͜͜·ͰϋΠΫΦϦςΟͷαΠτ͕࡞ΕΔͷ͔ʁʂ ՄೳੑΛײ͡Δ TAKUMA HASHINMOTO
19. ΑΓ࣮༻తʹɻ
 
 ϓϩϑΣογϣφϧͷ σϑΝΫτελϯμʔυ΁ɻ