はじめに
このブログでは、人生をより良くするために、自分が考えたことや実際にやってみたことを記録しています。
今回は、Web制作に挑戦した経験について書いていきます。
これまでWeb制作のポートフォリオとして、いくつかサイトを作ってきました。
その中で、「せっかくなら、自分の強みを活かしたものも作ってみよう」と思うようになりました。
私は柔道整復師として学んできた知識や経験があるので、それをWeb制作と組み合わせて、実際の接骨院でも使えるようなサイトを作ってみることにしました。
ただ作るだけではなく、デザインから実装まで一通り自分で経験し、実際に使えるものを目指して制作していきました。
制作は思っていたより難しく、AIに相談したり、分からないことを調べたりしながら、少しずつ形にしていきました。
それでも、完成したときには「難しかったけど、形にできて良かった」と感じました。
そして今回の制作を通して、Web制作について学べただけではなく、自分ができることや、まだ足りないことも見えてきました。
この記事では、そんな接骨院サイト制作の過程と、実際に作ってみて感じたことや学んだことを記録していきます。
この記録が、これから自分が振り返ったときに「このときも頑張っていたな」と思えるものになり、読んでくれた人にとっても「自分も何かやってみよう」と思えるきっかけになれば嬉しいです。
自分の強みを活かして、接骨院サイトを作ることにした
Web制作を副業にしていくためには、まず自分が何を作れるのかを見せられる実績が必要だと思い、ポートフォリオとしていくつかサイトを作っていました。
ただ、実際にクラウドソーシングなどで案件を獲得しようとしてみると、思っていたよりも簡単ではありませんでした。
そこで、「案件を獲得する」という方法だけではなく、別のアプローチからWeb制作を収益につなげる方法も考えてみようと思いました。
その中で、自分の強みを活かしたものを作ってみようと考えるようになりました。
私は柔道整復師として学んできた知識や経験があり、接骨院の現場についても知っています。
それなら、その経験とWeb制作を組み合わせて、自分だからこそ作れるものを作ってみようと思いました。
そこで考えたのが、接骨院のサイトです。
最初は、自分が柔道整復師で現場を知っているからこそ、接骨院向けのものを作ってみようというくらいの考えでした。
そこから少しずつ、接骨院に特化したシステムやサービスを作り、将来的には他の業界にも広げていくようなイメージも持つようになりました。
とはいっても、最初から大きなサービスを作ろうとしていたわけではありません。
まずは、実際の接骨院で使えるものを作ってみようと思いました。
必要なページを考えたり、「これがあったら便利かもしれない」と思うものを入れたりしながら、一つの接骨院サイトを形にしていくことにしました。
実際に使える接骨院サイトを目指す
接骨院サイトを作ることに決めてから、次に考えたのは「どんなサイトにするか」でした。
せっかく作るなら、ただ見た目が良いだけのサイトではなく、実際の接骨院でも使えるようなサイトにしたいと思いました。
そこで、必要そうなページや、あったら便利そうなものを自分で考えたり、調べたり、AIに相談したりしながら少しずつ増やしていきました。
最終的には、
- トップページ
- 院紹介
- メニュー・料金
- スタッフ紹介
- お知らせ
- スタッフブログ
- 患者様の声
- アクセス
- お問い合わせ
- よくある質問
- 予約ボタン
などを用意しました。
それぞれのページにも、できるだけ「患者さんにとってどうなのか」を考えるようにしました。
例えば、患者様の声があれば、実際に利用した人がどのように感じたのかを知ることができます。
よくある質問があれば、来院する前に気になっていることを確認できます。
スタッフブログでは、院内の情報やスタッフのことを発信することで、患者さんとの距離を少しでも近づけられるのではないかと考えました。
料金についても、最初から明記しておくことで、患者さんが「いくらかかるんだろう」と不安にならずに済み、安心感にもつながると思いました。
また、予約優先制の接骨院も多いと感じていたため、ホームページからそのまま予約までできれば便利だと思いました。
「行ってみようかな」と思ったタイミングで、そのまま予約できれば、患者さんにとっても使いやすいですし、他の接骨院との差別化にもなるのではないかと考えました。
そのため、ホームページだけではなく、予約システムまで含めて作ってみることにしました。
ただ、この時点ではまだ予約システムは完成していません。
まずはホームページ部分を形にして、次の挑戦として予約システムの制作へ進むことにしました。
接骨院サイトのデザインを考える
サイトのデザインについては、AIにも相談しながら方向性を考えました。
接骨院は医療に関係する場所でもあるので、まずは清潔感を大切にしました。
そして、初めて来院する患者さんにも安心してもらえるように、安心感のあるデザインを意識しました。
一方で、接骨院のホームページを調べていると、似たようなデザインのサイトも多いと感じました。
そこで、ただ「接骨院らしいサイト」にするのではなく、モダンでスッキリとした、今っぽいサイトにしてみようと思いました。
Figmaでゼロからデザインしてみる
接骨院サイトを作ることを決めたので、まずはサイトのデザインから作ることにしました。
これまでポートフォリオ用のサイトを作る中でFigmaを少し触ったことはありましたが、今回のように最初から最後までFigmaでデザインを作るのは初めてでした。
まずは実際のWebサイトのデザインをどのような手順で作っていくのかを調べるところから始めました。
そして、サイトのイメージに合うように色やフォントを決め、その後にボタンなど、サイト内で繰り返し使うものを作ってからトップページの制作に入りました。
デザインの方向性については、AIにも相談しながら決めていきました。
自分の中にある「清潔感があって、安心感があり、モダンでスッキリしたサイトにしたい」というイメージをAIに伝え、色やフォントを考えていきました。
レイアウトについても、いくつか参考になるサイトを見ながら、AIと相談して決めていきました。
ただ、実際にFigmaを使ってみると、思っていた以上に難しいこともありました。
そもそもFigmaの操作に慣れていなかったので、サイズの変更や細かい調整をするだけでも時間がかかりました。
特に、オートレイアウトなどの機能は初めて使うものだったので、調べながら少しずつ覚えていきました。
PC版だけでなくスマホ版も作ったので、それぞれの画面に合わせてサイズやレイアウトを調整する必要もありました。
それでも、分からないことを調べながら少しずつ形になっていくのは楽しく、新しいことに挑戦している感覚もありました。
そして、デザインが完成したときには、
「これを実際に作っていこう」
という気持ちが強くなりました。
今回Figmaを使ってみて、デザインからWeb制作までの流れを実際に経験できたことは大きかったです。
先にデザインを作っておくことで、「どんなサイトを作ればいいのか」という軸ができたので、その後の制作も進めやすくなりました。
一方で、Figmaで作った見た目を見ながら、
「これを実際のWebサイトで同じように見せるには、どうすればいいんだろう？」
と考えるのは難しく、ここから実際のコーディングでまた別の難しさを感じることになります。
FigmaのデザインをWordPressで形にする
Figmaでデザインが完成したので、次は実際にWebサイトとして形にしていきました。
まずWordPressを用意して、そこからコーディングを始めました。
この時点では、まだ制作の手順も曖昧だったので、「次は何をすればいいんだろう」と確認しながら進めていきました。
コーディングするときは、できるだけ自分でもどう書けばいいのか考えながら、AIと相談してコードを書いていきました。
実際の制作では、
Figma → WordPress → コーディング → 確認・修正 → 再度コーディング → 完成
という流れを繰り返しながら、少しずつサイトを形にしていきました。
特に難しかったのは、Figmaで作ったデザインを実際のWebサイトで再現することです。
「ここをこうしたい」というイメージはあっても、それを実現するためにCSSやJavaScriptでどんなコードを書けばいいのか、すぐに思いつかないことがありました。
コードを書いてみても、思っていた通りの見た目にならないこともあります。
例えば、スマホ表示に対応させているときに、JavaScriptで作ったハンバーガーメニューが表示されなくなってしまうこともありました。
そういった問題が起きたときは、自分で調べることもありましたが、調べても分からないことも多く、AIに聞きながら原因を確認していきました。
そのときも、ただコードを教えてもらうだけではなく、どうしてそうなるのかを解説してもらいながら修正していきました。
こうして一つずつ問題を解決しながら制作を進め、最終的にサイトを一通り形にすることができました。
完成したときには、やっぱり達成感があり、嬉しい気持ちもありました。
自分がFigmaで考えたデザインが、実際のWebサイトとして動いているのを見ると、「ここまで作れたんだ」と思えました。
一方で、自分一人でできたところはまだ少なく、AIにかなり助けてもらった部分もありました。
そのため、完成した嬉しさと同時に、
「まだまだ頑張らないとな」
という気持ちもありました。
AIと相談しながらサイトを作ってみる
今回のサイト制作では、最初から最後までAIに相談しながら進めました。
制作中に聞いていたのは、
「次は何をしていけばいい？」
「これってどういうこと？」
「エラーが出たけど、どういうこと？」
といった、かなり基本的なことも多かったです。
まだ自分の中で制作の手順がはっきりしていなかったので、次に何をすればいいのか分からなくなったときにもAIに相談していました。
また、自分で考えたり調べたりしても分からないことも多く、そういうときにもAIに聞いていました。
AIに相談すると、必要なことをまとめてくれたり、自分が知らなかったことを教えてくれたりします。
そのため、制作を進めていく中では、困ったときに頼れる相棒のような感覚でした。
一人だったら、そもそも何を調べればいいのか分からなかったり、調べても解決できなかったりして、途中で止まってしまっていたかもしれません。
一方で、AIを使って制作してみたことで、自分自身の課題も見えてきました。
分からないコードを教えてもらい、それを見ながら自分でもコーディングするようにはしていました。
それでも、実際にはなかなかコードを覚えられていませんでした。
「AIがあるから作れる」という状態と、「自分自身が理解して作れる」という状態は、やっぱり違うんだと感じました。
サイトを完成させることはできましたが、AIに頼る部分はかなり多かったです。
だからこそ、これからはAIに全部任せるのではなく、AIの力も借りながら、自分自身でもできることを増やしていきたいと思うようになりました。
実際に作ってみて分かったこと
今回、デザインから実装まで一通り自分で経験してみて、Web制作がどのような流れで進んでいくのかを実際に体験することができました。
もちろん、一度作っただけですべてを覚えられたわけではありません。
それでも、デザインから実装までを一通り自分で経験したことで、Web制作の全体像や、それぞれの工程で何をするのかを以前より具体的にイメージできるようになりました。
また、AIの助けがあれば、自分でも一つのWebサイトを形にすることができるということも分かりました。
一方で、自分の知識や技術がまだまだ足りないことも実感しました。
プログラミング全般の知識だけでなく、「どうやって作っていくのか」を考える設計力や、考えたものを実際に形にする実装力など、まだ身につけることはたくさんあります。
それでも、今回の制作をやってみて良かったと思っています。
デザインから実装まで一通り経験できたことや、何より自分の強みを活かしたものを実際に作ることができたことが大きかったです。
「これを基盤にして、Web制作を収益につなげていくこともできるかもしれない」
そう思えたことも、今回の挑戦で得られた大きなものの一つでした。
もちろん、今の自分が一人ですべてをできるわけではありません。
難しいことも多いですし、「自分一人ではできないかもしれない」と思うこともあります。
それでも、Web制作を使って事業を成功させたいという気持ちはあります。
だからこそ、今回のサイト制作で終わりにするのではなく、これからもWeb制作や開発に挑戦していきたいと思っています。
次は予約システムへ
接骨院サイトを一通り完成させたあと、次は予約システムの制作に取り組むことにしました。
予約システムを作ろうと思った理由はいくつかあります。
一つは、実際に使えるシステムを自分で作ってみたかったからです。
サイト制作だけでなく、実際に動くシステムまで自分で作ることができれば、プログラミングの力も身につき、いろいろなことに対する視野も広がると思いました。
また、自分の強みである柔道整復師としての経験を活かすためにも、接骨院に関わるシステムを作ってみたいと思いました。
以前働いていた職場では、予約方法が電話やLINE、外部の予約サイト、場合によってはメールなどに分かれていました。
これまで、接骨院独自の予約システムというものをあまり見たことがなかったこともあり、
「ホームページを見て、そのまま予約までできたら便利なんじゃないか」
と思うようになりました。
そして、できることが増えれば、それだけ自分ができることや、将来的な事業の可能性も広げられるのではないかとも考えました。
そのため、サイトを作って終わりではなく、ホームページと予約システムを一つにつなげることを次の目標にしました。
現在はまだ予約システムの制作途中ですが、自分で学びながら少しずつ作っています。
サイト制作だけでも難しいことがたくさんありましたが、予約システムではさらに分からないことも増えています。
それでも、今回のサイト制作で得た経験を土台にして、次は実際に動くシステムまで完成させたいと思っています。
ホームページを見て、そのまま予約までできる。
そんな形まで一つにつなげることが、今の目標です。
実際に作った接骨院サイト
今回制作した接骨院サイトはこちらです。
［サイトを見る］
最後｜この挑戦を振り返って
今回、接骨院サイトを作ってみて、改めて感じたのは、分からないことや難しいことでも、実際に挑戦してみることで見えてくるものがあるということです。
制作中は、何をすればいいのか分からなくなったり、思った通りにいかなかったりすることもありました。
AIに助けてもらうことも多く、自分の知識や技術がまだまだ足りないことも分かりました。
それでも、デザインから実装まで一通り経験して、実際に一つのサイトを形にすることができました。
振り返ってみると、
「分からなくても、難しくても、自分はこうやって挑戦していたんだな」
と思います。
これから先、また難しいことに直面したときには、今回の経験を思い出して、分からないからと諦めるのではなく、また一つずつ挑戦していきたいです。
そして、この記事を読んでくれた人にとっても、この経験が一つの事例として、何かに挑戦するきっかけになれば嬉しいです。
自分も最初から何でもできたわけではありません。
分からないことも多く、AIに助けてもらいながら、調べたり、試したり、修正したりして、少しずつ形にしていきました。
何か新しいことを始めるとき、最初から上手くできるとは限らないと思います。
それでも、実際に挑戦してみることで、できるようになることや、自分に足りないもの、新しく見えてくる可能性があるのかもしれません。
その一つひとつの経験が、少しずつ自分の人生をより良くしていくことにつながるのではないかと思っています。
自分もまだまだこれからです。
今回作った接骨院サイトを基盤に、次は予約システムの完成を目指して、これからもWeb制作や開発に挑戦していきたいと思います。
📖 次に読んでほしい記事
- 📘 なぜ私は人生を設計するようになったのか
人生OSという考え方が生まれたきっかけを書いています。 - 📘 人生OSとは何か
このブログの土台となっている「人生OS」という考え方について紹介しています。 - 📘 英語100日チャレンジ｜Day50までの成長記録
Web制作とは別の挑戦から、自分がどう成長しているのかを記録しています。
この記事を書いた人
ナッシー（山梨 颯）
柔道整復師として整形外科で働きながら、英語・プログラミング・お金・人生設計について学んでいます。
「自分の人生をより良くし、その経験を誰かの幸せにつなげていく。」
これが、私の人生のテーマです。
