NEXUTHAのHP、実は全部自分で作りました｜バージョン435までの迷走と発見

「あなたのサイトどこで見れるの？」

名刺交換した相手にそう聞かれた時、即答できませんでした。Instagramはやってるけど、自分たちの「本拠地」と呼べる場所がない。作らなきゃ——そう思ったのが、このウェブサイトの制作のきっかけです。

ただ、最初からうまくいったわけじゃないです。むしろ失敗だらけで、何度も「もういいや」って投げ出したくなりました。それでも気づけばバージョン435。あれ、結構長いことやってるな...って。今回はその全部を、隠さずに話そうと思います。

最初のサイトは、正直ひどかった

初めて作ったのは、白い背景に黒い文字。市販のテンプレートみたいな、誰が作っても同じになりそうなサイトでした。HTMLもCSSもちゃんと書けなかったので、色んなツールを使い回して、なんとか形にはしたんですけど、見返すと「なんか安っぽいな」って自分でもわかりました。

それでも公開してみたんです。そしたら何も起きなかった。アクセスもないし、問い合わせもない。当たり前っちゃ当たり前ですけど、作っただけでは誰も来てくれないんですよね。「作れば終わり」じゃなくて、「見てもらうための努力」が必要だって、しみじみ実感しました。

で、これじゃダメだって思って、デザインの本とか見て、色んなサイトを参考にして、毎日少しずつ変え始めたんです。1pxずらしたり、フォント変えたり、ボタンの色変えたり。誰も気づかないような微調整を、ひたすら繰り返してました。気づけば435バージョン。本当に毎日何かしら変えてました。

色選びで3週間試行錯誤した話——だからこそシミュレーターが生まれた

レーザー加工って、何色のイメージある？私は最初から「黒と金」しか頭になかったんです。黒は金属の冷たさ。金はレーザーで焼けた跡の色——ステンレスが焼けて黒くなった部分が、光に当たると微妙に金色に見えるんです。

ただ、「黒×金」って言っても「どの黒」「どの金」かで、めちゃくちゃ迷いました。濃すぎると暗くて不気味になるし、薄すぎるとチープに見える。金も黄ばんでるとダサいし、赤みが強すぎると高級感がない。色の組み合わせを試しまくって、かなり骨が折れました。

しかも自分で「青と紫は絶対使わない」という縛りを課してしまって、選択肢がさらに狭まりました。理由は「光が当たった時に黒と金が際立つ世界観にしたい」というデザイン的な判断でした。ただ、実はレーザー加工でもCO2レーザーの出力を変えれば、色の変化を出せる機種もあるんです。黒から茶色、さらに薄いベージュ系まで調整できることも後から知って、「あ、もっと色の可能性あるのか」と勉強になりました。でもサイトの色調としては黒×金の路線で正解だったと思ってます。

結局、背景は黒に近いダークグレイ、アクセントはレーザー焼けに近い琥珀色に落ち着きました。でも、今見ても「ここもっと暗くてもよかったかな」って思うところがあります。完璧なんてないんですよね。

でも、この「色の試行錯誤」があったからこそ、「自分で試してみたい」ってお客様の気持ちがすごくわかるようになったんです。だから刻印シミュレーターを作ったんです——私が3週間かけた色選びを、お客様は3分で試せるように。

スマホで「刻印シミュレーター」が壊れた事件

刻印シミュレーター、PCでは動いたんです。自分で試して「よっしゃ完成！」って思ったんですけど、スマホで開いた瞬間、文字が画面からはみ出して、ボタンが押せなくなって、画面が真っ白になって...最悪でした。

「スマホ対応」って、聞こえはいいですけど実際めちゃくちゃ大変です。PCで完璧に見えてるレイアウトが、小さい画面に縮小されるだけじゃなくて、タッチ操作とマウス操作は全然違うんです。ピンチズームの判定がうまくいかなかったり、スクロールとドラッグが被って操作がおかしくなったり。

特に悲惨だったのが、iPhone Safariでのフォント読み込み問題。フォントが完全に読み込まれる前にシミュレーターが描画しようとして、文字が真っ白になったり、デフォルトのゴシック体で描画されたり。お客様に「文字消えてるよ」って言われる前に自分で気づいて、フォント読み込み完了を待ってから描画する仕組みを入れるまで、何度も「あれ、また消えた...」ってなりました。

あと、iPhoneでカメラ撮影してアップロードした画像が、勝手に横向きになって表示される問題もハマりました。写真を縦向きに撮ったのに、シミュレーター上では横向きになって、お客様が「なんで？」ってなる。EXIFデータを解析して回転を補正する処理を、自前で実装するまでにかなりの時間を費やしました。本当にiOS Safariは鬼門です。

「このデザインイケてる！」と思ったら誰も見てくれなかった話——自分の好みじゃなくて、使う人の気持ち

