泣くと。

兵器擬人化一次創作と映画の感想と日常

yorui.orgの遍歴



サイトが4周年、来年には5周年になるので、旧「散りぬるを」~現「- Nacht. -」のサイトデザインの変遷を振り返ってみました。
4年間で割と改装していたので、自分はやっぱり堪え性が無いというか、なんというか……



初代「散りぬるを」
starlit 様のテンプレートを使用していた時です。私の使用していたテンプレはフレームの「#f013」ですね。
今とは違いhtml、cssに全く自信が無くて(一応触ることはできた)、フレームサイトとかこうやって作ればいいのかと勉強させてもらいました。
バナーが絶妙にダサいのがミソです。絵が下手なんだからレイアウトくらいもっと頑張って(自戒)



2代目「散りぬるを」
これ、アーカイブのファイルを見つけた途端びっくりしたんですけど、作った本人の私ですら忘れてたサイトデザイン。
テンプレートから脱却して自力でコーディングしようと躍起になっていたときですね。
色数も少なく、シンプルめのデザインで割と好きです。
でもギャラリーページは相変わらずフレーム。だってフレームレイアウト見やすいんだもの。「- Nacht. -」に改名するまで、ギャラリーはずっとフレームです。





3代目「散りぬるを」
エンターページがすごい仕組みになっていたころ。左右にマウスオーバーすると隠れてる絵が見えるんですよ。え?何これ?(困惑)
スマホ閲覧にまったく配慮せずにサイトデザインしていました。別にサイトなんかPC閲覧専用でも全然いいと思うんですけど、私自身がスマホで自分のサイトを見るのでスマホ対応からはもはや逃れられない運命なのです。でもPC専用サイトにしてワーッと派手なスクリプトとか入れてみたい気持ちもある。
opacity(透明度を変える記述)とTwitterウィジェット(タイムラインの埋め込み)を覚えたみたいです。覚えたての知識使いたくなっちゃうよね~。



4代目「散りぬるを」
なんかもう知らん(?)
いや、作ったのは私なので知らないはずはないんだけれども、このデザインも本当に見つけるまで記憶から抜け落ちてました。2代目は古いから忘れちゃってたのかなと思っていましたが、まさかここまで記憶がないとは……。
おそらくブロック要素の角を丸くすることを覚えたので上部メニューをそうしたんだと思います。「スマホ閲覧を意識してタップしやすくしたんだっけ?」と思いましたが、文字にしかリンクがかかっていなかったので別にスマホ閲覧に対する配慮とかじゃなかったみたいです。display:block;使ってどうぞ。


先代「- Nacht. -」
2016年2月にリニューアル+サイト名が変わりました。
レスポンシブにしてスマホにも対応。ただしbootstrapのテンプレを改変しているので私の能力ではない。
ギャラリーページもこのときからCMS(WordPress)を導入して更新がすごく楽になりました。ブログ感覚でギャラリー更新できるんだもんなぁ。
FTPを立ち上げたくない一心で更新履歴もTwitterウィジェットを使うようになったり、自分の中では割と革新的な改装だったと思います。
背景一杯にイラストを敷いたりして、結構お気に入りでした。


現在「- Nacht. -」
先述のとおりbootstrapのテンプレートを使用していたんですが、環境によってはテンプレが重すぎてなかなか表示されないとのことだったので、トップページを最低限の情報量にしました。そしてこれはちゃんと自分でコーディングできました。このデザインなら難しいことしなくていいからね。
これが2016年の7月なので、先代は半年持たずにお蔵入りになったんですね。しかし、今のこの状態が1年以上続いているので、ようやく私のサイトも安定したのかなぁと思います。ギャラリーページはテンプレを変えて若干テコ入れしましたが。
初代から考えるとだいぶコーディング能力も成長していますが、根幹はやっぱりhtmlとcssなので、もっとsassとかscssとか使っていきたいですね。html5も勉強していかなければ。



たびたび姿を変えてきた私のサイトですが、いかがでしたでしょうか。「この頃から知ってる!」とか「この頃のサイト知らない!」とか面白がっていただければ幸いです。