WEBデザイン・WEBコーディングのスキルについて

はじめまして。
私はHTML、CSS、Javascript、PHPを独学で習得してきました。
今現在も勉強中です。死ぬまで勉強です。日々研鑽です。プロである以上、終わりはありません。

一つの例として参考になればと思います。
友達になりたいと思われた場合、その方法ですが、、、適当に私のことを調べてご連絡ください。
ここではメールアドレスの交換など禁止されていますのでね。


①デザイン、スキルを高める方法について


まず、デザインとコーディングではアプローチが全然違います。


【WEBデザイン】を高める

これは美術的なセンスを磨くことです。
最初のうちに作るものは、あまり奇抜なデザインを追い求めず、個性を出すのも後々にして。

プロが作成したと思われるサイトを飽きるほど見て、刺激を受けることから始めます。
これは画面に表示されているもの全体を1枚の作品として眺めるぐらいにします。

色の使い方、要素同士の間隔の開け方や配置バランス、フォント、書体と文字の大きさなどに着目します。

次に、いくつかのサイトを無作為に選んで、WEBページとしての構成を意識して見ます。
ブラウザのデベロッパーツールなどを用いて、WEBページを解析します。

ヘッダー、フッター、各カラムの取り扱い、スマホ対応（レスポンシブかどうか）、スライドショーなどの動きの表現（大半がjQuery）
そしてやはりユーザビリティですね。視覚弱者などへの配慮も当たり前ですが、SEO対策にもつながります。

一見して斬新すぎる、奇抜すぎるサイトでも、ターゲット層によってはそれでよい場合もあります。

ここで特に、WEBデザイナーとして重点的に見るのはCSSの使い方です。

昔はページの大半のボタンなどがすべて画像というのが多かったのですが、現在はほぼすべての装飾をCSSで
行う事が望ましいとされています。描いた絵を、文字で表現していくのですから、その技法はデザインの範疇で考えます。

ここまでがWEBデザイナーとして考えるべき範囲です。


【コーディングのスキル】を高める

引き続き、人様の作ったサイトを解析することで勉強していきますが、
これはデザインとは違い、単に眺めていても収穫はほとんどありません。
自分が実際にコーディングをする際に、参考にするためにいろいろと見て回ります。

SEO対策がきっちりとされているかどうか、という基準で見るのもいいですし、
W3C準拠を重点的にチェックするのもいいですが、どちらにも言える基本的なことは、キレイに書くこと。

表示が崩れた！それどころか真っ白でなにも表示されない！という事態になった場合に、
書いた本人がどこに何が書いてあるのかすぐに分からない、というような書き方はしないことです。

デザインの段階でCSSを重点的に見ましたが、各HTMLタグのidとclassの命名規則も重要です。
idとclassは、CSSだけではなく、Javascriptでも重要になってきます。
安易な命名をして重複させてしまったりしないように注意する必要があります。

新しく作られたサイトでは、HTML5が増えてきましたが、俄然、HTML4.01あたりも多く残っています。

imgタグのalt、input要素とlabelタグ、hタグの使い方、ol・ul・dlの使い分けなどなど。
HTML4以前では、W3C準拠にこだわりすぎるのは、仕事としてコーディングする際には時に弊害になる場合があります。
strictにこだわらず、Transitionalでいきましょう。

あとは各metaタグを適切に設定してあるか否か。
ページごとにきちんとdiscriptionが分けてあるか、keywordが適切か、などです。
ここ数年では、新たに、OGPをキチンと書いておくのがセオリーになってきました。

あとはファビコンの設定です。デザインと分業した場合、ファビコン自体を描くのはデザイナーです。
しかし、ファビコンも今やfavicon.icoだけではありません。詳細は割愛しますが、大小さまざまに何種類もあります。
それらを用途に合わせてきちんと設定するのもコーディングの範疇です。

もしデザイナーから16px四方の小さいアイコンしか貰えなかったら、追加で作ってもらう必要があります。

技術系のブログなどを読み漁ることを趣味にするのもいいです。私は大好きです。
特に、諸外国の制作事情などを翻訳して紹介してくれているブログなどは大好物です。
文字数制限にかかりますので一旦切ります。

②短期間で高める術

これは、そんな術があるのなら、誰もが喉から手が出る術でしょう。私も知りたいです。

まずは地道に勉強することです。特にデザインについては生まれ持った天性が無い限り、
努力の積み重ねでしか上達はしません。近道はありません。

