Web講習会week0
参考資料
Progate
事前知識
Webらしさってなんだろう
2021/6/21
web知識
色
色相，彩度，明度の概念
RGB，CMYk
ドミナントカラー，アクセントカラー
フォント
フォントの概念
明朝とゴシック
セリフとサンセリフ
カーニング
行間
レイアウト
グリッドレイアウト
視線移動
z型F型
写真
構図，アングル
UX
5W1H
ペルソナ
カスタマージャーニー
webサイトの仕組み
コンピューターグラフィックスとは
ベクター/ラスターとか，色の表現
ブラウザはHTMLとCSSを読んでコンピューターグラフィックスをやるソフト
HTML/CSSとは
全部が四角でできている
情報を構造的に記述する言語 + スタイリングの言語
箇条書きと一緒
webデザインに特有の注意点
UIデザイン
インタラクティブであること(アフォーダンス)
情報に深度があるかどうか？
ボタンを指で押す，というメタファー
webらしさ
技術的側面への気配り
あまりに多くの種類のフォントは使わない方がいい
よく使う構造は部品にして使い回す(コンポーネント)
スクロールされることへの意識
上から順にみた時に話題の切り替えをわかりやすく(並列構造を見つけやすい工夫が必要)
いくらでも場所があるので，余白やページ分割を使って情報量をコントロール
レスポンシブデザイン
みられる画面サイズは一つではない
LPを見てみよう
2021/7/3
評価ポイント
技術的側面への気配り
このサイトは〜のような構造を持っている
フォントは〇〇と〇〇に絞られている
その他，実装のできる先輩に聞いてみると良い
スクロールされることへの意識
きちんと余白はとっているだろうか
どのようなスクロールアニメーションがあるだろうか
レスポンシブデザインへの意識
グリグリ動かしてみよう
どのような手段でレスポンシブを達成しているでしょうか？
その他加点要素はいくらでもある！
Web制作をしてみよう
2021/7/10
webは怖くない
webサイトには領域がある
header
section
footer
HTMLでは
<!DOCTYPE html> htmlですよという宣言
<html> htmlの中ですよという説明
<head> はサイトの情報を書く
検索ワードやOGPなどを詰め込める
文字コードとかサイトのタイトルとか
<body> はサイトの内容を書く
CSS
余白
margin：要素の外側にある余白
padding：要素の内側にある余白
文字の揃えが綺麗なので，paddingを使います
値を4つ指定した場合：記述した順に上右下左のパディングになります。 classを指定する時は.class{}で表す．.を忘れずに
その他メモ
<head>
Webサイトには表示されないが情報を載せる．ヘッダーとは別．<title >とか<meta>とか．
<meta> 文字コードとか
<body>
<header>
<section>
<fotter>
<div> 四角形を作る
divはclassでクラス分けすることができる．CSSをclassごとに指定できる．
html
<div class=“hogehoge”>
css
.hogehoge{}
<p> paragraph
<a href=“リンク“>hogehoge</a>
HTMLレイアウト
<header> - 文書またはセクションの見出しを定義します
<nav> - ナビゲーションリンク用のコンテナを定義します
<section> - 文書内のセクションを定義します
<article> - 独立した自己完結型の記事を定義します
<aside> - コンテンツを除くコンテンツを定義します（サイドバーのような）
<footer> - 文書またはセクションのフッターを定義します
<details> - 追加の詳細を定義します
<summary> - Defines a heading for the <details> 要素の見出しを定義します