# 「誰でもNISAを楽しく学べるサイトをつくる」 sustenキャピタル・マネジメントがちょっと社を選んだ理由 元のページ: - [Next.js](https://chot-inc.com/services/modern-web-development) ## 概要 おまかせ資産運用サービス「SUSTEN」を提供している株式会社sustenキャピタル・マネジメント様。投資家一人ひとりにあった理想的な投資の実現する「おまかせ投資」や、誰でも簡単につみたてNISA制度を利用できる「つみたてNISA」の２つの機能を持ったスマホアプリをご提供されています。 今回、ちょっと社ではsusten様の新たなブランディング戦略の一環として、動画・解説文・用語集で楽しく手軽にNISAの知識が学べるサイト「ポケットNISA」の制作をお手伝いしました。制作の経緯や、ご依頼いただいた理由について、代表の岡野大様に、当社デザイナーの山本とエンジニアの高瀬を交えてお話をおうかがいしました。 ## クライアント 株式会社sustenキャピタル・マネジメント 代表取締役　岡野大様 ## 純粋にNISAのことが学べるサイトを作りたかった **— サイト制作の経緯を教えてください** **岡野** 弊社は、おまかせ資産運用サービス「SUSTEN」を提供していますが、その宣伝というよりも、純粋に、広く一般的な投資家のみなさまにNISAとはどう使ったらいいのかを伝えたかったことがはじまりです。 残念なことに、世の中には投資についてあまり有益とは言えないような情報が書かれているサイトがたくさんあります。なのでポケットNISAは、純粋に知識を広めたい、羅針盤のような存在にしたいと思っています。 私たちは投資アプリの提供者ですので、当然ながらそのサービスを利用していただきたい気持ちはあります。でもそれ以前に間違った言説に踊らされて、誤った投資行動に至る人を一人でも減らしたい気持ちが強いです。なので集客だけに目を向けたSEO対策のようなことをするよりも、どちらかと言えば口コミで広がっていくような、楽しく学べるサイトにしたいと思っていました。 現実的なお話をすると、個人投資の世界は大きな変革機を迎えていて、新規で口座を開設される方の約7割ほどは楽天証券さんやSBI証券さんで始めます。我々はそこに抗うのではなくて、他社を利用していても、ポケットNISAを参考にしてほしいという目的で開設しました。 **— そんな「ポケットNISA」の制作をちょっと社にご依頼いただいた決め手は何だったのでしょうか** **岡野** とにかく私たちの話をよく聞いてくださったことが、一番の決め手です。実は今回、制作にあたって5社ほどとお話させていただいた中で、御社にお願いさせていただきました。 他の制作会社との商談では、私たちは収益化を目的としたサイトを作るのではないとお伝えしているにもかかわらず、「コンバージョンについて」や「SEO対策」などのご提案を多くいただきました。そういった提案はありがたいのですが、まずは収益ではなく、今回私たちが提供したかったのは「楽しく学んでいただく」ということ。それを受け止めて提案をくださったのは、ちょっとさんだけでした。 御社は私たちの目的を理解して、Webのモダンな技術の活用や、サイト内で提供する新しい手触りの部分でのご提案をいただき、ぜひお願いしたいと思って依頼しました。 ## ちょっと社の体制について **— お聞きしていた目的に合わせて、今回はあえてあまり金融系の制作経験がないメンバーをアサインさせていただきました。山本はアートよりのデザイナー、そして高瀬はエンタメ系の会社にいたことのあるエンジニアです。** **山本** 投資の知識をあまり持っていない中で、少し身構えていた自分もいましたし、もしかすると初期の段階では少しご希望から離れていた提案もあったかと思います。それでも岡野さんをはじめ、sustenのみなさまと時間をかけてコンセプトメイキングの部分からしっかりとお話する機会をいただけたことで、ご納得いただけるものを提案できたのではないかと思っています。 **岡野** こちらの希望から離れていたというよりも、目的にそっていくつか提案していただけたと思っています。正解はひとつではないですし、私たちの好みにあわせてアジャストしたパターンをいただきながら、このルートがベストだと話しながら進行できたところは非常に良かったです。 通常、自社サービスにおけるアプリやサイトの制作は社内でおこなっています。御社にお願いしたことで、技術的なトレンドを追えたことは大きかったですし、外部の知見と言いますか、私たちの中からは思いつかないような新しいアイデアをお聞きできたところもあります。 そういう意味でも、山本さんからいくつかの手法であったり、提案をいただいたことは、我々としては新しい発見が多くありました。 **— ありがとうございます。岡野さんが一番こだわったところを教えてください** **岡野** 特定のサービスや金融商品に誘導しないことを設計上で大事にしました。投資の知識系サイトは最後に口座開設へ誘導するのが通常です。そうせずに、純粋に投資の知識だけを、それもポジショントークではない形で提供するサイトにしています。 丁寧にきちんと、良いところも悪いところもお伝えするコンセプトをもって制作をお願いしましたし、デザインも落ち着いたものにしています。 名前の「ポケットNISA」も決定までに数週間かけましたし、最終的にはポケット六法のような使い方をイメージした、本のような読み物として、ページ遷移のアニメーションなどもこだわっていただきました。 **高瀬** これまでオウンドメディアのようなサイトを作るならば、何かしらわかりやすい収益ポイントとして広告を貼ったりしなければなりませんでしたが、ポケットNISAはそうではないところが衝撃的でした。そこで、これまでのサイトとは違う遷移のアニメーションや、ボタンを押したときのインタラクションなど、手触りを意識した実装を、アイデアを出し合いながら進めていきました。 **山本** ポケットNISAという名前や、コピーライティング的な部分も、今回の体制で話し合ってつくることができたことは、デザインにおいてもすごく良い影響が出ています。柔らかすぎず、硬すぎないロゴと、色使いに着地できたのも、やはり岡野さんと共有しつつエンドユーザーを見据えながらだったからこその形になったと感じています。 ## 普段利用しているNotionからコンテンツを実装したこと **— 今回、サイト内のコンテンツに関してはsusten様が普段使用されているNotionから抽出して実装していますよね** **高瀬** ルールブックやプレイブックの内容は、susten様よりNotionで提供していただきました。理解度チェックのクイズなどのデータを含めると、少し特殊なデータ構造になります。同じく表示の構成もテーブルを使ったり、複雑な入れ方になっています。 ページ遷移やアニメーションなどの見てすぐにわかる部分とは別で、裏側ではNotionのデータをNext.jsでビルドする仕組みを入れています。これまでヘッドレスCMSを使う例はあったのですが、それ以外のデータから構築するのは初めての取り組みでした。 sustenのみなさんに、新たにCMSを使っていただく手間をとらせることなく、普段お使いのNotionのまま提供していただくことができ、チャレンジした甲斐があったと感じています。 ## サイト開設後の反応とこれからについて **— サイトを開設してからどのような反応がありましたでしょうか** **岡野** 触っていただいた方からは、純粋にNISAの知識が得られるサイトなのに情報サイトっぽくない、ブラウザゲームに近い感触があってすごく面白いねというフィードバックをよくいただきます。 また、来年の新NISAスタートに向けての取り組みとして、私たちのサービスに直接ランディングさせるのではなく、このポケットNISAにランディングさせる広告を出すことも考えています。 代理店の方や、メディアの方からは、斬新で今までにないコンセプトだと高評価もいただいています。とにかく商売臭がしなくて、純粋に面白いコンテンツを伝えていることが、評価に繋がっていると捉えています。 公開中の「ルールブック」にはNISAの仕組みなど基本的なことだけが書かれています。加えて、12/7にリリースした「プレイブック」ではルールの中でどのような投資行動を取るべきなのかを25記事ほどで解説しています。 どこのサイトにも書かれていないことがたくさんあるので、読んだ方はきっと実践してみたくなるはずです。ただし全部をやろうとすると本当に大変なので、そのときに自動でお願いできるsustenを思い出してくれたらありがたいという気持ちでいます。 **— 最後に、ちょっと社に制作を依頼した感想をお願いします** **岡野** ぜひまた他のプロジェクトでもお願いしたいです。私たちはこれまで少なからず内製にこだわっていたところがあったと感じています。今回、御社にお願いしたことで、モダンなWeb制作技術についての知見が得られたり、外部の制作会社さんと一緒に進めることで、お互いの良いところを高めあえる、それが最終的にお客様にとって一番価値の高いものになると実感できました。ぜひ今後ともよろしくお願いします。 \--- [ポケットNISA | スマホで学べるNISAの参考書](https://pocketnisa.jp/) ## この事例と同じ支援内容を見る - [Next.js・フロントエンド開発会社｜モダンWeb開発支援（設計・実装・技術移行・内製化伴走）](https://chot-inc.com/services/modern-web-development) - [Webメディア構築・メディアサイト制作｜ヘッドレスCMS「Orizm」](https://chot-inc.com/services/web-media) ## エージェント型Web・AIアプリ 開発のご相談 chot inc.ではエージェント型Webの設計・構築・ 運用を 一貫してサポートしています。 [お問い合わせ](https://chot-inc.com/contact) [事例紹介一覧](https://chot-inc.com/works)