PythonでWebアプリ開発をはじめるなら！Web+DB Pressに「UXの高いチュートリアル」を目指してDjangoの特集を寄稿しました

WEB+DB PRESS Vol. 122に「新バージョン登場！ PythonによるWeb開発の基本 - はじめてのDjango」という記事を寄稿しました。

PythonでWebアプリケーションの開発を初めたい人に向けて「初めてがこれで良かった」と思えるように内容をまとめました。 4月24日（土曜日）に発売されます！予約はもう開始していますし、お店によっては先行販売されているそうです。こちらから購入いただけます：

gihyo.jp

本特集に誤りがありました。正誤表はこちらをご確認ください

サポートページ：WEB+DB PRESS Vol.122：｜gihyo.jp … 技術評論社

どんな人に読んでほしいか

4月の特集というのもあって、これから社会人になる人は特に読んでほしいです。 前提としてPythonとUbuntu（Linux）の基本だけ知っている必要がありますが、なるべく幅広い人に読んでもらえるよう書いています。

• 学校でLinux環境は触ったことがあってPythonも少し知っている。仕事に活かすためPythonでのWebアプリ開発を知っていきたい
• 普段はデータ分析や機械学習でPythonを使っているので、自分の技術を活かしたWebアプリを作ってみたい
• 新入社員の人にDjangoについて軽く知っておいてほしいので、コンパクトにまとまっていて成果を感じられる教材が要る

たとえば「学校でC言語とJavaをちょっとやって、ターミナルは何となく動かせる」という人であれば、Pythonを少し学んでもらった後すぐに本特集を始められます。

何が学べるのか

ブログを作れます。

ちゃんとCSSを使ってデザインを適用した、カッコいいブログを作れます。

ブログの作り方を通して、Webについてや、WebフレームワークDjangoの役割、HTMLやCSSについて学べます。執筆にあたって「役割の違いと線引き」をかなり注意して書きましたので、どこからどこまでがDjangoなのか？ブラウザーが何をしているのか？といった混乱の少ないチュートリアルになっていると思います。

さらに今後学んでいく人に向けてコミュニティの紹介や、モダンなWebアプリの概要説明などもしています。 またDjango3や3.2の注目したいポイントをまとめていますので、最新情報を知りたい人にもお勧めします。

損はさせない気持ちで書いていますので、ぜひお手にとってくれると嬉しいです。

本特集の目次はこちら

特集2：新バージョン登場！ PythonによるWeb開発の基本。はじめてのDjango

• 第1章：
  • DjangoでのWebアプリケーション開発の始め方
  • WebのしくみとPythonでの開発方法…… 清原 弘貴
• 第2章：
  • ブログ記事をモデルに保存しよう
  • データベース連携とDjango Adminによる管理サイト実装…… 清原 弘貴
• 第3章：
  • ブログの画面をビューで作ろう
  • テンプレートを使ったWebアプリケーションの基本UI…… 清原 弘貴
• 第4章：
  • ブログをCSSでデザインしよう
  • Bootstrapを組み込んでUIを使いやすくする…… 清原 弘貴
• 第5章：
  • さらに学んでいくために
  • 最新のDjango 3.2について注目の機能を紹介…… 清原 弘貴

特集で工夫した「UXの高いチュートリアル」

僕なりの初めての試みとして、UXの高いチュートリアルという目標を掲げました。

チュートリアルや研修、教材というのは、UX（ユーザー体験）があまり良くないように僕は感じています。 もちろん内容の網羅性や正確性のためという言い訳はできますが、初学者向けであれば、学習効率を高めるためにも「体験」は必要な要素だと考えました。

4月ということもあり「読まされる」という人も少なからずいるでしょう。そんな人たちが少しでも研修や勉強会を楽しめれば良いなと思い工夫した点です。

随所に工夫を凝らしてみましたので、そのいくつかを紹介させてください。

自分で作り、育てる体験

まず、読んでくれる人が体験できるように、コードを一つひとつ育てていくように説明しています。

最初に最適解を持ち出さずに、少し愚鈍な方法を試してもらい、そこから徐々にスマートな方法に置き換えていくというステップを踏んでいます。こうすることで「なぜその書き方をすべきか」という最終的な納得に、自分の知識を使って行き着くことができます。

ゲーム「ゼルダの伝説」シリーズでよくある、「最初は倒すのに苦労するんだけど、新しいアイテムを手に入れるとアッサリ倒せて快感」みたいな感覚を作れないかなと思って書きました。

投げかけと間を作る

また説明文の細かな点として、「これが答えです」とすぐに言わず、読者の人が一瞬考えられる「間」を用意してみました。

随所に「どうなるでしょうか」といった投げかけや「確認してみてください」というお願いをしています。こうすることで読んでいる人が試してみたり、一瞬考えられる隙間が生まれるかなと思っています。ぜひ読むだけでなく、考えたり、動かしたりと「体験」していただければと思います。

