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

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

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

Shifterとは？

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

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

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

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

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

結論：Shifterはかっこいい！！クール！！！！

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

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

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

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

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

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

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

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

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

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

ロゴがいい！

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

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

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

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から始めたフォントみたいです。

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

色がいい

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

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

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

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

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

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

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

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

2020年のShifterは？

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

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

---

📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか？

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

• フロントエンドエンジニア
• アシスタントフロントエンドエンジニア

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。

（2024年11月時点）