未経験からのwebプログラミング攻略サイト

未経験からwebプログラマとして活躍、現在はweb業界の様々な仕事をしている筆者が経験を元に、実際にwebプログラマとして仕事ができるまでを解説

【これが出来れば第一線で活躍できる】デザインを即コード化する感覚を養う

実際にwebページを作るにあたって、よく見ているサイトのような

難しい構造が自分に作れるのだろうか…?

そんな不安を感じる方も多いのではないでしょうか?

 

現役エンジニアの私含め、誰もが最初のうちは通る道です。

ですが、この記事を見るだけでその不安の大部分が払拭されるはずです。

 

書籍や形式張ったwebサイトでは中々触れない、現場目線&初心者目線に

合わせたポイントを紹介しますので、ぜひ御覧ください!

 

・ページを見た瞬間にhtmlが浮かぶ

例えば下のようなページを見て…

 

↓大まかに緑枠で囲った4つのブロックに分かれることがわかると思います。

これを突き詰めていくと、例えばモニターの半分でページデザインを表示しておき、

それを見ながらhtml/cssのコードをぱぱっと打てるようになってきます。

 

これにはどうしても慣れが必要ですが、割と早い段階で身につくと思います。

この感覚が身につくと、どんなページもパッと見ただけで脳内に

htmlの構造が湧いてくるようになります。

言わずもがな、開発速度の向上につながりますし、より複雑で個性的なデザインにも

挑戦しやすくなるでしょう。


・グリッドデザイン

webサイトは基本的に四角形を中心にデザインされています。

後述しますが、円形や星型なども、実は四角枠であることが多いです。

 

四角形を中心にデザインするメリットとして、要素を配置しやすい点があります。

イメージ的にはテトリスを思い浮かべてください。

すべての要素が四角形でデザインされているため、シンプルさが維持されます。

こういった考え方を専門用語で「グリッドデザイン」と呼んでいます。

 

グリッドデザインの詳細は省きますが、要はwebページは四角形の大小で

構成されている、ということだけ覚えておいてください。


・円、三角、六角などを四角形で考える

少し触れましたが、webページには円、三角、星など様々なデザインがあります。

しかし、これらは実はほとんどが四角形の枠に特徴的な背景を添えているだけだったりします。

例えば星型の中に文字が書いてあるデザイン。文字を配置するのはhtmlです。

htmlで四角枠を設定し、その背景画像として星の画像を設定、これだけです。

最初に書きましたが、やはりこれも慣れてくるとwebページを見ただけで

「あ、この星型っぽい部分は四角枠で、罫線をcssで表現してるんだな」

「この円形は画像で設定してあるっぽいな」

などと予想が立てられるようになります。

 

まとめ

・ページを見た瞬間にhtmlが浮かぶ
・グリッドデザイン
・円、三角、六角などを四角形で考える