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

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

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

要望について

ロゴについて特に具体的な要望はありませんでしたが、視認性と情シスナビらしさを伝える配色や要素を盛り込むことが大事だなと感じました。

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

HRog→https://hrog.net/

HumAInのHP→https://humain.co.jp/

 

ひろし、フォント探しの旅に出る

まず、「情報システムっぽいフォント」を探すところから始めました。「近未来 フリーフォント」「ITっぽい フリーフォント」「フォント ロゴ利用可能 フリー」などのキーワードで検索し、理想のフォントを見つけるために時間をかけました。

検索してみると、確かにITっぽい雰囲気のフォントはいくつか見つかったのですが、漢字に対応していないものが多く、かなり苦労しました。あるフォントはデザイン的には理想に近いものの、漢字が使えなかったり、逆に漢字対応はしているもののデザインが理想とは別方向のものだったりしました。「このフォントよりはこっちのフォントの方がITっぽい気がする」という風に、いくつかのフォントを比較しながら試行錯誤を繰り返しました。

さらに、理想に近いフォントを見つけたとしても、商用利用が可能かどうかが分かりにくい場合が多かったり「今開いている懸念点は埋められるものの、別の懸念点が発生する」といった状況が頻繁に起こりました。そのため、商用利用可能かどうかといったライセンスについても慎重に確認しなければなりませんでした。

その中からいくつかフォントを絞り、色々な方に意見を仰いだところ『せのびゴシック』が一番理想に近いと感じたのでこちらを利用させていただきました。

せのびゴシック↓

https://modi.jpn.org/font_senobi.php

 

視認性とデザイン性の戦いが開幕

次に視認性を高めるために、色のコントラストをしっかり考える必要がありました。

視認性の高い配色を選ぶことで、どんな背景でもロゴがはっきり見え、ユーザーに強い印象を与えることができるからです。

その点ではロゴの色選びには本当に頭を悩まされました……

メインカラーとサブカラーのバランスが難しくて、どちらかが強すぎたり、弱すぎたりすると全体のデザインがしっくりこなくて、配色バランスが大切なのはわかっていましたがここまで大変とは……と思いました。

いろんな組み合わせを試して、どこに配置してもちゃんと映える色を見つけるのに時間がかかりました。

さらに、「ただの文字列ではなく、ロゴらしい見た目にする」というのも大変でした。シンプルだけどインパクトのあるデザインにするために、いくつかデザイン案を作成し、意見を仰ぐことの繰り返しをしていました。視認性を保ちながらブランドの個性を表現する形やラインを見つけるまで本当に試行錯誤の連続でした。

モチーフ選びに苦戦

ふんわりと「情報システムといえばグラフっぽいものやITっぽい幾何学模様が似合いそうだな…」という漠然としたデザインのアイデアはあったものの、実際に手を動かしてみると色々な要素を試しても「これじゃないな…」と悩むことが多かったです。思った以上に難しく、何度もデザイン修正を行いました。

複数のデザイン案を作成してプロジェクトのリーダーに見せたところ、リーダーから「下から2番目のデザインが一番良いかも！」という意見をいただきました。

デザインの具体的な要素としては、グラフのような折れ線とITっぽい六角形を取り込みました。これにより、情報システムらしさと未来感を表現することができました。また、このサイトが「応援メディアサイト」であることを強調するために、「ビ」の濁点を「＋」にするという工夫をしました。これにより、サイトの『情報システムに携わる人を応援するサイト』感がより伝わりやすくなったと思います。

最終的にはこうした要素を組み合わせたデザインが完成しましたが、その過程では多くの失敗とフィードバックがありました。

様々なデザインを試し、リーダーの意見を取り入れながら完成度を高めることができたのは、非常に勉強になったなあと感じました。結果として視覚的にも意味的にも納得と満足のいくロゴを作り上げることができたと感じています。

 

ファビコンって何？！

ファビコン作成も任されたのですがファビコンを知らない人間だったのでファビコンとは？を理解するところからスタートしました。

ちなみにファビコンは、ウェブサイトのタブやブックマークに表示される小さなアイコンのことです。サイトの識別に役立つものです。

ファビコンを理解したところで、じゃあどうしていくか？という問題が出てまいりました。

情シスナビの「情」をアイコンにする案もありましたが、ファビコンはかなり小さく表示されるので視認性があまり良くないという点で「なんのサイト……？」となってしまう可能性が浮上したのでやめました。

結果、折れ線グラフのようなモチーフを採用したものと、「＋」を採用したものの二択で悩みまくり、結局「＋」モチーフのものになりました。

 

まとめ

このプロジェクトを通じて多くのことを学ぶ機会になったなあと感じます。

まず、クライアントの要望やコンセプトを汲み取り、それを具体的なデザインに落とし込むことの難しさを痛感しました。特にフォントや色の選定など細かい部分にこだわることが全体の印象などに大きく影響することを学びました。

また、新しい概念や技術にも触れる機会となりました。「ファビコン」や、特定の業界に特化したフォントの選定など、これまで経験したことのない領域に挑戦することで、自身の成長につながったなあと感じています。

最終的なデザインがリーダーから高い評価を受けたことはこのプロジェクトの大きな成果であり、自信にも繋がりました！

今後もこの経験を活かし、仕事に取り組んでいきたいと思います。

 

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

 

うつくし　ひろし