Steamの色使いは見辛い。文字の色を明るくするとかなり見やすくなる。他にも色々といじってみる [更新 10/2]

Steamのストアページは色使いが悪く、文字がかなり見辛いです。どんどん見辛くなっています。

私が一番見辛いと感じるのはレビューコメント。文字が小さく、文字の色が背景と同じ青の同系色でまとめられているため、識字テストのような見辛さがあります。

それをちょっと変えてみて、どんな感じか試してみました。

Steamの色使い

Steamの今の色使いを見てみましょう。スクリーンショットは「Dark Devotion」のストアページのレビューコメントです。

2019/9/30 時点

背景と文字が同系色ですので文字が細く薄く見えます。右側の「最近の投稿」のブロックの投稿日やプレイ時間はほぼ見えません。

文字を明るく

文字の色を明るくしてみます。

変更点は、

• 文字の色を明るくした（同系色ではなく白色に）
• 「記録時間」と「投稿日」を字下げした
• 「記録時間」と「投稿日」の文字を少し大きくした
• 「レビューが参考になったと投票しました」ブロックを右に寄せた
• アバター画像も通常の色にした

文字が明るくなることによってコントラストが強くなって見やすくなります。その一方でこれまで見えなかった文字が見えるようになり、情報量の多さに気付いてしまいます。

そこでちょっと字下げや右寄せを行って余白を出しています。

もう少し手を加える

もう少し手を加えてみました。

• 文字の白が白すぎると見辛いのでコントラストを抑える
• 「最も参考になったレビュー」の右の文字「全て」を明るく
• 「投稿日」の上下左右に余白
• 右側の投稿者名を左側と同じ色と太さに
• 文字の行間に少し隙間を増やす
• 「もっと読む」をボタンにして押しやすく

文字の行間はかなり難しいです。これは私には正解がよく分からないのです。行の隙間を増やすと、なんか離れすぎかなぁと感じたり、でも元に戻すと詰まりすぎだと感じます。

Steamのデザインは英字フォントに合わせてデザインされているので、日本語の高密度な文字では隙間は増やした方が良いはずです。ですが、どのくらい増やせば良いのかは判断が難しいです。とりあえず +2px してあります。

基本的にはあまり大きくデザインを変えないようにしています。

フォントも変えてみる

レビューコメントのフォントに「メイリオ」を指定してみました。これまでのスクリーンショットでは Windows10 デフォルトの「游ゴシック」が使われています。

「メイリオ」は文字が大きいので、行間の隙間も +1px してみました。

游ゴシックよりも見やすいような気がします。游ゴシックならもう 1px 文字のサイズを大きくしても良いかもしれません。それかメイリオを游ゴシックと同じ文字サイズにするなら -0.5px くらいですね。

下に貼り付けたスタイルシートのコードを使っている人で、「メイリオ」が嫌いな人は好きなフォントを指定するか、その箇所を削除するとブラウザのデフォルトのフォントが使われます。

ゲームの説明も見やすく

このほかにも、ゲームの説明の文字などを少し明るくして見やすくしたりしてみました。

「タイトル」「ジャンル」「パブリッシャー」なども見辛いです。

↓

説明の下にあるスペックや著作権表示や注意書きの文字も明るくしました。

ここまでしてSteamのストアページを見るときのストレスが大分減りました。

「おすすめ」「おすすめしません」の文字を消してみる

グッド・バッド（ThumbsUp/Down）のアイコンの右にある、「おすすめ」「おすすめしません」の文字を消してみます。

これは洗練されたデザインではなく、画像とその説明の2つを表示してしまっています。二重説明ですね。

↓

「記録時間」の文字を 1px 大きくし、太字にして見やすくしています。右側のカラムの「記録時間」も太字にしました。

全体を見るとすっきりしています。どうでしょう？

Before と After の比較

今のところこんな感じにデザインを変えています。

↓

レビュー一覧ページでも色を明るく

ストアページのレビューコメントの下の方にある「全レビューを閲覧」を押したときのレビューページでも文字を明るくしてみました。

↓

それぞれのレビューコメントを押して個別のレビューを開いたときも、文字を少し大きく明るくしてあります。

このデザインにしたい人は

私のように Steam の薄い字が見にくいと感じていて、試してみたい人へ向けてここに書いておきます。

まず、Firefoxでは「Stylus」などのスタイルシートをいじれる拡張機能を導入して下さい。Chromeでも「Stylus」があります。

間違っても「Stylish」を導入しないようにして下さい。この拡張はスパイウェアとして活動した実績があり、危険です。ユーザーデータを読み取っていたわけです。

Gigazine - Firefoxの人気アドオン「Stylish」はユーザーのインターネット履歴をこっそり収集していた

「Stylish」の代替として登場したのが「Stylus」です。

