【第3回】人気Wikiはページが見やすい!

 
最終更新日時:
編集者の皆様日頃よりご利用頂きありがとうございます。Gamerchサポートから皆様にお役立てできるよう、編集者様の実体験などをもとに「人気Wikiの作り方講座」を配信させて頂いております。ぜひ参考にしてくださると幸いです。

第3回目のテーマは『人気Wikiはページが見やすい!』です。

WikiはSNSと違い、個人(または複数人)で作るwebサイトです。そのためページを作るときも1ページ毎の構成を考えなければなりません。
人気のWikiを見比べてみると、1ページ1ページがとても見やすくレイアウトされていました。
そこでページのレイアウトにお役立ていただくため、参考になるWikiの例をご紹介いたします。

サイトレイアウトの基本

まずGamerchのWikiはスマホからの閲覧が約8割と多いため、スマホで見やすいページのレイアウトを考えることをおすすめします。
※PCブラウザゲームのWikiなど例外もあります

みなさんは、Wikiのページを見るとき以下の赤い線のように見ていませんか?



まず文章を左から右に読み、画像を見て、また文章を左から右に読む、
この”目の動き”に沿った構成にするととても見やすくなります。
このテクニックを「Z型視線誘導」と言います。
「Z型視線誘導」は多くのチラシや雑誌などで活用されるテクニックで、内容をしっかり読んでもらいたい時に効果的とされています。

最初にまず伝えたい事柄の内容を簡潔に書き、関連する画像を配置し、次にそれについての詳細な情報を掲載する、という流れにするととても読みやすくなります。

目次を設置する

ページの内容量が多い場合は見出し(*や**など)と#contentsを用いた「目次」をページの上部に設置することもおすすめです。
目次は使いやすい・見やすいだけではなく、ページ内リンクがGoogleの検索結果に出てくる場合もあるため、アクセスが増える可能性があります。
※検索結果は全てGoogle側がそのページを評価し、行ってくれます。

見出しをページ内で多く使い過ぎていると、その分目次も長くなってしまうため、適度な見出しの量が大切です。



