以下は「デジタル庁デザインシステムβ版」（design.digital.go.jp）のサイト構成を整理したものです。 おおよそWebサイトやWebアプリの作成の際に必要な考え方がきれいにまとめられています。 🌐 サイト構成一覧 1. はじめに（Introduction） 2. ガイダンス（Guidance） 3. 基本デザイン（Found… 続きを読む
デザイン
Webデザインの参考
Webデザインの細かい部品の参考資料をまとめるページです。 様々なWebサイト部品ごとにデザインの参考をまとめます。 ツール使い方 デベロッパーツール(開発者ツール)の使い方 エディタ メニュー サイトマップデザイン グローバルナビゲーション ハンバーガーメニュー サイドバーメニュー フッター パンくずリスト レイアウト レイアウトパター… 続きを読む
Webデザインのスタイルについて
デザインスタイル比較表 デザイン名 特徴 質感/立体感 奥行き 参考リンク ニューモーフィズム(Neumorphism) スキューモーフィズム＋フラット＋マテリアルを組み合わせた立体的UI。光と影で凹凸表現。 ◯（やわらかい） ◯ archetyp.jp スキューモーフィズム(Skeuomorphism) 現実の物体を模倣。メタル感や質感… 続きを読む
青系見出しデザイン10パターン
使用する青系の色の例: パターン 1: シンプルな下線 見出しの下に細い実線の青い線を追加します。 CSS パターン 2: 左側の太い線 見出しの左側に太い青い線を追加して、ブロックのような印象を与えます。 CSS パターン 3: 背景色によるハイライト 見出しの背景に薄い青色をつけて、目立たせます。 CSS パターン 4: 点線の下線 … 続きを読む