「Stylus」導入後に管理画面を開いてスタイルを新規作成して、左側にある「Mozilla Format」の「インポート」で下のコードをコピペして下さい。

コード 2019/10/2 更新

• レビューコメントの白文字をわずか暗くした
• 右側の「もっと読む」のボタンの背景色をボックスに合わせた
• グッド・バッド（ThumbsUp/Down）アイコンの右にある「おすすめ」「おすすめしません」の表示を消した
• 「投稿日」の周りの余白を増やした
• ゲームの説明にある箇条書きの文字と見出しの青色を明るくした。見出しは太字に
• 「全レビューを閲覧」ページなどでも文字を読みやすくした


@-moz-document url-prefix("https://store.steampowered.com/app/"), regexp("https://steamcommunity.com/app/[\\d]+?/reviews/.+"), regexp("https://steamcommunity.com/profiles/[\\d]+?/recommended/.+"), regexp("https://steamcommunity.com/id/.+?/recommended/.+") {
/***** Game Description *****/

.game_description_snippet {
color: #ddd;
}

.game_description_column {
color: #ddd;
}

body.v6 .game_area_description h2.bb_tag {
font-weight: bold;
color: #5BA0C8;
}

.game_area_description ul {
color: #ddd;
}

.game_area_sys_req strong {
color: #5BA0C8;
}

.game_area_sys_req ul li strong {
color: #aaa;
}

#game_area_legal {
color: inherit;
}

.game_details {
color: #ddd;
}

.game_details b {
color: #aaa;
}

/***** Reviews *****/

.user_reviews_most_helpful_days {
color: #c1dbf4;
}

.review_box .leftcol {
opacity: 1;
}

.review_box a.vote_header {
margin: 8px 0 8px;
}

.review_box .vote_header .title, .apphub_UserReviewCardContent .vote_header .title {
display: none;
}

.review_box .vote_header .hours, .apphub_UserReviewCardContent .vote_header .hours, #ReviewTitle .playTime {
color: #ccc;
font-weight: bold;
padding-top: 12px;
font-size: 12px;
opacity: 1;
}

.review_box .postedDate, .apphub_CardContentMain .apphub_CardTextContent .date_posted, #ReviewTitle .recommendation_date {
color: #bbb;
margin: 16px;
font-size: 12px;
opacity: 1;
}

.review_box .content, .apphub_UserReviewCardContent .apphub_CardTextContent, #ReviewText {
color: #c5c5c5;
font-family: "メイリオ";
line-height: 20px;
}

.review_box.partial .view_more {
display: flex;
justify-content: flex-end;
float: none;
}

.review_box.partial .view_more a {
padding: 10px;
display: block;
background-color: #2f497a;
}

.review_box .hr {
clear: both;
}

.review_box .control_block .text {
color: #ccc;
opacity: 1;
}

.review_box .vote_info, .recommendation_row .vote_info, .apphub_UserReviewCardContent .found_helpful, #leftContents .ratingBar, #leftContents .review_rate_bar {
color: #ccc;
font-size: 13px;
}

.review_box .vote_info, .recommendation_row .vote_info {
text-align: right;
}

.review_box .short_header .persona_name {
font-weight: bold;
color: #c1dbf4;
}

.rightcol .review_box .short_header .hours {
opacity: 1;
color: #ddd;
font-weight: bold;
}

.rightcol .review_box .postedDate {
color: #bbb;
font-size: 12px;
opacity: 1;
}

.rightcol .review_box .shortcol .content {
color: #d5d5d5;
}

.rightcol .review_box .shortcol .posted {
margin: 0;
}

.rightcol .review_box.partial .view_more {
background-color: #1b2838;
}

/***** SteamCommunity.com Reviews Page *****/

.apphub_UserReviewCardContent .found_helpful {
font-size: 12px;
}

.appHubIconHolder.greyOverlay {
display: none;
}

.apphub_CardContentAuthorName a {
font-weight: bold;
color: #ccc;
}

.apphub_CardContentMoreLink, .apphub_CardCommentCount, .apphub_Card.interactable:hover .apphub_CardContentAuthorName.offline a, .apphub_Card.interactable:hover .apphub_CardContentMoreLink, .apphub_Card.interactable:hover .apphub_CardContentMoreLink a {
color: #ccc;
}

.apphub_CardContentMoreLink {
font-size: 12px;
}

/***** Individual Review Page *****/

#ReviewTitle .ratingSummary {
display: none;
}

#ReviewTitle .playTime {
height: 44px;
}

#ReviewTitle .playTime , #ReviewTitle .recommendation_date, #ReviewText {
font-size: 14px;
}
}

スタイルの名前はお好きなようにどうぞ。たぶんこれでうまくいくはずです。

フォントの「メイリオ」を変更したい人は「font-family: "メイリオ";」の行を削除してブラウザの設定でフォントを指定するか、「メイリオ」の部分を他のフォント名に変えて下さい。