seyjoh studio blog

艦これワンドロのお題確認するやつをアップデートしました【2021年版】

ツール 2021年02月8日

▼こちらになります▼
艦これ版深夜の真剣お絵描き60分一本勝負 お題チェッカー

 今年に入ってから、seyjoh.com内のサイトのデザイン見直しを全体的に進めており、その一環で本件のページもリニューアルしました。
 前回記事にしたweb漫画の「サモンカード」から始まり、記事にはしていませんが「穴先生」も結局カットアップ(「る」に相当するもの)まで含めて全部作り変えてしまい、本ドメインのトップページも「LinkTree」風に変えてしまいました。かなりシンプルになっていると思います。

それはそれとして。

 今回この「艦これ版深夜の真剣お絵描き60分一本勝負 お題チェッカー」についても、見直しが必要だろうということでリニューアルをしています。
 とはいえ、機能としてはすでにほぼ完成しているので大幅には見た目が変わっていないかと思います。内部的にはフレームワークを、古かった従来Bootstrap3ベースだったものから、最新のBootstrap4をベースに作り替えています。これは上記のほかページも同様です。

 ただし、まるっきり同じものを作ったわけではなくいくつかの要素を追加変更および削除をしています。以下ざっくり。

1.SNS共有ボタンをtwitterのみに絞りました
 従来レンタルツールでページヘッダに各種SNS共有ボタンを置いてましたが、このページ自体がtwitter内の企画に関するページなのでtwitterだけで十分だろみたいな感じです(facebookもやってないし)

2.クリップボードにコピーするボタンを追加
 ページヘッダ部のボタンでURLをコピー可に。本日のお題部分の下部で2つのハッシュタグをコピーできるようにしました。従来、ページに表示されているハッシュを選択コピペすると変な空白がたまに入り込んでいたので、自分がシンプルに欲しい機能として追加しました。

3.ナイトモード(ページカラー切替)の追加
 ページの一番下の右側にセレクトボックスを配置。「Light Mode🌞」「Night Mode🌙」を選べるようにしました。後者選択で背景がブラックになります。もともとドメイントップページ等を黒背景で作っていたのでこのページも……と思っていたのですが、利用者にとって白背景・黒背景どちらが良いだろうという答えが分からなかったため、どっちでもいけるようにしよう!と思いこの仕様となりました。クッキーに選択状態を保存するため、再表示時も選択したモードになるはずです。

4.過去お題のページング仕様変更
 今まで過去お題のページ番号が下部にあったと思いますが、今回はカルーセルと呼ばれるUIに変更しています。「Night Mode」にしたときに、過去お題の表示域の左右に矢印みたいなマークが見えると思います。その左右の矢印をクリックすると横スライドして前後ページが表示されます。「Light Mode」の場合矢印が見えないかもしれませんが同様に動作します。またスマホでページを見ている場合、過去お題一覧自体の領域を横スワイプすることができます。
 以前のようにページ番号の方が良かったと思われるかもしれませんが、今回これは独断で変更しました。

5.OGP設定・ファビコン等変更
 TwitterにURL貼り付けると、そのページの内容がアイコンと説明でプレビューされることありますよね。それです。それが出来るようにしました。
 あとブラウザでこのページを開いた時のタブに出てくるアイコンやブックマークした時のアイコン、ファビコンって言うんですが、それを主催アカウントのアイコン画像に変更しました。

 以上、そんな感じです。
普段、最新のお題を確認するだけなら、何ら変わらないようになっていると思います。

 本当は、プラスアルファで追加したかった要素もあるのですが、とりあえずフレームワークのアップデートを優先したのでいったん後回しにしました。
 具体的には、一年前・二年前・数年前の同日に出ていたお題を表示できればなあという気持ちがありました。(おそらく当日が進水日の艦を中心にチョイスされているような気がするので、毎年似通ったお題になるんじゃないかなと思っています)

 以上です。
ちゃんとボタンとかリンクとか確認したつもりですが、もし誤ってたり、ある日に当日のお題が更新されなくなったとかがあればtwitterの方でお知らせください。普段は確認していないこともあるので気付いてない可能性もあります。
よろしくお願いします。

たぶん、次はこのブログページのリニューアルかな……


コメント

seyjoh.com