今年こそWebデザイナーになりたい!Webデザイナーに必要なコーディングスキル編(html/css/js)

今回はコーディングスキル編として、Webデザイナーとして就職するために一体どこまでのコーディングスキルが必要か確認していこう。

そもそもコーディングとは何んぞや?

コーディングとは簡単に言うとデザインした画を元にプログラムに変換、最適化する意味です。コーディングしないと画像だけだとユーザーが使う上で動きやナビゲーションの動きを作ることができないので、最適化してあげる事が必要ですそれがHTMLという言語とCSSを使ってコーディングするという意味になります。
どこまでを基準にコーディングスキルが必要か?それでは本題へ、コーディングスキルとして初心者がどこまで習得すれば概ね基準値に達しているかをお話しします。

CSS編

CSS3

CSSに関して過去から現在まで色々なプロパティが出てきますので最新のCSSを参考にCSSのプロパティを学んでいきましょう。

レスポンシブができるコーディング

cssjshtml_img01

今の時代スマホが基本になってます、PCだけじゃなくスマホサイトもオーサリングしなければなりません。そこで昔からある@media を利用したて
デバイスの幅に応じたオーサリングを出来るようにするのは今は当たり前になっておりますので、このオーサリングが出ないのであれば結構まずいですね。
なので、コーディングをする上でレスポンシブができないと評価は低くなると思ってください。

floatとclearfixの使い方

cssjshtml_img02

floatを使わないでそもそもレイアウトすることは基本的に厳しいはずですが、たまに理解していない人がいるようです。 floatプロパティ自体はcssの初期化らあるので普通は支えているはずです。そしてfloatを使えば当たり前だけどclearfixも当然使います。clearfixはfloatプロパティを使ってその上の要素にかけてあげる必要があります。
このclearfixというのはcssとしてプロパティがある訳ではなく、個人のユーザーさんたちが各々進化させてきたプロパティになっています。
そのため当初cssはtableタグを用いてレイアウトを使っていたのですが、tableタグだと管理が面倒という観点だったりSEOとしても不向きという事でfloatが伸びたという経緯があります。

参考リンク:fclearfixの使い方

positionテクニック

cssjshtml_img03

cssの中でも自由度の高いレイアウトテクニックの1つがpositionレイアウトです。positionレイアウトは主に親要素の中のみ子要素だけ自由な配置をすることができます。
例えばサムネイルなんかでもよく展開できるし使い方次第では色々なテクニックがあるプロパティです。僕もよくお世話になっています。かなり使えるテクニックだから皆さんも確実に習得しましょう。

参考リンク:CSS – position

擬似的サムネイルを生成テクニック

cssjshtml_img04

サイトを作っていてサムネイル関係でよく悩まされる事がありますが、こちらのサイトで解説している通りサムネイルをcssで自由自在にコントロールする事ができます。
ですので、どんな画像が来てもサムネイルサイズが固定であれば基本的に問題がないように作ることを頭に入れておきましょう。

参考リンク:CSSだけで画像トリミングできたよ

sassの基本知識

cssjshtml_img05

cssとはまた違う言語のように聞こえますがこのsassというのはcssをより簡単にする為に作られた言語です。しかし基本的にはcssとして最終的に吐き出す仕組みなので興味のある人はググるなりして、やってみると良いよ。マストではないけど出来るとより重宝されるし使い方次第では非常に便利です。モジュール化するのに便利だぞ!

初期化ファイル

cssjshtml_img06

ざっとやってきて初期化ファイルを使っていない人がたまにいますので、cssを使う人は必ず初期化ファイルを使いましょう。具体的に初期化ファイルというのは何かというとブラウザによってcssのプロパティ表示は異なり同じプロパティでも表示が崩れたりします。そこで使われるのが1度その表示に関してすべてリセットする要素を1番初めに読み込み、その後cssを書くとすべてのブラウザでほぼ同一の表示になります。これは絶対に必要ですので最新の初期化ファイルをダウンロードしてみてね!

参考リンク:【CSS】決定版!リセットCSS総まとめ

ブロック要素とインライン要素の考え方を取り入れる

cssjshtml_img07

