Design

【デザイン】グレーボタンについて

グレーのボタンだと、押せないと勘違いする人も出る。 本当に無効ではないことを十分に示す必要がある。 参考 buttonのブラウザデフォルトのデザイン 通常の場合 <button>サンプル</button> disabledの場合 <button disabled>サンプル</button>

【デザイン】ゴーストボタンとは

ゴーストボタンとは アウトラインはあるが、塗りつぶしがないボタンのこと。 ゴーストボタンのメリット シンプルなボタンであるのため、Webサイトのデザインを邪魔しない。 ゴーストボタンのデメリット ゴーストボタンはボタンとして認識し辛い。ソリッドボ…

【デザイン】デザインについてのまとめ

良いデザインとは 伝えたいことが、見る人にすんなりと伝わるかどうか。 WEBデザインの場合、そのサイト(アプリ)が使いやすいかどうか。 # 「誰に」「何を」伝えたいのか考える。 利用する人に考えさせない。 備考 「かっこいいデザイン」ではなく、「ユー…

【デザイン】余白についてのまとめ

余白の役割 レイアウトを整える。 注目してほしい情報を見つけ易くする。 各コンテンツの関連性を明確にする。 余白を広げた場合のメリット 余白を広げた場合、余計な情報に気を取られにくくなる。 余白の戦略 重要なフォームやボタンとその他のコンテンツと…

【CSS】margin-topとmargin-bottomはどちらを使用した方が良いか

marginは、隣接する側のコンテンツの余白を意味する。 marginは、隣接する側のコンテンツに指定する。 webサイトは、左上を起点として、右と下にコンテンツを追加していく。 左右に隣接したコンテンツの場合、隣接するコンテンツは右にあるコンテンツである…

【デザイン】Atomic Designにおいての各コンポーネントの役割

Atoms アプリケーションの共通デザインを担当する。 抽象性が最も高い。 具体性が最も低い。 ライブラリにすることが可能。 ビジネスロジックを持たない。 stateにアクセスすること不可能。 Molecules アプリケーションの共通機能を担当する。 ライブラリに…