タグ

2018年3月30日のブックマーク (2件)

  • Atomic Design について調べて見た - Qiita

    調べてみた経緯 Reactを勉強して3ヶ月くらい経つがを読んで 「Atomic Design」というデザインシステムという概念が出てきて「なんじゃこれ!?」って思い調べてみました。 ReactとAtomic Designの相性がかなり良いらしいす。 Atomic Designとは Atomic Designとは、以下の5つの構造にページを分け、それぞれの役割を明確にし再利用可能なコンポーネントを作って行くことです。 Atoms(原子) Molecules(分子) Organisms(有機体) Templates(テンプレート) Pages(ページ) Atoms(原子) Atoms(原子)とは、UIを構築する最小単位です。なのでそれ以上に細かく分割することはできません。 ToDoListのモックで例をあげると このような構成のページをAtomに分けると以下のようになります。 テキストフォー

    Atomic Design について調べて見た - Qiita
    ggkuron
    ggkuron 2018/03/30
  • デザインの役割からみる「トーン」と「マナー」

    こんにちは。デザイナーの山口陽一郎です。 去る2014年2月19日(水)に、株式会社パソナテック様主催のセミナー「クリエイターのためのトーン&マナー設計」にて登壇させていただきました。 皆さんは「トーン&マナー」という言葉を耳にしたことがありますか?「トンマナ」と略されることの方が多いかもしれません。その説明の前に、ちょっと寄り道をさせてください。 デザインのふたつの役割とトーン&マナーの演出 デザインには大きく分けてふたつの役割があります。 1. 機能性を高める これはユーザーにとって製品をより使いやすくしたり、誤操作の危険をなくしたり、迷わないようにサポートするための役割です。 そしてもうひとつが今回のセミナーのテーマとしてとりあげた、 2. トーン&マナーの演出 です。製品に、それが使われる場にふさわしい属性・キャラクターを付与する役割です。 たとえばレジャーグッズなら「楽しさを想起

    デザインの役割からみる「トーン」と「マナー」