cssの基本的な考えは沢山あって、説明するよりもコーディングしながらわからない事を覚えていくのが1番早いけど、基本的な考えがないと意味がわからなくなります。
そこでcssの基本概念の1つであるブロック要素とインライン要素の違いを覚えてみよう。
インラインとブロック要素はhtmlの上で定義されており、その基本的な特性としてインラインはhtmlの中では span タグや a タグなど 要素として囲まれている中にある要素を指します。インライン要素は主にプロパティが制限される事があります。
ブロック要素は逆に要素に関して外枠をさしますので、全プロパティが適応可能です。
詳しこちらを参照してみてね!

参考リンク:■ブロックレベル要素とインライン要素

出来る限り全てCSSでやる考えでやる

cssjshtml_img08

デザインを起こして、いざcssで組み始めるとわかりますが「これって出来るのかな?」ってなります。しかしそれは概ねできると思ってください。例えばグラデーションだったり吹き出しの画だったりとにかく最近はジェネレーターが出ているので、非常に簡単です。

参考リンク:グラデーションジェネレーター
参考リンク:ボタンジェネレーター
参考リンク:吹き出しジェネレーター

ブラウザチェックは絶対する

cssjshtml_img09

ブラウザチェックに関してはすべてのブラウザで行いましょう。基本的にはWindows、Macのブラウザはすべてチェクしてください。最初は必ずIEに苦労するはずです。
だいたいは幅に関してのトラブルが多いですが慣れてくると簡単になってきます。IEは現状10,11,Edgeはマストです9ユーザーもいますが、無視している会社も多いようです。
あとはFireFox,Chrome,も必ずチェックしてください。

最近の技術はとにかくチェックすること

cssjshtml_img10

コーディングはその都度技術的に進化しているので時代に応じたコーディングが必要になります。ですので今のコーディング技術を基本として新たにコーディング方法を見つけてください。より自分にとってやりやすいコーディング方法をがきっとあると思います。

HTML編

HTML5を使う

cssjshtml_img11

CSSに続きHTMLについて触れていきます。基本的にHTMLはCSSに比べて非常に簡単ですので、HTML5についてまずは自分なりに本なりググるなりして頂きとりあえず勉強してみましょう。現在HTML5については昔に比べて要素がわかりやくなっているの特徴です。HTMLの進化はGoogleの検索にあると言っても良いと思います。HTML5については長くなるからみんなググるなりして勉強してみてね!

SVG

cssjshtml_img12

最近のアイコンなどはSVGがよく多用されてます。SVGに関してまず特徴的なことを挙げると従来の画像に比べて解像度を気にする必要がないのでが特徴です。従来端末に応じて画像の解像度が違い、だしわけをしなければなりませんでした、端末毎に分けるようになると非常に面倒なのと最新端末が出るたびに画像の大きさを修正するのは現実的ではないので簡単なアイコンについてはSVGというポイントと線で構築されたデータが非常に便利です。最近はSVGがアニメーションするようなソフトも出ているのでFlashが消えた今新たに印象を与える為に活用してみてはどうだろうか。
参考リンク:Animated SVG Icons

SEOの基本知識

cssjshtml_img13

SEOに関しては諸説ありますが、ここでは過去の記事を見えて欲しいっす。
あなたは本当のSEOの意味を知ってますか?検索結果を上げる本当のSEOと3つの大原則

Javascript編

jQueryの使い方

cssjshtml_img14

Javascriptに関してできることに越してことはありませんが、1から習得するのは厳しいと思いますので基本的な予備知識とライブラリがあるjQueryを使えるようにしてください。
詳しくはここでは書きませんが、基本的にはスライドショーや画像の拡大、その他色々なことを簡単にできますので是非とも一度トライしてみてください。

コーディングスキルはあくまでもコーディングだけ

基本的にWebデザイナーはコーディングスキルも要求される時代ですが、コーディングスキルを伸ばすのはデザインするデザインがしっかりしていないと
コーディングスキルも伸びません、したがってコーディングスキルを伸ばす為に必要なのはデザインにあります。
なのでコーディング自体を伸ばすには良いデザインや今流行っているデザインを取り入れてそこからコーディングする必要があるということです。
しかし、初心者がいきなり上級なデザインは難しいので、1度好きなデザインをトレースしてみるなどして1からコーディングをするのが手っ取り早いかと思います。
ちなみに僕は昔の会社で言われたのはデザインとコーディングしたデータは1pxの狂いがあってはならないと言われました。理想的にはこの思想で行うことがベストです。

