この記事はレコチョク Advent Calendar 2025 の6日目の記事となります。
はじめに
こんにちは、株式会社レコチョクでデザイナーをしている岡です。
男女問わずアイドルが好きで、昨年末から今年にかけては、オーディション番組ばかり見ていたような気がします。
特に『No No Girls』からデビューした『HANA』が大好きで、今もなおハマっています！
ちゃんみな先生の「自分の過去に中指を立てちゃいけない」という言葉に感銘を受け、日々その言葉を胸に2025年を過ごしました。
さて！先日、弊社のエンジニアリングブログを、構成・デザイン含めてフルリニューアルしました！
この記事では、そのプロセスをデザイナー視点で紹介します。
リニューアルの背景
弊社のエンジニアリングブログは10年以上続いているブログですが、これまで一度もデザインや構成を大きく見直したことがありませんでした。
そのため、IT企業としては少し古めかしい印象のデザインで、今どき感に欠けていました。
旧エンジニアブログのTOP
また、記事の探しやすさにも課題がありました。
ハッシュタグは存在していたものの、カテゴリ分けはされておらず、目的の記事にたどり着くのが大変でした。
導線も限定的で、「最近の記事」や執筆者、ハッシュタグでの絞り込みくらいしかなく、他の切り口から記事にアクセスすることは難しい状態でした。
「#AI」での絞り込み結果と「最近の記事」
じっくり回遊したくなるブログとは言えませんでした。
そして、私たちが最も課題に感じていたのは、「レコチョクらしさ」 が伝わらないことです。
弊社は「音楽市場の最大活性化」をミッションとして掲げる会社ですが、そのイメージがブログ上ではほとんど表現されていませんでした。
また、「時代とニーズに合わせたサービスをITや新技術で提供する」というIT企業としての一面や、社員の働き方・社内文化も伝わりにくい状態でした。
こうした課題を解決するために、今回のリニューアルでは構成・デザインの全面見直しを行い、「読みやすく」「探しやすく」「レコチョクらしさが伝わる」 ブログを目指しました！
目指した姿とコンセプト作り
目指したブログの姿と想定ユーザー
今回のリニューアルでは、読者に以下のような体験をしてもらうことを目指しました。
- 記事が読みやすい
- 目的の記事を読んだ後も、他の記事も回遊したくなる
- 実際に扱っている技術や働き方が伝わる
- レコチョク＝音楽企業、最新技術に取り組んでいる会社であることが伝わる
- 「なんかおもしろそうな会社かも？」と思ってもらえる
想定したメインユーザーは以下の2軸です。
- 学生やその他求職者
- 技術の調べ物をしていてたどり着いた人
レコチョクのことを全く知らない人というより、
会社のことを知って興味を持ってくれた人に、さらにレコチョクの魅力を知ってもらうことをイメージして、デザインと構成を考えました。
コンセプトとデザインの方向性
コンセプトの軸
-
読みたくなる
記事が視覚的にも理解しやすく、読者が自然に読み進められる構成とレイアウトを意識しました。 -
探しやすい
カテゴリ整理やタグの見直し、記事への導線設計を行い、目的の記事にスムーズにたどり着けるようにしました。 -
レコチョクらしさを伝える
音楽企業としてのアイデンティティ、最新技術に取り組む姿勢、社内文化や働き方などを表現し、読者に会社の魅力を伝えることを重視しました。
デザインの方向性
-
テーマカラー・雰囲気
レコチョクのブランドカラーであるピンクをメインカラーに採用。
音楽要素を取り入れ、エンタメ感を出しつつ、親しみやすく、読者がワクワクするような明るいトーンで統一しました。 -
世界観
「読むと会社の魅力が伝わる」「なんだかおもしろそう」と思ってもらえるブログを目指しました。 -
UI/UXの工夫
記事が読みやすく、回遊したくなる導線を設計。
ユーザーが迷わず目的の記事にたどり着けることを意識しました。
情報設計・記事構成の見直し
リニューアル前のブログでは、記事の探しやすさや回遊性に課題がありました。
そこで、以下のポイントを意識して情報設計を行いました。
カテゴリ整理
もともと存在していた「ハッシュタグ」を整理し、新たに7つのカテゴリに分類しました。
開発、組織、デザイン、スキルアップ、音楽、イベントレポート、その他。
読者が直感的に興味のある記事にたどり着けるようにしました。
例 :「開発」と「スキルアップ」
導線設計
WHAT'S NEW（新着記事）、FEATURE（特集）、FIND ARTICLES（カテゴリから探す、検索）、EDITOR'S PICK UP（編集部イチオシ記事）など多様な入り口を用意しました。
目的の記事に迷わずたどり着ける構造と、様々な切り口で読みたい記事を探せる構造を意識しています。
「FEATURE（特集）」と「EDITOR'S PICK UP（編集部イチオシ記事）」
回遊性を意識した配置
記事下部に「RELATED ARTICLES（関連記事）」、記事ページのサイドに「カテゴリから見つける」を配置し、読者が自然に他の記事に進めるようにしました。
デザイン面のこだわり
今回のリニューアルでは、情報設計だけでなく「レコチョクらしさ」や「読んでいて楽しい体験」をどう表現するかにもこだわりました。
音楽企業としての世界観を軸にしつつ、技術ブログとしての読みやすさも担保することを意識しています。
カラーとタイポグラフィ
-
カラー
レコチョクのブランドカラーである「ピンク」 をメインカラーとして採用しました。
その他にも、明るい色味を使い、ブログ全体が “ワクワク感”のあるトーン になるよう調整しました。
-
タイポグラフィ
長文を読むメディアのため、読みやすさを重視してフォントを選定。
記事本文とタイトルや見出しではフォントを分け、読みやすさと親しみやすさの両立を図りました。
音楽要素を取り入れた表現
レコチョクは音楽を扱う会社なので、サイト全体に自然と “音楽らしさ” が感じられるよう、さまざまなモチーフを散りばめました。
- ファーストビューに レコードモチーフ を配置し、訪れた瞬間に「音楽企業である」という印象を与える
- 音符や楽器など音楽に関連する要素を採用
TOPページのファーストビュー
-
カテゴリを表現するイラストをすべて音楽に紐づくテーマで統一し、世界観を一体化
-
UIの中に再生アイコンや早送りアイコンなど、ちょっとした“隠れ音楽モチーフ” を仕込む
他にもありますので、ぜひ探してみてください！！
“楽しい”を感じられる動きのデザイン
サイト全体で、音楽企業らしい「わくわく感」や「楽しい空気」 を感じてもらえるよう、アニメーションにもこだわりました。
具体的には、次のような動きを取り入れています。
-
TOPのレコードがくるくる回る
訪れた瞬間に“音楽企業らしさ”を直感的に伝えます。 -
TOP の流れる文字
リズム感のある動きを追加し、ブログ全体の軽やかさやエンタメ感を自然に演出。 -
カテゴリや記事カードのホバーアニメーション
カーソルを合わせるとカードがふわっと浮くような軽い動きをつけ、視覚的に「触れる楽しさ」を加えました。
大きく派手なアニメーションではなく、サイトの読みやすさを損なわない範囲で、“ちょっと楽しい” 体験が生まれるように調整しています。
イラスト・手書き感による“堅苦しくない雰囲気”
レコチョクは柔軟でフラットな文化を持った会社です。
その空気をデザインにも反映するため、ややラフなイラストや手書き風のあしらいを使用しました。
-
カテゴリ部分の手書きイラスト
-
背景の方眼
レコチョクの自由度の高さや親しみやすさが伝わるようにしています。
名称について
さらに、リニューアルのタイミングでブログ名称も変更しました。
旧：「レコチョクのエンジニアブログ」
新：「RecoChoku Engineering Blog」
「Engineering」 という言葉には、元々「工学」という意味がありますが、近年では技術やものづくりに関わる幅広い意味で使われることも多く、「単にモノを作る技術だけでなく、様々な要素技術を組み合わせて一つのシステムや製品を創造し、社会的な問題を解決することを目指すプロセス全体」を指すという考え方もあります。
この名称には、執筆者を「エンジニア」に限定せず、記事テーマも技術だけに絞らず、組織や働き方、社員それぞれの音楽の趣味など幅広く扱っていきたい、という運営者としての思いを込めました。
おわりに
今回のリニューアルでは、特に 「レコチョクらしさ」 をどう表現するかにこだわりました！
「レコチョクとはどんな会社なのか」「レコチョクらしさとは何か」、そして「そこで働く人々の魅力をどう伝えるか」を考える過程は、難しくもあり、とても楽しい経験でもありました。
生まれ変わった「RecoChoku Engineering Blog」を通して、
みなさんに少しでも 「レコチョクらしさ」 とその魅力が伝わると幸いです。
今後も、社員一人ひとりが 「レコチョクらしさ」 が伝わる記事を更新していきます。
ぜひ、これからもRecoChoku Engineering Blogをチェックしていただけるとうれしいです！
最後まで読んでいただきありがとうございました！
明日の レコチョク Advent Calendar 2025 は7日目＜Cookie / Sessionの基本とセキュリティ上の注意点を一気に理解する＞です。お楽しみに！
この記事はレコチョクのエンジニアブログの記事を転載したものとなります。