メむンコンテンツぞスキップ
芋出し画像

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はただただ䞍足しおいる郚分も倚く未完成だず認識しおいたす。今埌もデザむナヌで䞀臎団結し、継続しお育おおたいりたす


     
     

    IKYU DESIGN

     
     
    株匏䌚瀟䞀䌑のデザむナヌが運甚する公匏noteです。デザむン組織ずしおの取り組みやデザむンに関連する情報を発信したす。

    あなたぞのおすすめ