さくマガ公式SNS
お問い合わせ

『さくマガ』リニューアルの舞台裏。デザイングループ担当者インタビュー

さくらインターネットの最新の取り組みや社風を知る
>>さくマガのメールマガジンに登録する

さくらインターネットが運営するオウンドメディア「さくマガ」が、2024年6月に大幅なリニューアルをおこないました。今回のリニューアルプロジェクトでは、「記事が探しやすいサイト」をコンセプトに掲げ、ユーザーが目的の情報にスムーズにアクセスできるようなデザインに生まれ変わりました。

リニューアルを担当したのは、マーケティング部 デザインチームの金子 あいと佐藤 大地。彼らはデザインのコンセプトやテーマをどのように設定し、ユーザビリティ向上のための工夫を凝らしたのか、インタビューしました。

金子 あい(かねこ あい) プロフィール
さくらインターネット マーケティング本部 マーケティング部 デザイングループ
Web制作会社にて8年勤務した後、2022年7月にさくらインターネットに入社。現在はデザイングループにてWebディレクションやコーディングなどWebに関わる業務を担当。

佐藤 大地(さとう だいち) プロフィール
さくらインターネット マーケティング本部 マーケティング部 デザイングループ
Web制作を扱う専門学校を卒業後、採用サイトに特化したWeb制作会社に入社し、2年勤務する。2022年5月、さくらインターネットに入社。現在はデザイン全般を担当。

テーマは「記事を探しやすくする」こと

今回のサイトリニューアルは、チーム内でどのような役割分担でおこなわれたんでしょうか?

金子

ウェブサイトを作成する際、プロジェクト全体を統括する「ディレクター」が中心となり、「デザイナー」や「コーダー」、「システム構築」を担当するメンバーがチームとして役割を分担して進めていきます。

さくマガのリニューアルプロジェクトでは、私がディレクターとして、全体の取りまとめを担当し、スケジュールや進行管理などをおこないました。先ほど役割を分担して、といったのですが、私自身が元々コーディングを得意としていることもあり、今回はコーディングと合わせて以前からやってみたかったCMSの実装までトータルに担当させてもらいました。

CMSの構築に関しては、私自身が経験不足な部分もあるので、知見が豊富なメンバーにサポートしてもらいました。

今回のリニューアルは、リリース日が決まっていたため、スケジュールどおりに進行することが大切でした。定期的にミーティングを開催し、各メンバーとのコミュニケーションを密にとりながら、連携し、計画的にプロジェクトを進行できたと感じています。

佐藤

「構成案の作成」から「デザイン制作」までを担当しました。ユーザーに「さくマガ」でどのような体験を提供できるのかを考え、UXの設計から、その体験を形にするデザイン制作までをおこないました。

リニューアルにおけるデザインのコンセプトやテーマについてお聞かせください。

金子

デザインは佐藤さんに任せていましたが、サイト全体のテーマとして「記事を探しやすくする」ことに重点を置きました。さくマガのターゲットは「マーケティング」「ブランディング」「リクルーティング」の3つの軸に分かれているため、どの来訪者にとっても使いやすいサイト構成を意識して設計しました。

佐藤

記事がメインのコンテンツということもあり、デザインそのもののテーマやコンセプトというのは立てずに、リニューアルデザインの要望を編集部のみなさんからお聞きしつつ、自分なりにさくマガがどういった媒体なのかというのを改めて意識しながらデザインしました。

自分で読んだ限り、さくマガは掲載記事のカテゴリが幅広いと感じていて、そこから多くのビジネスパーソンの方に読んでいただいているメディアだと思います。そのため特定のジャンルに絞ったデザインというよりは極力シンプルにして、記事を中心に装飾が変に目立たないようなデザインを目指しました。

色味などは元々使われているロゴが、明るい緑とピンクなので、このトーンを活かしつつポジティブな表現をしたかったので、「ポジティブ」という言葉を素直に ◯ や + といった記号に置き換えて、パーツ作成などをおこなっています。ただし、ビジネスパーソン向けの媒体ではあるので軽くなりすぎないように、バランスを取るようには気をつけてデザインしました。

>>5分でさくらインターネットのサービスがわかる!サービス紹介資料をダウンロードする

こだわった部分と工夫した点

リニューアルデザインで、とくにこだわった部分や工夫した点はありますか?

金子

リニューアル前のさくマガや競合サイトを調査し、サイト内の回遊性やカテゴリーの導線強化に重点を置きました。

