Avatar
writer 阿部 文人

necco note neccoのノートとお知らせ。

Shifterというデジタルプロダクトとデザインの話 – Shifter Advent Calendar 2019 / 13日目

Shifterというデジタルプロダクトとデザインの話 – Shifter Advent Calendar 2019 / 13日目

この記事は Shifter Advent Calendar 2019 / 13日目の記事です。

Shifterというデジタルプロダクトが持つものとして機能的な記事がとても多いかなと思うので、neccoとしてはタイトルの通り、デジタルプロダクトとデザインについて13日目の記事として書いていきたいと思います。

Shifterとは?

デジタルキューブという会社が運営・開発しているデジタルプロダクトです。

Shifterの公式の説明は下記になります。

Shifterは世界で一番使われているCMS「WordPress」を、超高速・安全・メンテフリーにするオンラインサービスです。サーバーレスによる全く新しいアプローチで、WordPressユーザーから伝統的なホスティングにつきものの、遅延・停止などソフトウェアやサーバー保守にかかる負担・セキュリティの不安を排除します。

です。機能的なメリットは公式サイトや他の記事にお任せしたいと思います。neccoが取材させていただいたミキハウスさんのShifter移行事例もよかったら是非読んでみてください。会話形式だとどういうものなのかスッと入ってくることもあると思いますし、とってもいい記事です。(自画自賛。書いたのは弊社の優秀なメンバーの 夏井です。)

Shifter導入事例:三起商行株式会社(ミキハウス)様

Shifter導入事例:三起商行株式会社(ミキハウス)様

結論:Shifterはかっこいい!!クール!!!!

結論が先!とにかくこのかっこいいモーショングラフィックをまずはみましょう!!

もうこれだけでかっこよさは伝わりますね!英語が読める方はこのモーショングラフィックを見ればいったいどんなプロダクトなのかわかるかなと思います!

ブランディングデザインとかデザインを作ってるneccoさんがかっこいい!のひとことでいいの?

いいんです!!!かっこいいやかわいいはそれだけで価値があります。
機能的メリットも大事だけど情緒的メリットも大事なんです。

来年公開予定でいま担当してる会社さんのウェブサイトのディレクション、デザイン、エンジニアリングを担当しているのですが、その会社さんはとってもかっこいい撮影スタジオを運営している会社さんなのですが、
写真撮影などを担当されているアートディレクターさんが私達の作ってるデザインを見て、「かっこ良いっていいよね。」ってひとこと言ったんです。

かっこいいやかわいいには説明がなくても認めてもらえる力があります。(もちろんデザイナーはかっこいいを説明できる力は必要です。)

Shifterは機能的メリットはもちろん、情緒的メリットの力も持っているし、私もそう思ってます。
良いチーム、優秀なエンジニア、デザイナーが開発を続けるShifter、触ってみるだけでも発見や価値があるはずです。

デジタルプロダクトのデザイナーさんなどはぜひ!

Shifterのデザインのここが良い!!

私がぐっときたShifterのデザインを見て行きたいと思います。

ロゴがいい!

shifter ロゴ

顔ですよ、顔。最高ですね。

顔に見えるけどいろんなパーツが組み合わさって顔に見えるようなShifterのサービスロゴですね。
Shifterの機能や哲学、概念みたいなものが体現されていてかつ特徴的でとても素敵なロゴマークだと思います。

フォント選定とフォント統一しているのが良い!!

Montserrat - Google Fonts

Shifterのブランドサイトとダッシュボードなどはどちらも英語は

Montserratというウェブフォントを利用していくつかのウェイトを綺麗に使ってます。
主に使われているフォントはウェイトが300指定なのでLightですかね。ボタンなどの太字利用は500を使ってるみたいです。
細くても少し幅広に見える特徴的な書体でどことなく、かわいく見える書体が選ばれてます。

Google FontsページのGoogle翻訳によるとMontserratはZkySkyというデザインスタジオのオーナーでデザイナーであるJulieta Ulanovskyさんが作成されたフォントのようで、働いてる場所の地名がMontserratという名前でそこからフォントの名称が来てるみたいです。

