【書籍学習ログ】HTML/CSS/Webデザインが1冊できちんと身につく本 - 【1日目】
これから、こちらの本で学習進めていきます〜
新しい本・初日╭( ･ㅂ･)و
HTML&CSSとWebデザインが 1冊できちんと身につく本
- 作者: 服部雄樹
- 出版社/メーカー: 技術評論社
- 発売日: 2017/07/21
- メディア: 大型本
- この商品を含むブログ (1件) を見る
この日、たのしすぎたのかChapter 4まで
一気にぶっ通してしまいましたwww
たいへん学びが多かったので、記事を分けます。
本記事はChapter 1のまとめ。
Chapter1 知っておきたいサイトとデザインのきほん知識
2月1日(金) 1.0h
WebサイトのしくみとWebデザイン
用語
・ワイヤーフレーム...配置を記載した図面
・デザインカンプ...最終的なWebサイトの完成イメージ
・コーディング...デザイン案をコンピュータが処理できる形式に言語化すること
・ソースコード...Webサイトを再現可能な形式にしたもの、音楽でいう楽譜
・文章構造...見出しや文章、画像の論理的な配列
・SEO(Search Engine Optimization)...検索エンジンにヒットしやすくする施策
・ユーサビリティ...使いやすさ
・UI(ユーザーインターフェース)...ユーザーとの接点
・UIコンポーネント...UIの中でもWebサイトのパーツとなるもの(メニュー、ボタン、フォームなど)
・ユニバーサルデザイン...できるだけ多くの人が利用可能なようにしたデザイン
・アクセシビリティ...障害を持つ人など誰でも支障なく利用できるかを測る尺度
・ハイパーテキスト...複数の文章を関連付けるしくみ
・マークアップ...コンピュータが文章構造を理解できるように要素に目印をつけること(例:HTMLタグ)
・セマンティックウェブ...正確にマークアップしコンピュータが自動処理しやすくする
ポイント
・Web検索エンジンが正しく理解できるようなコーディング、SEOを意識する
・デザインありきでなく文章構造が正しいかを意識する
・デザインとは、自己表現ではなく問題解決の手段であり、コミュニケーションを最適化すること
・ユーサビリティに優れていることは良いWebサイトの必須条件
・アクセシビリティへの配慮でユニバーサルデザインを実現できる
Webデザインパターン
用語
・要素...Webページを構成する1つのかたまり
・ヘッダー...Webページの最上部。ロゴやナビゲーションメニュー、電話番号などを掲載
・ナビゲーション...サイト内を案内するもの。以下の種類がある
・グローバルナビゲーション...全ページに共通で表示される
・ローカルナビゲーション...あるコンテンツの中だけで表示される
・パンくずリスト...現在の階層を表したり、その上の階層への移動に用いる
・コンテンツ...各Webページの中身
・サイドバー...補足情報の掲載
・フッター...Webページの最下部。著作権表示や補足情報を掲載
・LP(ランディングページ)...ネット広告やリンククリック時に表示されるページ。一般的には、1ページで問い合わせや購入を促す独立したWebページのこと。
・ボックスモデル...Webページを構成する要素はボックスと呼ばれる四角形の領域を生成するという概念
・リッチデザイン...立体感を持たせたデザイン
・フラットデザイン...平面的でシンプルなデザイン
・カラム...段組、列のこと
レイアウトパターン
1カラム、2カラム、3カラム、グリッドレイアウト、フルスクリーン
WEBレイアウトの基本4パターンそれぞれのメリット・デメリット-エムタメ！
まとめと感想
SEO対策、アクセシビリティなど用語としてはよく聞いていたけれども、デザインとコーディングに必要な概念を
Webサイトのしくみと関連付けて考えたことが新鮮でした。
ユーサビリティ・アクセシビリティについては、
ビヨンセ様の公式Webサイトが訴訟されたというニュースが記憶に新しい。
headlines.yahoo.co.jp
画像を配置しただけのデザインで、とてもスタイリッシュでしたが
視覚障害者の方が内容を一切把握できなかったそう。
まさに今回の学習内容が体現されたようなニュースだなぁと。
私もcaptionやalt属性の設定をサボりがち。改めて、気をつけます...
フラットデザインへのトレンドの変化は、とても意外でした。
変化がはやい分野のようなので、常にアンテナを張って
色々なものから吸収していくことが大事ですね！
次回、【続・1日目】Chapter 2 〜 Chapter4 となります。
