みんなで使えるデザインガイドライン「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 のカラーパレット

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

使い方

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

FBお待ちしています！

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

ちなみに今後は

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

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