【毎日更新】第10回 26歳地方住み無職、クリエイター養成スクールに参加してみた

スクール

本日の講義内容

  • Webの仕組み

  • デザインの基礎

本日の講師は、デザイン関連書籍の執筆、大学の非常勤講師を務めるデザインの専門家です。 一応、元SEなので復習のような講義でした。でも、再発見したコトも多かったので、ためになりました。

Webの仕組み

デザイナーでもこれくらいは知ってて欲しい

  • HTMLは論文の構造を元に作られた。

  • 日本語は行間を調整しよう。

  • javascriptはHTMLを生成して表示してくれる。

  • HTMLの生成タイミングを知っておく。

  • サイトマップCMSによって変わってくる。(CMSの例:Studio, Wix)

レスポンシブ

様々な閲覧媒体を想定しておく。

Webデザインを考えるときは、まずは画面幅!

可変というのもあり。(例:リキッドレイアウト・・・%で幅を表現)

ブレイクポイントの設定は、答えはない。

Webデザインの基礎

解像度

ピンチアウトしたりすると、画像がボケボケ。

→ 画像解像度に依存しないSVGの活用。

フォント

文字もデザインのひとつ。
フォントは、デバイスに依存している。

→ ウェブフォントを活用しよう。(例:Google Fonts)

カラー

カラーには下記のような要素があります。 * 色相

  • 彩度

  • 明度

色が多くなりすぎたら、グレーを活用。

縦長ページ

ページを分けないページのこと。

スマホはスクロールしやすい使用のため、ファーストビューにまとめる傾向にあります。

ページの標準化

ユーザーが使い慣れたUI/UXにすることで戸惑うことなく使えます。

現在は、個性的なページは求められない傾向です。
それより、ページ内の情報が重要。
ユーザーが操作する部分は手を抜かないように心がけよう。例:フォーム

用語

  • ディレクション

  • AOS(ライブラリ)

  • SVG(画像形式)、ビットマップ画像

  • サイトマップ

  • ブレイクポイント

  • Ratinaディスプレイ

  • ウェブフォント

  • ダイナミック・サブセッティング

  • シェード・チント

  • マイクロイントラクション

  • パララク