S-studio2ロゴ
このエントリーをはてなブックマークに追加

これまでのサイトデザインをご紹介します

「S-studio2」のウェブデザインの歴史です。

当サイトは企画から、デザイン・構築・更新・管理まで、すべて管理人の手作業で行っております。
完全に独学のため、その段階でできる事を精一杯盛り込んだ習作の歴史ともいえます。
ここではサイト開設当初からの歴代のページデザインを掲載いたしました。

これからもS-studio2は進化を続けます。今後の活動にもご期待ください。

初代デザイン(Site Design Revision : 1.00)

採用期間:2001-06-17~2003-08-06

初代S-studio2サイト開設時の初代デザインです。2001年6月17日開設。
すべてはここから始まりました。

不特定多数に見てもらうことを想定したサイトとしては実質自分で初めて作ったホームページで、拙いなりにも一生懸命作ってました。頑張ってました。当時のロゴは現在までサイト内に断片的に残っています。当時は更新履歴の背景に自分で撮影した写真を使用していました。更新の効率性も何も考えていない構造で、今見ると微笑ましいというか、懐かしいですね。

とはいえ、この初代が無ければ今のサイトも技術も存在しないわけで、とても大事にしている初心です。この初代の企画の段階で現在に至るまでのほぼ全てのコンテンツを含んでおり、またサイト構造もほとんど変化していないことからも開設の段階で相当に検討を重ねてサイトを立ち上げたことが窺えます。

この当時から自前のウェブスペース内でサイト構成のすべてを自己完結することにこだわっています。現在でもブログパーツなど一部例外はありますが、基本的に移転やサービス提供の終了などの影響を受けやすい外部サイトのレンタルページなどはなるべく採用せず、自分の手ですべてを管理できるように自サイト内で完結できるような構成にしています。

また、デザインという点で言えば、当サイトは開設以来一貫して「長期の使用に耐えるデザイン」をテーマに取り組んでおり、飽きのこないデザインを目指しています。ユーザビリティを損なうような頻繁なリニューアルをしないよう、綿密に計画してデザインに取り組んでいます。

なお、2代目の間に1.5代目と言うべきマイナーリニューアルがありますが、これは基本デザインは変わらず、ロゴデザインを変更したり、季節で写真や壁紙を変えたり、戴いたイラストなどを掲載するようになったものでした。

2代目デザイン(Site Design Revision : 2.00)

採用期間:2003-08-07~2004-07-04

2代目S-studio2ブロードバンド普及に伴ってその流れに乗るべく、画像を主体としたリッチコンテンツを標榜したデザイン。

一枚絵をパスで切ったり、サイトのイメージを意識してデザインを真剣に考え始めたのもこの頃からです。デザイン自体は好評を頂いたものの、当時のサーバーの重さから表示にありえない時間がかかってしまうという、ウェブデザイン以外の部分で問題を抱え、比較的短命なデザインに終わってしまった不遇の作品でもあります。

初代デザインから「白と青」を配色するというカラーイメージの方向性はその後の第3代目のデザインまで引き継がれていきますが、この段階で青空に白い雲、というイメージフォトを使用するようになりました。それにあわせて各ページも統一感のあるデザインに変更。その後も空と雲というモチーフは第3代目デザイン、2010年まで全体の統一コンセプトとして使われ続けることになります。

3代目デザイン(Site Design Revision : 3.00)

採用期間:2004-07-05~2010-06-16

3代目S-studio22代目のデザインで問題だったページの重さを解決するべく、徹底的に軽量化を推し進めたデザインです。

結果として2代目と比較して75%減の大幅なデータ軽量化に成功しています。白を基調としたシンプルなデザインに、サイト活動のブランドイメージを意識した、短命に終わらない、飽きないデザインを目指しました。これまでの運営の中でこのリビジョンが一番長い間使用されていたので、当サイトと言えばこのデザインをイメージされる方も多いのではないでしょうか。

自分としてもある程度満足のいくデザインになったと思っていますが、その弊害としてコンパクトにまとまりすぎたために、文字が小さくて見づらい、コンテンツの階層構造が把握しにくいといったご意見もいただくことに。

また、トップページこそリニューアルを行ったものの、サイト内のコンテンツについては若干の修正を行うに留まり、多くのコンテンツをそのまま引き継ぐ形になりました。そのため、そのほかのページとのデザイン上の整合性がとれず、更新を行いながら少しずつすり合わせは行いましたが、結局最後まで十分な統一感は実現できませんでした。テーブルレイアウトをメインに使用した最後のデザインになります。

4代目デザイン(Site Design Revision : 4.00)

採用期間:2010-06-17~2014-09-30

4代目S-studio23代目までの課題だった見やすさ使いやすさなどを改善し、さらにブランドイメージを高めることを目標にリニューアル。

WEB業界の流れであるXHTML+CSSに対応し、さらに独自ドメインの取得、CGI(PHP・Perl)、SSI、SQL、JavaScript、Ajax、XML、Flash、RSSなど、当時持ちうる知識と技術を最大限に駆使してユーザビリティを高めた、大幅なリニューアルとなりました。デザインはこれまでと変わって、黒を基調としたものに。ソリッドなスタジオサイトをイメージして創造力と知的さを兼ね合わせた、ブランドイメージを高めるデザインを目指しました。

また、WEB標準に準拠させるだけでなく、サイト更新の負担軽減と言う目的もあり、動的にRSSを利用・生成するギミックを仕込むなど、全体的に更新がスムーズに行えるようになっています。

なお、このリニューアルで初めてトップページ以外のコンテンツとのデザインの共通化・整合化、整理も行うという、ブラッシュアップも併せて行い、サイト開設以来の大規模なフルリニューアルとなりました。

このリニューアルからサイト制作環境を変更しており、またページに使用している画像などの各素材についても自分でデザインを起こす作業から行っています。これらコーディングとデザインを両立するため、そしてこれまでのコンテンツをほぼすべて引き継いだことで膨大な数のページを刷新することになったために、完成までに1年以上の歳月を要しています。

5代目デザイン(Site Design Revision : 5.00)

採用期間:2014-10-01~

現行のデザインです。サイト運営13年目にして初のサーバー移転を行い、現在主流の画面解像度に見合ったサイズなどを意識したデザインへと生まれ変わりました。

過剰な配色やデコレーションを廃し、ソース・ビジュアル共に徹底的にシンプルさを意識したデザインにより、サーバー移転による転送速度向上も相まって体感速度は劇的に改善されています。また、新たにサイドカラムによるメニュー表示やパンくずリストも実装し、よりアクセシブルでモダンなレイアウトになりました。

コンテンツそのものも、レガシーなものについては継承を見直し、音楽サイトとして特化したものを残す方向性で企画されており、不要なものは廃しつつ、これまでご来訪いただいてきたユーザーにも違和感を与えないよう注意してデザインされました。さらに4代目で概ね出来上がっていたものの、まだ一部残されていたXHTML+CSSの構造分離の課題ついても今回のリビジョンでほぼ完全に移行が完了し、WEB標準準拠と共にメンテナンス性も向上しました。これに留まらず今後も進化は続きます。