CSSがめちゃめちゃになっている #デジタルマーケの現場課題

#デジタルマーケの現場課題, SEO

デジタルマーケティングの現場で生じるさまざまな課題。
現場の実際の声をもとに、その問題の原因や解決方法を一緒に考えていくのが「#デジタルマーケの現場課題」シリーズです。

課題

今回のテーマはSEO記事を実際にサイト入稿するときに生じるデザインの問題です。

ライティングとして上がってきた原稿は車内チェックの後サイト入稿はして最終チェックに回されます。

SEOの観点から言うと、必要な文章が入っていればそれでOKなのですが、文字ばかりだと読みにくいですから、SEO以外の観点でデザインが必要になります。
SEOライターが書いてきた文章をいかに綺麗に見せるかというところで担当者の力量が問われるわけです

ここで重要になってくるのが、CSSです。

CSSとは、デザインの指定コード。

文字のサイズや色また表や注釈といった枠で囲まれるようなオブジェクト、これらのデザインについて、個別に指定します。これらが綺麗に出ていないと見栄えが悪く文章自体もダメかのような印象を与えてしまうわけです。

ここで立ちはだかるのがサイト全体の CSS によってデザインが固定されている問題です

そこで今回はマーケティング部だけでは解決できない会社全体のサイトのテイストを決める CSS について考えていきたいと思います

コメント

ワードプレスで企業サイトをつくることが多いですが、担当者を悩ませるのが「サイトのTOPのデザインを優先しているため、記事の場合に見出しのサイズが変」ということです。

今全世界のサイトの4割ほどが WordPress でできていますしこのサイトをご覧になっている企業のサイトのほとんどが WordPress でできているんじゃないでしょうかと
でできているんじゃないでしょうかと窓プレ でできているんじゃないでしょうかとアドプレスはコンテンツ でできているんじゃないでしょうかとアドプレスはコンテンツマネジメントシステムの一環で出 でできているんじゃないでしょうかとアドプレスはコンテンツマネジメントシステムの一環でデータベースから得てき でできているんじゃないでしょうか

とアドプレスはコンテンツマネジメントシステムの一環でデータベースからテキストや画像取り出して並べ替えて表示する動的なサイトの1階になりますがこれら並び替えの際に表示をきれいにするために用いられるのが CSS カスケーディングスタイルシートです
考え方としてはまず文字やリンクなどの文字列があってそれらを HTML で大まかに表示した後にそれらを最後装飾として色をつけたりフォントを丸くしたり線を引いたり太字にしたりといったデザインを行うのが CSS ということになります

原因

原因

記事のデザインがなんだかいまいちなのは、記事以外のページにデザインをあわせているためです。
この CSS は一般的にサイトができたときにデザイナーが指定をしておりますし基本的にはサイト全体で CSS を統一してデザインのイメージを一貫して同じものにするというのが重視されているわけです

ただ実際にはサイトのトップない子は商品紹介ページや社員紹介ページといった会社として重要なページのために CSS が指定されている逆に言うと SEO 記事で入れるような無機質な文章を上手に表示するための CSS はサイト設立当初にはなかなか考えられていないことが多いです

そのため私も経験があるんですがとあるサイトに初めて SEO 記事を入稿してみると S 用生地用のデザインが入っていなくてですね本当にただテキストがプレイに表示されるだけになってしまうというケースがあるんですよ
s としてはもちろん h 3見出しが正しく入っていて文字了解ってあれば Google のインデックス上は問題ないんですけれどもただその記事を見た時に会社の人がねなんだこの地味なページはなってしまうケースがあるわけですよ
と言っても担当者の CSS も分からないレベルではデザインを変えることができませんから地味な状態から帰ることができないわけです

これは解決方法を知らないとおそらくどうしようもないケースになってしまいます ページごとのCSSを指定していく必要がありますが、けっこう骨の折れる作業です。
SEO記事も今後入稿が増えていくに際しては S 用生地のデザインというのも考えていかなくてはいけませんとねこれだが担当者レベルでどのような知識を持っていればよいのかということことなんですよね。

勘違い

担当者は、CSSに詳しくなる必要はありません。費用対効果が非常に悪いです。

