confluenceをmedium風のコンテンツファーストデザインにする

たくさんのdxfをillustratorで開けるように変換する
AITalk WebAPIを使ってwavを生成してs3に保存するaws lambda

cssを書いた:

https://github.com/Drunkar/confluence_css_mediumlike

 

cssを適用するブラウザ拡張(たとえばchromeならstylishなど)で適用する。

※ コンテンツ内容は変わりません

デザインコンセプト

会社での情報共有ツールとしていろんなところで使われているっぽいconfluenceだが、残念なことにそのデザインはひどい:

  • 統一されていない: 場所によってavatar画像が四角だったり丸だったり。
  • メリハリにとぼしい: 見出しがはっきりと分かれてくれないので、見出しを識別する負担を見る人に強いている
  • フォントがダサい: Arialしか指定されてないので日本語は完全にOS依存
  • 意味のないリンクが多い: “Confluence”とかいらねーし。コンテンツこそが重要。

特にやりたかったことは、

  • ブログ投稿の敷居を下げる

こと。情報発信がカジュアルにできればみんな動いてる感が出て良い循環が生まれる気がする。このへんはgithubのプロファイルページの”Contribution activity”が分かりやすくて良いデザインだなーと思っていた(自分のアクティビティだけしか表示されないけど)。

なのでデザインのコンセプトは以下のとおり:

  • 記事の内容を見るためにあるので、もちろんコンテンツファースト
  • ただし記事階層へのリンクなど、情報の構造は表示する
  • 日頃から良いと思っていたMediumとGithubを参考にする
  • 文字のメリハリをはっきりつける: mediumでも弱いと思っていたので見出しの直前はさらに離す
  • 良い日本語フォントを使う: Noto sans jp

なぜコンテンツファーストか

そもそもmediumがなぜあのようにワンカラムで、記事コンテンツとシェアメニューしか表示していないのか。逆になぜ普通のブログは「人気記事」とか「最近の更新」とかブログパーツとかが表示されているのか。

答えは簡単で、前者はSNS+スマホ時代に適したデザイン、後者はPC時代のデザインだからだ。SNS以前のPC時代では検索エンジンが流入の要だったため、まさにサイトを「訪問」する感覚で人はブラウジングをしていた。そうした時代に別記事へのリンクや楽しめるコンテンツをサイト内に配することは、回遊性を高めて滞在時間を延ばすのに大きな効果を発揮した。しかし今ではメディアによってはSNS流入がほぼすべて、特にニュースやちょっとした記事に関してはその傾向が顕著だろう。

したがって独自コンテンツでサイト内をぐるぐる回らせるより、使いやすく見やすく共有しやすいデザインの方が結果として双方向メディアはうまくいくように思われる。それを体現しているのがmediumだと僕は考えている。

なので社内wikiとしてのconfluenceがPC時代のデザインを踏襲するのは根本的に間違っている。それは単に頭に思いついたデザインの骨格をかっこよくしていこうとするだけの作業で、良いデザインにはいっこうに近づけない。

情報を共有し、見て、みんながなにかをやっていることを感じながらたまに覗ければよいのだ。

 

このブログもいいかげんに移行したい…

たくさんのdxfをillustratorで開けるように変換する
AITalk WebAPIを使ってwavを生成してs3に保存するaws lambda

Leave a Comment

Your email address will not be published. Required fields are marked *