こんにちは！teratail開発チーム デザイナーの木村です。
1/16にteratailのPC版質問ページをリニューアルしました！
以前からPC版質問ページにはコンテンツを読み進めたり、質問者と回答者がコミュニケーションをとったりする中で、細かい修正だけでは改善しづらいいくつかの問題がありました。それらを改善する基盤として全体的なデザインの変更と一部機能の追記・変更を行っています。
今回は以下の6点のリニューアルポイントを説明させていただきます。
- デザインの変更
- 機能・要素の追加
- 機能・要素の変更
デザインの変更
ボタン等の操作箇所の見た目や振る舞いをルール化
質問ページには多くの機能があります。以前はそれぞれ操作箇所の見た目や挙動が不揃いで、特に初めてteratailを使う人には理解しづらかったため、ボタン等の操作を行う箇所の見た目や振る舞いを明確にし、ルール化しました。
ウィンドウ幅に合わせた2段階のコンテンツ幅の切り替え
より多くの環境で最適化されたコンテンツに触れていただけるように、コンテンツの幅を従来の980px固定から、ウィンドウサイズに合わせて1120px幅と960px幅の2段階で切り替わるよう変更しました。
ヘッダー・フッター等も順次対応予定です。
機能・要素の追加
クリップ数
質問のクリッピングが多くの方の問題解決に結びつくことから、その指標となるクリップ数を表示しました。
下図のとおり、クリップ数が質問の上部とクリップボタンに表示されます。
質問者・回答者のアイコン
より早く正確に問題解決のためのコミュニケーションをとって頂くために、「質問への追記・修正依頼」欄と「回答コメント」欄で質問者・回答者が一目でわかるアイコンを表示しました。
機能・要素の変更
質問の評価を上げるGoodボタンのラベルを「高評価」に変更
質問の評価を上げる機能のGoodボタンですが、「Good」という言葉の抽象度が高かったため、直感的に分かるように回答の評価と合わせて「高評価」という表記に変更しました。
回答に評価をつける2つの方法
今までは回答の信頼性を担保するため、評価ボタンを回答の上部にのみ設置しており、回答を読み終わった直後に評価を行うことが出来ませんでした。
そこで今回のリニューアルでは評価を行う「高評価ボタン」と「低評価ボタン」を回答の下部に設置しました。
また、以前と同様に各回答の上部には回答評価の合計値(高評価数-低評価数)を表示しているので、こちらにマウスホバーして「+(プラス)ボタン」と「-(マイナス)ボタン」を表示させることでも評価が行えます。 従来の評価方法に慣れている人にはこちらがおすすめです。
最後に
今までのteratailに慣れ親しんでいただいていた方は違和感を覚えるところがあるかもしれませんが、今回のリニューアルで質問ページの改善基盤ができたので、今後さらに使いやすいteratailを目指して順次改善を行っていきます。
また、teratailページ下部の意見フォームより意見をお待ちしております。
引き続き、teratailをよろしくお願い致します！