ただ執筆当初はこの投げかけが多すぎて「うるさっ！」って自分でなっちゃったので、かなり減らしてしまいました。 うまい投げかけの仕方は今後もうちょっとできるようになりたいです。

他にも色々

他にも語調を自分なりに好きになれそうな講師をイメージして書いてみたり、（機能や役割の線引きといった）ややこしい点を何度か繰り返し説明していたりと、色々な工夫を入れ込んでみました。ぜひ読んでみてください（少し実験的な部分もありますので、正直微妙だったという人は僕に教えてください）。

今後、チュートリアルや研修資料という教育の領域でも「UX」というワードが使われるようになれば僕は嬉しいです。 その一歩目として本特集ではUXの高いチュートリアルを目指して執筆しました。

こちらの本で説明されていることや、説明の雰囲気を踏襲しています。

「ついやってしまう」体験のつくりかた――人を動かす「直感・驚き・物語」のしくみ

既存のDjangoチュートリアルとの違いと立ち位置

まず分かりやすさという点で、Django本家のチュートリアルよりも親しみやすいと思います。題材がシンプルであったり、複雑なことを避けているので理解しやすいと思います。その分、網羅性は低くなりますが、Pythonを知っている人へのファーストステップとしては本特集のほうが良いと言えます。

Django Girlsチュートリアルも初心者向けとしてはかなり優れていますが、少し簡単で初心者向けすぎる場合もあります。本特集の内容ではターミナルやPythonの説明は知っている前提で進めていますので、より手短にDjangoやWeb（HTML/CSS）を学べます。その分、説明に文量を割いています。

立ち位置としては、DjangoGirlsチュートリアルよりは知っている人向けで、Django本家よりは詳しくない人向けです。 情報系や工学系の学校を出たばかりの4月の新人さんや、4月から新しいことをPythonで初めたい人などにちょうど良い難易度と内容で書いています。

謝辞

この特集を通して、改めてDjangoを教えるということができて嬉しかったです。チュートリアルのUXを考えられたのはとても良い機会になりました。さらに執筆にあたり、Shodoをドッグフーディングできたのも良かったです。本の執筆という点でShodoにある課題も発見できましたので、今後改善していきたいと思います（今の段階では、ブログやオウンドメディアの記事、プレスリリースの執筆により向いています）。

shodo.ink

執筆の企画は去年の12月ごろに@atsuoishimotoさんにご紹介いただきました。本当にありがとうございます。 まだ自分の会社を起こしたばかりというのもあって、何か知っていただく機会があるのはとても助かります。

また編集の菊池さんにも本当にお世話になりました。ページ数や企画内容の調整、レビューや出版社さんとのやり取りをしていただきました。Shodoを使いこなして記事へのレビューも詳細にしていただいたのも嬉しかったです。

まとめ

4月24日（土曜日）にWEB+DB PRESS Vol.122がでます！

この特集だけでなく、特集1や、RDBMSを作る特集3もとても面白かったです。ぜひぜひ読んで欲しいです。特集3を執筆されたKOBAさんとは10年前くらいにCombConfというイベントでお会いして以来で、個人的にラララーって感じの共演です。

損はさせない気持ちで書きましたので、ぜひ読んでくれると嬉しいです。

gihyo.jp

Amazonからも予約・購入いただけます。

WEB+DB PRESS Vol.122

執筆：Kiyohara Hiroki (@hirokiky) （この記事はShodoで執筆されました）

VR（VRChat）でのアバター販売と「VRの私」、そして販売戦略の考察

VRアバター、主にVRChatを想定した個人向けのアバターの販売について考えます。 VRChatのアバター販売は、普通でない面白い傾向がある と僕は思っています。

そのアバター販売のマーケットの面白さと、販売戦略を考えます（なんか、えらそうに言ってすいません）。

BOOTHに売られるたくさんのアバター（1つ数1000円ほどで買える）：

ここでいうアバターは個人の方が購入して、VRChatやVirtualCastといったVR SNSで交流するために使うと考えます （たとえばロポリこんやミーシェといったアバターのことです）。

今回はアバター販売でどう売っていこうか？みたいな少し生々しい話をしますが、アバターを作っている人やVRに関わる人が適切にお金をもらって生活できることは大切だと思っています。「好きでやってるから、そういうの嫌だな」という人にはすいません。でも何か参考にはなるかもしれません。

VR（VRChat）でのアバター販売の特殊さ

僕もVRChatが大好きで1年以上プレイしている（VRChat上で酒を飲んでる）のですが、このアバターの販売とVRChatのユーザーさんたちに少し特殊なものを感じたので話をさせてください。僕はモデリングもアバター販売もしませんが、一応、事業というか社長をやり始めた人間なので勉強がてらアバター販売について考えています。