↑こちらの場合は、赤い線の目次内容と見出しが同じではないため、&aname(ID名)と[[リンク名>#ID名]]構文を利用したページ内リンクを作成し目次としているようです。
↓ページ内リンクのやり方についてはこちらを参考にしてください。
https://howto.gamerch.com/HTML%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E4%B8%80%E8%A6%A7#content_1_5

他のページへのリンクを貼る

ゲームで新しいキャラクターなどが実装されたとき、キャラクターページを作成しますが、そのキャラクターが獲得できるガチャや関連のクエスト、比較したい他のキャラクターなど合わせて読みたいページがいくつかあるかと思います。
そういったページへのリンクを元のキャラクターページに貼っておくことで、Wiki内を行き来でき、作成したページから即時ブラウザバックされることも減少させることができます。

とくに関連の話題が出てきたタイミングや、ページの最後など見ている人がブラウザバックを押しそうな場所に、次に見てもらいたい他ページへのリンクを貼ることをおすすめします。



↑この項目の話題に関連するページへのリンク



↑ページの最後に合わせて見てほしいページへのリンク

↓参考にさせていただいた実際のページ
https://dbz-dokkan.gamerch.com/%E3%80%90%E3%83%89%E3%83%83%E3%82%AB%E3%83%B3%E3%80%91LR%E3%83%AD%E3%82%BC%EF%BC%86%E3%82%B6%E3%83%9E%E3%82%B9%E3%81%AE%E8%A9%95%E4%BE%A1%E3%81%A8%E3%83%91%E3%83%BC%E3%83%86%E3%82%A3%E3%83%BC%E8%80%83%E5%AF%9F

見やすい表の作り方

スマホから閲覧するとどうしても縦長のレイアウトになってしまいます。
iPhone5などスリムな端末は画面の横の長さが320pxほどしかありません。
よって、表を使う時に320px以上の幅で作成すると見きれてしまうことがあります。幅を設定せずに表を作成すると、変なところで区切られてしまいかねません。
そこで表を使う時は画面に対して100%表示にする、または横スクロールバーを入れることをおすすめします。

例:
100%表示の表
設定方法:
|T:100%|c
を表の上に入れる



↑iPhone5、↓iPadと画面のサイズ幅が違いますが、どちらも画面最大に表が表示されます。




横スクロールバーの表
設定方法:
|TS:300|c
300以上の数字を設定して表の上に入れる



↑スライドで見きれてしまった文章も見ることができます。

↓参考にさせていただいた実際のページ
https://miraclenikki.gamerch.com/%E7%B2%BE%E9%9C%8A%E3%81%AE%E6%A3%AE

まとめと注意点

いかがでしたでしょうか。
人気のWikiはどれも的確な情報と見やすさを重視されたページレイアウトをされています。

しかしページの内容が疎かではいくら見やすくしても見てくれる人は増えません。

イベントやキャンペーン情報など、ゲーム公式のお知らせからWikiページを作成される場合も多いかと思います。
その時、他のサイトや公式HPからの文章をまるまるコピーして貼り付けただけのページはあまり好ましくありません。
Google検索などでコピーサイト・コピーコンテンツは望ましくないとされ、検索結果から除外されてしまうケースもあるからです。

コピー&ペーストだけではない、オリジナルの文章が書かれているページは、見ている人にとっても有益な情報となります。
なるべくコピー&ペーストだけではないページを心掛けると良いでしょう。



↑こちらはガチャのお知らせのページに概要だけではなく、排出されるキャラクター等の紹介も一緒に掲載されています。

↓参考にさせていただいた実際のページ
https://imascg-slstage-wiki.gamerch.com/%E7%A5%9D%EF%BC%812%E5%91%A8%E5%B9%B4%20%E3%82%A2%E3%83%8B%E3%83%90%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%BC%E3%83%91%E3%83%BC%E3%83%86%E3%82%A3%E3%83%BC%E3%82%AC%E3%82%B7%E3%83%A3

他にも参考になるページやレイアウトにお悩みの場合はこのページや編集者交流掲示板にてコメントをお願いいたします。できる限りのアドバイスをさせていただきます。

▼第2回はこちら
【第2回】タイトル変更構文を利用した人気Wikiの作り方

▼今回紹介させていただいた攻略Wikiさんはこちら
https://dbz-dokkan.gamerch.com/
https://miraclenikki.gamerch.com/
https://imascg-slstage-wiki.gamerch.com/
コメント(0)
Twitter

コメント

削除すると元に戻すことは出来ません。
よろしいですか?

今後表示しない

名前
コメント(必須)
(300文字まで)

必ず「Gamerch ガイドライン」をご覧の上、書き込みをお願いします。
画像
sage機能

対象コメント

選択項目

詳細

※上記の内容はWiki管理者へ通報されます。

通報完了

通報内容を送信しました

エラー

エラーが発生しました

削除しました。
 このWikiに関するツイート  閉じる
1件の新しいツイートがあります
  • 関連するツイートはありません
 古いTweetをもっと見る   閉じる

このページをシェアしよう!

メニュー  
Gamerch会員特典
基本マークアップ
Wikiの基本編集・新規機能
その他
人気Wikiの作り方講座
Gamerchサポート
左サイドメニューの編集

サイト内ランキング
【第3回】人気Wikiはページが見やすい!
HTMLマークアップ一覧
DBを使ってみよう!
4 編集してみよう!
5 編集者交流掲示板
6 Gamerch会員専用機能!
7 運営への要望
8 掲示板を使ってみよう!
9 独自CSS一覧
10 ブログ型を編集してみよう!
最近の更新

3時間まえ

4時間まえ

2017/11/16 (木) 10:49

2017/11/16 (木) 10:47

2017/11/16 (木) 10:45

2017/11/16 (木) 03:00

2017/11/15 (水) 13:15

2017/11/15 (水) 12:41

2017/11/01 (水) 15:21

2017/11/01 (水) 13:28

2017/10/31 (火) 17:47

2017/10/30 (月) 10:27

2017/10/27 (金) 21:00

2017/10/26 (木) 21:49

2017/10/25 (水) 21:36

2017/10/25 (水) 10:40

2017/10/24 (火) 16:29

2017/10/23 (月) 11:31

2017/10/22 (日) 21:17

新規作成

2017/09/12 (火) 16:01

2017/07/28 (金) 17:42

2017/06/05 (月) 18:52

2017/02/06 (月) 16:13

2016/10/13 (木) 17:08

2016/10/13 (木) 15:35

2016/10/11 (火) 18:46

2016/10/05 (水) 09:32

2016/06/09 (木) 11:34

2016/03/31 (木) 17:20

Wikiランキング
【速報】ミラクルニキ攻略アンテナ
DBZ ドッカンバトル攻略Wikiまとめ【ドラゴンボールZドカバト】
消滅都市2 攻略まとめWiki
4 白猫プロジェクトwiki【白猫攻略wiki】
5 アイマス デレステ攻略まとめwiki【アイドルマスター シンデレラガールズ スターライトステージ】
6 ブレソル攻略Wikiまとめ【BLEACH Brave Souls】
7 ジョジョの奇妙な冒険 スターダストシューターズ攻略Wiki【ジョジョSS】
8 ポケットモンスターウルトラサン・ムーン攻略Wikiまとめ【ポケモンUSUM】
9 チェインクロニクル攻略・交流Wiki チェンクロ3
10 コトダマ勇者攻略Wiki
注目記事
ドッカンバトル リセマラランキング ドラゴンボールZドッカンバトル
ポケモン ウルトラサンムーン 違い ポケットモンスターウルトラサン/ムーン
白猫 オーバードライブ紅蓮2 白猫プロジェクト
忍ボル リセマラランキング NARUTO X BORUTO 忍者ボルテージ
アズールレーン 明石のお願い 暗号の場所 アズールレーン
ウイコレ フレンドリーマッチ募集掲示板 ウイニングイレブン カードコレクション
オルサガ 魔女の追憶 攻略 オルタンシアサーガ
ミラクルニキ コーデコロッセオ 高得点 ミラクルニキ
FGO おすすめストーリーサーヴァント Fate/Grand Order
モンスト LINE掲示板 モンスト
ページ編集 トップへ