ホームページをリニューアルするにあたった試行錯誤

予定していた映画の記事が諸般の事情によりまだ公開できないので、先日ホームページを作り直した件についてちょっと書こうと思います。
技術的な部分は書いてもあんまり面白くないのでデザイン的な部分が多いです。
まああんまりデザインのことは分かんないですけど。

初代サイト

色々活動してる時の個人サークルの名を冠して「多摩川沖300m海底」というサイト名で昨年11月ごろに運営を始めたような気がします。
推定70億人のめでたいファンの方なら今までのサイトも一日一回はアクセスしてたと思いますが、一応どんなサイトだったか説明します。

• 実際の平均アクセス数は一日2人以下でした

いままでのサイトはこんな感じでした。

いわゆるパララックスエフェクトをやってみたいと思って作ってました。
下にスクロールするとこんな感じで別なコンテンツが出てきます。
あと右のメニューみたいなのを押すとぬるっとスクロールします。

メニューは上からトップロゴの画面、サイトについてや更新履歴、製作物紹介、お問い合わせフォーム、コピーライトです。
更新履歴がでかいですね。

開いた瞬間真っ赤な画面にフリーメイソンのパクリみたいなロゴが出るのは個人的に気に入ってたのですが、いくつか問題がありました。
まず、スクロールエフェクトがブラウザによってはおかしくなるっていう致命的な問題があります。
Appleご自慢のブラウザ、Safariだと下みたいになってしまいます。

他には、エフェクト付けすぎて読み込み時に一瞬画面が乱れる、メニューを付けたらフリーメイソン画面が微妙にダサくなったみたいな細かいのがいくつかありました。

• あとは横のメニューが奇数じゃないとあんまりかっこよくないナ〜って思って考えた結果コピーライトを入れたとか
• 紫背景で文字入れるとどう頑張ってもダサくなるとか
• WORKSの画像クリックするとLightBox的ポップアップで説明が出てくるのが前時代的とか
• この記事書いてて初めてこんなに不満あったのかって気付いた

特にデザイン系はこれからコンテンツを増やしていった際にどんどん崩れていきそうなので、ならばいっそ作り直そうと思い立ったのが退院後すぐぐらいです。

• 詳しくは前の記事を見てね

ボツ案

デザインを考えるにあたり、気をつけたのは以下の点です。

1. なるべく1ページに全部の情報を載せたい
2. ブラウザによって差異をなるべく無くしたい
3. コンテンツを増やしたときにごちゃごちゃさせたくない
4. フリーメイソンロゴを効果的に使いたい

1. は初代のサイトも気をつけていました。
特に大した情報もないので1ページにまとめた方が導線が見えやすいかなって考えてました。
メインコンテンツを見たくてリンクを飛んでいったら管理人のプロフィールにたどり着いたことがあってキレちゃったことがあるのでその経験からですね。
2. と3. は上の反省点を踏まえてます。
4. は完全に自己満足です。

• ちなみにフリーメイソンロゴの三角形の中の線は地図の多摩川をなぞったものです
• めでたい豆知識

で、1週間ぐらいかけて作ったページがこちらになります。

各メニューをクリックするとコンテンツが表れます。
色は色相環から持ってきました。

上で示した気をつけるべき点は全部守れてます。
しかも前のサイトと比べてスクロールも無くなってるので動線はより分かりやすくなってます。
なんだったらこのままスマホ対応できてるので保守も非常に楽です。
いかがでしょうか。

• 僕はここまで作ってやっとダサいと気づきました
• 2000年代前半みたいなノスタルジーは感じるけど

新サイト完成！

というわけで更に1週間を費やすなど紆余曲折を経てようやく完成しました！
完成品はどうなっているか、皆さんの目でお確かめください！

http://lprz.xyz/

• というわけで、長々と読んでいただいたのは新しいサイトへのアクセス誘導でした
• あとはGIF動画を作るときに使ったLICEcapというアプリのレビューでした
• 実はまだ全然完成してないのでスマホ対応とかはそのうちやります