特殊さを平たく言うと、あるアバターを愛するほど、もうその人は他のアバターを買わなくなるということです。

それっぽく言うならロイヤルティが高まるほど、LTVが伸びないということです。 現実で言うとグッチの帽子が大好きになったとして、他にグッチを買わずに、同じ帽子に色を塗ったり小物を追加したりしてずっと使い続けるということですね。グッチとしては困ります。

でも、アバターを作りたい人は新しいアバターを作ります。これはアバターを作る人が「アバターを作るのが好き」だからだと思います（たぶん）。アバターを作る人も、アバターを買う人もVRを愛しています。それ故に、不思議なことが起こります。

なぜアバター販売は不思議なマーケットなのか

それには 「VRの私」があるからです。 このVRパーソナリティとでも言うべきものが、VRChatでは超、超ド級に重要な要因となります（今、勝手に名付けました）。

VR上での僕：

VRChatを知らない人は想像してください。1ヶ月ぶりにあった友だちが顔や服装、身長も変わっていたらどう思うでしょうか。全くの別人です。「誰？」ってなりますよね。VRChatでアバターを変えると、そういうことが起こります。 たしかにネームプレートは頭上にあるのですが、心理的に姿が違うと結構驚くのは事実です。話しているときの感覚もかなり影響されます（場合によっては相手を好きになるかどうかも変わる）。

なので、多くのVRChatユーザーは基本的にアバターを変えません。普段使うアバターは2、3個くらいでしょう。たまに出すのを含めて5個か6個ほどあれば多い方だと思います。

さらに、特定のコミュニティに居付いた（VRChatにドハマリした）人ほどアバターを変えません。 それはVR上での人格（VRパーソナリティ）が形成されればされるほど、そのアバターに自分が宿ってるからです。 つまり、アバターにお金を使わなくなるということです。

ドハマリVRChatユーザーは改造で個性を出す

ドハマリしたVRChatユーザーも、自分のアバターには個性を出したいものです。 そこでVRChatユーザーはアバター改変やテクスチャー改変、小物の追加に乗り出します。 アバターをいじって色を変えたり、買ってきたメガネを足したり、すごい人では体型や服を変えたりします（すごい。すごすぎる）。

なのでVRChatのプレイ時間が長い人ほど、PhotoshopやUnity、Blenderに詳しくなっていく傾向があります。

Blenderは難しいが

ただ待ってください。 売る側としては、ファッション好きな人が服を作ったり改造して満足すると困ります。 アバターを買う人でも5個ほどしか買わないのであれば、アバター1つあたり4000円としても1人あたり2万円の売り上げです。なんと、ちょっと良いジャケット1枚くらいの売り上げです。それがプレイ時間1000時間とかいう「VRChatイコール人生」みたいな人でも起こっているわけですね。

アバターにはどういう販売戦略を取るべきなのか

アバターを作る側に話を戻しましょう。どういう販売戦略が考えられるでしょうか？

前提：人気アバターは作れない

まず、「人気クリエイターになる」、「人気になるアバターを作る」という考えはしないようにします。 アバターの良し悪しなどはスキルや芸術の問題なので、ここでは扱いません。戦略を考えましょう。

これは「アバターを売って生計を立てたい」「けど売れるアバターを作れない」という人向けへの戦略です。好きに作って好きに売るんじゃいという人は、好きにやるのが一番だと思います。

お客様への仮説3つ：VRパーソナリティ、意外とズボラ、お金は出す

おさらいすると、VRChatユーザー特徴として重要なのは「アバターを使い続ける」ことでした。 大切になるお客様の感情は「自分らしさ」を常に感じ続けたいということです。これを一番大切に考えましょう。

次に、「意外とみんなズボラ」という仮説を立てます。 これは僕なんかがそうなんですが、正直、UnityやPhotoshop、Blenderを毎度使うのはしんどいです。たまに使うのは勉強になって良いですが、現実で言うと着替えの度に裁縫セットを持ち出すような状態なのは良くないと思います（実際の数字は要調査ではあります）。

最後に、「お金は出せる」という仮説も立てます。 VRChatユーザーの人口はまだまだ少ないですが、1人辺りが出すお金は多いと考えます。 フルトラッキングの環境やゲーミングPCに個人で合計30万円ほど出す人がざらにいます。コアユーザーのプレイ時間の長さや、「VRで飲めば飲み会より安い」ことを考えれば、それでも娯楽のコスパは良いです。

さらに愛の大きさを考えれば、意外と市場は小さくないと考えられます。これも要調査ではありますが、ここは「出す人は出す」前提で考えさせてください。

戦略1：正式対応の衣装、小物を大量に作る

