こんにちは！サエカです。今回は、最近興味を持ち始めたWebデザインとWebに関わる上で必要なコードについて書いていきます。とはいえ、私も今までずっと紙媒体のデザインに関わってばかりで、Webとはあまり縁が無かったため、Webデザインとコードに触れてみた感想がメインとなっています。

アートボードが下に伸びるって何！？

思わず見出しにしてしまいましたが、先日人物画像の配置や文字の差し替えのために、初めてWebデザインのデータを開いて作業をしていた際に感じた、Webデザインの第一印象です。経緯を説明すると、あるイベントの講演者の肩書きがあまりにも多く、講演内容の情報を載せるスペースを広げても全く収まらず、下のレイアウトを圧迫してしまう状態でした。そこで手に負えなくなり社長に相談したところ、「アートボードを下に伸ばせるよ」と教えていただき、その時に見出しの通りの衝撃を受けた、といった次第です。

Webデザインに詳しい方やコーダーさんは、「なんでそんなに驚いてるの？」と思われるかもしれませんが、今まで紙物のデザインばかりやっていた身からすると、アートボードが伸びるという現象が不思議で仕方ないです。というのも、紙媒体の場合、必ずサイズ内に情報が入るようにデザインしなければならないからです。例えその後の修正で、長文のタイトルや文章を入れて欲しいという指示が来ても…です。ですので、勿論WebにはWebなりの困りごとがあるとは思いますが、「アートボードを下に伸ばしてスペースを増やせる」という特徴は、未だに不思議に思うのと同時に羨ましくもあります。

htmlとCSS

社長の説明に軽くショックを受けていた際に、コードのことを学べるProgateというアプリも教えていただいたので、時間が空いている時にhtmlとCSSの無料分のレッスンを受けてみました。ちなみに、社内のコーダーさんによると、htmlはWebの骨格、CSSは情報を配置するデザインのような役割を持つコードなのだそうです。そして、レッスンの率直な感想ですが、こんなに面白いならもっと早く知りたかったです。

まず、コーダーさんにコードを見せていただいた際にも思ったのですが、コード自体が英語ですので、コードを知らなくても意味を推測できるのが楽しいです。例えば、verticalが入っているから何か垂直に働きかけるコードなのかなと考えたり、alignがあるから一直線にさせたり整列させたりするんだろうな、という風に予想したりするのが面白いです。次に、序盤のレッスンで見出しと本文のコードを学んだ際に、このブログの本文を書く時に使用している、コードの“p”の意味がparagraph（段落）だとようやく知ることができました。実は今までこの奮闘記の記事を書く際には、社長の記事や自分の書いた記事からコードを持ってきていたので、意味は分かっていませんでした。paragraphのpだったとは…道理で改行していないのに文と文の間にスペースができると思いました。最後は、やはり学んだことをこのブログの記事を書く際にすぐ使える点でしょうか。まだ受けていないレッスンが沢山あるため、書けるコードはごく僅かですが、以前の記事ではリスト化できるコードを学んだ直後でしたので、つい使いたくなって使ってしまいました。後でコーダーさんから、少し書き換えると行頭文字を、点から数字に変えられることも教えていただきました。コードも奥が深いですね。

まだまだ紙媒体のデザインやバナーなどをすることが多く、Webデザインの案件に関わるのは当分先かもしれません。ただ、Webが主流になってきていますし、コードで書けるようなデザインがWebには必要ですので、コーダーさんを困らせないためにも、そして何より面白いので引き続きWebもコードも学んでいきたいと思います。