Qiita のデザインが新しくなりました

こんにちは、

morishitter です。この度 Qiita のトップページ、記事ページをリニューアルしました。大きな変更だったので既にお気づきの方も多いのではないでしょうか。今回はそのデザインについて説明をします。

新トップページ

まずはトップページについてです。これまでのトップページでは、フォローしたユーザーとタグに関する情報をまとめて表示する1つのフィードをメイン機能として提供していました。新しいトップページでは情報を整理し、トレンドを中心とした3つの軸での情報収集の体験を提供しています。それらの軸をサクサクと切り替えながら閲覧できるようにしました。

また、現在はトレンドをデフォルトのページにしていますが、タイムラインがデフォルトがいい、タグフィードがいい、など多数のフィードバックを頂いています。この点に関しましては、順番だけでなく提供する機能内容と合わせて、今後も継続的に改善を測っていきます。

これまでご提供していた、全タグの新着記事が表示される「すべて」フィードにつきましては現在再度ご用意すべく開発中です。ご不便おかけいたしますが少々おまちくださいませ。

トレンド

トレンドでは、Qiita 全体で注目を集めているパーソナライズされていない情報を見ることができます。これまでベータ版として提供してきた 人気の投稿 をトレンドという名称に変えて提供します。ふらっと Qiita に訪れていただき、今のソフトウェア業界の流行を一覧して知ることができる、という体験をしていただけると幸いです。

top-trend.png

タイムライン

次にタイムラインについて。タイムラインではトレンドと違い、人を軸とした情報収集を行えます。フォローしているユーザーがいいね、投稿、コメントした記事が表示されるので、興味のある技術についてよく発信している人や、情報感度の高い人を見つけたらフォローしておくと気になる記事を発見しやすくなるかと思います。

top-timeline.png

タイムラインを充実させるにはユーザのフォロー関係が充実していることが必要となります。現在タイムラインページではおすすめユーザを表示していますが、現在はとてもナイーブな実装となっており、今後改善していきます。

タグフィード

最後にタグフィードです。人軸のタイムラインに対して、こちらでは技術(タグ)を軸とした情報収集を行うことができます。自分の興味のある技術領域のタグをフォローすると、そのタグが付いた記事が新着順に表示されます。しかしながら、単にタグがついているというだけでは玉石混交となってしまうので、その中で何かしらのフィルタリングが必要だと考えています。今後は一定のいいね数がついたものだけに絞れるようにする、などの改善を予定しています。

top-tagfeed.png

新記事ページ

次は新しい記事ページのデザイン刷新についてです。社内外でテストを繰り返した結果、「読む人が記事に集中して読めること」をコンセプトとして設計しました。これまでは記事ページのみで大きく使用していたブランドカラーをヘッダーに適用することで、サービス全体に行き渡るようにもしました。

article.png

自分のフォローしているユーザーがその記事をいいねしていたとき、その情報が記事の先頭に出るようになりました。また、いいね・ストックという記事に対するアクションがより押しやすくなるようにしました。コードブロックはエンジニアのためのプラットフォームである Qiita にとって重要なコンテンツなので、強調して見せ、よく使われているカラースキーム (Monokai) に変更しました。しかし、エンジニアにとってカラースキームはこだわりが強く、視認性を左右する要素です。今後はより記事を読みやすくなるよう、いくつかのカラースキームの中から好みのもので表示できる機能を追加予定です。

article-codeblock.png

また、これまでのアクセスのログから、Qiita をご利用いただいているときのブラウザ幅の分布を調べ、レイアウトが変更されるブレイクポイントを調整しました。加えて、ベータ版として一部のユーザーの皆様に早めに公開し、いただいたフィードバックを参考に、定性的にもデザインを磨き上げました。

今回のサイトリニューアルの際は、 1000 名を超えるユーザの皆様にベータ版を使っていただき、多数のフィードバックをいただきました。お陰様で無事にリリースすることができました。ご協力ありがとうございました。より多くの皆様に「Qiita の記事が読みやすくなったな」と感じてもらえると幸いです。

最後に

Qiita へのアクセスのほとんどを記事ページとトップページが占めている、ということからまずはこの2つのリニューアルを行いました。しかし、Qiita には ユーザーページ、Organizaton、タグページなどまだまだデザインが解決する課題が多く残っています。また、新しくなったトップページと記事ページもまだまだブラッシュアップし、表示速度も改善していく予定です。

Increments では、僕たちと一緒に Qiita と Qiita:Team を改善したいエンジニアを募集しています。まずは気軽に一緒にランチを食べましょう 🙂

興味のある方は こちら 💁