Blog スタッフブログ

WEB制作担当のG.Yです。

今回はコーダー目線でのWEBデザインに関する記事となります。
装飾が多く、コーディングでの再現にひと手間が要りそうなデザインでもできるだけテキストベースで再現することには大きなメリットがあります。
良質なWEBサイトの構築には、可能な限りテキストベースでのコーディングを行うことが望ましいです。

WEBサイトのTOPページなど目立つ部分では、デザイン性を重視してユーザーの目を引く装飾を取り入れることも多いです。

WEB制作においては、こうした複雑なデザインもできるだけ画像書き出しせずテキストベースで再現することが望ましいとされます。

■理由①レスポンシブデザインに対応できる

このようなデザインを一枚の画像で書き出すと、画面サイズを縮小した時テキストが見づらくなってしまいます。

画面サイズに合わせて画像を縮小すれば文字が小さくなりすぎますし、画像の縮小をしない場合テキストが見切れてしまいかねないからです。

テキストベースであれば、CSSを駆使することで画面サイズに合わせて柔軟な調整ができます。

■理由②SEO対策で有効

サイト内にテキストベースで設定した情報がクローリングによって検索エンジンに拾われることで、
SEO効果の上昇につながります。書き出した画像にALTで文章を設定するより、SEO効果は高いとされています。

■注意点

使用フォントの関係などでテキストベースでの実装が難しい場合は画像として書き出しても問題ありません。その場合、画像にはしっかりALTを設定しておくようにしましょう。