本日、Neural Design Lab.の公式HPをリニューアルしました。
今回のリニューアルで、私は一つの決断をしました。それは、WordPressなどの既存テンプレートを一切使わず、ゼロから作るということです。
「なぜ、わざわざ手間をかけて作り直したのか？」
それは、私たちが中小企業の皆様にDXを提案する立場だからです。
自分たちのHPが、使いにくい・遅い・古臭いでは、説得力がありません。「現場を知る、明日を変える」という理念を体現するために、見えない裏側のコードにも、徹底してこだわりました。
表示速度を最優先に、スマホで見やすく、使いやすく
HPを開いた瞬間、「遅い」と感じたら、お客様は離れていきます。今回は、最新の技術を使って、ページの読み込み速度を極限まで速くしました。結果、スマホでも1秒以内に表示されるようになりました。
今や、HPを見る人の8割がスマホです。私は、スマホでメニューを開いた時の「気持ち良さ」にこだわりました。右からスッと出てくるメニュー。これは、アプリのような操作感を目指したものです。
実は、この「スッと出てくる」動きを実現するのに、かなり苦労しました。スマホの画面で、複数の要素が重なると、タップが効かなくなることがあります。
何度も調整を重ね、ようやく「指に吸い付くような心地よい動き」を実現できました。
デザインの透明感
HPのヘッダーやメニューは、すりガラスのような透明感を持たせています。これは、Neural Design Lab.の「透明性」や「先進性」を表現するためです。
ただし、透明すぎると文字が読めなくなり、逆に不透明だと重たく見えます。リリース直前まで、この透明度を0.01単位で調整し続けました。
スマホでメニューを開いた時、ぜひその透け感を確認してみてください。
なぜ、ここまでこだわったのか？
「たかがHP、されどHP」
一つのボタンの動き、一つの背景の透明度にも、「なぜそうしたのか?」という理由があります。
今回のHP制作で得た知見は、そのままお客様へのご提案に還元します。見えない部分にこそ、魂を込める。技術とデザインの両輪で、お客様の課題解決に伴走していく。
そんな私たちの姿勢を、新しいHPから感じ取っていただければ幸いです。
参考：技術スタック React + Vite + Tailwind CSS（Build by Replit）
コメント