VRChat用のアバターなどが売られているBOOTHを見ると、小物や衣装も大量に売られていると分かります。 たとえば有名アバター「ミーシェ」でBOOTH検索すると、第三者によるミーシェ互換の衣装や小物が大量にヒットします。

アバター改変においても、小物まで自分で作ろうとする人はいないので、個性を出すために小物は大切です。 ですがアバターを作っている人が公式に衣装や小物を作っているのは稀です。

ここではそれを逆手に取って、アバターだけでなく、公式対応！一発導入！な衣装と小物を大量に作りましょう。

• アバターを作る
  • アバターの衣装を大量に作る
  • アバターの追加小物を大量に作る
  • アバターの追加テクスチャーを大量に作る

人気のアバターが人気の理由の1つは、対応している衣装や小物が多いこともあります。 これを自分の売っているアバターに適応して、公式に衣装を作りまくります。ご一緒にポテトはいかがですか！（ホタテではない）

衣装だけで20個、小物で30個、テクスチャーで30個作れれば良いと思います。新しいアバターをいくつもモデリングするくらいなら、超優秀なアバターを1つだけ作って、衣装を10個作ったほうが良いです。 この公式の衣装、小物、テクスチャーの組み合わせで考えれば、数1000の個性を演出できます。

BOOTHを眺めたりVRChatを散策して、売れてそうな衣装や小物の傾向を分析しましょう。 それを公式に作って「ワンクリックで着せ替え可能！」にすればアバターも衣装も売れるでしょう。

さらに服が増えれば、個性に応じた自社ブランドを数個立ち上げてもいいでしょう。これは次のパーソナリティの網羅に繋がります

戦略2：パーソナリティの網羅

上記のポテト戦略に重要になるのは元となるアバターです。

まず、あなたが作るアバター1体には、3体分の労力をかけて作りましょう。 そして、そのアバターを2体か、できれば3体だけ作ります。

その少ないアバターで、パーソナリティを網羅できるようにしましょう。 パーソナリティとはたとえば以下です。

• 長髪・短髪
• クール・快活
• 長身・低身長
• フェミニン・ボーイッシュ

これは 「レイ・アスカ」戦略です。 エヴァを観た人はレイかアスカを好きになります。大人しい子が好きな人はレイへ、明るい子が好きな人はアスカへ。 短髪が好きな人はレイへ、長髪が好きな人はアスカへ（大人が好きな人はミサトかリツコか、という設計です。すごい！すごすぎる！）。

こんな感じで、少ないアバターの中でも色んな好み・個性が網羅できるようにしましょう。アバター単体では（VRChat基準の）万人にウケることを狙います（適度に個性やニッチがあると良いと思います）。 できれば対極的な2体があると良いです。そしてシェイプキーで見た目を調整できるのが大事 です。 シェイプキーと上記の服装やファッションの好みで、個性を最大限に出せるようにします。

アバターをいくつも作る必要はありません。アバターは販売のきっかけ（フロントエンド商品）と考えます。3000円以下で売るのが良いと思います。

サンプルアバターも、サンプル感を出さずに積極的に配布すべきです。購入したままアバターを使う人を想定しませんので、何も変更できないサンプルをずっと使われても痛手はありません。

戦略3：ロイヤルティカスタマー向け専用対応

同時に、お客様のロイヤルティ（愛）が高まった先にあるものを用意します。

それは受注生産です。 究極のパーソナリティ、究極の愛は「唯一無二であること」です。 この受注アバターを絶対に一般へ再販してはいけません。

受注生産と言っても、完全受注生産はしません。上記のアバターを元にして依頼された改変をしましょう。 スーツでいうイージーオーダーというもので、基本はありつつも好みに合わせて作っていくという感じです。

だいたい3～8万円ほどにまとまるのが理想です（VR機器の値段くらいなら僕も出せる範囲）。

そして、販売しているアバターでのイベントを定期開催します。 同じアバターを使っている人のファッションや小物、シェイプキーの組み合わせを披露し合います。そうすれば他の服や改変にも興味がでるでしょうし、自前で改良する知見も広まります。 ここに圧倒的にカワイイ受注生産アバターの人をお呼びすれば最高です。

こうして自分の作ったアバターを中心にコミュニティや世界観を作ることで、他のアバターにはないものが生まれます。 今、有名になっているアバターは自然発生的にこういうこと（対応衣装の販売、アバター集会、改造）が起こっているので、それを踏襲する戦略です。

有名アバターを作るというのはかなり難しいと思いますが、この3つの戦略を順にやっていけば割と買ってくれる人はいそうに思えます。 そもそもカワイイ・カッコいいというのは大前提ですが（！）。

まとめ

まずVRChat（VR SNS）におけるアバター販売の特殊さをまとめました

• VRChatユーザーは、ハマるほど買わなくなる
• アバターを作る人は、好きゆえにアバターを作る

さらにVRChatユーザーが本当に求めるものを考えてみました

