全然終わらないバレエスタジオを作るシリーズ
(多忙のため当時残せなかった記録を書き起こしています)
私はインターネット老人で、htmlを手打ちでWebを作れます。でも手打ちではあまりにシンプルなサイトになりAPI連携等もできないので、今回はホームページ制作にノーコードツールを使いました。
自力手打ちで作ってるピラティスのサイト
1人でやるビジネスならこの程度で良いのですが、今回やろうとしていることは規模が拡大するので、さすがにこれじゃねー。
こっちはレスポンシブ対応もほぼやってません。
ノーコードツールでのWeb制作、綺麗なテンプレートもたくさんあるのですが、バレエスタジオの内容に合致するものはあまりなく、配色だけ変えてもオリジナリティが出ないし、ロゴやアイコンを使って。。。と考えていくと既存のテンプレを改造していく方が時間がかかりそう。
それで新規作成をぽちっと押して、全くの白紙から作ることにしました。
白紙のホームページ。
ただただ真っ白な画面。これを見ていると簡単に絶望します
思ったものができあがるまでに一体何年かかるの
ピラティスのホームページを最初に作った時も白紙だったよね。がんばれ、一歩ずつだ。最初のフレームを作るんだ。
インパクトのあるファーストビューがあって、スケジュールがあって、講師紹介があって、Q&Aがあって、利用規約があって、地図がある。
こんな構想です。
ファーストビューはめるなちゃん(
イラストの女の子)とメニューアイコンをアニメーションで動かすことにしました。

各アイコンを星の数ほどある素材集から選び抜き、ホバーで色を変えるように設定し、サイズを調整し、一つ一つ全部ドローソフトで細かく作り込んでいったので、割と満足いくファーストビューができました!
ホームページって、作り手はできればパソコンの大きな画面で見てほしいものなんです
今時みんなスマホしか使わないけどね。。。
Webは情報量の少ないペラいちものだったらまあまあ簡単にフォーマットを作れるのですが、ただのチラシではなく、サーバーや独自ドメインはもちろん、様々な他社システムと接続しながらエンドユーザーの導線を作っていくので、絵が描ける・デザインができるだけではダメです。
裏で走ってるプロトコルが全く分からないのなら、一人で作るのは現状無理だと思います。
昨今ノーコードツールやAIも登場してますが、まだまだWebは難しいよ。
だから専門外の人は外注するしかない場合がほとんどだと思うのですが、めるもバレエではどうしても自分でやる必要があるのです。Webは毎日手入れするものなので、外部に頼んでられないのが実情です。
実質的にスタジオ利用のルールとして機能するQ&Aと施設の法律である規約、これだけでも巨大な情報になり、これらを整理して閲覧できる状態にしてもらうまで、こちらが出せる金額の範囲内で外注するのは現実的ではないです
画面スペースを有効活用するためトグルを用いた「よくある質問」(Q&Aに飛びます
)
これ外注で作ってもらうのは無理だな…
さらに私がやりたかったのは「週間スケジュールをWeb上で見れる」バレエスタジオのホームページ!
だいたいは外部の予約システムへジャンプするか、PDFになってる場合が多いかな。
ユーザーとしては外部遷移してまで見るのがめんどくさい、PDFは字がちっちゃくて講師写真がない、という問題を解決したかった。
これはデザイン悩みましたよ〜。パソコンは画面上に一覧が収まりますが、スマホはどうしたらいいんだ
と。
それで、週間スケジュールは横スクロールできるようにしました(画像、こんな感じ
)。構成めっちゃ考え抜いたし、実装は本当にがんばった

画面右上の「朝活ストレッチ」担当してるのが私本人です。講師名は奈津です。
ただでさえあらゆることが同時進行になってる中、専門でないWeb制作を並行していたのでデザインの基本が抜けてるところはたくさんあります。
カーニングすらやってないし、メニューの並び等でルール無視してるところが色々ある。
だから「本業デザイナーが作ってないな」というのは一見して分かるのですが、それでも外部サイトに移動しなくてもスケジュールが見れる、PDFじゃないという便利要素はユーザーにとって大きいと思ったの。
講師紹介は先生達がより綺麗に見えるように構成を練り、各講師Instagramのリンクも貼りました。
(講師紹介に飛びます

)
普通、オープンクラススタジオのWeb上に講師インスタのリンクなんてないよ。親切じゃない?
だってみんな先生のインスタ見たいじゃろ? 分かってるのよ私はそこを…ふふふ
あとは、今は接続してないですがスマホで身分証明書を送れるというガチガチの高セキュリティサービス(eKYC)をオープン当初のみ利用していて、エンジニアがいない中これを繋げるのも大変だった。金融機関とかが使うやつ。
そして、Webと公式インスタ投稿一覧の連携!簡単にAPIでいけるんじゃね?って思ったそこのあなた
InstagramAPIへのアクセス手段は複雑怪奇きわまりないんです。これ見てよ。
まず初めに用意するものとして 根気 が上げられています。
うん、やってみて、ちぬかと思った!やってみてほすぃ!
道案内作るのもがんばっただよ(道案内に飛びます
)
駅から歩いて写真撮ったよ
実は過去に出したプレスリリースもこっそり一覧になってます(プレスリリースに飛びます
)
Web構築は一個のお店を作るのと同じ作業量なので、膨大な時間を費やしました。
もしこれだけの作業をあーでもないこーでもないと修正依頼かけつつ外注してたら、遠い未来ならともかく2023年当時は冗談じゃなく数百万はかかっちゃう。これイチからお安く作れますよ、なんて制作会社あるだろうか。
現実は数百万円分の作業量なんて受注できないので、断られると思う。
だから自分で作らない限り実現し得なかったWebサイトです。時間に追われつつなんとか形になってよかった…