まとめ

コーディングスキルはあくまでも技術的な課題であり、本質はデザインという事を忘れてはいけません。しかし、Web系のデザイン会社は流行りを追ったりしているので、その都度それを取り入れているかがチェックされます。例えばマテリアルデザインや、ファーストビューが大切なデザインなどググれば色々な事が流行りが出てきます。
なのでデザインとコーディングは表裏一体と言っても過言ではありません。
コーディング自体最初は面倒だと思いますが、実際始めてみると楽しものでもあります。Webデザイナーとしてコーディングは必須スキルですので是非とも伸ばしていきましょう。

以上今年こそWebデザイナーになりたい!Webデザイナーに必要なコーディングスキル編(html/css/js)でした。気に入ってくれたらシェアしてね!

関連記事

smartphoneIMGL0018_TP_V

UIデザインの幅に関しての基本的な考え方と理論

全く更新できず時間が過ぎていく…気ままに更新していきますのでたまに見て...

記事を読む

skitched-20180814-223313

今日からあなたもデザイナー!?忘れがちな商業デザインの配色テクニック

デザイナーの商業デザイン配色テクニック 配色については過去ある程度テ...

記事を読む

domain_cms

今年こそWebデザイナーになりたい!現役Webデザイナーに必要なサーバー・ドメイン・CMS 基本知識について

今回で第5回を迎えました。なんとか頑張って続けていきます!Webデザイ...

記事を読む

thmb_03_218

今年こそWebデザイナーになりたい!結局何を覚えればいいの?ソフトスキル編

今年こそWebデザイナーになりたい!結局何を覚えればいいの?ソフトスキ...

記事を読む

新着記事

smartphoneIMGL0018_TP_V

UIデザインの幅に関しての基本的な考え方と理論

全く更新できず時間が過ぎていく…気ままに更新していきますのでたまに見て...

記事を読む

PASONAZ160306470I9A2122_TP_V

ECサイトに必須!商品検索したあとの検索結果の正しい表示について考える

ECサイトに必須!商品検索したあとの検索結果について考える ECサイ...

記事を読む

skitched-20180814-223313

今日からあなたもデザイナー!?忘れがちな商業デザインの配色テクニック

デザイナーの商業デザイン配色テクニック 配色については過去ある程度テ...

記事を読む

6935b31778bafbaa90cbd4cc223ae54e_m

見積金額を高く!デザインや営業に使える訴求力を高めるたった3つの事

最近はどうも忙しくてなかなか更新できてないのですが、最近カメラマンから...

記事を読む

document_img01

15年の経験から理解した!書類選考を通す為に必要な5つのこと

すっかり時間が空いてしまいましたが、しっかり書いていきましょう。 ま...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

smartphoneIMGL0018_TP_V
UIデザインの幅に関しての基本的な考え方と理論

全く更新できず時間が過ぎていく…気ままに更新していきますのでたまに見て

PASONAZ160306470I9A2122_TP_V
ECサイトに必須!商品検索したあとの検索結果の正しい表示について考える

ECサイトに必須!商品検索したあとの検索結果について考える ECサイト

skitched-20180814-223313
今日からあなたもデザイナー!?忘れがちな商業デザインの配色テクニック

デザイナーの商業デザイン配色テクニック 配色については過去ある程度テク

6935b31778bafbaa90cbd4cc223ae54e_m
見積金額を高く!デザインや営業に使える訴求力を高めるたった3つの事

最近はどうも忙しくてなかなか更新できてないのですが、最近カメラマンから

document_img01
15年の経験から理解した!書類選考を通す為に必要な5つのこと

すっかり時間が空いてしまいましたが、しっかり書いていきましょう。 まず

→もっと見る

  • -売る技術-

    ウエブデザイン暦15年目。犬をこよなく愛するデザイナー。今はディレクションとデザイン を中心に制作全般をしてます。主にマーケティングを軸にデザインを組み立て商品が売れるサイトを構築しています。 デザインとマーケティングについて研究の日々。現在はオランダでWebデザイナーとして働いています。

    ツイッターやってます。
  • Amazonアソシエイト・プログラム規約による記載

    売る技術はamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

PAGE TOP ↑