• VRパーソナリティが何より大事
• 改変・改造が面倒に感じるときもある
• お金はわりと出せるし、多少出してもプレイ時間が長いからコスパは良い

そしてその動向から3つの戦略を出しました

• 衣装・小物・テクスチャーを公式で大量に作って売る（セットのポテト戦略）
• パーソナリティを網羅できるアバターを少数先鋭で作る（レイアスカ戦略）
• イベント開催と受注生産の対応（再販は絶対にしない究極の個性）

以上です。

僕はこの「VRパーソナリティ」と、それを基軸にした販売戦略というのはアリだと思います。 ぜひアバターの制作、販売で生計を立てている人は参考にしてください。まずは本当にこう考えるお客様がいるかをたしかめつつ、小さく始めるのが良いと思います。結果を僕に教えてくれると嬉しいです。

僕はVRChatやVR SNSの世界が大好きなので、この世界が産業としてもっと盛り上がれば嬉しいです。 あまりビジネスライクになるのは良くないですが、好きにモデリングする人がもっと増えて、生計をたてられるようにするのは大切だと思います。

それでは皆さん、かんぱい、かんぱい。

執筆：Kiyohara Hiroki (@hirokiky) （この記事はShodoで執筆されました）

ChromebookとWebサービスの10年後

これから若い人たちの間でChromebookが基礎知識になってくるとすると、10年後にはWeb経由で使えるアプリへのアドバンテージがより大きくなるのかなぁ、なんて思いました。

www.youtube.com

日本はすでにITの教育が遅れていると言えますけど、これからChromebook（やタブレット）が教育に取り入れられるのは間違いないでしょう。そうすると10年後には、ライトなPCやタブレット環境に慣れた若い人たちが社会へ出てきます。

そのときに重要になるのは、やはりWebや、モダンな使い心地のアプリではないでしょうか。 仕事の環境でも、たとえばfreeeを使うというのがより当たり前になりそうです。今までは「Webサービスに移行しよう」なんて力が必要でしたが、これからは「なんでWebにないの？」という感覚から始まるでしょう。 freeeを使いたくない会計士の人は今もいらっしゃると思いますが、基礎教育としてChromebookに触れる機会が多ければ変わってくることと思います。

僕自身はChromebookを使いませんが応援したいですね。 打算的な理由ですが、Chromebookが普及すれば、僕も好きなWebの世界が伸びてくれるかもしれません。さらにWeb前提のアプリやモダンなUIに慣れていてくれれば、事業者側も新しい挑戦がしやすくなります。事業者側としてブレーキになるのは、新しいUIに慣れてくれるかやWebにもっていく心理的なハードル、Web上でオープンな仕事をすることへの抵抗感をどうなくすかということです。そのWebらしい使い勝手に慣れた人が社会人として増えてくれると、Webサービスの人間としてはかなり大きなアドバンテージです。

大事なのは変わっていくことと、変わっていけることです。 こうして変化の種が着実に蒔かれているというのは嬉しいものです。

執筆：Kiyohara Hiroki (@hirokiky) （この記事はShodoで執筆されました）

DjangoCongress JP 2021が発表してくれる人を募集しています

2021年7月3日（土曜日）にDjangoCongress JP 2021が開催されます。 そのイベント当日に、Djangoについて発表してくれる方を募集しています。締切は5月12日（水曜日）です。

djangocongress.jp

今年もイベントの代表として頑張っていますので、応援いただけると嬉しいです。

イベントや発表の応募

Djangoや、Djangoに関する知見を共有する発表をご応募ください。質疑応答の時間を含んだ、40分間か30分間の枠を用意しています。DjangoCongress JP 2021は現時点でオンラインとオフラインの両方で開催する予定ですので、発表の応募時にどちらで登壇されるかを選べます。

オフラインでのイベント会場は長野駅から歩いて10分のところにありますので、都内からもちょっとした遠出くらいの気持ちでお越しいただけます。オフライン会場については新型コロナウィルスの感染拡大によっては中止となり、オンラインのみの開催に移行する可能性はあります（なるべくホテルのキャンセルができるような、早い段階でご連絡いたします）。

今年のDjangoCongressは4回目（という3回目）

2018年からDjangoCongress JPは毎年開催しておりまして、今回は4回目になります。 前回は残念ながら開催前の中止となってしまったので、今年はぜひ開催できると嬉しいですね。

とくに今年はDjango 3の長期サポートバージョンであるDjango 3.2がリリースされますので、移行のタイミングとしても知見が共有されていくと良いですね。

そろそろイベントとしても慣れてきたのもありますので、来年あたりは公式にDjangoConとして開催できると良いかもしれません。まぁ、それも新型コロナウィルスの感染状況やそれによるモチベーションの大きさも分からないところです。どうしても海外からの渡航を伴いますからね。

