【webデザイナーがコーディングで気をつけることとは？】現役webデザイナーがコーディングで気をつける点を紹介します！

webデザイナーをされている方やwebデザイナーを目指してコーディングの勉強をされている方に、webデザインでコーディングをする際に気をつけるべきことを紹介したいと思います。

コーディングはただコードを書けば良いというわけではありません。webサイトを作成する上で色々と気をつけるべき点があります。

それでは紹介していきます。

独学でwebデザインの勉強をしている方がいるかと思います。そんな方向けにwebデザインを独学で勉強するには何から学べば良いのかをまとめた記事があります。

「webデザインの独学は何から勉強すれば良いの？独学の勉強方法を紹介します！」も併せて読んでみてください。

webサイトをレスポンシブ対応にする

webサイトを作成したはいいがレスポンシブ対応がされていなければ、そのwebサイトは決して良い状態とは言えません。

レスポンシブ対応とは、webサイトをスマホ画面で見た際にスマホでも綺麗に見ることができるように対応することを意味します。

いまだにレスポンシブ対応がされていないサイトを見かけます。そういうサイトをスマホで見ると拡大しないと文字が見えなかったりします。

webサイトを見る際に利用するデバイスは、PCよりもスマホの方が圧倒的に多いです。webデザイナーはスマホファーストのデザインとコーディングが求められているのです。

そのため、webサイトをコーディングする際はレスポンシブ対応を行うコーディングも忘れずに行ってください。

ちなみにwebサイトをデザインする際は、コーディングやレスポンシブ対応を行うことを考慮して設計する必要があります。

デザインが完成してコーディング作業に移った時、デザイン通りにコーディングするのが困難な場合があります。

デザインとコーディングを1人で行う場合は、コーディング作業が難しくならないようにデザインの段階から意識して設定してください。

画像を多く入れない

webサイトにあまり多くの画像を使用するのはNGです。

画像はデータが重くなりやすく、それらの画像が多くあるサイトも重くなりやすくなります。

サイトが重いとページを読み込む時間が長くなり、サイト利用者の離反に繋がります。

サイトページの読み込みが1秒から3秒に落ちると、直帰率は32%上昇します。（参照：Think with Google）

読み込みページが2秒落ちただけで直帰率が大幅に上昇してしまうのです。

そうならないためにも、サイトにはあまり多くの画像を使用しないように気をつけてください。

例えば、ページ内のタイトルや説明文などはコーディングでも表現できるので画像を使用せずにコーディングで表現してください！

どうしてもこのフォントのタイトルを使用したい、などのこだわりがある場合だけ文字を画像化して使用してください！

画像を使用する際は、画像サイズを軽くしてから使用することをおすすめします。

拡大されてまで見られるような画像でないなら、サイズを軽減しましょう。

画像サイズを軽減してくれる無料ツールがあります。僕はこちらを使用してから画像を貼っています。

僕はiLoveIMGというツールを使用しています。もし興味のある方はぜひ使用してみてください。

SEOを意識する

SEOとは、（Search Engine Optimization）のアクロニムで、検索エンジンの最適化を意味しています。

作成したwebサイトが検索結果で上位に表示されるための施策のことで、施策をすればするほど多くの人にサイトを見てもらうことが出来ます。

例えば、美味しいコーヒー豆の販売サイトを作ったとします。そして「コーヒー豆　美味しい　販売サイト」というキーワードで検索したとします。

SEO対策が行われていれば検索結果の上位にサイトが表示されるため、多くの人にサイトを読んでもらうことが出来ます。

しかしSEO対策がされていないと、上記のキーワードで検索してもなかなか表示されず、集客の少ないサイトとなってしまいます。

webサイトを作る目的は、多くの人にそのサイトに訪れてもらい、何らかの目標を達成することです。

そのためSEO対策がされていないwebサイトは目標達成できないサイトとなってしまうのです。

作成したサイトを多くの人に見てもらうためにも、SEO対策はしっかりとしましょう！

SEOはさまざまな種類があり、「これをやれば万全」というものはありません。

しかしwebサイト制作で絶対に使用するSEO対策があるので、軽く紹介します。

webサイトに入れる画像はalt属性で説明する

HTMLでimgタグを使用して画像を挿入するかと思います。その際alt属性を忘れてしまう方が多いのではないのでしょうか。

alt属性は、その画像がどのような画像なのかを文字で説明するタグとなっております。サイト内に挿入した画像には、全てにalt属性で画像の説明を行いましょう。

alt属性に画像の説明があることで、サイトに巡回したクローラーがどのような画像を乗せているのかがわかります。

そしてサイトに一貫性があることがわかり、SEOが向上するのです。

alt属性の説明文挿入はSEOの向上につながるので、alt属性を入れていない方はこれから意識してみてください！

コードに無駄な改行を作らない

テキストエディターでコードを書く際、無駄な改行を作ってしまう方はいませんか？

無駄な改行があるとその分テキストファイルが重くなり、サイトも重くなります。

先程の画像と違ってそこまで大きな影響はありませんが、重くならないようにした方が良いですよね。

記入したテキストファイルを見やすくするという意味での改行は良いかと思います。しかし意味の無い改行がある場合は改行を削除してテキストファイルを軽くしてください。

タイトル名はよく考える

タイトル名はしっかり考えてください！

タイトルとは、h1タグに入力するサイト名の部分です。検索結果にもタイトル名が表示されます。そのためわかりやすい言葉で表現してください。

また、タイトルには検索キーワードがしっかり含まれている状態が理想です。

例えば先程の「美味しいコーヒー豆の販売サイト」のタイトルを考えるとします。

自分が消費者の場合、上記のサイトを検索するためにどのようなキーワードを入力するか考えてみてください！

「コーヒー豆」「美味しい」「販売サイト」のように入力してサイトを検索すると思います。

このキーワードをタイトルに入力することが大切なのです。

サイトのタイトルはSEOに影響を及ぼすので、しっかり考えて作成してください！

最後に

以上がwebデザイナーがコーディングをする際に気をつける点の紹介でした。

デザイン通りにコーディングすれば良いのではなく、サイトに多くの人を集客させるところまで考えてコーディングをする必要があります。

webデザイナーはコーディングのスキルとSEOの知識も必要ということになります！

大変かもしれませんが、これらの知識やスキルを持っていると1人で活躍できるwebデザイナーとなります。

是非コーディングの際は上記を意識して行ってください！