ホームページを一新する話
はじめまして。詩哭と申します。
私事ではありますが、最近ホームページを一新しました。
簡単に言えば作り直し、ですね。
かれこれ約5年、ホームページと触れ合ってきました。
その5年間で私が思ったことやホームページを作る際に考えたことなどを完結に書き留めようと思います。
これからホームページを作りたいと思っている方の参考になれば嬉しく思います。
一新するに至った経緯
一度前までのホームページを見てもらいたいと思います。
こちらは、イラストレーターの一条レイさんのホームページを見て「良いな」と思い制作をしました。
完全に真似するのではなく、配置などを参考にさせていただきました。
デザインは気に入っていたんですが、致命的な欠点があります。
こだわりがないということです。
例えば企業のホームページを見るとどれもアニメーションがありますよね。
このホームページはアニメーションはありません。
5年もサイトを作ってる身として、こんなシンプルで簡単なサイトでは物足りなく満足ができません。
何より、真似をしたということもあり、自分を代表するホームページとしては適切ではないと考えました。
ついでにポートフォリオとして兼用できたらなとも思いました
最初に行ったこと
サイトを作る上で最初に行うこととはなんでしょうか？
最初にサイトをつくる目的を考える人もいれば、内部のことを考える人もいるでしょう。
私はというと、デザインから考え始めました。
かなり雑ですが、思うままにデザインをしてみました。
ホームページというのは、自分を紹介するためのサイトだと私は考えています。つまり自己紹介ですね。
自己紹介といえばなんだろうと考えていきました。
私は小学生の時から名刺というものに興味を持っていました。
あの小さな紙に、自分のことが載っているかっこよさやスタイリッシュさが私の憧れだったのでしょう。
そこで、「ホームページを名刺みたいな見た目にしたらいいんじゃないか？」と思い至りました。
名刺には表と裏がありますから、表には最低限の情報を載せ、
裏には自己紹介や作ったものなど、色々載せればいいじゃないか。
実際の名刺は限られたスペースですが、あくまでサイトですので、無限にあるスペースを有効活用していきましょう。
とりあえず作ってみる
思い立ったが吉日、早速プログラミングにて考えを形にしていきます。
ちょうどこのときに改名を決意したので当初のデザインとは異なっていますが、とりあえずで完成したものがこちらです。
経緯でもお話したように、アニメーションをやってみたかったので
簡単なフェードや、マウスをかざしたときにテキストが現れるなど、とにかくこだわってみました。
構造自体はシンプルで、主にCSSで四角を作ったり、テキストを調整したりなどですね。JavaScriptを全く使わずに実装をすることにこだわりを持っているのですべてHTMLとCSSのみで制作をしています
重大な欠点2つ
1つ目は、とにかく重いことです。
アニメーションもあるので多少重くなるのは仕方ないですが、それにしては重すぎます。
原因は簡単で、すべての要素を一つのファイルにまとめたことです。
この時点でHTMLは110行、CSSは480行あります。
一つのページを表示するのにこれだけ使ってしまっては、そりゃぁ重いに決まってますよね。
この問題はファイルをいくつかに分けることで解決をしました。
2つ目の問題はブラウザ依存なところです。
これは画像を見たほうが早いですね。
…スタイルが崩れていますよね。これはブラウザによってスタイルが変わってしまいます。
レスポンシブにも問題はありますが、やはり依存するようなコードを書いてしまったことが原因です。
流石にこのままではまずいので、1から書き直してこれを解決します。
レスポンシブデザインのことや、ブラウザのことを考えてゴリゴリCSS、HTMLを書き換えていきます。
もっと単純にスタイルに合ったファイル構成にすることが大事になります。
そしてできたものがこちら。
よ～くみればちょっと配置が上になったりしていますが同じスタイルで作り直しました。
これによってブラウザ間での崩れはなくなった、と信じたいです。
裏面について
残りは裏面です。当初の予定では裏面も表と同じ長方形のスタイルにする予定でしたが、実装して気に入らなかったので作り直しました。
裏面も同様重くならないようにページを分けたりと色々実装しました。
特別なにか変わったことはなく、こちらは普通ですね。
クレジット表記も忘れずにしておきます。
まとめ
以上、ホームページを一新したときの話でした。
私はサイトを作る上で2つのことを大切にしています。
目的とデザインです。デザインは言わずもがなですね。
サイトを作る際には目的が必要だと感じています。
今回で言えばホームページ、ポートフォリオなので自分を代表するものでしょうか。
他にも目的は様々ですね。通販サイトやブログサイトなどなど。
そういった目的にそってサイトをつくることが私は大切にしています。
実際に完成したホームページはこちらから飛べます。
ぜひ遊びに来てください。
Shicoku / シュー - https://shicoku.vercel.app/