デザイナーな自分がデザイナーに向けてCSSの説明をしてみるの巻
＊ この投稿の内容は個人的な見解であり、所属する企業・組織の見解ではありません。
こんにちは。ビザスクの稲葉です。
この投稿では、CSS(とHTML)の基本的な書き方をデザイナーさん向けに説明してみようと思います。
なんで今さらCSSなの？
なんでデザイナーが、Figmaの使い方でもなく、デザインシステムの話でもなく、CSSについて書いているの？？って思われるかもしれないので、この投稿を書いてみようかなと思った背景の説明から始めます。
たまにどうやったら(Web or プロダクト)デザイナーになれますか？とか(Web or プロダクト)デザイナーにはどんなスキルが必要ですか？って質問をいただくことがあります。
どうやったら(Web or プロダクト)デザイナーになれますか？に具体的に回答するなら、LinkedInで働いてみたい会社や職種の求人を探して、求人に書いてある「必要な経験／スキル」を参考にして経験を積むorスキルを身につけるのが近道なんじゃないかなと思います。
そんな時間はかけてられないから、今週中にデザイナーになりたいんだよって場合は、お客さんを見つけて受注する一択です。
時期や職場によって使用するツールも開発環境もまちまちなので、これができれば絶対大丈夫って断言できるツールやスキルは思いつかないんですが、まずFigmaの操作を覚えましょう。
それに加えて、自分の拙い経験から地味だけどこれがあって本当によかったと思うスキルの一つはCSSの知識・経験だと思ってます。
CSSの知識と経験は想像以上に役立つ
CSSが役立つ場面なんて特に無かったよって方もいっぱいいると思うんですが、個人的には下記のような状況で役に立ったなと実感しています。
1.エンジニアさんとのコミュニケーションがとりやすい
まず、(最近は)画面のデザインをほぼ100%Figmaで作成しているんですが、Figmaで作成したデザインから実際の画面を実装する時にはCSSが不要なことプロダクト開発の現場では今のところほぼないと思います。
ここからは完全に自分の経験のみを元にした感想なんですが、CSSが好きじゃない、得意じゃない、とりあえず書いてみたけど問題ないか確認して欲しいって思っているエンジニアさんが自分の周りにはとても多いと思います。
CSSが書けると相談してもらえる機会が増えて、距離もグッと縮まり信用も得やすいので、その後の業務がとても進めやすくなります。
個人的にはここに一番メリットを感じています。
2.知らないよりは知っていた方が手戻りは少ないはず
画面をデザインして納品した後で、エンジニアさんから、このデザインはどうやって実現するの？とか、難しいからこういう風に変更したいんだけど。という相談があると、少なからずデザインの変更・修正が発生します。
CSSの知識があれば、本当はこうしたいんだけど、納期や手間を考えると、こっちのデザインの方がメリットが多いよねってことを自分で判断・説明ができるので、手戻りの回数を減らすことができると思います。
3.フリーランスとして案件を受注しやすい
もし、フリーランスとして案件を受注したいなら、コーディングまでできると(CSSと書いておきながらHTMLも含んですいません)、受注できる機会はデザイン作成だけができる場合と比較して格段に増えると思います。
発注する側も、コミュニケーションをとる相手が少ない方が手間が減るのでそこは大きなメリットに感じてもらえます。
自分の経験からだけの話になりますが、デザインに加えてコーディングができるという点だけでも仕事を依頼してもらえる機会が倍増したと思います。
依頼が増えるということは繋がりも経験も増えるし、ポートフォリオに載せる作品を短期間で増やすことも可能になります。
いざ企業に応募するときにも経験(と失敗)が多いという点は思った以上にメリットが大きいです。
ただ、副業として依頼を受ける場合は、コーディング込みで受注すると当たり前に業務量も増えるので、納期等は慎重に交渉しないと、数ヶ月休みが取れない地獄を経験することになるかもしれないので気をつけてください。
前段がとても長くなりましたがここからが本題です。
HTMLとCSSでできること
HTML
なにはともあれHTMLなしでwebサイトの作り方は説明できないので、まずはHTMLの説明をします。
HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」の略です。
Webページを制作するためのマークアップ言語です。またマークアップ言語とは、Webページ内のテキスト情報の構成や役割をコンピュータが構造的に理解できるようにするための言語を意味します。
HTMLで作成されるページはWordやGoogleDocsを想像してもらえるとわかりやすいと思います。
HTMLにはたくさんのタグがあるので、チュートリアルをそっと閉じたくなりますが、基本的に使うタグは限られているし、タグ自体は英単語の略(頭文字)を使っていることが多いので、落ち着いてゆっくり数回勉強すれば気づいた時には息をするように書けるようになります。
よく使うHTMLのタグ
<div>：divisionの略で、(エリアを)分割するためのタグです。似たような用途で使うタグに<section>があります。
<p>：paragraph(段落)の頭文字です。文章の段落の表示に使います。
<a>：anchorの頭文字でリンクを表示するために使います。
<img>：imageの略です。画像を配置できます。
<ul>：unordered list(順序なしリスト)の略です。ulで次に出てくるliを囲むと・が頭についたリストを表示できます。
<li>：listの略です。
<br>：breakの略で文章の改行に使います。HTMLではEnterを押しても改行されません。
<h1> ~ <h5>：hはheadlineの頭文字です。後に続く数字の大きさで見出しの重要度を表現します。通常は<h3>ぐらいまでしか使用しません。
他にもたくさんのタグが用意されており、HTMLだけでテキストの太字や斜体を表示することもできます。
ちなみにHTMLは下記の例のように開始タグと終了タグをセットで指定します。
例. <p>段落です。</p>
ここで紹介したタグだけで、webサイトの作成は可能です。
もっと詳しく知りたい場合はw3schools.com等のチュートリアルを試してみてください。
CSS
CSSは「カスケーディングスタイルシートの(Cascading Style Sheets）」の略です。Webページのデザインやスタイルを指定するためのスタイルシート言語です。HTML（Hypertext Markup Language）と共に使用され、HTMLがコンテンツの構造を定義するのに対して、CSSはそのコンテンツの見た目やレイアウトを指定します。
もうちょっと詳しく書くと、CSSは指定したセレクタ(HTMLタグの<>を外したもの)やid、classに対して文字サイズ、文字のスタイル、文字色、オブジェクトの背景色、位置、レイヤーの順序、サイズ、角丸やボックスシャドウ等の装飾、最近は簡単なアニメーションまで指定できます。
w3school.comにはCSSのチュートリアルもあります。
CSSのプロパティ
CSSは基本的に指定した要素(セレクタ、id、クラス)に対して、プロパティ:値;のセットでデザインを指定します。
使い方は後で説明しますが、CSSのプロパティは基本的に英単語を使ったものが多いので覚えやすいと思います。
例えば、HTMLでboxというclass名をつけた要素に幅、高さと背景色を指定する場合は下のようになります。
HTML
<div class="box"></div>CSS
.box {
width: 100px;
height: 100px;
background-color: black;
}これで、画面上には幅100px、高さ100px、背景色が黒色のboxという名前の正方形が表示されます。
基本的なCSSの書き方
まずはHTMLで名前をつける
この投稿ではCSSの話だけを書きたかったんですが、CSSの装飾対象として見分けるために、最低限HTMLで名前をつける必要があるので簡単の説明します。HTMLの話はこれで最後です。
まずはHTMLで名前をつけます。
名前には、セレクター、id、classがあります。
セレクターは<div><p><a>などHTMLタグそのものです。
HTMLでは、ページ内に何度も同じタグが使われるので、例えば同じ<p>でもどの<p>なのかを区別するために、idまたはclassを使って名前をつけます。
同じ名前のidは同一ページ内で1度しか使えません。同じ名前のclassはページ内で何度も使えます。
idは一度しか使えないなら面倒だから全部classで名前をつければいいよねと思ったあなた。天才ですね！
ただ、CSSには詳細度(指定の優先度)という概念があり、idがclassより優先されるルールです。
詳細度についてはここに詳しい説明があるので、興味があれば確認してみてください。
CSSで装飾する
CSSではHTMLで名前をつけた要素を指定して装飾します。
セレクターはhtmlタグから<>を外す、idは名前の前に#をつける、classは名前の前に.(ドット)をつけて要素を指定します。
先頭に数字(例: #2pacs)をつけるとエラーになるので気をつけてください。
最後に、簡単なカードのデザインをCSSで実現してみます。
デザインのイメージは下記です。デザインはFigmaコミュニティからお借りしました。
HTML
＊logo.pngは同じフォルダに配置されている想定です。
<div id="card">
<div class="logo">
<img src="logo.png" width="60" height="60" alt="Khan Academy">
</div>
<div class="card-title">
<h2 class="name">Khan Academy</h2>
<p class="category">Education company</p>
</div>
<div class="card-contents">
<p class="description">Learn for free about math, art, computer programming, economics, physics, chemistry, biology, medicine, finance, history, and more.</p>
</div>
</div>CSS
#card {
①
width: 600px;
padding: 40px 32px 32px;
background-color: #FFFFFF;
border: 2px solid #E0E6ED;
border-radius: 11px;
box-shadow: 0px 7px 14px #D3DAE2;
②
display: flex;
flex-direction: column;
gap: 24px;
③
font-family: 'Open Sans', serif;
line-height: 160%;
letter-spacing: 0.14px;
color: #3B3F5C;
}
img {
vertical-align: bottom;
}
.card-title {
display: flex;
flex-direction: column;
gap: 8px;
}
.name {
font-size: 32px;
font-weight: 700;
}
.category {
font-weight: 600;
opacity: 0.5;
}
.description {
font-size: 20px;
opacity: 0.8;
}CSSの解説
#card = カード全体のデザイン
①で、カードの見た目を指定(横幅、背景色、余白、角丸、影)。
②で、カード内のコンテンツにdisplay: flex;でFigmaのAutoLayoutのような配置を指定。カード内のコンテンツ間の余白を24pxに設定。
③で、カード内のコンテンツの行間や文字間、文字色etcの共通設定を指定。
img = 画像の下にできる余白を無くす
詳細は省略しますが、画像の下にはデフォルトで謎の余白が発生するので、縦方向の揃えを指定することで、余白を削除しています。
.card-title = カードのタイトルエリアのデザイン
カードのタイトルエリア(Khan AcademyとEducation companyのグループ)にdisplay: flex;でFigmaのAutoLayoutのような配置を指定。Khan AcademyとEducation companyの間に余白を8pxに設定。
.name = Khan Academyの文字の装飾
フォントウェイトをboldにフォントサイズを32pxに指定
.category = Education companyの文字の装飾
文字の太さをmediumに、文字の透明度を50%に指定。
※フォントサイズ16pxはブラウザのデフォルトサイズなので指定不要。
.description = Learn for free about math, art…の文字の装飾
フォントサイズを20pxに、文字の透明度を80%に指定。
まとめ
将来的にビジュアルエディタだけで完璧に画面をデザインできるようになるかもしれませんが、しばらくは開発の現場からCSSが消えて無くなることはないと思うので覚えておいても損はないと思います。
サンプルを実現するには、実際はHTMLにもう少し設定が必要なんですが、CSSはHTMLでタグに名前をつけて装飾するだけです。
CSSの記述が多くて経験が少ないと難しく見えるかもしれませんが、サンプルで使用したプロパティは17種類です。実際に業務で使うプロパティも多くて40種類弱ぐらいだと思います。
今回はカードのみのサンプルを記載しましたが、要素の多いWebページもオブジェクトの組み合わせなので、カードが作成できればページ全体もすぐに作成できるようになると思います。
最初は覚えるのに少し時間がかかるかもしれませんが、興味があれば一度試してみてください。
ビザスクではエンジニアを絶賛募集中です！