デザインラフについて
「デザインラフは完成形」。
参考デザイン集
https://sankoudesign.com/
事前の準備事項
・コーディングの時間制限内で作る
・バナー同様に、グループ化・余白・アクセントを決めて、
読みやすさ・強調・世界観を、
①面積（おおまかな全体案・デバイス）
②見出し<h1><h2>
③画像
④テキスト<P><a><ul><li>フォント
⑤配色
文字
・adobeのアカウントがない場合に注意する
・メイリオ・SM系は残念
・「Noto Serif」「Noto Serif」「源ノ角」をgoogle font他で調査
https://fonts.google.com/
★Noto は、現代および古代のすべての言語の表記に適したグローバル フォント コレクションです。Noto Sans JP は、日本語および日本で使用される他の言語用の非変調 (「サンセリフ」) デザインです。ひらがな、カタカナ、漢字をカバーしています。
Googleからは同社のNotoフォントファミリーの「Noto Sans CJK」として異なるフォント名で公開されている。フォント名と一部のウェイト表記以外はすべて源ノ角ゴシックと同一である[5]。
・無償で利用できる
・改変・再配布できる
・ウエイト（太さ）が7種類もある
・商業デザインでも利用できるクオリティの高さ
・各国語の書体デザインが統一されている
・漢字も豊富に入っており、旧字体、中国語の字体なども含まれている
・スマートフォンやタブレットなどのモバイルデバイスで読みやすいようにデザインされている
フォントファミリー
https://products.aspose.app/font/ja/code-generator
Noto Sans JPとsans-serif
.class01 {font-family: ‘Noto Sans JP’, sans-serif;
font-size: 20px;
color: #000000;
}
テキストシャドウ ジェネレーター（ボタン、三角、ボックスシャドウ他あり）
https://front-end-tools.com/generateTextshadow/#google_vignette
グラデーションCSS ジェネレーター（上と同じ）
https://front-end-tools.com/generateGradient/
配色
①１６進法（＃００FF９９）と、
RGB法：赤は（255,0,0）、赤で透明70%は（２５５，０，０，0.7）またはpng。
＃０００は目が疲れる。最近は自動調節機能で自動で少しグレーになる
②XDの左上に、カラーパレットを用意する。配色の意味に合わせる
複数ページ
・カリキュラムではやらない、XDは表現・デモ可能
①サイトマップ考案（マルチ デバイス考慮）
②グローバル ナビ（重要性・方向性・必要性を考慮）B to Bでの頻度高い
③日々の新着・更新（リピーター用、WPが便利、仕事が多い）
（後回しでよい）
コーディングのセクションは後回しでよい！？
昔は、全て<Div></Div>だけだった！？
CSSを<DIV>タブだけで書いてみた。
コメントを残す