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

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

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

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

CSS編

CSS3

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

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

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

floatとclearfixの使い方

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

参考リンク:fclearfixの使い方

positionテクニック

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

参考リンク:CSS - position

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

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

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

sassの基本知識

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

初期化ファイル

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

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

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

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

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

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

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

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

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

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

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

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

HTML編

HTML5を使う

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

SVG

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

SEOの基本知識

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

Javascript編

jQueryの使い方

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

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

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

まとめ

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