見出し画像

Webサイトのコーディング時に考えることα版

Webサイトの構成やデザインカンプには載っておらず、
コーディング時に考えることをまとめてみました。

レスポンシブなWebサイトを想定しています。
構成やデザインカンプを否定するものではありません。

画面サイズ

画像6

横幅固定?画面フル?

フォント

①使用できないフォントが使われていない?
②最小フォントサイズはいくつ?
(Chromeは10px以下のフォントサイズは効かないため)

ヘッダー

画像1

①横幅を縮めた時のレイアウト崩れない?
②追従させる?させない?

キービジュアル

画像3

①キービジュアルの高さは画像に合わせる?画面の高さに合わせる?高さ指定?

動的コンテンツ(CMS)

WordPressの入力画面です。

画像5

入力最大文字数を指定していますが、どんなテキストや画像が入ってくるか分かりません。

画像2

①縦長 or 横長 or 正方形の画像が登録された場合はどうする?
②テキスト量が違う場合にレイアウトはどう変化する?

画像4

③4つ目の要素が追加された場合はどこに追加する?

モーダルウィンドウ

画像7

画面サイズ(縦)からはみ出た場合はどうする?

ページャー

①1ページ目、2ページ目、最後のページでデザインは変わる?

フォーム

①確認画面で、入力画面に戻るボタンはどんなデザインにする?
②完了画面に表示する文言とデザインはどうする?

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

1
Japanese Web Developer / Front-End / Back-End / SIGNAL inc. / TOKYO /
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。