とくにトップページの構成を見直し、カテゴリーごとの整理やおすすめタグの設置をおこなうことで、ユーザーが、目的の記事やさくマガ編集部が読んでほしい記事にスムーズにたどり着きやすいサイト設計を意識しました。

佐藤

さくマガに訪問した人が、初めに訪れるトップページのファーストビューでは、ユーザーに「さくマガ」の魅力が伝わる記事を置きたいと考え、単なる新着記事ではなく編集部側で自由に変更可能なのおすすめ記事枠を配置しました。これにより、特定の記事を出し続けたり、関連した記事を複数掲載できるので、施策などを行った際にも計測がしやすいデザインにしています。

また、複雑化していたタグやカテゴリーを絞り、シンプルなアイコンをヘッダーに追従させることで、直感的に記事を探しやすくしました。

記事詳細ページでは、サイドバーを省くことで、ユーザーが記事に集中できるよう配慮しました。「さくマガ特集」というオリジナルコンテンツも追加し、回遊性を高める工夫もしています。

デザイン以外で工夫した点はありますか?

佐藤

部門間のコミュニケーションですね。さくマガのリニューアルには、多くの部署が関係しているため、頻繁に各部署とのミーティングを重ね、密に連携をとっていました。
その結果、複雑化していたタグやカテゴリー、新しい特集記事の見せ方についても議論がスムーズに進み、みなさんの意見を取り入れたデザインを作ることができたと思います。全員が「さくマガ」をよりよいものにしようと考え、意見を出し合えたことが、一番こだわった部分かもしれません。

「サイトをもっと良くしたい」という想いが強まった

今回のリニューアルで得た個人的な経験を教えてください。

金子

CMSの構築スキルや記事移行に関して新しい知見が増えました。
また初めて担当した、ディレクションを通してコミュニケーションの重要性についても学びました。他部署とのコミュニケーションに関わらず、チーム内のコミュニケーションの比重など、今後も臨機応変に対応していけるよう経験を積みたいと思います。

佐藤

サイトの訪問者(ターゲット)となるユーザーが「どのような人で、どのような感情や意図を持っているのか」を理解し、ストレスなく目的を達成できるようサポートするのがデザインだと考えています。そのデザインの意図をしっかりと言語化し、関係者に理由を説明することの重要性を改めて感じたプロジェクトでした。

また、スケジュール管理、優先度の割りあてなど、デザインプロセス全体を通しても多くのことを学べたと思います。

リニューアルを終えての感想をお聞かせください。

金子

これまでコーディングが中心の仕事をすることが多く、1サイトを自分がメインでディレクションする機会は初めてだったので、自分自身にとって大きな成長でした。
人が多く関わると大変な一方、今回はチーム同士での話し合いも多く、ただ依頼を受けるだけではなくちゃんとこちらから提案することができたので、そういった点もよい経験が積めたと思います。

構成や仕様の検討やデザインの進め方など都度すり合わせができ、関係者全員で納得して進めることができました。結果的に最初の情報設計でのねらいどおりユーザーに行動してもらえていそうで嬉しかったです。

佐藤

これまではマーケティングという領域から「課題の解決」に焦点をあてたデザイン制作を多くおこなっていました。さくマガでは「体験の設計」を構成から考え、どう進めていくのか話し合いながら、リニューアルを進めることができました。

設計した構成を、具体的な施策としてデザインに落とし込む際に多くの知見を得ることができたのも良かったです。

また、インフラ環境の再構築という依頼者の要望を満たしつつ、将来のブランドイメージの形成にも配慮しました。機能的な改善だけでなく、「改善後のイメージを言語化」して説明する能力が上がったと感じています。リリース後の計測は現在進行中で、「多くの施策」に関する結果はまだ出ていませんが、「回遊率」や「熟読率」などの数値が上昇していると聞いています。

各部署が連携し、提案したアイデアを実現するためにプロジェクトメンバーが一丸となって取り組めたことは、今後の自信につながると考えています。リニューアルを終えて感じたのは、ミーティングを重ねてコミュニケーションをとりながら進めたことで、「このサイトをもっと良くしたい」という想いがいっそう強まったということです。今後もさくマガの改善に関わる機会があれば、引き続き協力していきたいと考えています。

>>さくらインターネットの採用情報を見る

執筆

青木 茉利奈

さくらインターネット初の新卒社員。
2023年4月から、さくマガ・さくらのユーザ通信・SNS関係の担当しています。

※『さくマガ』に掲載の記事内容・情報は執筆時点のものです。

すべての記事を見る

関連記事

この記事を読んだ人におすすめ

おすすめのタグ

特集