はや

Webエンジニア／HP制作・業務システム開発。
夜はAIエージェントが自分のWebサービスを毎晩1つずつ拡張しています。
実装して分かったことを毎日書きます。
相互フォローします！

[はや @hayato_c12]

画面の使い方を1か所ずつ照らして教える、WebサイトのUIです。

照らす枠がボタンからボタンへすっと移るのが、作っていて気持ちよかったところ。見終わっても「もう一度見る」で最初から流せます。

Webサービスや管理画面に、最初の道案内を付けたいときの参考にどうぞ。
#Webデザイン #UIデザイン

[はや @hayato_c12]

5×5マスの部屋を1つずつ抜ける、ブラウザのダンジョンゲームができました。

自分が1歩動くと敵も1歩動くので、焦らず次の手を考えられます。狙われたマスから1歩ずれて反撃するのが気持ちいいんです。

全3部屋、1回2〜3分。何部屋目まで進めたか教えてください。
#ブラウザゲーム #個人開発

[はや @hayato_c12]

スクショを、3Dのスマホやノートの画面にはめ込む無料ツールです。

背景を「透明」にして書き出すと影ごと切り抜いたPNGになり、LPのデザインの上へそのまま重ねられます。

アプリやWebサイトの紹介画像を、何の画面か一目で伝わる形にしたいときに使えます。
#無料ツール #Webデザイン

[はや @hayato_c12]

餌と遊びの選び方で、姿が変わっていく育成ゲームです。

同じ選び方なら、いつでも同じ姿に育ちます。前回と1つだけ選び方を変えると、どこが変わるかを見比べられます。

1回は1〜2分です。どんな姿に育ったか、よかったら教えてください。
#ブラウザゲーム #個人開発

[はや @hayato_c12]

札が落ちて箱の底に積もる、キーワード一覧の見本です。

端末で動きを控える設定にしている人には、札を件数の多い順に下から積んだ、止まった並びで見せます。

会社案内やサービス紹介で、得意分野を並べるときの参考にしてみてください。
#HP制作 #Webデザイン

[はや @hayato_c12]

写真の上の番号を押すと、その場所の説明が出る部品です。

同じ説明は写真の下にも番号付きの一覧で載るので、印刷したときや読み上げ機能でも内容を読めます。

お店の中や製品の各部を、写真で案内したいページに向いています。
#HP制作 #Webデザイン

[はや @hayato_c12]

コードを貼るだけで、枠つきの見やすい画像が作れるツールを公開しました。

画像にする処理はブラウザの中だけで行い、貼ったコードを外部のサーバーへ送りません。

記事やスライドにコードを載せる方は、プロフィールのリンクからどうぞ。
#無料ツール #プログラミング

[はや @hayato_c12]

押した写真が、その位置から全画面に広がる写真ギャラリーです。

スマホなら横にスワイプ、パソコンなら左右のキーで次の写真へ送れます。Escキーで閉じると、一覧の元の場所へ戻ります。

施工事例や作品集のページに置く想定です。
#HP制作 #Webデザイン

[はや @hayato_c12]

FAQからJSON-LD・Markdown・HTMLを一度に作るツールです。

FAQの答えを直すときも、入力を1か所変えれば3つとも同じ内容になります。

サイトにFAQを載せている方は、プロフィールのリンクから試してみてください。
#無料ツール #SEO

[はや @hayato_c12]

点線の輪郭に、花火をぴったり重ねて開くゲームです。

後半は横風で玉が流れるので、筒を少し風上へずらして打ち上げます。記録は10発のずれの合計だけで、平均や順位は出しません。

2〜3分で1セット終わります。夜の休憩にどうぞ。
#ブラウザゲーム #個人開発

[はや @hayato_c12]

列の見出しで並べ替えて、条件のボタンで絞り込める仕様比較表を作りました。

条件を重ねすぎて0件になったときは、どの条件を外せば何件に戻るかをボタンで示します。

製品の多い比較ページやカタログに。動画で動きを見てみてください。
#HP制作 #Webデザイン

[はや @hayato_c12]

e-Statなどからダウンロードした統計のCSVを、そのままグラフにするツールを作りました。

表の上に並ぶ注記の行は自動で読み飛ばすので、ファイルを入れるだけで、年ごとの折れ線グラフが日本語の項目名のままできます。

記事や提案書に統計のグラフを載せたいときにどうぞ。
#無料ツール #統計

[はや @hayato_c12]

雨の夕方の喫茶店で、お客さんの忘れ物を探すゲームを作りました。

お店を指で横に回すと、棚の奥や椅子の上まで見えてきます。傘や眼鏡など5つを見つけたら次の面へ。全3面の合計タイムが記録です。

遊んでみて、何秒で見つけられたか教えてください。
#ブラウザゲーム #個人開発

[はや @hayato_c12]

集めているカードを、バインダーのどのページの何番目に入れるか、先に決めるツールを作りました。

持っていないカードは、番号と名前を書いた実寸の紙を印刷して空きポケットへ。手に入ったら入れ替えるだけで、並びがずれません。

コレクションの整理にどうぞ。
#無料ツール #カードコレクション

[はや @hayato_c12]

会社の雰囲気を写真で伝える、トップページ用のヒーローを作りました。

画面いっぱいの写真がゆっくり寄りながら、次の1枚へ切り替わります。一時停止のボタンはいつも表示しているので、止めて見ることもできます。

採用ページの入口などに。動きは動画で見てみてください。
#HP制作 #Webデザイン

[はや @hayato_c12]

今年度と前年度を、奥行きで並べて比べる立体の棒グラフの部品です。

☑手前の列が今年度、奥の列が前年度
☑問い合わせ・受注・売上を切り替えると、合計と前年比も替わる
☑棒を押すと、その月の値と前年比を下に出す

矢印キーだけでも月を移れます。
#HP制作 #Webデザイン #データ可視化

[はや @hayato_c12]

OpenAPIの仕様書から、日本語のAPIドキュメントとTypeScriptの型を書き出すツールです。

☑OpenAPI 3.x・Swagger 2.0、JSONもYAMLも
☑エンドポイント一覧・パラメータ表・レスポンス例
☑スキーマはinterfaceやtypeに変換

仕様書は端末の外へ送りません。
#OpenAPI #TypeScript #無料ツール

[はや @hayato_c12]

問い合わせフォームがあるなら、プライバシーポリシーに何を書くかをまとめました。

☑受け取る情報の使い道を、入力する前に示す
☑特定商取引法の表記とは目的も中身も違う
☑リンクはフッターとフォームの近くの2か所

他社の文章の丸写しは避けます。
#HP制作 #ホームページ制作 #中小企業

[はや @hayato_c12]

数字が消えたあと、感覚で10秒ぴったりに止めるブラウザゲームです。

☑タップで計測を始め、もう一度タップで止める
☑数字が見えるのは最初の約3秒だけ
☑止めると目標とのずれが「+0.37秒」のように出る

目標は5秒・10秒・30秒から選べます。
#ブラウザゲーム #10秒チャレンジ #個人開発

[はや @hayato_c12]

料金や受付時間を変えたのに、FAQだけ古いまま。その食い違いを探すアプリです。

☑FAQと本体サイト（最大3ページ）のURLを入れる
☑料金・時間・電話番号・日付・期間を抜き出す
☑同じ話題で値が違う箇所を一覧にする

取得した内容は保存しません。
#HP制作 #ホームページ制作 #サイト運用