UIデザイン3/ HTML/CSS1・・
Webサイトの種類・・
コーポレートサイト =「信頼」の醸成をメインの目的
ランディングページ(LP)= 主にWeb広告の遷移先となるページ
※コンバージョン(CV)
コンバージョンとは「Webサイトで獲得すべき成果」
Web広告
リスティング広告、ディスプレイ広告、 SNS広告
ECサイト
メディアサイト、プロモーションサイト
Web制作の流れ・・
制作依頼・ヒアリング/ 見積もり・提案/ 要件定義/ 情報設計/ デザイン/ コーディング・開発(※開発とは、CMS(Content Management System) 導入などの)/ 作業テスト・修正/ 制作のフローを全て終えたら、最後に動作確認。納品・公開
デザイナーの役割・・
Web制作の流れの中で「デザイン」の工程を担う。会社によってはヒアリングや提案から情報設計、コーディングなども。
情報設計とは・
必要なコンテンツの洗い出し、ページ構成の考案、サイトマップ/ ワイヤーフレーム(wf)作成(サイトの目的に応じて必要なコンテンツを洗い出し、サイトの構造や提示する情報の順序・優先順位を決めていく作業)
Webサイトの設計手法(一例)・・
案件概要の確認 1.3C分析/ ポジショニングマップ/ ペルソナ設計/ ストーリーボード/ カスタマージャーニーマップ/ サイトの情報設計
フッターの役割・・
ページを最後までスクロールしたユーザーがたどり着く部分 = 「ユーザーのタスクが完了していない状態」
2パターン =「もっと情報が欲しい状態」と「知りたい情報にたどり着けていない状態」
HTML/CSS・・
見出しを指定するタグは<h1>〜<h6>まである
インライン要素はブロック(積み木)にならない要素
セレクタ { プロパティ: 値; } = どこに 何を どのくらい 適用するか
classとidの使いどころの違いは、classはいつでも何回でも使える要素、idは一度しか使えない要素。
HTML言語は、テキストエディタの左上へと吸い寄せられる。
margin: 1px 1px 1px; = [上][左右][下]の余白をそれぞれ1pxに指定 (左右がまとめられてるだけ)
指定できるフォント 5種類 = サンセリフ体sans-serif、セリフ体serif、等幅フォントmonospace、装飾体fantasy、手書き体cursive
バナー復習・・
視認性 = 見やすさ = 瞬間的な認識
可読性 = 読みやすさ = 性格に早く読み続けても疲労を感じないか
判読性 = 分かりやすさ = ユーザーが読める文字の大きさになっているか
Tip・・
モーダル、ポップアップ = メインの画面とは別に開く「小画面」
パンくずリスト = ページ構造と現在地をユーザーに教える表示
ショートカット コメントアウトしたい部分を選択 > ⌘ + /
この記事が気に入ったらサポートをしてみませんか?