実際のマーケティングの動きとしては SEO 記事を作ることになったと SEO 記事専用のデザインを作りたいのでサイトを作ったエンジニアデザイナーに連絡を取りたいといった形で会社の協力を得ていくこれが最初の動き方になると思いますそして追加 CSS のデザインサンプルを見比べながら担当者が指定をしていくと。
この場合、競合他社の記事についてソースを見てみて、h2とh3以外にどんな入稿がなされているかを、デザイナーと一緒に分析してみることも重要です。

・箇条書きのデザイン
・引用のデザイン
・表のデザイン
・アイコンと吹き出しのデザイン

などもあわせてつくっておきましょう。

解決策

解決策としては単純にSEO記事用のCSSを別個で儲けましょうということなんですよ。 SEO記事というのは今日 記事というのは基本的にオリジナリティが出しにくくても 文字ばっかりになりやすいですよね。

文字が多いのでパソコン表示だとまあ読めるんですけれどもこれがスマホ表示になるともう画面いっぱい文字だけになってしまうということも起きてくるわけです
SEO 記事上は問題ないんですけれどもやっぱり見た目もある程度クオリティを保ちたいよねと言った場合には SEO 専用の CSS を考える必要が出てきます

そこで担当者レベルで知っておきたいことがありますとそれはページの種別ごとに CSS を別個で指定できるということです簡単に言うとサイト全体に通底する CSS というのがあるんですけれどもその読み込んだ後に着死の場合だけ特別に追加で CSS を読むことができるというこれは知識として知っておく必要がありますと言い換えればサイト全体の CSS の上に S 用生地専用の CSS を塗り固めて表示子は s男記事にベストな CSS で表示させると

この場合必要なのがサイトを作ったフロントエンジニアコーディングをしたエンジニアですねもしくはデザイナーに対して記事コンテンツ用の追加 CSS を作りたいという依頼をするこれが必要になってきます

追加 CSS というのは基本的に WordPress のページで別個にしてを書いておくんですけれどもこれはサイト自体のデザインを設計した人に追加で設定してもらうのがベストです

デザイナーに任せたほうがベター

コンテンツSEOは専用のCSSをつくれ。ウェブサイト全体でどんな記事コンテンツの種別があるかを把握し、それぞれでデザインを分ける

担当者レベルでは文字ばっかりで地味だし読みにくいけれども実際にどうしたらいいのかっていうのはなかなかデザインの指定ができないと思うんですよねとりあえず読みやすくしたいというレベルだと思うのでこれはデザイナーに実際に相談してデザインを作ってもらう必要があると思います H 2見出しの文字の色フォント行取り Font Size H 3見出しも同様ですよねこれらが本文に対してどれくらいの割合で入ってくるのかと絵文字のフォントサイズの違いをジャンプにするんですけれどもうちの会社の場合はどれぐらいのジャンプ率を指定すれば会社らしい記事ページになるのかとこれはデザイナーに依頼することが必要です

注意点

注意点として、サイトのリニューアルごとに追加CSSも忘れずに!
ということです。
ベンチャー企業によくあるんですけれども3年ないしは5年程度でサイトがガラッと変わるタイミングではこうした続け追加 CSS についても再度作り直す必要が出てきますからタイミングを伺って定期的にデザインを見直ししていくということも担当者の仕事の一つになってきます

こうした WordPress のデザインの仕組みというのは実際に身に付けることはなかなか難しくさにはデザイナーに要望を伝えて実装してもらうというのが現実的になります会社レベルでは素人がデザイン指定したところでやっぱりダサくなってしまいますので困ったらデザイナーに聞いて直してもらうという思考回路で十分だと思います

まとめ

以上サイトの入校時に発生する SEO 記事の地味すぎる問題を解決する追加 CSS についてお伝えしてきましたこうしたページの種類ごとにデザインを別途設けて追加 CSS で実装していくというのはマーケティング担当者が主導で進めるべき事柄です

サイト全体の事柄が決まっているから SEO 記事はデザインが微妙だなと諦めるのではなく記事種別ごとにデザインを指定できるということを知識として覚えておいてください

無料e-bookプレゼント!

無料Eブック「最高のマーケティング部署を作る方法」プレゼント!

ダウンロードする

関連記事一覧