はじめに

当ポートフォリオサイトを公開してからもうすぐ1年が経とうとしています。完成した当初はそれなりに気に入っていたデザインでしたが、月日が経つにつれてあらが目につくようになり、早くリニューアルしたいと思っていました。

1周年までまだあと1ヶ月ほどありますが、一足早くリニューアルしてしまいました。このブログだけでなくトップページも変更していますので、ぜひ見ていただければと思います。

こだわりポイント

リニューアルに際していくつかこだわったことがあります。自己満足ですが語らせてください。

1コンテンツ1画面

当ポートフォリオサイトはマウスホイールでスクロールしなくても閲覧できるようになっています。ページトップの下向き三角から始まり、以降は右下の「NEXT」をクリックしていくだけでページの最下部まで閲覧することができます。

1コンテンツが1画面に収まっている（※PCのみ）ので、まるで雑誌を見ているかのように順番に見ていくことができます。

アニメーション

トップページではアニメーションを多用しています。見る人によっては過剰だと感じるかもしれません。ですが、ここは私のポートフォリオサイトであると同時に私のひとつの作品でもあります。当ポートフォリオサイトを見ていただくことで、私はこういうアニメーションが実装できるんだということを知ってもらうために、あえてアニメーションを多用しているのです。

前バージョンを踏襲

今回手を入れたのはほとんどフロントエンドだけです。バージョンをつけるとしたら 1.0 → 1.1 だと思っています。

例えば、トップページのカバー画像。線路の上に女の子が座っている画像ですが、これは前バージョンでも使用していました。前バージョンとの違いは少しフィルターを追加して色合いを変更しただけです。

このように完全なリニューアルというわけではなく、部分的に前バージョンを踏襲している箇所もあります。完全なリニューアルをするときはRuby on Railsを使う可能性は低いです。

ちなみに、線路の上に女の子が座っているカバー画像は、Ruby on Rails (Railway/Railroad) を意識したものだったりします。

脱・Bootstrap

長い間お世話になっていたBootstrapですが、ようやく卒業できました。特にグリッドシステムにはお世話になりっぱなしでしたが、ようやくFlexBoxの使い方がわかってきたので、今後は頼らなくても大丈夫そうです。

また、見栄えのいいCSSスタイルは検索すればたくさん出てきますが、それらを理解せずにコピペして使うのではなく、ちゃんと理解した上で自分でイチから書くようにしています。

CSSはとかく長くなりがちなので、何も考えずにコピペばかりしているとすぐに全容を把握できなくなってしまいます。すべて自分で書くことによって知識も増えていきますし、効率の良い書き方がわかってくるようになります。

まとめ

今回のリニューアル後のデザイン、自分では結構気に入っています。朝焼けのような、薄暮のような微妙な色合いが好きです。

CSSの知識はだいぶついてきたと思うんですが、実はかなり長大なものになってしまっています。ページやブロックごとにファイルを分けていたら全部で20ファイルにもなっていました。これらはメディアクエリ（画面解像度）によっても完全に分けているので、例えばPCのみだと半分の10ファイルになります。

おそらくCSSの書き方に無駄があるのだと思います。今後はBEMのような規則に則って書くようにしていくのが課題です。