アルゼンチンのデザイン会社が作成したフォントだったんですね。良いフォント。

新しいウェイトも開発してるみたいでGithubでも公開されてます。
https://github.com/JulietaUla/Montserrat

こちらのGithubのプロジェクトの概要を読むとMontserratの街に息づく美しいフォントを残していくためにつくったとの思いが書かれてます。
このフォントをSIL Open Font Licenseの元で無料で自由に使えるようにKickstarterから始めたフォントみたいです。

フォントってなんかこう、作られた時代やデザイナーの哲学などの力を借りてくるみたいなところがあっていいですね。

色がいい

Shifter Dashboard

プライマリーカラーで使われているグラデーションを伴ったヴィヴィットなピンクも綺麗だし、背景に使われる深いワインレッドの色もとってもいいですね。
この色を選定できるのを見るだけでデザイナーのものすごい力量を勝手に感じてしまいます。

特に僕が好きなのは管理画面のメインメニューの色使いです。
このグレー background-color: #f5f5f5 に対して、rgba(0,0,0,.5)という絶妙なテキストカラーできっちり色を落としてる。

Shifter メニュー部分

利用できない機能(画像だとDomain)色についてはきちんとさらに落としてる。デザイナーさんなら当たり前かもしれませんが、色、書体、配置の微妙な違いで認知負担が下り、理解しやすくなり、使いやすいと感じてもらえたりします。
色ではないですが、極力要素を減らして、可能な限りシンプルを保持して、余白もきっちりとってますね。すごい。

そもそもプロダクトの機能やコンセプトが良い!

はもちろんなんです。でもさらにデジタルプロダクトに必要なぱっとみて無意識的にでも使いたくなるような全体デザイン、ロゴマーク(顔)、他プロダクトと見分けやすいプライマリカラー、特徴的な書体、PRのためのモーショングラフィックまできっちり展開してます。デザインの力で外に伝えるためのShifterの世界観がある。その世界観に、現在のWordPressだけでは解決できない機能を持つShifterが潜在的なお客さんにも届く力をデザインで持たせている。

それぐらいの意志をShifterのデザインからは感じます。

良いプロダクトと良いデザインを持ったShifterは本当に幸せものですね!

そんな素敵なデジタルプロダクトを見るともっともっと広めて行きたいなと心から思います。

2020年のShifterは?

2020年はShifterがより認知度も広まり、利用してくれる方が増える年になると思う。機能はもちろんよくなるし、明らかに使いやすく、デザインも更に進化して行くと思います。
来年1月には取材、撮影、執筆させていただいている次の事例紹介記事を公開予定です!こちらもぜひお読みいただけたら嬉しいです。

そしてまだWordPressやShifterを使ったことがないみなさん、WordPressの良さを活かしたデジタルプロダクトのShifterをぜひ一度利用してみてはいかがでしょうか?

Avatar
阿部 文人 Fumito Abe

CEO / クリエイティブディレクター / デザインエンジニア 東京都生まれ。 オフィス仲介、外国人専用ゲストハウスなどの不動産業界にて自社ブランデング・ウェブマーケティングに従事。ウェブサイトの解析、広告運用、多言語サイトの制作を経験。その後、サンフランシスコにて語学留学を兼ね1年渡米。現地企業ECサイトの企画からCMS開発、デザイン制作なども担当。帰国後、2013年9月より秋田県内企業にてWordPressを中心にウェブサイトを多数構築。 2016年10月秋田県秋田市にて株式会社neccoを設立。WordCamp Kyoto 2017・WordCamp Osaka 2018・各地のJP_Stripes・JP_Stripes Connect 2019、CSS Nite LP64の登壇やAlexa Day2018・2019の運営など社外でも積極的に活動中。 好きなものは猫、読書、建築、Apple。2匹の猫と仲良く暮らしています。秋田の美味しいお米で日々横に成長中。