開発しよう

なうぞめはデザインの人だと思っています。

ルール

  • border-radius はとても利用しない。
  • 色に色を重ねる場合は4カラー以上離す。
  • 黒、白などはあまり利用しない。
  • 色、フォント、スタイルは多用しない。
  • 携帯電話にも対応させる場合は同じページでデザインする。
  • pcなどのclass名は利用しない。
  • 平行ではない余白などは利用しない。

サイズ

webpakeでも何でも良いのでビルドして小さくしましょう。

なお、ファイル数が多くなったら自動化するスクリプトを作成することもお忘れなく。

制限

画像をダウンロードされたくないからと言ってImgタグなどを触れなくする必要はありません。

出来るだけImgタグを利用してそのままの状態で提供してください。

ユーザーは自由にサイトを利用できます。素晴らしい事です。

ユーザーに制限を加えるべきではありませんし規制しても簡単に回避できます。

レガシー対応

する必要はありませんが現在のWebに概ね対応しているブラウザには対応させる必要があります。

なお、videoタグやGrid、Mask属性に対応していない物は無視することを推奨します。

ただ、サポートしないだけであって非推奨で閲覧は許可されるべきです。無理やり転送したりしないようにしましょう。

携帯電話などの対応

携帯電話などにはこのように出来るだけ1アクションで接続できるようにしてください。

よく、ハンバーガーメニューなどを利用しますがそれはユーザーにとって非効率だと考えています。

また、はみ出す場合は気にせず改行してください。

ダークモードの実装

ダークモードに対応する際はできるだけ暗く見やすい事に重きをおく。800グレーなどを利用すること。

色使い

基本な色

  • white
  • black
  • maxblue

  • blue-100
  • blue-200
  • blue-300
  • blue-400
  • blue-500
  • blue-600
  • blue-700
  • blue-800

鉛筆色

  • zinc-100
  • zinc-200
  • zinc-300
  • zinc-400
  • zinc-500
  • zinc-600
  • zinc-700
  • zinc-800

灰色

  • gray-100
  • gray-200
  • gray-300
  • gray-400
  • gray-500
  • gray-600
  • gray-700
  • gray-800

2021-2023