PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザインの勉強と備忘録。Webサイト制作系の職業訓練を受けてます。

【HTML/CSS】ホームページの解析

ホームページの解析を通して、ホームページの作りを学びます。


アウトラインを見る

ホームページのアウトラインを確認するにはChromeのアドオンであるHTM5 Outlinerを使う。

HTML5 Outliner - Chrome ウェブストア


URLバー右端のHTML5 Outlinerのボタンを押して、ページのアウトラインを確認します。

例:AMD
f:id:game-web-design:20140911100001p:plain

例:Intel
f:id:game-web-design:20140911100021p:plain

この時にuntitledと表示されている見出しは、見出しの中にテキストが含まれていないか、見出しに画像を使っている。見出しを全て画像にしてしまうと、検索エンジンはアウトラインを解析できないので、少なくともh1にはテキストを含めることが大切。
f:id:game-web-design:20140911100439p:plain


CSSを無効化して、HTMLの構造を読み取る。

CSSを無効化して、HTMLの構造やCSSの使い方を確認する。
CSS無効化にはFireFoxのアドオンの「Web Developer」を使用する。

ブラウザレビュー:
f:id:game-web-design:20140911130540p:plain

CSS無効化プレビュー:
f:id:game-web-design:20140911130552p:plain


ソースを見る

ブラウザ上を右クリックで「ページのソースを表示」で、HTMLの構文やCSSの設定を見る事ができます。


ブロック要素を視覚化して、ページレイアウトを見る

FireFoxのアドオン「Web Developer」で、ブロック要素を視覚化してページレイアウトを確認する事ができます。
Web Developer」から「アウトライン」メニュー、「ブロックレベル要素を枠で囲む」を選択するとブロック要素にボーダーがついて、どういうレイアウトになっているのか確認する事ができます。

右クリックから「要素を検証」で、ブロック要素のプロパティを確認する事ができ、マージンやパッディングの値を見る事ができます。

f:id:game-web-design:20140911144309p:plain


ワイヤーフレームを描きだす

ワイヤーフレームIllustratorで描きだします。

Illustratorフレームワークを描きだします。

  1. ブラウザでページ全体をキャプチャーして、画像を保存。
  2. Photoshopで余計な所をトリミングして、Web用に保存。
  3. IllustratorでプロファイルをWEBを選択し、新規ファイルを作成する。
  4. 「ファイル」メニューから、「配置」。先ほどの画像を選択しテンプレートにチェックしてOKを押す。
  5. 新規レイヤーを選択し長方形ツールでヘッダー・コンテント・フッターなどのブロック要素を囲む。新しい要素を囲むときは新しいレイヤーを作ってから、長方形ツールで囲み、1レイヤーに1要素になるようにする。
  6. 各長方形に色を塗り、ボーダーを非表示にする。
  7. 「ファイル」メニューから「書き出し」、PSD形式で保存。保存するときは解像度をスクリーンでレイヤーを維持します。
  8. Photoshopで先ほど書き出したファイルを読み込み、ルーラーをつかって、各レイヤーを囲みます。

参考:銀座松屋
f:id:game-web-design:20140911144647p:plain

f:id:game-web-design:20140911144658p:plain