基本通りにデザインし、上手な人の真似をしてコツをつかんでいきます。
パクるという意味ではありません。真の意味でのリスペクトです。

基本が出来てからいよいよ個性を出すために応用していきます。


コーディングについても、ほとんど同じです。覚えることは日々増えていきます。
私が関わってきた間、HTMLだけでtableレイアウトで画像をふんだんに使ったサイトが素晴らしいと言われた時代から、
Flashバリバリ、下手するとFlashオンリーのサイトがリッチだ、素敵だと言われる時代もあり、
フラットデザイン、簡素な構成こそが美だ！と言われるような時代になりました。
ここから先、まだまだ進化していくでしょう。

終わりがありませんので、近道はありません。
誰よりも早く、というのであれば、強いて言うなら、日本語の解説書が出る前に英文を読んで習得してしまうことです。
勉強する時間を極力短縮したい、ということであれば、日本語の解説書が出てから、読み漁ることです。
スクールに通う、勉強会に参加するのもいいと思います。

そして、なによりも、ただ読んだりしただけで頭に詰め込もうとせずに、実際に自分で組むことです。やらないとダメです。

ここまでいっておいてなんですが、私はすべての技術を丸暗記などしていません。
実は、私はなんの資格も持っていません。そして、恐らく、どんなテストを受けても合格しないだろうと断言します。

ただ、“いつ”、“どこで”、“どの知識”を使えばいいか、この程度の認識を広く、かなり広く押さえてあります。
あとは、制作中の必要な時に、リファレンスを開いて、書いてある通りにします。

ある程度頻度が高いものは暗記していますが、しようと思ってしたことはありません。勝手に覚えます。

エクセルの関数などもそうですが、テストであれば暗記しておく必要がありますが、実務ではfxボタンを押せば
関数の一覧が出てきて、ご丁寧に内容まで書いてありますし、クリックすれば打ち込む必要もありません。
そんなことをいちいち暗記しているより、こういう関数があったな、とだけ覚えていれば仕事はできます。スペルまで覚えません。

少なくとも、私はそうしてきました。


③知り合いがいらっしゃらない


私は今現在はPHPのプログラマがメインですが、私には、プログラマの友達はいません。
デザイナーの友達はいます。彼らは協力者であってライバルではないからです。
デザイナーとマークアップエンジニア（コーディング）、プログラマーは共存できます。

基本的に同業者はすべて敵です。知識の共有は自分が勉強した時間を無益で提供することになります。

このご相談に対する私の回答も、長年の私の経験を無償で提供していると考えてしまうとあれです、
ただただ寂しい人間になってしまうのでほどほどに。

技術レベルが均衡していて、相互に助け合い、刺激しあえれば素敵ですが、世の中そうも甘くありません。
自分なりにカスタマイズしたプログラムなどを安易に共有して、それをパクられたら、あっという間に友情崩壊です。

HTMLやJavascript、PHPによるプログラムなどは、著作権のような権利などほぼ皆無に等しいです。
HTMLのソースに独自性を持たせるのは恐らく不可能ですし、Javascriptはブラウザからも簡単に見えるため守りようがありません。

PHPはサーバーサイドプログラムなので、ブラウザからは誰も見れませんが、
友達と信じて共有したプログラムが仮にパクられたら、サイトの動きが酷似していても確認のしようもありません。

EC-CUBEやWordpressなどが無償配布されているのも、プログラム単体では性格上、商品として取り扱えないのです。

そこで、プログラムを無償で配布してユーザーを集め、追加プラグインや、カスタマイズサービスの提供や、ASPサービス、
公式の解説本を発行したりして儲けるビジネスモデルになるのです。


ちょっと脱線気味ですが、まとめますと、
勉強会などに参加すれば同レベルの友達になりうる人が見つかる可能性はあるかもしれません。
あとはもう友達というより、先輩、師匠、後輩、弟子といった関係に近い人脈になると思います。

長くなりました。
ご拝読ありがとうございました。
お疲れさまでした。

https://crowdworks.jp/consultation/threads/4253
のベストアンサーが本当に全てだと思います。半強制的に業務に従事させられると
嫌でも身につきます。素養無しと判断されればそれまでですが。

鰤尾商事さんの
＞このご相談に対する私の回答も、長年の私の経験を無償で提供していると考えてしまうとあれです、
が現実ですね。自分には真似できません。本当に素晴らしい投稿です。