メインコンテンツへスキップ
見出し画像

IKYU Design Guideline公開しました

    一休デザイナーの河村です。
    2023年12月に一休.comのデザインガイドラインを公開しました。

    IKYU Design Guidelineは、一休らしいデザインとはどういうものなのかを定義したガイドラインです。

    ガイドライン作成に至った経緯

    一休のデザインに関して、「一休のデザインは高級感がある」「画像がきれい」等々の声を社内外問わずいただくことがあります。

    こうした「一休らしさ」は、先代のデザイナーの方々から受け継がれ、デザイナー個人個人の意識によって守られてきました。

    しかし、一貫したデザインを提供するデザインシステムの構築を行うなかで、「なぜこのデザインにしているのか」「どうしたら一休らしいデザインを作れるのか」といった、より定性的な根拠の必要性を感じ、「らしさ」の言語化に向き合うことになりました。

    こうしてデザインシステムの派生として、デザインガイドラインプロジェクトが始動しました。

    ガイドラインの目的・役割

    まず最初に行ったのが、目的の認識揃えです。採用やブランディングなどいくつか候補が上がりましたが私たちは下記の3つに絞りました。

    デザインする際のルールブック

    - 定性的な判断でデザインに迷う機会を減らす

    - 筋の通った魅力的なデザインを作れるようにする

    ユーザー体験の向上

    一休のデザインルールを明確にすることで、統一された上質な体験をユーザに提供する

    デザインシステムの加速

    なぜこういったデザインになっているのか、こういったテイストになっているのかを言語化することで、デザインシステムを使うエンジニアに納得感や説得感を与える

    最後まで大切にしていたのが一つ目に挙げたデザインする際のルールブックの部分です。
    ガイドラインはあくまでも自分たちのためのもの、自分たちがブレない意識でデザインをアウトプットし続けるためとして捉えています。
    自分たちで定めたルールをしっかり守るという意識がより強いものになると考え外部公開を決めました。


    ガイドラインの構成

    画像
    IKYU Design Guidelineトップページ


    IKYU Design Guidelineは大きく分けて3つの構成で成り立っています。

    デザインフィロソフィー

    世界観を作るルール

    Web制作におけるルール

    デザインフィロソフィー

    デザインフィロソフィーとは、「共通して持つべき意識・価値観・考え方」です。 私たちが作成したデザインフィロソフィーは、一番上流の指針であるキャッチコピーと、3つのキーワードで表現しています。

    画像
    画像

    当初は2〜3個程度のキーワードを想定していましたが、「没頭感」という大切な世界観を表現するために、上質な体験に没頭できるデザインというキャッチコピーと、それを実現するための粋、クリア、信頼感というキーワードを設定しました。
    このフィロソフィーの決定までのプロセスに一番時間を要しました。
    元々「一休らしさ」をイメージできていた私たちですが、いざ言語化するとなると、言葉の微妙なニュアンスの違い、大切にしていることの優先度の違いなど、全員が納得するものになるまで議論を重ねました。

    世界観を作るルール

    世界観を作るルールは、例えば紙媒体だとしても通用する、デザインをする上で守るべき共通のルールです。
    ブランドロゴ、ブランドカラー、文字、画像、余白を、Do/Don'tといった良い例悪い例を交えて説明しています。
    没頭感を促すために重要な「画像」に関しては、内容も詳細になっており、IKYU Design Guidelineの特徴の一つです。

    画像

    Web制作におけるルール

    Web制作におけるルールは、フィロソフィーに則ったデザインをプロダクトで再現するため、ディスプレイ、影、余白、角丸、テキスト、カラー、アイコンの値を定義しています。
    実際にプロダクトで使用しているTailwind CSSの値を載せているため、
    実装時にも役立てることができます。

    画像


    ガイドライン公開後の反響

    社内のフィードバックとして多かったのが、デザインの言語化によって、非デザイナーでもガイドラインを意識することで一貫性をもたせることに役立つという内容です。
    当初掲げた目的はデザイナーのためのものを設定していたため、その範囲を超えて思わぬ効果があったと感じました。

    社内からの反響

    画像
    その時のスライドはこちら!


    社外からの反響

    「一休.com」のデザインガイドライン「IKYU Design Guideline」。コンポーネントを網羅しているデザインシステム的なものではなく、各プラットフォームでブランドのトーンを表現するためのルール的なドキュメントでしょうか。ミニマムにまとまっててわかりやすい👏https://t.co/rxgHZkjc9e pic.twitter.com/B7ibj6T0tB

    — 金 成奎 | デジタル庁 (@seikei_kin) December 25, 2023

    おわりに

    1年強の間、全メンバーが通常業務を行いながら時間を確保し、アウトプットまで行うことができました。
    以下、苦労したこと、やってよかったことを挙げます。


    苦労したこと

    ・6つのサービス全てに共通するルール作りの難しさ
    ・横軸の取り組みならではの時間確保の難しさ(お互いの主業務のタスク状況が把握できない)
    ・レビューなど意見を言い合う文化がなかったため意見が出るようになるまで時間がかかった

    やってよかったこと

    ・デザイナー間のコミュニケーションが密になった
    ・自分のアウトプットが個としてではなく組織として行っていることを意識できるようになった
    ・個々の得意な部分を知る機会・引き出す場となった
    ・デザインレビューをする際のチェック項目が明確になった
    ・ロゴガイドライン(外部に公開している既存資料)のアップデートも同時にできた

    総じて一番の収穫は、デザイン組織の基盤ができたことです。
    これまで各サービスごとバラバラだったデザイナーが、団結するのに絶好の機会でした。建設的な議論を重ねることで不要な遠慮がなくなり、デザインの壁打ち、デザインレビュー等、様々な良い効果へと繋がっています。

    最後に、IKYU Design Guidelineはまだまだ不足している部分も多く未完成だと認識しています。今後もデザイナーで一致団結し、継続して育ててまいります!


     
     
    株式会社一休のデザイナーが運用する公式noteです。デザイン組織としての取り組みやデザインに関連する情報を発信します。

    あなたへのおすすめ