avaice's portfolio

avaice's portfolio

に公開

このサイトのデザインを新しくしました。色々大胆に変えました。

過去のデザインを振り返る

具体的な説明に入る前に、まずは今までのデザイン遍歴を見ていこうと思います。

【Ver 1.0】

このホームページが完成した時のデザインです。当時のこだわりについては、当時の記事に解説があります。

当時は「見やすさ」を全力で考えた設計にしていました。無骨ですが確かに見やすく、実際悪くない選択だったかと思います。

【Ver 1.1】

流石に初期デザインは無骨すぎたので、少し柔らかいデザインになるように変更しました。白背景は目が疲れるので、灰色になりました。

【Ver 2.0】

デザイン重視のホームページにリニューアルされました。モダンなWebサイトっぽくしたかったのですが、ごちゃついててうーん・・って感じですね。

見やすかった灰色の背景もなぜか白に戻りました。

ただ、スマホ向けにハンバーガーメニューが実装されました。ページのどこにいてもアクセスできるメニューで、ちょっと便利になりました。

あと細かいですが本文の文字色が真っ黒(#000000)ではなく、ちょっとだけ薄い黒(#545454)になりました。

今回の新デザイン

ダークモードに対応しました。

また、PC表示は基本的にワイド画面が多いのに横のスペースが余っていたので、横にメニューを置くことで場所を有効活用しました。スクロールに追従するので、操作性も上がりました。

スマホ表示は以下のような感じです。

背景色も薄い灰色になり、目が疲れないデザインになっていると思います。どうでしょう?結構良くないですか・・・・?

おわりに

今後も継続的にアップデートをしていきたいと思っています。デザインは難しい。