以下の内容はhttps://tosuma.hatenadiary.com/entry/2024/06/06/122929より取得しました。


【FFRK】ダークモード実装進捗(2024.06時点)

こんにちは、tosumaです。


今回はFFRKのファンサイトついての記事です。普段利用頂いている方やFFRKプレイヤーの方、その他プログラムやシステムについてご興味のある方に見て頂けますと幸いです。

2024.07.15 追記
8月の非公式イベントの準備と体調不良(コロナ)のため実施時期を見直ししまいた。


1|まえおき

少し前に𝕏(旧Twitter)にてダークモードがトレンドにあがっていました。

内容としては個人で開発されているサービスに対するコメントで「ダークモードが無い事が不満」というものに対し、作成者さんが「そんなに重要なのか?」というポストをされ、ダークモードの重要性についてのリプが大量についていた形でしたね。

その作成者さんも認識が無かったことをコメントされていましたのと、私も「ダークモードってそんな需要あったんだ」という感想でした。

という事で、私もサイト運営してる身としては目からウロコ状態だったので早速取り組むことにしました。

......が、ファンサイト、もともとそんな意識を持って作ったものではなかったのと、最近書いた通り(下記記事)私は敢えてレイアウト周りの「共通化」を捨てたので、ダークモードを取り入れるのはかなり難しいという現実にぶち当たりました。

tosuma.hatenadiary.com




......で、悩んだ結果


サイトを作り直すことにしました。

2|ダークモードとは?

ダークモードというのは背景を黒くして文字を白にするといった配色設計ですね。

一般的に言われている特徴(メリット)としては以下です。
・光量が減り目の負担が軽減
・光量が減りバッテリーの持ちが向上す
・テキストやイメージが見やすい

※以下、Wikipedia
ダークモード - Wikipedia


ネットで調べる限り、アンケートにもよりますが3分の1~半数などの割合でWebサービス利用者はダークモードを利用されているようでした。需要ありありですね。

𝕏(旧Twitter)も現状はオプションになっており通常モードとダークモードが切替できますが、将来的にダークモードがデフォルトになるとかならないとか。

news.livedoor.com


こんなにも当たり前なダークモードを今まで全く意識していないとか穴があったら入りたいってやつです。
柱として不甲斐なし!!穴があったら入りたい!!」を英語で?~仮定法過去の例文

3|現在のファンサイト

現在のファンサイトはこんな感じです。

トップページ。



ダンジョン一覧ページ。



ランキングページ。



背景はメインが白基調、サブが青基調にしており、全体が真っ白って事もないものの大部分は白地になってますね。

あと、正直なところ、最初はこんなに多機能でもなくランキングの紹介程度だったので後付けによる肉付け感がかなり見られます。苦笑

そのため、この状態でBodyなどのbackground-colorやcolorを変えたところで期待通りの制御はできません。悲

また、サイトの骨組みのCSSは無償でWeb公開されているテンプレートを利用させて頂いているのでフッターにクレジット表記をさせて頂いております。



4|ダークモード版イメージ

寝る前などに日々ちょこちょこと進めており、まだまだ作りかけですがこんな感じになる想定です。
※通常モードとダークモードは切替可です

トップページ。(↑通常、↓ダーク)



ダンジョン一覧ページ。(↑通常、↓ダーク)



ランキングページ。(↑通常、↓ダーク)



リクエストフォーム。(↑通常、↓ダーク)




もちろん今回は全機能を意識したレイアウトで設計します。

2年前は手探りでしたが、今はファンサイトで使うテクニカル面ほぼ理解してるので慣れたものではあります。


......が、いかんせんボリュームが多いので時間が掛かりそうです。



そしてCSSのテンプレートはもう使わず、1から自分で作ることにしたのでクレジット表記もようやく消せます。笑

※もちろん以前お借りしていた考え方などは参考にさせて頂く

5|移行スケジュール

前述した通り、ボリュームがとても多いため、作業は4段階での移行を予定しています。



従来サイトと並行運用を行い、来年の1月からダークモード版に完全移行を考えており、まずは6月中にStep1の範囲をリリースできるように粛々と進めていきたいと思います~。

もちろん家庭や仕事の方が忙しくなるとずれ込むかもしれませんが...。笑

なんにせよ月に1度くらい進捗報告できるようにします~。




それでは皆さん、引き続き良きレコパライフを!



f:id:tay_tosuma:20200219062206p:plain
お読み頂き有難うございました。



※よければもう1本 関連記事をお読み頂けると幸いです

tosuma.hatenadiary.com

tosuma.hatenadiary.com

tosuma.hatenadiary.com

tosuma.hatenadiary.com


 




以上の内容はhttps://tosuma.hatenadiary.com/entry/2024/06/06/122929より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14