• ホーム
• 未分類

カテゴリー：未分類

1. 08.04

   視線誘導

   Z型 コンビニの棚の商品の配置もこれに倣ってる。 左上から右上、次に左下から、右下に視線が動く。 人がストレスなく理解できる。 最後に視線が移動する右下にコンバージョンのボタンを配置すること。 F型 左…

   • 未分類
   • コメントを書く

2. 08.04

   カラーパレット

   …

   • 未分類
   • コメントを書く

3. 08.03

   webデザイントレンド

   どっからくる。 海外の以下サービスからくる。 Dribbble Behance 日本ならこれ。 Pinterest Canva AIでイラストを作れる。 Figma AIで切り…

   • 未分類
   • コメントを書く

4. 08.02

   flexbox、gridの設計

   flex 親要素 基本横幅は指定する。（width:100%、max-width: 1200pxなど） 一番多いのは、「justify-content: flex-start」。単純な横並びをしたい場合。 ヘッダ…

   • 未分類
   • コメントを書く

5. 08.02

   デザインシステム

   パーツの色、種類まで一貫して構築すること。Figmaで実装することが多い。 核となる要素 デザインガイド ブランドコンセプト、デザインの指針 スタイルガイド フォント、ロゴ、カラーなど。 テーマカラー…

   • 未分類
   • コメントを書く

6. 08.02

   fit-content

   width: fit-content ブロック要素に対して、文字だけに背景をつけることができる。（例：h1など） 普通に背景とかをつけたい場合ってブロック要素は横いっぱいに広がってしまう。 display:inlineや…

   • 未分類
   • コメントを書く

7. 08.01

   cssのcalc

   すべてのデザインのデザインカンプは存在しない場合が多い。 たいていが、1400pxとか固定サイズ前提のデザインになっていたりする。 [crayon-6a8d03ec15bce483036699/] みたいな感じで、正確に…

   • 未分類
   • コメントを書く

8. 08.01

   サイズ、横幅の指定方法（min、max、clamp）

   max-width widthを100%とかで指定した場合に、広げたときにはみ出さないようにする。 また、かなりの部分はmin関数で置換できるので使用を検討してもよい。 ただ、そのページで広く、制約があるってことを明示化…

   • 未分類
   • コメントを書く

9. 08.01

   Cascade Layers

   レイヤー順を明示的に指定できる。 詳細度が高いものを書かなくても、調整しやすくなる。（低い詳細度でも高い詳細度を倒せるので、!importantとかを書かなくてもよい。） …

   • 未分類
   • コメントを書く

10. 08.01

    モダンカラー関数

    oklch カラーパレットを作るときに便利 color-mix 色を混ぜる関数 …

    • 未分類
    • コメントを書く