![見出し画像](https://assets.st-note.com/production/uploads/images/138125352/rectangle_large_type_2_0a59c9d7414da7d0f4ae56fe66733eaa.png?width=1200)
オタク(DJ)のホームページを作った話
※記事内のスクリーンショットは、開発中のものも含まれます。
制作の経緯
ノリと勢い。
アニクラのDJのホームページ作れる機会って滅多にないし。
見た目の話
おおまかなイメージ聞き取りして、後はお任せでって感じでできあがったデザイン。
デザインについては、そこまで得意分野ではないので語れる要素があんまりない。(ので、スクリーンショットが続きます)
![](https://assets.st-note.com/production/uploads/images/137801587/picture_pc_6fedb2554c17c0376c9a1fd06a3522dc.gif)
![](https://assets.st-note.com/production/uploads/images/137801515/picture_pc_7e72f17fdea08d68e002947963f26f78.gif)
全体的に前職でできなかった事を自由にやらせてもらったって感じ。
![](https://assets.st-note.com/production/uploads/images/138131970/picture_pc_c7517f7d4e986485d00e4b631ade9a08.gif)
![](https://assets.st-note.com/production/uploads/images/138131973/picture_pc_48e9166b5ffd6dc50a23f2496c6af544.gif)
![](https://assets.st-note.com/production/uploads/images/138131938/picture_pc_b5b81b6075f25749c89b7eeade9f56cf.gif)
![](https://assets.st-note.com/production/uploads/images/138131947/picture_pc_b630b38e53c2490804c411afc2080bef.gif)
見出しやボタン、カーソルのアニメーションもついでに貼っとこ。
![](https://assets.st-note.com/production/uploads/images/137801539/picture_pc_02835edceae3ba558d855fdc71d7bdf8.gif)
![](https://assets.st-note.com/production/uploads/images/137801496/picture_pc_0d88bfbfdc2f7dd904fbf5b215536536.gif)
機能の話
スケジュール登録機能 | 機能の話
![](https://assets.st-note.com/img/1713513552996-DZmrs2ozVP.png?width=1200)
出演情報を投稿できる機能をオリジナルで作成。
入力項目は
・イベント日時
・イベント名
・URL
それ以外は通常のブログと同様。
会場情報も別で登録できるようにしてある。
![](https://assets.st-note.com/img/1713779097888-swqR7d96JA.png?width=1200)
イベントへのリンクが地味だとの事なので、何かしら改善しようかなってしてる。
![](https://assets.st-note.com/img/1713777595404-HYE4W6mTeu.png?width=1200)
DJイベント特有のケースというか、日付を跨ぐパターンの日時の登録方法は結構迷った。今も迷ってる。
日付を別にするか、25時のような表記にするか。
結局後者を採用して、自動的に時間が25~30時の表記になるような入力フォームを作ってみた。
![](https://assets.st-note.com/img/1713513419977-DfLujKok2E.png?width=1200)
会場情報は投稿とは独立させてある。
毎回入力するのも面倒だし、一度登録すればチェックボックスにチェック入れるだけでOK。
![](https://assets.st-note.com/img/1713778523387-LhT2wVM6ls.png)
![](https://assets.st-note.com/img/1713778596990-81oy0ceyzu.png?width=1200)
ページ編集について | 機能の話
![](https://assets.st-note.com/img/1713772157476-xpNucF8tPR.png?width=1200)
![](https://assets.st-note.com/production/uploads/images/138127635/picture_pc_818f5a5c804ceee62f201108a85e2306.gif?width=1200)
基本的にはHTMLやCSS諸々でページを書いているので、
納品後に「ここのテキスト変更になった」って場合、自分書き換えたりができない。
変更する場合は
作った人に連絡して、修正お願いして、内容によっては有償対応で~、納期どれくらいで~
みたいな流れになるし、一朝一夕でできなかったりするわけで。
完成後に文言のチェックをお願いしたり、その際に変更などの対応をするのもだけど、
そもそも変更が発生しそうな要素に関してはできるだけ任意で編集ができるような形で納品するようにしている。
もちろん、そういった機能を逐一作成していると制作工数もどんどん増えるし、何でもできるわけではないので何事も要相談ではある…。
~ここから脱線 前職の話~
実際、世の中のホームページはW○Xみたいにドラッグ&ドロップで作れるものだって思ってる人も結構な割合でいる。し、そう思っている営業マンもいた。とてもつらい(説得するのが。)
社内で運用するサイトも、あまりにも修正依頼が何度も来るからミーティングの上で編集機能を付けたら
以降、新規コンテンツを作る度に「編集はこっちでやるので安心してください😁」って言われるようになった。
その編集機能作るのはワイだが??
何度か説明はしていたけど、デフォで編集できる、片手間で実装しているものだと思ってたらしい。
手は尽くしたが色々伝わらなさすぎて泣いた(こなみ)
あの頃のうさんくさい上司、元気にしてるかな。。。
note 自動表示 | 機能の話
![](https://assets.st-note.com/production/uploads/images/137803306/picture_pc_80eca7b1add5a53c552e530c9a1d0db1.gif)
note の投稿を取得して 記事の抜粋&リンクを出してくれる機能。
作ってみたばかりなので粗があるやも。
原則として、外部サービスと連携が必要な機能は作らないようにしてる。
サービス元の仕様変更等にずっと対応し続けられる訳でもないし、私自身が個人で対応しているのも含めて目に見えて限界があるのであくまでおまけ……😂
![](https://assets.st-note.com/img/1713770811830-R20XFQJvGE.png?width=1200)
MIXCLOUD 埋め込み表示(仮) | 機能の話
![](https://assets.st-note.com/img/1713768861810-D9agcM4SjR.png?width=1200)
こっちは自動表示ではないけれど、MIXCLOUDの投稿を登録できるような機能を作ってある。
読み込みの遅さとか課題が色々あるので(仮)って感じ。今後も要改善かな〜。
おまけ
よっぽど見られることはないけど、404ページも可愛く作ってあるよ。
![](https://assets.st-note.com/img/1713515897020-p9MuucxOdm.png?width=1200)
おしまい
この記事が気に入ったらサポートをしてみませんか?