#49「ミツエーリンクスのコーポレートサイトリニューアル（デザイン編）」

加藤 : 皆さん、こんにちは！ ミツエーリンクスの加藤です！

ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、 Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。

前回のエピソードでは昨年末にリニューアルしたミツエーリンクスのコーポレートサイトについての話をしたのですが、デザインについての話も聞きたいとリクエストがあったので、今回はリニューアルのデザインを担当していただいた遠藤さんをお招きして、いろいろ聞いていきたいと思います！遠藤さん、よろしくお願いします！

遠藤 : よろしくお願いします！

加藤 : えー遠藤さんには2021年にも一度ゲストとしてご参加いただいて、「2021年のデザイントレンド」のお話をしていただきましたね。

遠藤 : あ、もう3年も前なんですね！あっという間ですね。

加藤 : そうですね！今回の話をするにあたって、復習も兼ねてちょっと聞き直してきたんですけど、今回のリニューアルの話につながるところもまぁまぁあったので、リスナーの皆さまもぜひ併せて聞いていただければと思います！

はい、では、さっそくリニューアルについての話を聞いていきたいと思いますが、まずは直球で、今回のリニューアルのテーマや、意識したポイントとかがあれば教えていただけますか？

遠藤 :　はい、今回のリニューアルは、情報設計は大きく変えずに見た目をリニューアルしようという前提がまずありました。で、見た目をどう変えていくかでいうと、ミツエーリンクスのビジョンとかアイデンティティに合わせてサイトの印象を変えていきたいというのが1つですね。で、もう1つは「文字をもっと読みやすくしたい」というのが大きなテーマだったかなと思います。

加藤 : リニューアルの前はどちらかというとカッチリしているというか、まぁ真面目な印象があったのかなぁと思いますね。まぁもちろん真面目なのが悪いわけではないんですけど。

遠藤 : そうですね。普段一緒にお仕事をしている中でも、社員の皆さんの真面目さや誠実さっていうのはとても感じてたので、そういう側面では会社の雰囲気にマッチしたデザインだったと思うんですけど、こう真面目で誠実なだけじゃなくて、やさしさというか、相手を尊重しながらお互い協力して制作しているのを見て、そういう柔らかい面もサイトから感じ取れたらいいな、という思いはありましたね。

加藤 : あーなるほど…リニューアル前のサイトを知っている私からすると、やっぱりだいぶ印象変わったなぁとは思いましたね！

遠藤 : あぁそうですか…！あのー長いこと、こう新しい方のデザインを見ているので、もう随分前にリニューアルした感覚になってしまっているので、少し麻痺してるところはあるかもしれないですね笑

加藤 : 先ほどそのリニューアルのポイントとして文字をもっと読みやすくしたいとおっしゃっていたんですけど、あのこれは社内からもフォントにこだわりを感じるっていうコメントをいただいていたりとか、私自身そのテキストから受ける印象もけっこう変わったなと思いました。

遠藤 : あーうれしいですね。リニューアル前は游ゴシックっていう書体を使っていて、游ゴシックはデバイスフォントなので表示も速いですし、字自体もすごくきれいなので、そこまでネガティブな印象っていうのはないんですけど、社内で話してた時になんかこう環境によっては文字が読みにくくなってるところがあるかも、みたいな意見があったりしたんですよね。で、あとはさっきも話した通りなんですけども、全体の印象をもう少し柔らかくしたかったので今回はNoto Sansという書体を採用しました。

加藤 : 読みやすさと、まぁ字体の印象なども考えてフォントを選ばれてたんですね。まぁでも、やっぱりフォントの種類ってたくさんあると思うんですけど、絞り込んでいくポイントとかってありましたか？

遠藤 : そうですね。他の柔らかめの印象があるフォントとか、ユニバーサルデザインフォントとかも検討はしたんですが、最終的には長文になった時の読みやすさとか、サイト全体の印象とバランスがとれているか、っていうのを総合的に見て判断した感じですね。

