ノーコードの極限 FunTech x Framer 

Takuma Hashimoto Lead Designer / Motion Designer FunTech Jumpei Horino Designer FunTech Fumito Kikuchi Japan Country Lead Framer 

Build better sites, faster Framerはプロフェッショナルデザイナー向けの グローバル 水 準のWebサイトビルダーです。 

No content

FUNTECH IS ϑΝϯςοΫͱ͸ 『 電撃級クリエイティブを作りたい11期 目 の制作会社 』 ● たまにあるご質問FAQ 1 .何が強い会社？ a. インタラクティブなWebクリエイティブ&ブランディング、映像制作 4 .アムステルダムとか熊本だとかなんだとか？ a. 熊本は閉めて、2025年にアムス 支 社を 立 ち上げグローバル展開に挑戦中 2 .どんなメンバー集まってるの？広告代理店出 身 者多め？ a. 太 田 学 生 起業（経営学部出 身 ）、営業出 身 などほぼ未経験者、広告代理店出 身 1、美 大 出 身 ０ 3 .会社の成り 立 ちは？ a. 学 生 団体引退後その仲間と10プロジェクトくらい作って、そのうち 一 つ「学 生 が安くWeb制作 やりますプロジェクト」がFunTechって名前だった 

KEY DOMAINS ஫ྗྖҬ Experts 

PROJECT01_NEU ϓϩδΣΫτ঺հɿNeuίʔϙϨʔταΠτ੍࡞ 

PROJECT SUMMARY ϓϩδΣΫτ֓ཁ GOAL PROJECT BACKGROUND 創業期を抜けた企業成 長 フェーズにおける独 自 性の表出化 広告にかける「変態性」の表現 『圧倒的世界観に魅了され依頼してみたかった』 

DESIGN σβΠϯ ゼロから挑んだFramer。その 目 的と挑戦。 01 めちゃめちゃ驚かせたい！ とにかく、アッ！！っと 言 わせるような電撃級のクリエイティブを 目 指した。 Framer制作の案件も 見 かけるようになってきたタイミングだったので今までにないものを体現したかった。 02 σβΠφʔ͔ͩΒग़དྷΔ௅ઓ ࢥ͍͍ͭͨ࣌ʹɺࣗ༝ʹૉࡐ͕࡞Εͯɺॊೈʹ࣮૷ΛਐΊΔ͜ͱ͕Ͱ͖Δɻ
 ؾ߹͍ͱ޻෉ͰΤϯδχΞͱ͸ҧ͏֯౓Ͱ߈Ί͍͚ͯΔʂʂ 03 Ͳ͜·ͰϊʔίʔυͰग़དྷΔͷ͔ɻΪϦΪϦ·Ͱݕূ ࠓޙͷFramerҊ݅ͷྐʹͳΔΑ͏ɺϊʔίʔυ্Ͱ࣮૷Ͱ͖ΔΪϦΪϦΛ߈Ί͔ͨͬͨɻ ίϯϙʔωϯτҎ֎͸جຊతʹΧελϜίʔυແ͠Ͱ࣮૷͖͠ΔࣄΛ໨ࢦͨ͠ɻ TAKUMA HASHINMOTO 

DESIGN σβΠϯ 遊び 心 と狂気性の両 立 テキストの羅列だけだと、整頓されすぎて遊びが 足 りない。 綺麗に並べるだけでなく、Neuさんのカルチャーも表現する必要があった。 立 体的に重なりあった帯により狂気性を演出。また縦横無尽に流れるテキストに より狂気性を演出し、常時変動していく、業界もここで印象付けてる。 この段階でFramerでどう実装するか、再現するかを慎重に検討しながら進め た。(この時点でまだ触ってない、、) TAKUMA HASHINMOTO 

DESIGN σβΠϯ あとはひたすらデザインの模索。反転させたり、平 面 に戻したり、、 平 面 から 立 体まであえて発散 下層に馴染むよう 立 体表現(陰影)を無くして完成 → TAKUMA HASHINMOTO 

DESIGN σβΠϯ 表 面 的だけでなく実際には 見 えない裏側まで続く狂気性を出すためにblenderで作成 ロゴ＋CIビジュアルが決定 実際のKV素材 → TAKUMA HASHINMOTO 

MP4Ͱॻ͖ग़ͯ͠SVGͰϚεΫʂഎܠ͕ಁաʂʁ ࣮૷ͯ͠ߦ͘தͰൃݟͨ͠ϚεΫػೳΛݟͯࢥ͍͍ͭͨʂ͜ΕͰΠέΔʂʂ → 01 MP4Ͱblender͔Βө૾Λॻ͖ग़͠ 02 ಉ͡γϧΤοτͷSVGͰFremerͰϚεΫ 03 എܠ͕ൈ͚ͨಈ͘Ϟνʔϑͱͯ͠࢖༻ → → DEVELOPMENT ࣮૷ TAKUMA HASHINMOTO 