サイトにアニメーションをガンガン入れてみた時期がありました。要素がふわっと現れて、文字が次々に表示されて、スクロールするたびに何かが動く——自分で見てて「かっこいい！」ってなったんです。

でも、スマホで開いたお客様から「重い」「動きが多くて落ち着かない」ってフィードバックをもらいました。しかもアニメーション入れすぎたせいで、ページの読み込みが遅くなって、検索順位も下がった気がします（確証はないですが）。

結局、派手なアニメーションはほとんど削りました。「見た目より使いやすさ」って、言葉では簡単ですけど実際に実感するまでに時間がかかりました。今は最小限のアニメーションに絞って、読みやすさと速さを優先してます。自分の好みを押し付けるんじゃなくて、使う人の気持ちを考える——これが一番難しい。

料金ページの失敗から——情報を減らすことで伝わるようになった

料金ページ、最初は「できるだけ詳しく」って思って、表をいっぱい作って、細かいオプション料金まで全部書きました。結果、ページが長くなりすぎて、「値段がわかりにくい」って言われました。多すぎる情報って、読む気を失せさせるんですよね。

それで一から作り直して、最初に「ざっくり相場」を出して、次に「具体例」を見せて、最後に「詳細は相談で」という流れに変えました。情報を減らすことで、逆に伝わるようになった——これも学びでした。

あと、料金を「安く見せよう」と思って、小さい単位で表示した時期もありました。1枚500円、って書くと安く見えるじゃないですか。でもお客様から「合計いくら？」って聞かれて、都度計算するのも面倒だし、なんかズルい気がして結局やめました。素直に「10枚セットで5,000円」みたいに書く方が、後々トラブルもないですし相談もスムーズでした。

AIアシスタント（ON:μ）導入——最初はガチャだった

サイトにAIチャットを置いたのは、夜中の問い合わせ対応が大変だったからです。でも最初のON:μ、全然ちがうこと答えてました。「メタル名刺いくら？」って聞いたら「アクリルの加工は300円からです」みたいな。あんた何言ってんの...ってなりました。

答えを「正確に」するために、FAQの内容をガンガン学習させて、想定質問を100個以上作って、それでもなお「この答え違うよ」って修正を繰り返しました。今はだいぶマシになったと思うんですけど、完璧ではないです。時々変なこと言います。「AIは便利」だけど「AIは間違える」——この両方を受け入れないといけないです。

でも、導入してから夜中の「軽い問い合わせ」が減りました。朝起きて「30件の新規問い合わせ」が来てた時は「え、全部対応しなきゃ」ってパニックになってたんですが、今は「うちのAIが答えてくれたんだ」ってのが何件かあって、それはそれで嬉しい。AIに仕事奪われた...？いや、AIと分担してる感じです。

SEO対策——「上位表示されたい」だけじゃダメだった

Googleで上位表示されたくて、色んなSEOテクニックを試しました。キーワードをタイトルに入れる、構造化データを埋め込む、内部リンクを張り巡らせる——やったことは全部「正しい」ことだったんですが、結果はすぐ出ませんでした。

3ヶ月くらい何も変化なくて、「SEOって詐欺じゃん」って思ってました。でも4ヶ月目くらいから、ぽつぽつ検索からのアクセスが増え始めて、半年後には「名古屋 レーザー彫刻」で1ページ目に表示されるようになりました。SEOは「続ける」ことが前提で、すぐ結果出ないのが普通なんですね。

ただ、検索順位上がっても、サイトがひどかったら問い合わせには繋がらない。SEOは入口を作るだけで、中身は別の問題——この順番を理解するのに時間がかかりました。検索から来てくれた人が「このサイト、怪しいな」って思ったら意味ないんです。

法規制ページの追加——「真面目にやってます」アピール

特定商取引法ページ、プライバシーポリシー、利用規約——これらを追加したのは、あるお客様から「ちゃんとした会社ですか？」って聞かれたのがきっかけでした。サイトを見てくれてはいたんですが、「怪しいのかな」って思われてたんですね。

それで真剣に法規制ページを書きました。でも法律用語をそのまま載せると、読めないんです。「利用規約」って書いてあるだけで「面倒くさそう」って思われる。なので、できるだけやわらかい言葉で「どういう取引をしますか」「個人情報はどう使いますか」って説明するようにしました。

これが意外と効いて、お客様から「ちゃんと説明してくれてのが安心しました」って言われるようになりました。法律ページって「義務だから載せる」だけじゃなくて、「信頼の材料」になるんだって気づきました。ただ、スマホで長文が読めるようになるまで、改行位置で何度も試行錯誤したのは内緒です。break-allで文字が1文字ずつ折れるとか地獄でした。

実は、このサイトは「戦略的自家製」です