加藤 : ちなみに文字つながりでいくと、前はカタカナ表記だった見出しがあって、たとえば「サービス」とか「ナレッジ」とかっていうところが英字に変わっているんですけど、これも何か意図があったんでしょうか。

遠藤 : はい。英字に関しては、ミツエーリンクスのアイデンティティである「Smart Communication Design Company」も英語なので調和しますし、こうグローバルな一面も見せつつ、なんとなく雰囲気に彩りを添えるみたいな役割も兼ねてますね。

加藤 : たしかにサービスページとか会社情報ページにはメインビジュアルとして大きめな写真を置いていて、そのメインビジュアルの上に英字のタイトルが配置されていますが、やっぱり英字と写真のバランスがいいというか…あーカタカナよりも英字の方が雰囲気が出るなぁと思ってました。

遠藤 : 見出しやタイトルにはスラブセリフ体っていう種類のRoboto Slabというフォントを使っていて、こうカチっとした感じと柔らかい感じがするので、それでミツエーの職人っぽい雰囲気を出せないかっていうのを考えてました。あとサイト全体を丸い雰囲気にしているので、そことのバランスを意識してます。

加藤 : 開発していると、やっぱりただこうデザインで指定されているフォントを指定して終わりになってしまったりすることが多いんですけど、こうやってデザイナーさんがどういうことを考えてフォントを選んでいるのかを聞いてみると、やっぱりフォントの見方っていうのも変わってきますね。で、今サイト全体を丸くしたっていうことでしたが、これも社内からも気になる！ってコメントいただいてました。やっぱり丸さはけっこう意識されたんですか？

遠藤 : そうですね。実は角丸の話は冒頭で話した2021年のエピソードでも少し触れているんですけれど、たとえばWindows 11のエクスプローラーとか、あとは私たちが普段使っているブラウザのウィンドウ自体も実は角丸で、OSレベルで全体的に丸い感じなんですよねー。

加藤 : あーたしかにアプリケーションが画面にフィットしていると気づかないかもしれませんが、そう言われてみるとそうですね！Windows 10の頃は丸くなかった気がしますね！

遠藤 : Windows 10の時はそうですね。タイル状のデザインがメインだったので、四角だったと思います。

加藤 : あとはGoogleのデザインシステムであるMaterial 3なんかも見てもらうとわかるかもしれませんが、これも全体的に丸いんですよね。

遠藤 : あーそうですね。丸いですね！

加藤 : で、そのなんで角丸にしているかっていうのは、そのみんなそれぞれの角丸への想いみたいなものがあるような気がするんですけど、遠藤さんはこの丸さにはどんな意味を込めているんでしょうか。

遠藤 : はい。あのー角ばっているよりは丸い形の方がやさしい印象がありますし、境界をはっきりさせずに周りと調和している、っていうような感覚を持ちやすい気がしていて、たとえばコロナ禍の時は直接人に会いづらい時期もあったかなと思うので、こう人と人とのやり取りというか温かさを感じ取れた方がうれしいかなというのは、個人的な思い入れとしてありましたね。

加藤 : んーなるほど！社会の空気感も読み取りながらデザインされていたとは、やっぱりさすがとしか言いようがないですね…。ここまで全体が丸いと、角ばっているところが逆にアクセントになったりして見えますね。

遠藤 : あ、それはあると思います。さっき少しお話したスラブセリフ体のタイトルとメインビジュアルの画像をセットで置いているページなんかは画像の角丸を外しているんですが、なんでもかんでも丸くするとしつこさが出てきちゃうというのもありますね。

加藤 : うーん、バランス難しいですね！でもその画像が角ばっていることで、先ほどおっしゃっていたスラブセリフ体で表現しようとしていた安定感っていうのがさらに増しているようにも見えます！

えー前回公開したエピソードでもデザイントークンについて少し取り上げたのですが、デザイナーである遠藤さんからみて、デザイントークンを定めながら進めるっていうのはどうでしたか？

遠藤 : あーそうですね…こう最初にいろいろ調べてみたけど理解しきれなくて、進めていく中で徐々に分かっていったかなーという感じでしたね。

