TECHBLOG

コルテクネ コーポレートサイト 管理画面開発の裏側

こんにちは。コルテクネのフロントエンドエンジニアです!

コルテクネ コーポレートサイトは、2020年10月にオウンドメディアとしてリニューアルしました。
リニューアルの経緯やサイト構成についての記事はこちら

今回は、フロントエンド開発を担当した私から、当サイトの管理画面開発の裏側をご紹介します。

機能の絞り込みと追加開発

コルテクネ では社員全員が記事を書き、更新を行います。
そのため、まずはメンバーに要望のヒアリングを行いました。

要望があった機能については、
「この機能があることで、本当に目的を果たせるのか?」
「現時点で、本当に必要で搭載すべき機能か?」
という観点から、精査していきます。

例えば今回の開発では、「記事編集画面に、他の社員に伝達したいことを書くためのフリースペースをつけたい」という要望がありました。

この機能について社内で検討した結果、「社員間の伝達には、普段から社内で利用しているSlackで十分だと思う」という意見が多く、現時点では必要ないと判断し、実装には至りませんでした。

このように機能を1つずつ精査して本当に必要なものだけに絞り込み、第1弾をリリース。
しかし、実際に使ってみると、改善点や新たな要望が出てくるものです。

第1弾をリリース後、運用していく中で、社長から「PhotoShopを立ち上げなくても、管理画面から簡単な画像の編集ができるようにしたい!」という要望があり、画像のトリミング・リサイズ機能を追加することに。

当初はライブラリを利用して開発しようと考えていましたが、
「ライブラリを使わなくても、Canvas使えば作れそうだね」と、CTOが一言。

内心、
「Canvas使ったことないし、難易度高そうだけど、できるかな・・・」と焦る、開発担当の私。

もちろん、開発には予算や期間の関係もありますし、『車輪の再発明』を避けるといったことからも、ライブラリやプラグインを使うこと自体は悪いことではありません。
しかし、「どのような仕組みで動いているかは知っておいたほうがいい」というCTOのモットーに共感を覚え、余計なコードを読み込ませないといった利点からもオリジナルで開発することを決意しました。
初めてのCanvasに苦戦しながらも、丸2週間ほど費やし、完成させたのでした。

社長は仕事と子育て(2歳8か月の男の子)で忙しい日々の中、隙間時間を見つけてスマートフォンから社長ブログを更新しており、「管理画面から画像のトリミングができて、更新しやすくなった!」と大好評でした。

画像のトリミング、リサイズ機能

使いやすい管理画面を目指してUI改善

管理画面は、広報などの普段開発に携わっていないメンバーも利用します。
メンバーみんなが使いやすい管理画面を実現するため、UIデザインにも力を入れています。

社内ツールの開発ということで、構築しながら同時にUI改善を行っていきました。
今回は、改善箇所の一部をお見せしたいと思います。

記事編集画面:メインボタン・サブボタンの改善

記事編集画面の一部

<改善目的と内容>

・メインボタン「保存する」を明確化するため、サブボタンを「緑色」から 「水色(メインボタンの色)のアウトライン」に変更し、統一。

・視認性向上のため、テキストを太字に変更し、サブボタンの文字サイズアップ。


アイキャッチ設定モーダル:削除ボタンの改善

アイキャッチ設定モーダルの一部

<改善目的と内容>

・重要度の高いボタン「アイキャッチに設定する」に視線がいくように、オプション扱いである削除機能はテキストリンクに変更。


グローバルメニュー:アイコンの改善

グローバルメニュー

<改善目的と内容>

・一貫性のあるデザインにするため、アイコンの「線の太さ」や「丸み」を揃える。


「操作の重要度によってデザインを分ける」 「デザインに一貫性を持たせる」 など、
ルールを持ってデザインをすることで、シンプルで使いやすい管理画面となりました。
どれも細かい部分になりますが、UIを少し変更するだけで、ぐっと使いやすくなります。

デザインは、元来「設計」という意味を持ちます。
今回の開発で、論理的なルールに基づいてデザイン=設計していくことの大切さを再認識しました。

おわりに

コーポレートサイトで利用しているCMSの管理画面開発の裏側をご紹介いたしました。

もともと社内用に開発を始めたシステムですが、オウンドメディアの構築に適しているため、導入しやすい価格帯でお客様にもご提供を始めました。

サービスの詳細は「オウンドメディアCMS-bloomedia」をご覧ください。

このサイトは、Internet Explorerでの表示に対応していません。

Microsoft EdgeGoogle Chromeなどからご覧ください。

Edgeで見る