デザイナーのうえつです。
出身はグラフィックで、コーディングの「コ」の字も知りませんでした。
趣味でホームページ作ってみた！というチャレンジをしたこともなく、ちょっとソースっぽい英語や数字の羅列を見ただけで無理～と思ってましたね。
ただ仕事となると話は別で、現在はホームページ制作会社に勤めていてコーディングも分かってきました。
バリバリ読める！書ける！とまではいかないですが多少はできます。
コーディングをしないデザイナーも、もちろんいらっしゃると思いますが、知っているのと知らないのでは雲泥の差があります。
特にオススメなのはChromeの「検証」が使えることです。
クロームはブラウザがGoogleなら、何の設定をしなくても右クリックで出てきます。
このサイトかっこいいな。いいデザインだなと思った時その場ですぐ右クリックすると「検証」という項目が出てくるので要素を検証することができます。
ここでこのホームページのソースやそのソースを形成するためのスタイルを見ることができます。
コーディングの深い知識があれば、chromeの検証を存分に活用ができますが、コーディングをがっつり理解できなくても、基本がわかっていれば、検証も便利ツールに早変わりです。
デザイナーにとってこれらの情報は、グラフィックにない「スピード開示情報」です。
制作者にお願いしてデータをみせてもらうでもなく、たった右クリック一つでアプリを立ち上げることもなく、情報が手に入るのです。
例えば
- この書体は何が使われているのかな
- 文字のサイズはいくつかな
- 余白はどのくらいとっているのかな
- このバナーのサイズは縦と横の長さは
- 何色なのか（正確な数字で色の番号を知ることができる）・・・
などなど
またわざわざスマホからサイトを読み込まなくてもスマホでの表示に切り替えることもできます。さらには、Web上で擬似的に修正をすることまでできてしまうのです。
例えば、「このサイトの背景色を変えたらどんな感じになるのかな」と思った場合、右クリックで「検証」をし、まずは背景に使われている色が表示されているところをさがします。
「background」とかかれているところです。
色が見つかったら、今指定されている四角の色をクリックします。
そうするとパレットが出てくるので、そこでお好みの色を選ぶとすぐにサイト上に色が反映されます！
アンビリーバボー！
デザイナーは多くの作品をみたほうがいいと言われますが、すぐそこにいま情報がに手にはいるとは素晴らしいですね。
たくさんのヒントと答えがあふれています。
