事務所サイトのリニューアル
補修を繰り返しごまかしごまかし運用してた事務所用サイトtenhp.comも13年も経ってるのでリニューアルいたしました。
https://tenhp.com/制作当時はそれほどスマホも浸透しておらず、スマホの前身であるWindows mobileなどが不人気だったことから「日本ではスマホよりもモバイルゲーム機でネットを見る時代が来るのでは？」と謎な発想でモバイルゲーム機でも見れる横幅で作成してましたのですが、一般的なサイズにしました。
公式サイトではあるので奇抜にはしたくないですが技術的デモンストレーションという面もありますので要所で変態的なコーディングになっています。
前回謎に一番力を入れてた「制作所について」の名前の部分は元々canvasにJavascriptでゴリゴリに描画していました、今回、デザインはそのままにCSSで動かしています。
ちなみにコレは大昔にパソコンショップで展示してたCD-ROM（木原庸佐さん？）の動きをパクってます。（うろ覚えですが）
トップページのメインビジュアルはクリップされた背景が幅100％になって影を落としています。あまり無いレイアウトになってるかと思います。
ページ遷移のアニメーションはよく使われるのが上に絵や色を被せて一端見えなくするのが一般的ですがそれだとイージーなのでディゾルブしてます。
テキストはChatGPTさんの協力のもと作成しております。
下の方にあるお問い合わせボタンはホバー時にグラデーションを回転させています。（線が細いのでほぼ視認できませんが）
フッターの看板犬はCSSに追加されたが使い道の難しい三角関数を使って扇状に並べています。
あと余り好きでは無いのですが今カーソルに追随する円形のオブジェクトが流行ってるみたいなので付けておきました。普通に追随しても面白くないので3段階で追随する感じにしています。
他の場所も作り直してはいるのですが元々個人的に気に入ってるので基本的なデザインの方向性は残したままにしています。
Tags: CSS, JavaScript