情シスナビのデザイナーが作ってみた感想を語る 〜UI/UX編〜

ごきげんよう。うつくしひろしです。

この度は情シスナビリニューアルに伴うデザインを行なったので、デザイナー視点でUI/UXデザインにおいて心がけたことや、やってみた感想などをを述べていこうかなと思います。

ロゴ・ファビコン編はこちら↓

情シスナビのデザイナーが作ってみた感想を語る 〜ロゴ、ファビコン編〜

要望について

依頼いただいた際の要望内容は、弊社のグループ会社である『株式会社HRog』のメディアサイトである『HRog』をモチーフとしたサイトの作成をしてほしい＋メインカラーはHumAInと同じブルー系でまとめてほしいとのことでした。

HRog

→https://hrog.net/

 

いつもワイヤー作成→配色の流れでデザインを行うので、いつも通りワイヤーから作成を行なっていきました。

HRogをモチーフにするとはいえ、あまりにも寄せすぎると『情シスナビっぽさ』や『情報システムのメディアサイト感』が損なわれてしまうため、記事やカテゴリの配置はHRogを参考にするものの、細かなデザインの部分は情シスナビらしさやHumAInらしさを意識して作成しました。

『HumAInらしさ』が一番出せたなあ！と思った部分としては『最新記事』や『よくみられている記事』などのカテゴリタイトルの装飾部分です。

HumAInにも使われているデザインを流用することで『HumAInがやっているメディアサイトなんだ』と印象付けられるように心がけました。デザインの姉妹感というか、個人的に同じ血が流れていそうなデザインにできたなあと思っております。

HumAInのHP

→https://humain.co.jp/

 

しかし、モチーフに寄りすぎてしまうことも少なくなく……そういった場合にはCreativeDivision内で批評会を行い、ブラッシュアップを重ねてなんとか『真似っこ感』から離脱させることができました！

配色する際の考え方なども教えてもらえたのですごく勉強になりました。

 

 

配色で悩み始める

配色作業、本当に苦手で……（しらんがな）HumAInの青系でまとめてほしいと言われたもののアクセントカラーはどうしようか？サブカラーもHumAInと同じにしてみたらなんとなくHRog感が出てしまった……じゃあどうしたらいいだろう……などとウンウン唸りながら配色を決めていきました。

上記の問題が一気に発生し、「問題というのは突然複数降りかかってくることもあるんだなあ」と思うなどしたのですが、焦っても仕方がないので一つずつ問題を分解していこうと考えました。

まずサブカラーを変更すれば『HRog感』は解消されるのでは？と思った私は、緑っぽさが強かった色味から、青みを強くした色に変更しました。

これでもHRog感が完全に消えるわけではなかったため、サブカラーを使用する場面を減らし、画面をみた時に入ってくる色情報をできるだけ青に寄せることで懸念点を解消しました。

アクセントカラーに関しては、オレンジにすると情報システム感が損なわれる気がしていて、かといって赤はエラー感があるし……じゃあ黄色は？…ピンク…？コレジャナイ感拭えないよね……など悩みすぎて眉間にシワを50万本作っても納得のいく配色が出なかったのでメリット・デメリットを記載した上でプロジェクトリーダーに提出したところ「オレンジやな！」と即決でした。

青配色のなかでオレンジは結構目立つので、オレンジをアクセントに選んで、選んでもらえてよかったな〜！と感じました！

 

アイコン作成のむずかしさを知る

サイトによくあるカテゴリ内容などを示すアイコンを今回全て作成したのですが、わかりやすくてシンプルなものを作るのって非常に大変なのだなあと痛感しました。

絵は得意なのですが、無駄なく要素のみを伝えるアイコン作成はやった経験が少なくて発想の引き出しがかなり少ないなと感じました。

また、今回プレスリリースというワードを初めて知ったので言葉の意味を知って理解するということをしなければデザインに落とし込めないということも再認識しました。

自分で調べるだけでなく、社内で実際にプレスリリースを行い仕事に携わっている方に聞いてみたりして、自分の中で意味を反芻し理解した上で「広く伝える役割を持っているので拡声器のようなデザインにしてみよう」と思い立ち、このデザインになりました。

ただアイコンをつくるにしても『角丸はつけるか』『塗りつぶしデザインにするか』『ポップな感じに寄せてもいいのか』など考えることはあいかわらず山ほどありましたが、目的に立ち帰り、何が重要なのか、今回のメディアサイトで何を伝えたいのかを考えた結果、HumAInのイラストのタッチによせたものとなりました。

 

メルマガ登録のアピール方法

情シスナビ、メルマガ登録すると週一配信で先週のニュースをまとめ読みできる便利なサービスがあるのですが、このサービスをアピールしたいがどう見せるのが効果的なのか？

私は逆張りしがちなのでアピールされすぎると「いやちょっと……主張強すぎていやかも……」となってしまう（非常に厄介）のでデザイン性で落ち着きを持たせながら内容はしっかりアピールするバナーを心がけました。

デザイン案は４つほど作成し、カジュアルなものからシンプルなものまで作り、アピール感を強めたものも作成しました！

リサーチをする上でメルマガ登録の誘導としてサイト上部、中間、フッターに配置という例が多いなと感じたので、目につきやすいが記事の邪魔にならないようにページの右側と、記事の終盤、フッターに挿入しました。

また、視線を集めやすいようメインカラーはあまり使用せずにアクセントカラーであるオレンジ色を主に使用して作成しました。

もしここでアクセントカラーにビビットな青色とか使用していたら画面上であまり目立たなかったかもしれないなと思いました……笑

まとめ

情シスナビのデザイナーとして頑張ったところや心がけたところ、煮詰まった際の解消法をつらつらと語らせていただきました。

要望より一歩先の『求めているもの』に関してプラスアルファの提案を行い、色やフォントなどの要素を慎重に選定しました。特に、配色は背景によっても異なるため、様々な組み合わせを試しながら最適なバランスを見つけることに結構時間を割いてしまいましたが、最終的には視認性を損なわずに情シスナビらしさを演出することができました！

 

こちらがアピールしたいポイントを入れ込みつつ、ユーザーが利用しやすい『情報システムに関わる全ての人を応援するサイト』になっていれば幸いです。

読みづらい文章だったかとは思いますがここまで読んでいただきありがとうございました。

 

うつくし　ひろし