ユニファ開発者ブログ

ユニファ株式会社プロダクトデベロップメント本部メンバーによるブログです。

デザイナーが説明するルクミーウェブサイト

こんにちは。ユニファでデザイナーをしている中村です。

最近、0歳男性の育児をがんばっているのですが、起きてから寝るまでずーっと動いてる元気さに恐れおののいています。とにかく本当まあよく動く。ズリバイ覚えてからというもの、リビングねりねりしたあと適当なおもちゃでバンバン床を叩くんですが、もうずーっと叩いてるんです。床へこんでない…?え、まだ0歳……?

えー、この記事は、ユニファAdvent Calendar 2021の6日目の記事としてお送りいたします。

adventar.org

今年なにを作っていたか?

今年の前半はルクミーのウェブサイト制作を担当し、メインデザインとメインコーディングをさせていただきました。

すでにご周知の通り、9月にルクミーは大規模拡張があり、大きく進化しました。ちなみに、プロモーションとしてはその前に打ち出さなければならないので、7月にはリリースが出ています。

unifa-e.com

それにともない、ウェブサイトも7月にリニューアルいたしました。

lookmee.jp

関わり始めたのが去年の10月ぐらいからで、そこから一時的に他のことをやったりもしましたけれど、だいたいずーっと関わっていまして、特にリリース前の5月〜7月あたりは寝ても覚めてもサイトのことを考えていて、夢の中でもコーディングしていましたね。

そんなルクミーサイトですが、いちデザイナーとしていろいろ奮闘がありましたので、せっかくの機会ですし、どんな奮闘があり、どんなふうアウトプットになっていたのかを書いていければと思います。

それではどうぞ!

伝えたい世界観

f:id:unifa_tech:20211203180047j:plain

ルクミーを知っているお客様からの声では、やはり大きいのは「かわいい」「あたたかい」「親近感」こういったワードです。これらは、リニューアルすると言っても必ず表現しなくてはなりません。それに加え、今回は大きな「伝えたいこと」がありました。

それは上記プレスリリースでも言及されている、ICTだけじゃない、ということ。

これまではプロダクトの良さ、コンセプトを伝えれば良かったのですが、今回はICTに加え、研修サービス「ルクミー みらい保育スクール」が開校することにより、ICTで伝えていた「業務負担の軽減」だけでなく、もう一歩さき、保育の質を向上できるような、それをともに支えるような、ルクミーを入れていただくことで、園/施設の皆様がハッピーで笑顔になるような、そんな未来が想像できるようなデザイン……を作らねばなりません。

………

むずかしいな…。

パソコンやスマホ、タブレットといったデバイスをデザインに取り入れると、とたんにツール感が出ます。足元の課題はすぐさま解決してくれそうだけれど、それだと未来は語れない。かといって当座はICTのプロモーションがメインであるため(みらい保育スクールは開校前でしたから)、ICTサービスであることは伝えなきゃいけない。

まあ、およそこんな感じで、いったい全体どうまとめたらいいんだ?というものをひとつひとつデザインの中に落とし込んでいきました。

実際のアウトプット

ファーストビュー

f:id:unifa_tech:20211203184801j:plain

大きな写真でインパクトと世界観を端的に伝えます。保育者だけの写真ではダメでした。弊社Purposeは「家族の幸せを生み出すあたらしい社会インフラを世界中で創り出す」です。家族の幸せです。その一丁目一番地であるここに出てくる写真は、家族も感じたい。

やりました。弊社デザイナー兼スーパーフォトグラファーの三好さんが。撮りました。優勝です。

キャッチコピーも死ぬほど紆余曲折あったんですが割愛します。

その写真のまわりに、小さな丸や四角といった図形が浮かんでいます。これはプロダクトのモチーフです。サービス一覧から見ていただくとわかりますが、ルクミーのプロダクトにはそれぞれカラーがあります。なのでこのひとつひとつはプロダクトなんですね。そのプロダクトが、写真(=園さんに届けたい未来のイメージ、こうなってほしい未来予想図)を右上に持ち上げています。そしてその写真を一番近くでよりそうように支えているのが、ルクミーのオレンジをまとったモチーフ。

まとめます。

キャッチコピーの「もっとワクワクできる保育」「右上に持ち上がっていくイメージ」「様々なプロダクトカラーが持ち上げていく」「寄り添うのはルクミー」「カラフルさでかわいさ、ポップさを演出」

このへんがファーストビューに詰め込まれ、「ルクミーを入れていただくことで、園/施設の皆様がハッピーで笑顔になるような、そんな未来が想像できるようなデザイン」を表現しています。

ルクミーでできること

f:id:unifa_tech:20211203184950j:plain

ファーストビューで世界観はできているので、このへんはその補強の意味が大きいですね。レイアウトとしては写真とテキスト、という至ってオーソドックスな形のため、写真の形を有機的な形で切り抜き、人物を飛び出させることで楽しさを演出します。寄り添っているプロダクトがかわいい。

6番目に位置している「保育の振り返りが〜〜」の部分ですが、ここは単一的なプロダクトというよりも、ルクミーが打ち出す世界観なので、ここで寄り添っているのはルクミーです。

保育の、こんなシーンのお悩みに

f:id:unifa_tech:20211203185231j:plain
つよい俯瞰図イラスト

弊社のスーパーデザイナー/イラストレーターが描き下ろしている俯瞰図を中心に、どんなシーンで使えるか?を訴求したコンテンツです。ここはイラストの力が強いので、左右に振るぐらいですが、その補強として、うねうねした斜めの背景を途中でしいています。ここは斜めに見ていくよーというのを伝える役目です。

こういった斜め視点のイラストは、階段のように斜めに配置していくと動きも出て良いです。

ルクミーが選ばれる理由

写真のまわりにプロダクトカラーがちょこっといますが、ぐるっと一周するような配置(右上、右下、左下、左上)にしてます。にぎやかさの演出ですね。

活用事例

ここは2回目のファーストビュー、ぐらいの気持ちで、ここまで読んできた方をさらにグッとつかむようにハッピーさを演出しています。まったくの余談なのですが、ここのコーディングめちゃくちゃ大変でした。後ろの境界を曲線にしたデザイナーを今すぐ問い詰めたい。はい、私です。

f:id:unifa_tech:20211203185253j:plain
おわかりでしょうか?ここの境界線を曲線にしたデザイナーはきっとWebに慣れていません

おわりに

TOPページだけでも記事のボリュームが大変なことになったので、このあたりで終わりたいと思いますが、表現したい伝えたいことに対し、我々デザイナーはこのように試行錯誤しながら、どうにかこうにかものを作り上げています。

こんなものづくりを一緒にやりたいなという方がいらっしゃったら、ぜひ下記よりエントリーをお願いします。一緒にふわふわとした要件を形にし、おいしいビールを飲みましょう!

unifa-e.com