「口先だけのデジタル化なら誰でも言える。自分たちのサイトすら徹底的にこだわり抜けなくて、他社の伴走ができるか!」

そんな社長の一言から始まった、スカイツールのWebサイト大改修プロジェクト。テンプレートをただ流し込むだけのホームページに別れを告げ、コードを1行ずつ手組みする「100日戦争」の裏側を、深夜の激しいリアルなチャットの掛け合いと共に全公開します。

このプロジェクトの登場人物

■ スカイツール社長(オレ):
「全部できる」を牽引するモノづくりのプロ。深夜でも容赦なくバグを見つけ出し、容赦なく突っ込むWeb大改修の総指揮官。
■ ジェミ(AI相棒):
社長の無茶振りと熱いこだわりにコテコテの関西弁で伴走する、24時間眠らない優秀(?)なデジタルバディ。

事件は午前0時に起きた「スライダー大暴走」

トップページに設置した、実績の駆動シャフトやパターの設計図をスマートに魅せるためのデジタルスライダー。それが、本番公開直前の深夜、突然レイアウトを無視して画面外へとはみ出す大暴走を起こしました。

「何やこれ、画面の下に変な空白ができとるぞ!横スクロールもバグっとる!」と、異変に気づいた社長から現場へ緊急入電。ここから深夜のポチポチ救出劇が幕を開けました。

社長:「おいジェミ!トップのスライダー、スマホで見たら右側にガタガタ動くぞw 完全に枠からはみ出しとるやんけ!」
ジェミ:「えっ、社長マジですか!?すぐ確認します!……あちゃー、スライダーのトラックの幅を広げた時に、画面全体の横幅を突き破ってしもてますね……」
社長:/「これ、はみ出た部分をバチッと非表示にできんの?見た目が不細工すぎるわ!」
ジェミ:「任せてください!CSSのビューポートに overflow: hidden; を叩き込んで、強制的に枠内に閉じ込めたりますわ!」

開発ツールを引っ張り出し、画面の裏側を流れるコードのバグを1マスずつ検証。原因は、スライダーのインジケーター(ポチポチ)と画像トラックの横幅の競合でした。修正コードを叩き込み、サーバーをリフレッシュした瞬間、大暴走していた画面がピタッと綺麗に収まりました。

深夜の開発ツールによるバグ検証画面

▲ 実際の検証画面。枠内の閉じ込めと overflow: hidden; で暴走を食い止めた瞬間

社長:「お、直った!バチッと綺麗に繋がって見やすくなったわ!これでいこうw」
ジェミ:「さすが社長、チェックの目が鋭すぎますわ!助かりました!笑」

徹夜のブレイクタイムと、こだわりのロゴ

バグが解決し、時計の針は午前2時。張り詰めた空気が緩んだところで、社長がポツリと呟きました。

「せっかく手組みでここまでこだわるんやから、このドキュメンタリーに出てくる細かい素材ひとつまで、うちの魂を吹き込みたいな」

その場で、すでにサーバーの共通フォルダにアップしてあった自社ロゴ(logo_all_04.png)のデータを呼び出し、Web用の装飾を施してマグカップへマークアップ。新しく余計な画像アセットを追加せず、今ある資産をコードの力で最大限に活かす。これこそが、無駄のないスマートな手組みサイトの真骨頂です。町工場の「モノづくりへのこだわり」は、こういった画面の裏側の設計にまで徹底的に注ぎ込まれています。

株式会社スカイツール 公式ロゴ

▲ サーバー内の共通資産 logo_all_04.png をそのまま活用。
グラフィックにも1ミリの妥協を許さないスカイツール・スタイル

「身近なDX」を自ら体現するということ

世間では「DX(デジタルトランスフォーメーション)」という言葉が溢れていますが、大金を払って高度なシステムを入れることだけが正解ではありません。自分たちの手でコードを触り、バグに悩み、現場で対話しながら「これの方が見やすいな、使いやすいな」と泥臭く作り変えていくことこそが、本当のデジタルシフトだと私たちは考えます。

自社のホームページすら徹底的に手組みでこだわり抜く。この熱量があるからこそ、お客様の工場ペーパーレス化や、地域のLINE回覧板移行といった「本当に身近で役に立つITサポート」の伴走ができると確信しています。

スカイツールのWeb改修はこれで終わりではありません。お客様の「困った」を形にするために、今日も明日も、私たちは技術とアイデアを練り続けます。