DEVELOPMENT ࣮૷ カスタムコード未使 用 の流体シェイプボタン 01 ΧελϜίʔυ͸࢖Θͳ͍ 02 པΈͷίϯϙʔωϯτ͸safariະରԠ 03 framerͷػೳ͚ͩͰ࠶ݱʂίϯτϥετ΍ඳըΛௐ੔ TAKUMA HASHINMOTO 

DEVELOPMENT ࣮૷ 遊び 心 と狂気性の両 立 ίϯϙʔωϯτͷԠ༻ ίϯϙʔωϯτΛ࢖༻ɻຊདྷ͸ը૾Λ࿈ଓతʹ Χʔιϧ௥ैͤ͞Δ΋ͷ͕ͩɺࠓճ͸PNGͰॻ͖ग़ͨ͠ ςΩετΛ൓ө͠ɺKVͰ࢖༻ͨ͠୯ޠ͕มଶతʹ༙͖ग़Δԋग़ʹɻ TAKUMA HASHINMOTO 

DEVELOPMENT ࣮૷ カーソルアニメーションの 工 夫 Frame特有のトランジションの難しさ ࣮͸ViewΤϦΞͷ্Լίϯςϯπʹ΋εέʔϧμ΢ϯͨ͠ಁ໌ͳΧʔιϧΛ ౰͓ͯͯΓɺʮViewʯʹΧʔιϧ͕৐ͬͨ࣌ɺγʔϜϨε͔ͭؾ࣋ͪͷྑ͍ ΠʔδϯάͰग़ݱͱফࣦΛՄೳʹ͍ͯ͠Δɻ
 (͖ͬͱଞʹ؆୯ʹղܾͰ͖Δ͔΋͕ͩɺ৭ʑࢼͨ݁͠Ռ͜Ε͕Ұ൪៉ྷ ͩͬͨ) TAKUMA HASHINMOTO 

DEVELOPMENT ࣮૷ ヘッダーを駆け抜ける流体シェイプ layout template × ︎ Variants VariantsػೳͱϨΠΞ΢τςϯϓϨʔτΛۦ࢖࣮ͯ͠૷ɻ ϖʔδભҠͨ͠ࡍʹ్੾ΕΔࣄͳ͘ɺϔομʔͷಈ͖Λ࢒ͨ͠··ભҠͰ͖ ΔΑ͏ʹɻ
 ͜ͷลΓ͸Studioʹ͸ແ͍ػೳͳͷͰ৽͍࣮͠૷ํ๏Λ୳Δ͍͍ػձͩͬ ͨɻ TAKUMA HASHINMOTO 

RESULT ݁Ռ ノーコードでやりたかったと挑戦を成し遂げ、驚かせるクリエイティブができた！ Framer΍͹͗ͯ͢ϓϩάϥϜͯ͠αΠτ࡞Δҙຯ͕͍Α͍Α੍࡞අͷ໘Ͱ͔͠ݟग़ͤ ͳ͘ͳ͖ͬͯͨͳ framerͳͷ͔…ແ਺ͷখ͞ͳ޻෉ͷࣀ෺…͍͢͝… Framer…ʂʁ͜Μͳ͜ͱ·ͰͰ͖ΔΜͩ… ͜ͷσβΠφʔͷํͳΒɺଞͷπʔϧͰ΋Ϋʔϧͳ΢ΣϒαΠτΛ࡞ΕΔͰ͠ΐ͏Ͷɻ߂๏ චΛબ͹ͣɻ ؾ࣋ͪΑ ϑϩϯτΤϯυΤϯδχΞͰFramerͰ੍࡞ͨ͠΋͜ͱ΋Կճ͔͋Δ͚Ͳ͜͜·ͰͰ͖ΔΠ ϝʔδ͕શ༙͔͘ͳ͍ɻɻ FunTech ͞ΜͬͯԿ৯ͬͨΒ͋Μͳੌ͍΋Μ͹͔ͬ࡞ΕΔΜͩʁ ͜ΕΛະܦݧऀ͕ϊʔίʔυͰ࣮ݱͨͦ͠͏.ૉ੖Β͍͠ੈքʹͳͬͨ αοΫαΫͩɻ FramerͰ͜͜·ͰϋΠΫΦϦςΟͷαΠτ͕࡞ΕΔͷ͔ʁʂ ՄೳੑΛײ͡Δ TAKUMA HASHINMOTO 

ΑΓ࣮༻తʹɻ
 
 ϓϩϑΣογϣφϧͷ σϑΝΫτελϯμʔυ΁ɻ 

No content