テックブログを見る会を続けてきた結果Cybozu Inside Outブログの見た目が改善されました
この記事は、「Cybozu Advent Calendar 2022」24日目の記事です。
23日目の記事はkintone開発チームのモバイル開発担当の藤田さんによる「Android Dev Summit '22のLT会を開催しました」と、情シスのまりもさんによる「サイボウズに入社してビックリした3つのこと」です。
サイボウズ株式会社 開発本部 People Experienceチーム内 コネクト支援チームの貴島(@jnkykn)です。以前、西原(@tomio2480)さんの「ブログを見つけて読んで感想書いてそれを肴に交流する会を30分でやりきっています」で紹介された【だれでもどうぞ】どっかの企業のテックブログを見る会（以下テックブログを見る会）に2022年4月の入社以来参加しています。この会では、テックブログを読んで参加者同士で感想を共有しているのですが、「このブログは、こういうところが見やすいので良いと思う、同様にCybozu Inside Out の見た目も改善できるのではないか？」という観点で議論することがあります。その結果「これはできそう」という結論になった改善案のうち、実際に適用した変更について書きます。
Cybozu Inside Out 改善のあゆみ（2022年）
テックブログを見る会は、毎回、社内kintoneの専用スペースに感想などのやり取りの記録を残しています。私が入社したのは2022年4月1日なので、それ以降のCybozu Inside Out 改善の検討について確認していきます。記録によると、私の初参加は、オンボーディング期間中の4/18だったようです。メンターの西原(@tomio2480)さんが主催だったこともあり、入社後早期からこの会に参加していたことがわかりました。
サイドバーの最新記事にサムネイル追加、Tweet埋め込み（2022年5月）
サイドバーの最新記事リストがタイトルのテキストリンクだけだったので、「アイキャッチ画像が表示されると良いのでは？」という意見が出ました。また、「@cybozuinsideout のTweetもサイドバーに埋め込むと良さそう」という案も浮上したので、西原(@tomio2480)さんが以下の修正をしました。
サイドバーに表示されている最新記事にサムネイルと本文が出るようにしました。
（その後、アイキャッチ画像の16:9 の画像が切れないようにサイズを250 x 140 に修正と、最新記事の間の幅が調整されました）サイドバーに @cybozuinsideout のTweet を埋め込みました。
また、このタイミングで、酒井(@sakay_y)さんが Google アナリティクス4の埋め込み設定をしました。
トップページを全文形式から一覧形式に変更（2022年6月）
それまで投稿の表示制御用に<!-- more -->を挿入していただくように、執筆者にお願いしていたのですが、トップページを一覧表示にするとこの制御が不要になるので良いのでは？という案が浮上しました。この設定変更に関しては、影響範囲などを開発本部と運用本部の皆さんに事前に共有して、問題などのご指摘がないことを確認してから適用しました。
ブログタイトルの配色変更（2022年6月）
「ブログタイトルが本文と同色で見づらいので改善したい」という提案があり、CSSのバリエーションを用意してコネクト支援チーム定例でレビューしてもらって、配色を決めました。
海外拠点のエンジニアのブログをリンクに追加（2022年7月）
Kintone Corporation（アメリカ）の Kintone Engineering Blogは、テックサイトに記事のフィードを反映していたのですが、Cybozu Inside Out にはリンクがありませんでした。さらに、Cybozu Vietnam Co., Ltd.（ベトナム）のエンジニアブログCybozu Vietnam Tech Sharingがあるとわかり、Cybozu Inside Out のリンクに追加すると同時に、テックサイトへのリンク追加とフィードを反映するタスクが生まれました。このタスクは、酒井(@sakay_y)さんがベトナムのエンジニアにフィード情報の提供を依頼して、すでに実装済です。
ブログのサイドバーをいい感じにする会（2022年8月）
8月に、テックブログを見る会の中で「ブログのサイドバーをいい感じにするための検討をしましょう」という機運が高まりました。そこで、別途ミーティングを設定して、Cybozu Inside Out の改善案を検討しました。その中で以下の改善案が出たので、私が修正を担当しました。
カテゴリーのスタイルを、囲み＋float にするカスタムCSSを考える
フッターを表示して、リンクのうち、サイボウズ公式、サイボウズ・ラボ、採用情報、プライバシーポリシーをフッターに移動する
カテゴリのスタイル変更と、リンクの一部をフッターに移動したことで、サイドバーがかなりすっきりしました。
実は、このとき、以下のアイデアもあったのですが、保留中です。
リンクにYouTubeチャンネルを追加（2022年11月）
サイドバーのリンク集には、connpass の Cybozu Inside Out グループや、SpeakerDeck の Cybozu Tech へのリンクはあったのですが、動画を公開している YouTube チャンネルのリンクが無かったので、西原(@tomio2480)さんが追加しました。同じころに「テキストリンクの先頭に各サイトの favicon がついていると、どんなリンクなのかわかりやすくなりそう」という提案もあり、こちらは私のタスクとして残してもらいました。
Cybozu Advent Calendar2022バナー追加、リンクをfavicon付に（2022年12月）
今年も Cybozu Advent Calendar をやろうという話になり、今年は私が固定ページを作成して、それぞれの日にちに公開されたブログを掲載していくことになりました。
各日のブログが公開されると、固定ページにリンクを掲載して、@cybozuinsideout から記事紹介 tweet をしています。
今年もサイボウズのアドベントカレンダーやります！
— Cybozu Inside Out (@cybozuinsideout) November 30, 2022
Cybozu Advent Calendar 2022 https://t.co/6P9B3mFiaw#アドベントカレンダー #CybozuTech
その固定ページへの入り口として、サイドバーにバナーを追加することにして、自分でバナーも制作しました。「アドカレ、はじめました。」というフレーズは、風穴(@windhole)さんに助言をいただいて決めました。
記事公開予定の日は絵文字の🎁を配置したのですが、「記事が公開された日は箱が開いた絵が良さそう」と思い、こちらも制作しました。
そして、11月に私のタスクに追加された「リンクに favicon を追加する」に、やっと対応しました。はてなブログのサイドバーのリンクは、画像が設定できないので、HTMLで画像付きのリストを設定して配置しました。これで、サイドバーが、にぎやかになりました。
まだまだ改善への道は続きます
さて、2022年4月以降の Cybozu Inside Out の見た目改善へのチャンレンジを振り返りました。テックブログを見る会で浮上したアイデアの中でまだ実現できていない野望もあるので、今後も色々な技術ブログを参考に Cybozu Inside Out を改善していきたいと思います。
この記事が気に入ったらサポートをしてみませんか？