アプリゲームWebサイトでのWordPressカスタマイズポイント(Advanced Custom Fields等)

2020.05.30

2020.06.16

コーディング

11はじめまして。Webデザイナーのminazukiです。

先日、スマホアプリゲーム「天華百剣 -斬-」の３周年を迎えるタイミングで、公式サイトのリニューアルを担当させていただきました。(天華百剣は漫画やアニメ化などもされており、人気IPとして多角的な展開をされている作品です。)

▼アプリゲーム天華百剣 -斬-公式サイト

https://tenkahyakken-zan.jp/

今回のリニューアルではWordPressでのサイト構築を行っていますが、WordPress管理画面設定の際のカスタマイズポイントを紹介していきたいと思います。

投稿画面をカスタマイズ
管理画面はスッキリと
まとめ
最後に

投稿画面をカスタマイズ

上記サイトでは音楽、イベント情報など複数の投稿画面を使用しています。そして各投稿画面ではWordPressプラグイン「Advanced Custom Fields」を使用しています。

Advanced Custom Fields とは

投稿画面を含む各編集画面に独自にカスタマイズした入力フィールドを設定できる、世界的にも有名なプラグインです。

Advanced Custom Fields

Advanced Custom Fields
https://wordpress.org/plugins/advanced-custom-fields/

このプラグインには無料版と有料版がありますが、より高度な設定が可能になるよう、弊社イロコトでは有料版の「Advanced Custom Fields Pro」を使用しています。

Advanced Custom Fields を使用するメリット

投稿画面にこのプラグインを使用するメリットとしては、

テキスト入力だけで、HTMLタグを設定した状態で出力できる
PCとスマホで表示させたい画像が異なる時、画像指定だけで設定できる
画像とテキストの横並びレイアウトも、画像の指定とテキスト入力だけで表示できる

など、HTML/CSSの知識がなくても簡単に投稿できる環境を設定できるところです。

あらかじめ投稿の「型」を作っておくことで、投稿者の知識に左右されることなく統一化できるので保守性も高くなります。

投稿画面の構築の際にこだわったポイント

投稿画面、投稿するコンテンツが多いので「直感的に投稿できる」ことを特に意識しました。

また、普通のテキスト入力欄に「テキストを入力してください」という説明は不要ですが、少し細かい設定をする項目などでは「入力しないとどうなるか」「設定しないとどうなるか」といった部分には説明を入れました。

下画像はイベント情報の投稿画面ですが、「イベントビジュアル」の設定項目で画像を設定しなかった場合にどうなるかという説明を記載しています。

文字装飾はショートコードで簡単に

太字、赤文字などの簡単なテキスト装飾は、あらかじめ「ショートコード」を使用できるようにしました。これによってHTMLの記述をせずに簡単にテキスト装飾を行えるようになります。

例：
<span class=“red”>テキスト</span>
↓
[red]テキスト[/red]

さらに使用できるショートコード一覧を投稿画面に表示しました。

管理画面はスッキリと

カスタム投稿が増えてくると、管理画面もだんだんと雑多になってしまいがちです。そんな時は管理画面のメニュー項目のカスタマイズができる「Admin Menu Editor」というプラグインを使用します。

Admin Menu Editor
https://wordpress.org/plugins/admin-menu-editor/

このプラグインを使用して行った作業は下記となります。

使用しない項目は非表示
メニューの表示順を並べ替える
メニューのアイコンを変更

使用しない項目は非表示に

カスタム投稿がメインとなり「投稿」「コメント」は使用しないので非表示にします。

メニューの表示順を並べ替え

よく使用する項目順、またはサイト上で表示されているコンテンツ順にすることでメニューを探しやすくします。

メニューのアイコンを変更

アイコンを変更することで、さらにユーザビリティが向上します。

こちらがBeforeAfterとなります。

例えばBefore画面で「音楽」を探すのは初見では戸惑いますが、After画面では「音符アイコン」を目印にすれば良いので、探すというストレスが軽減されるかと思います。

まとめ

Advanced Custom Fieldsの導入と実装には専門的な知識が必要となりますが、型として出来上がってしまえば、保守性は高くなると思います。エンタメ系のゲーム・アニメなどのサイトでは、デザインが非常に良い状態でも、WordPress管理画面側のユーザビリティが疎かになってしまっているなどのケースもあるかと思いますので、イロコトでは目に見えない所でもなるべくサービス価値を高められるようにコーダー陣とも情報共有を心がけています。