ここまで読んでくれた人に、正直にお伝えしたいことがあります——このウェブサイト、外注も依頼もせず、私たち夫婦二人で作りました。しかも、私はエンジニアでもデザイナーでもないし、コードなんてまともに書けません。

じゃあどうやって作ったのかって？AIを「道具」として使いながら、一つずつ積み上げたんです。「こういう画面が欲しい」「このボタン押したらこう動いてほしい」って言葉で伝えて、AIがコードを書いてくれて、それを貼り付けて動かして、動かなかったら「なんで動かないの？」って聞いて、直してもらって——そんな感じで、毎日何かしらを変え続けて、気づけば435バージョンになってました。

最初はHTMLもCSSも何もわからなかったし、Reactなんて聞いたことすらなかったんです。でも「自分のサイトくらい自分で作りたい」って思って、とにかく手を動かしました。AIに聞いて、出てきたコードをコピペして、壊れたらまた聞いて、直して——この繰り返しです。

で、ある知人にこのサイトを見せたら、「これ、外注したらいくらぐらいするの？」って聞かれて、色んな見積もりを調べてもらったんです。そしたら220万円から、機能が増えると500万円以上にもなるって言われて、びっくりしました。

でも私は「だからタダで作った」って自慢するつもりはありません。むしろ逆です——あえてその外注コストを省いて、彫刻の品質向上や、お客様への還元に回せるようにしたんです。職人が道具を自分で手入れするのと同じで、ウェブサイトという「デジタルの工房」も自分の手で作ることで、お客様への応答スピードが格段に上がったんです。

「AIがコード書いてくれたから楽勝」——絶対に違います。AIは便利だけど、間違えるんです。メタル名刺の値段聞いたらアクリルの値段を答えたり、スマホでフォントが消えたり、画像が横向きになったり...「なんで？」の連続でした。あれが執念と呼べるなら、かなりの執念です（笑）。

もちろん、エンジニアの方から見たら「コードがきれいじゃない」ところもあるでしょう。でも、お客様が見るのは「きれいなコード」じゃなくて「使いやすいサイト」です。AIと協力して、私が「何を作るか」「お客様にとってどう使いやすいか」の判断をして、AIが技術的な部分を手伝って——この形が、今の私たちにとって最適解でした。

「React + TypeScript + Tailwind CSS」って聞こえはいいですけど、実際のところ、私が書いたわけじゃなくて、AIが書いてくれたものを組み合わせて、壊れたら「なんで？」って聞いて直してもらいました。でも、できたんです。それが現実です。

ウェブサイトは、作って終わりじゃない

435バージョンやってきて思ったこと——ウェブサイトって「完成」がないんです。今日思いついたアイデアを明日実装して、お客様の反応を見て、また変える。これがずっと続きます。

だからこそ、自分で作れるってのは大きいです。「外注頼んで待つ」じゃなくて、「すぐ試して、すぐ直す」ができる。自分の工房の機械を自分で整備する感覚に近いですね。AIがあるからこそ、技術的な壁が低くなって、自分のアイデアをすぐ形にできる。それがバージョン436、437、438...と続いてく理由です。

デザインの本質は「信頼感を視覚化すること」だと思います。黒×金の配色が高級感を演出するのも、タイポグラフィの詰めがプロ意識を伝えるのも、全部「この人たちに任せても大丈夫」という安心感を生むため。かっこいいサイトを作りたいんじゃなくて、安心して問い合わせできるサイトを作りたかったんです。

あと「スピードより正確さ」「見た目より使いやすさ」——これが自分の中でだんだん明確になってきました。新しいエフェクト入れるより、スマホでの読みやすさを上げる方がずっと重要。派手な動きは最初だけ効いて、その後は邪魔。読みやすさは毎回効きます。

まだまだ進化し続ける——次は3Dビューアー

435バージョンで満足してません。次は「3D製品ビューアー」を入れたいです。名刺やプレートが立体としてどう見えるか——それがわかったら、もっとイメージが膨らむと思うんです。でも正直、まだ技術的に不安定で、スマホで重くなりそうで怖いです。

多言語対応も視野に入れてます。名古屋だけじゃなくて、全国・全世界に届けたい。ただ翻訳するだけじゃなくて、日本語の「字詰めの美しさ」が英語でも再現できるか——これも未知の領域です。

あと、もっとブログ記事を書きたいです。刻印シミュレーターの裏話とか、素材ガイドとか、お客様の声とか。コンテンツが増えると、検索からの流入も増えて、また新しい出会いが生まれる。コンテンツこそが、ウェブサイトの「生き物」としての生命力です。

ウェブサイトは生き物です。作って終わりじゃなくて、使ってくれる人の声を聞きながら、ずっと成長していくもの。NEXUTHAのサイトも、これからも進化し続けます。ぜひ時々覗きに来てください。

NEXUTHAのウェブサイトは こちら 。