Aokashi Room

作った作品の紹介やレビュー、トラブルシューティングとか色々

ホームページ開設から14年を迎えました!

自分が最初に開設したホームページ「コーデンシティ」から14年が経ちました。翌年は15周年ですね。

ホームページの歴史については10周年の頃の記事をご確認ください。

aokashi.hatenablog.jp

改修工事について

14周年に合わせて実施したわけではないですが、 Aokashi Home をデザインそのまま改修工事しました。

ただし多少デザインが変わっています。その辺ご了承ください。

WWAページの比較

ソフトウェアページの比較

  • 全般
    • ページレイアウトが切り替わる画面横幅のブレークポイントを変えました。環境によっては表示が広かったり狭かったりする場合があります。
    • ボタンの色を変えました
    • 注記の色を薄くしました
    • 目次の見出しにアイコンを付けました
    • ページフッターにある「トップへ戻る」ボタンにアイコンを付けました、また押した場合のスクロールについてはスムーズスクロールに対応しました
  • カード
    • カードのデザインを変更しました。わかりやすい例で言うと、フッターボタンがカードの外側から内側に移転しています。
    • カードリストの列数が切り替わる画面横幅のブレークポイントを調整しました。
  • トップページ
    • 最初の画面右下のサイトナビゲーションを下寄りから中央に変えました
  • WWA
    • 公開日降順にソートするようにしました。章立てで構成されるゲームについては、初回の投稿日時を基準としています。
      • この変更に伴い、「WWAHTML5」がだいぶ前にソートするようになっています。このゲームの改修で公開日付が更新されていることが影響しているためです。
    • 一部作品に「オススメ!」を付与しました。はじめて WWA ゲームを遊ぶ際、どの作品を遊んでもらってほしいか明確にしています。
    • Thanks の各ジャンルにアイコンを付けました
    • WWA Wing 未対応のWWAをプレイする方法については Java アプレットの実行手段がほとんど消滅したため、一旦リンクを削除しました *1
  • Material
    • 素材のプレビューデザインを変更しました。モーダルウインドウが表示され、外側を押せばプレビューが閉じるようになっています。
    • WWA 素材の場合だけ、素材のプレビューに背景色を付与しました。 WWA 標準素材の透過色を指定しています。
    • WWA 素材のページに Pixiv のリンクを掲載しました。使用サンプルを投稿しています。
  • Portfolio
    • 各ページの「戻る」をボタン形式にしました。マウスカーソルと重ねると背景色が現れます。
    • 「その他のデータ」の各項目をカード形式に変更しました。
    • 解説注記のデザインを変更しました*2

わかる人向け

  • 一部ソースファイルを JavaScript から TypeScript に変更しました。
  • Gatsby を v4 から v5 にアップグレードしました。
  • デザインフレームワークを Bulma から Chakra UI に変更しました。
  • デザインフレームワーク変更に伴い、 CSS のスタイリング方法を sass から Emotion に変更しました。

今後はダークモードの対応を予定しています。

*1:探せば見つかるはず・・・

*2:もともと枠線のあるデザインを想定していましたが、 Bulma の仕様上、ヘッダーが付くと枠線のあるデザインを選ぶことができませんでした。デザインフレームワークChakra UI に変更したことで実現しました。