見出し画像

みんなで使えるデザインガイドライン「SmartHR Design」ができました|SmartHRオープン社内報

※ 2020年 9月 3日 追記
デザインシステム「SmartHR Design」がお引越し&アップデートしたため、最新情報はこちらからご覧ください


おつかれさまです。コミュニケーションデザイングループのさめまる(@samemaru_saxo)です。


このたび、だれでも!効率よく!SmartHRらしく!表現できるのを目標とした、デザインガイドラインができました!

▶️ SmartHR Design https://smarthr.design
(2020年9月3日更新)

社外の方でもどなたでも読めるように一般公開しています。

SmartHR Design とは

SmartHRでは、資料やスライド、オウンドメディア、このオープン社内報など、日々どのメンバーもばしばしアウトプットしています。中には見た目のデザインが必要なものもありますが、どれもデザイナーに依頼して作る余裕があるとは限りませんよねー。
そこで SmartHR Design を活用していただければと思います!
だれでも!効率よく!SmartHRらしく!表現できるのを目標としたガイドラインです!(大事なことなので2回いいました)

こんな内容です

FOUNDATIONS
・Logo
ロゴのガイドライン。他社さまへロゴをお渡しするときはこのURLをお渡ししてください。

・Color
カラー。SmartHRブランドカラーと、それに調和するカラー、全44色です。

・Typography
推奨フォント 。
FOR EMPLOYEE
・Templete
 営業資料テンプレ、Googleスライドテンプレ。

・Annotation Color
 プロダクトのスクリーンショットなどで使う、注釈のカラー。

特におすすめは「カラー」です!

SmartHRといえばあの青色。今回カラーを定義するにあたり、社内で大喜利をして「SmartHR Blue」と名前をつけました!
SmartHR Blue はサービスリリース時から一貫して使っていて、社内にもファンが多い色です。しかし、テキストに利用すると、見づらい、環境によってはほぼ見えないというアクセシビリティの問題もありました。

そこで、今回テキスト推奨用に調整した色も準備しています。カラーパレット を使うと簡単なので、ぜひDLしてご活用ください!

Mac のカラーパレット

Mac_カラーパレット


Google スライドのカラーパレット

Googleスライド_カラーパレット

使い方

サービスの都合上URLが複雑です🙏 Slack botでよびだして使ってください!👉 :bot_design_guideline:

画像3

FBお待ちしています!

「ここが使いづらい」「こういうものもほしい」などフィードバックいつでもお待ちしております! Slackチャンネル # design へお気軽にどうぞ🙆‍♀️

ちなみに今後は

今後は、そもそもの「SmartHRらしさとは?」がわかるコンテンツを追加したり、プロダクトデザイン、ライティングなど領域を広げつつ、アップデートしたりしていきます。

思想や表現のアウトプットひとつひとつが一貫して「SmartHRぽい」ことがブランド力を高めていくと思っていますので、その指針となるものに育てていきたいと思います。
とはいえまずは使ってみてくださいねー、よろしくお願いします!

この記事が参加している募集