最適なマークアップを起こす具体的な方法

こんばんは！
ママWebデザイナーの起業専門
コンサルタント、みなです^^

現役Webデザイナーによる
WebデザイナーのためのWeb集客術

今回はマークアップについて
お届けします！^^

ただ、今回は画像でお送りします。

結構サイズが大きい画像を
添付しておりますので

スマホから閲覧されていらっしゃって
通信制限が気になる方は
是非、ご自宅PC、もしくは
カフェ等のWi-Fiを活用して
見て頂ければと思います。

土曜日もお届けしておりますがｗ
復習記事はこちらです↓

• あなた自身の棚卸
  「こどもたちから学ぶ・自分の棚卸法」
• 理想的なお客様を決める
  「高単価で作業量減！良質なお客様が集まる方法」
• ライバルを知る
  「大勢の中からあなたが選ばれる」
• キャッチコピーを作る
  「目に留まるライティング」
• Webデザイン
  「誰でもできる！？見込み客が集まるデザイン」
• Webデザイン
  「すぐにプロらしくなるデザインポイント」
• SEO対策
  「検索順位の要！上手なマークアップ」

ちなみに、
どうして過去記事を
度々掲載しているかというと…

これらを、
上から順にやってみることが

人気Webデザイナーとして
引っ張りだこになる最大のポイント

でもあるからなんです。

私が定義する
「人気Webデザイナー」とは

良質なお客様から
紹介だけで案件を頂くことが出来る、

もしくは、自分で理想的なお客様を
集客することが出来、

作業内容や[[name1]]さんの価値に
見合った価格でお仕事することが出来、

制作受注本数を減らしても
収入が減らなくなり

毎月安定して収入を得ている状態です^^

この状態になるために必ず必要なことが
上記からの流れなんですね！

さて今日は、次の工程。

前回の記事
「検索順位の要！上手なマークアップ」
で、

マークアップの重要性について
お分かり頂けたかな～と思います。

実は、今日の私の
facebook個人フィードでも
つぶやいたのですがｗ

信頼性を重視するならデザインを

SEOを重視するなら
コンテンツとマークアップを

意識する、もしくは
しっかりしたものにする必要性が
あります。

これらを兼ね備えることが出来ると
かなりの人気Webデザイナーに
なっているはずです！

どんなに良いコンテンツを
書いていても、
マークアップがガタガタだったら
Googleへ正しい情報は伝わりません。

逆に、あまり更新しなかったとしても
コンテンツの内容が微妙だったとしても
マークアップをきちんと行っていると
検索結果上位に表示されることもある
ということを
前回はお伝えしました^^

では、
デザインからマークアップを起こす時
どのようにして
HTMLタグをつけていくでしょう？

様々な方法があるかと思いますが
私が一番最初の頃にやっていた方法は
こちら…！！

　

↓　↓　↓

まず、Webデザインを
カンプまで仕上げます。

次に、このカンプ画像に対して
どんなHTMLでマークアップを
行っていくか？を
下書きしていきます。

この時、

そこに入り込むコンテンツが
どんな意味合いを持つものか？
というのを、考えてください！

分かりやすいのは
タイトル = h
本文 = p
章に分かれている = section
デザイン的なレイアウトのみ = div
などですね。

どの部分にどのHTMLを使うのかを
じっくり見定めてください^^

出来れば、TOPページだけでなく
下層ページも行っておくと
CSSを組む時、
よりスムーズになります^^

こっちのページのタイトルは
H2だけど、
あっちのページデザインの場合は
H3になって……

などなど、
タイトルレベルによって
ページによって等で、
CSSのデザインを揃えたり
違ったり…などさせていると

大体混乱してしまい、
結局 classだらけ、divだらけ
になってしまいやすいからですね。

ちなみに、現在の私は
この下書き作業を行っていません。

慣れてしまったので
「あえて下書きをする」
ということはせず、

デザイン段階でどんなタグを使うのか
イメージしながら制作しています^^

似たようなコンテンツ
安いテンプレート
無料ツール

そういったものが
沢山溢れてきている今こそ

きちんとしたマークアップで
クライアントさんに
ライバルより少し先へ出てもらう

そんなWebサイトを
提供してあげたいですね^^

本日はここまで！
ママWebデザイナーみなでした♪