ともあれ

ともあれ、今年のDjangoCongress JPも楽しく有意義なものになると嬉しいなと思っていますので、ぜひDjangoに関する知見がある人は発表へ応募いただけると嬉しいです。下の公式ページからリンクしているフォームより応募ください。コロナ下で知見共有しにくかったですよね、すごく良い機会だと思いますのでぜひ！

djangocongress.jp

執筆：Kiyohara Hiroki (@hirokiky) （この記事はShodoで執筆されました）

TrelloのDescription欄だけでUIを超えた手触りが良すぎて学びしかない

TrelloのUI（UX）が素晴らしすぎます。UIと言っても表面上のデザインだけでなくて、基本的な要素の手触りが良すぎます。

とくに上の写真にあるDescriptionがすごい。ここだけで作り込みがすごすぎてビックリする。 これはカード（Todoリストでいうタスク）の説明欄です。入力はtextareaででき、URLなどが入力されると表示される際はリンクになります。ただそれだけの要素ですよ。

ただそういう次元じゃないんですよね。たとえば以下の機能があります。

• Descriptionが空のときは「Add a more detailled description...」を表示する
• Descriptionが空のときはマウスホバーで背景色を濃くしてクリックを促す
• Description内に描画する内容があるときは、 cursor: pointer にするだけで背景色は変わらない
• Descriptionのクリックで編集に入る
• でもDescriptionで描画されたaタグをクリックしても編集には入らない
• さらにDescriptionで描画された内容をマウスドラッグ（選択）しても編集には入らない
• 編集中に入力欄の外をクリックすれば編集から脱出する
• 編集中にEscキーをタイプすれば編集から脱出する
• 入力欄の外部クリック、Escキータイプで脱出したときのみ、入力に変更があれば編集を保持する
• 編集途中の入力があれば、Descriptionの下部に入力中があると表示する
• 編集中の状態を削除（Discard）できる
• 編集中の下部にあるキャンセルボタンをクリックしたときは編集の保持をしない

知ってるものもあると思いますが、細かい所の制御まで完璧に気持ちよくできてるんですよ（Escとボタンクリックの違いなど）。

こんなtextareaと描画したHTMLを表示するだけの画面要素にこんなに作り込みをできるってすごすぎる。 aタグのクリックやドラッグのイベントを回避したり、Esc・欄外クリックと「キャンセル」ボタンクリックで動作を分けるとか、異常としか言いようのない作り込みです。Apple製品やiPhoneの通知欄などのUIを取り上げて「すげー！」って言っている人はたまにいますが、Webサービスという観点でTrelloは教材の宝庫です。

Descriptionクリック時の制御は、たとえばaタグにはblankを付けておけば回避できそうです。ドラッグされてるかどうかは window.getSelection().isCollapse が true のときのみ編集に入るようにしてそうです。

無駄なこだわりと一蹴されそうではありますが、そうではないです。このDescriptionを触る機会は、他の雑多な機能を使うよりも圧倒的に多いはずです。だからこだわる価値が十分にあると言えます。 Trelloが成功したのはボードを表示する見た目によるものじゃないんですね。こういう当たり前に使う見えないところに心血を注いでるからこそ、使う人は「何かすごい便利だぞ」と感じられるわけです。

こういった「手触り」って何ていうんですかね？UIで議論されている領域を超えたものを感じますし、UXというにはボンヤリしすぎています。もちろんすごい人はこれをUI/UXの一環として取り扱うものと思いますが、僕はこの分野に名前がほしいです。UserTouchでUTとか、何でもいいですが、とにかく「ここの手触りにこだわろうよ！」というときの言葉が欲しいですね（あればぜひ教えてください）。

本当にTrelloは学びしかないです。みなさんもWebサービスに携わる人間であれば、ぜひTrelloを観察的な眼で見てみてください。どの要素を取り上げても学びしかないですよ。

いただいた反応

いまさら？

たしかに今さら感MAXです！

Descriptionって意外と書かない人もいるしアフォーダンスの改善は要りそう

たしかに。こういうタスクツールの説明ってどうしても書かないときありますよね（私も含めて）。 タスクの説明欄ってただの入力でしかないですが、うまい質問を出してあげて気持ちよく書けるなど工夫はできそうです。

GUIでの書式入力がないのが良くない

非エンジニアの人が多い環境ですとその課題もありますね。私はGUIのツールバーがないほうがスッキリしていて好きですが、やはり求められるものです。 TrelloのDescriptionにも必要そうです。

WebHookがすぐ実行されるのが良くない

それはありますね。グラフィカルに動いたり、勝手に保存されるUIの場合はどのタイミングでHookが起こるかが分かりにくい問題はあります。 TrelloはとくにWebHookのタイミングが多くて、うるさくなりがちですね。