加藤 : うん、そうですよね。たしかに何をトークンとして定義するかとかも何か唯一解があるわけではないので、難しいですよね。

遠藤 : はい。難しかったんですが統一感を持たせるにはデザイントークンを定義していった方がいいんだろうな、というのは感じましたし、デザイントークンとして名前を付けるってことを意識すると、別のバリエーションとして見た目を作った方がいいのか、それともすでにあるパターンを使った方がいいのかっていう、まぁそこの判断はしやすくなったかなと思います。

加藤 : ユーザーが操作するパーツではやっぱり一貫性が操作感にも繋がってくるので、一貫性を持たせることが重要になってくるのかなとは思いつつ、こう逆にルールにはまりすぎたデザインってちょっと単調になりそうというか、デザインで表現できる幅が限られてしまうなーと感じる場面もあったりしたんじゃないかなと思うんですけど、そのあたりはどうですか？

遠藤 : はい。たしかに途中からなんかパーツを組み合わせるだけになってしまっているっていう自分を発見して、「あ、これはちょっと、ルールに引っ張られすぎているな」って思う時は正直ありました。で、結局はルールと自由のバランスということにはなる気がしますが、ベースとなるようなルールはありつつも、ルールを少しはみ出して固有の見せ方をしたほうが伝わりやすいんじゃないかな、っていう視点は常に忘れずに考える必要があるなと思いました。

加藤 : うん、そうですね。いつの間にかルールを守ることが目的と勘違いしてしまいそうになるのが、まぁこのトークン定義の注意ポイントですね。

遠藤 : ですね。で、あと難しいなーと思ったのは、デザイントークンに限らないですけれども、自分としてはルール化されているよって思うデザインを作っていても、開発する時にCSSに落とし込もうとすると、こううまくハマらないってことがあったんじゃないかなと思うんですね。

加藤 : あーそうですね。まぁそれは今回に限らず、他のプロジェクトでもよくあるかなと思います。

遠藤 : ですよね。だから私が考えているルールと開発者さんが考えているルールはイコールじゃないんだなっていう、そこはすごく気付きがありました。

加藤 : うん、たしかに「ルール」って言葉はけっこう使いがちですけど、もしかしたら開発者同士でもその「ルール」が何を指しているのかっていうのは微妙に違ったりするかもしれないですね。

遠藤 : うん、そうですよね。規則性がない数字でも視覚的に心地よくてバランスよく見えるのであれば、それでいいかなと思う面もあったりはするんです。でも、運用フェーズに入って自分ではなくて別の人がデザインするという状況になったときには、やっぱりベースとなるルールがあって必要に応じて例外がある、くらいの作りのほうが、みんなにやさしい作りなんだろうな、というのは今回のプロジェクトから学んだことですね。

加藤 : おー「みんなにやさしい作り」っていいですね！その学びがあっただけでも、デザイントークンを導入した甲斐がありましたね！

はい、ということで、今回はミツエーリンクスのコーポレートサイトリニューアルについてデザイナー目線で遠藤さんからお話しを聞かせていただきました！なんか遠藤さんのやさしさがにじみ出ているのか、今回のエピソードは「やさしさ」というワードが何度か出てきた気がしますね笑

何か最後にえー遠藤さんから感想とかありますか？

遠藤 : はい、えーとリニューアルを通してたくさん発見があったんですけれども、今日お話ししてみるとやっぱりデザイントークンの導入は大きかったなと思いましたね。あと、公開後にこうやって改めてデザインのポイントをお話しするというのも新鮮でした。今回学んだことっていうのはお客様への提案にも取り入れていきたいですし、もっと詳しい話を社内向けにも話して、得たものを広げていきたいなと思っています！

加藤 : はい！ありがとうございます！最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。

また、このPodcastはApple Podcast、Google Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。 「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどもお待ちしております。それでは今日はこの辺で！ありがとうございましたー！

遠藤 : ありがとうございました！