通知やWebHookも非常に重要なUI/UX部分だと私も思いますので、同意です。

UIや画面要素の研究をして

こういったようにWebサービスのUIや画面要素、手触りの研究をして、自身のサービスに活かしていきたいと思います。 Shodoでも調べたりした成果を反映して作っていますので、（まだまだ至らぬとこはたくさんですが）ぜひ興味ある人は見てみてください。

shodo.ink

この記事はShodo (https://shodo.ink) で執筆されました。

専用のオリジナルキャラと生きる。チャットとボイスが楽しめるサービス - サービスアイディアメモ

ちょっとしたアイディアのメモです。

現実には存在しないのでご注意ください。真面目に調べてないので僕のビジョン（妄想）垂れ流しです。

なぜ僕だけのキャラクターなのか

自分の理想であるキャラクターがいたら良いなと思ったことってないですかね。今いるVTuberとかゲームのアイドルも良いのですが、どうしても「推し」になってしまって僕のことを見てくれませんし、引退したりサービス終了したりすることもありますよね。

アイドルという文脈ではそれでも良いんですが、もっとパーソナライズしたものがあってもいいのになと思います。推しがいくら可愛くても僕にLINEしてくれることはないですし、お誕生日おめでとうとも言ってくれないわけですよ（ボイスの販売はあっても）。

海外には Cameo というサービスがあって、セレブリティが有料で個別のメッセージを送ってくれるというものです（日本のVTuberやアイドルもいずれやるでしょう）。とはいえアイドルはアイドルです。もっと「存在からパーソナライズされた何か」があってもいいと思います。

オリジナルキャラと共に生きる

そこでもういっそのこと、自分で理想のオリジナルキャラを作ってしまおうというアイディアです。 このサービスに登録すると、自分の理想像を入力することでAIがキャラクターを作ってくれます。それを元に、「日常の写真」としてプロの絵描きさんの絵が送られ、「ボイスチャット」として声優さんからのメッセージやリアルタイムのやり取りができます。日々のやり取りもライターさんを通してメッセージを交換したり、「デート」として短編小説が送られてきます。

究極的にはすべてAIでやりたいところですが、まぁ今のAIには限界があります。でも最近って絵の上手な人とか声の可愛い人がとても多いので、そういったセミプロっぽい人が裏で頑張ってくれます（仕事としてお金にもなるし、スキルアップにもなる）。

「推し」ができない人種はいる

世の中にあるアイドルやVTuberって、言ってしまえば疑似恋愛ではあるんですよね（僕もジョー力一に恋してるので）。でもアイドルの「推し」って正直ノリ切れないところがあるんですよ。それは文脈としてアイドルオタクをやったことがないので、全力で「推す」ことに抵抗感があるんです。今あるアイドルって要は「非日常」の楽しみであって、「日常としての疑似恋愛」っていう需要があると思っています。

そういう人ってかなり多いと思っていて、現実の恋愛にも静かに満たされたい人も多くいるわけですよ。そこで当サービスではそういった人にも合致した「静かに推せる」、「日常の疑似恋愛」が提供できるというわけです。そこが今あるVTuberやアイドルとの決定的な違いです。

具体的なサービス内容

まずサービス登録時のキャラクターメイクと、性格や趣味嗜好を設定します。そこから利用者の好みやNGなどもお聞きします。キャラクターメイク時はAIによってキャラクターが「誕生」するイベントが行われます。なぜAIによる誕生かというと、「人に作られた偶像」という懸念を払拭するためです。

あなたとキャラクターは新しく出会い、関係を築いていくという設定です。メッセンジャーアプリを通して1日に3通のやり取りができます。追加課金で増やせます。また月に1回は絵描きさんに書いてもらった「写真」が送られます。さらに誕生日などのイベントの際は声優さんによるボイスが送られます（声は自分で選ぶかお任せかを選択できます）。

追加の「写真」やボイス、通話などは追加課金で月次で指定回数までなら購入いただけます。超プレミア特典としてVR空間でデートすることもできます（1回3万円、初期費用10万円）。

ちなみにキャラクターやボイスの知的財産権は利用者にあり、個人利用の範囲で写真や作成したアバターは好きに使い回せます。

基本料金は月額3,800円、入会費は5万円です。追加課金要素は別途あります。

自分の恋人を作る時代がくる

いかがでしょうか、この「あなたの恋人を作って生きる」時代は。

僕はかなりありだなと思っています。運営こそ大変そうですが、需要というか提供できる価値はかなり大きそうです。 メッセージをやり取りできる恋愛シミュレーションゲームなんかも今すでにあるので、そういう意味でお客様の受け入れる地盤はできてるかなーと思ってます。

この記事はShodo (https://shodo.ink) で執筆されました。

Shodoのオープンベータ公開から3週間で300近いチームが作成されました。いただいた質問への回答や今後について

早いものでShodoのオープンベータ公開（2月2日火曜日）から3週間が経ちました。使ってみてくれた・今も使ってくれている皆さん、フィードバックのコメントや応援をくれた皆さん、ありがとうございます！

僕としてはもう半年くらい経ったような気分ですが、相対性理論のせいなのかまだ3週間しか経っていないようです。

この3週間で300個近いチームがShodoに作成されました。思った以上に反響をいただいて、嬉しいと同時にやる気がドッと高まっています。現状ですと1人か2人くらいの小規模なチームでご利用いただいている方がほとんどですので、300チームが作成されたと言うのはちょっと盛った言い方かもしれません（すいません！）。でも、すごいです。

ここで一旦、いただいた質問などにお答えしようかなと思います（個別には回答している内容です）。また、Shodoのシステムや不具合などについては修正してメール等でお答えしているので、ここではもう少し大きな話の回答をまとめようかなと思います。

Shodoって次は何がリリースされるの？

正直に言うと、これから正式リリースまでに華々しい大きな機能の追加はありません。

ただ、日々Shodoを利用していて嬉しい・便利な改善や機能追加をします。

Shodoには使い心地の改善点がまだかなりあると感じていますので、今利用してくださっている方々が日々使いやすくなるような変更をします。他にもたとえば既存の機能の中で表示が増えたり、配信先や連携先が増えるようなリリースはしていきたいです。

内部的に大きな変更や、Shodoを利用する際のフローのようなものは見直していきたいので、目立たない大工事はあるかもしれません。

先日、Shodoに執筆の頑張りを見える化する表示を追加したところですが、この見える化についても好評であれば拡張していきたいなと思います。

いつ正式リリースされるの？

正直なところ、いつというのは分かりません。

ですが「大きなリリース」はしない予定なので、1年はかからないという時間で考えています。 とにかく今、Shodoの当たり前のあり方に納得できるまではオープンベータとしてやります。

オープンベータってどれくらい信用していいの？何に使うのが良いの？

バックアップやデータの保護は行っておりますのでご安心ください。

ですがたしかに保証するような体制はありませんので、社内の小さなプロジェクトからお試しいただくのが良いです。 一番オススメなのが社内でのブログやオウンドメディア用に原稿を執筆するときです。とくにはてなブログには連携機能がありますので、社内でコンテンツマーケティング用などにはてなブログを運用している場合はかなりオススメです。

大きな本の執筆については正直に言うと強くオススメしません。雑誌への寄稿文（1万字ほど）であればオススメできますが、本の版を重ねて書くようなものやB5で数百ページという著作にはオススメできません。理由としては全ページを横断した一括変換や見出しの抽出をしてツリー構造で表示する機能などに対応できていないからです。

この点については僕自身も欲しい機能なので、今後改善していければと思います。

正式版になると何が違うの？

動作保証やサポートブラウザ、データの保護・管理などに力を入れる予定です。現状でもセキュリティ保護やバックアップは行っておりますが、バックアップ期間の延長であったりクラウドの障害時にもなるべく稼働できるように整備します。また、Shodo内のデータをエクスポートできる機能など、中長期的にShodoを安心してお使いいただけるようにします。

またそれに伴って有料版の提供をする予定です。

有料版って出るの？どうなるの？いくらくらい？

有料版は想定しています。ですが無料での提供もしつつ、有料でも月額1000円からなど、かなり安価にします。もちろん初期費用はなしです。

どちらかというとShodoを使っていただきたいという思いが強いので、無料でもなるべくご利用いただけるようにしたいです。現状でも身銭を切っている状態ですが、Shodoを持続可能な範囲でお金をいただければなと思います。将来的には業界ごとに対応したAIを提供するなど、オプションを増やすことでお金をいただきつつも、最大限Shodoの良さや便利さに還元していきたいです。

AI校正が24時間使えるプランなど上位のプロプランも用意させてもらうかもしれません。というのも、AI校正用のサーバーを稼働させるために「そこそこ」お金がかかるので、値段が多少あがるのはご了承いただきたいです。

今現在ベータ版を利用していただいている方には、ご支援いただいたお返しとして有料プランの無料期間をご提供したいです。

自己資金だけで今はやっており、今後の資金繰りなども影響して正式に決まります（頑張ります！が、ちょっと相談とか誰かにしたいかも）。

おわりに

今後もShodoをよろしくお願いします。

かなり可能性を感じますし、実現したいことも山積みです。実際に自分が利用していてもかなり便利です。 もっともっと、執筆の世界を楽しくクリエイティブにできる場へとShodoを進化させていきます。

他にもご質問などあればお問い合わせからなんでも聞いてください！

shodo.ink

問い合わせって面倒だなというときは僕のTwitterに聞いてください！

twitter.com

この記事はShodo (https://shodo.ink) で執筆されました。