イマドキなコーディングって？最近のwebサイトの作り方。
2019-09-01 | web
月に一回は必ずWEBのことを書こう。
今日は８月３２日。
作り方には流行りがあります。
流行りは作り手の好みのようなものではなく、ブラウザやデバイスが変わったり、新しいツールやサービスが出たりなど、世の中の出来事に左右される面が大きいです。
webの支えになっているのはブラウザ技術。Google Chromeなどは特に、定期的にアップデートされていて、「webでできること」は増えています。
昨今よく見かける動きを多用したもの、そんな先進のサイトを作りたい場合などでは特に、従来のコーディングではちょっと難しい部分が出てくると思います。
従来式で作ったサイトも全然見れますし、役割は果たせます。
しかし、あらゆるデバイスで見ること、そしてより高度な表現をする際には、新しい技術を頼るのが◎。
SUMMARY
- html5
- css3
- cssのアニメーションで動かす
- WEBフォントを使う
- 規模によってはSCSSを使う
html5
セマンティックなコーディングができるようになりました！というのは巷でもよく耳にしますが・・「セマンティック」と言われてもピンと来ない。。
例えば、headerやnavやfooter、sectionやarticleなど。それぞれのタグを見ればひとめで構造がわかる、意味を持つhtmlになりました。
それまでは、divやspanなど、意味を持たないタグにクラス名をつけてたんです。
html4はこんなでした
<div class="main">
<div class="header">
<h1>我輩のサイト</h1>
<div class="navi">
<ul>
<li>メニューその1</li>
<li>メニューその2</li>
<li>メニューその3</li>
</ul>
</div>
</div>
<div class="content">
<h2>コンテンツのタイトルだよ</h2>
<p>コンテンツの本文だよ</p>
</div>
<div class="footer">
<p class="copyright">© 2019 我輩のサイト</p>
</div>
</div>
クラス名で書くなんて・・
書いた人にしかわからないじゃないか・・！
html5
<main class="main">
<header class="header">
<h1>我輩のサイト</h1>
<nav class="navi">
<ul>
<li>メニューその1</li>
<li>メニューその2</li>
<li>メニューその3</li>
</ul>
</nav>
</header>
<sectioin class="content">
<h2>コンテンツのタイトルだよ</h2>
<p>コンテンツの本文だよ</p>
</section>
<footer>
<p>© 2019 我輩のサイト</p>
</footer>
</main>
人間にはもちろん、クローラーにもページの意味が伝わりやすくなった…！
文書を表現するためだけのマークアップ言語だったHTMLは、今やWEBアプリケーションとしての表現をサポートするHTML5に。時代は変わりましたね。
これから新しく作るサイトでは、HTML5がマストです。
構造以外の部分では、canvasというタグを使って、svgで線や絵を動かしたり色を変えたりなどができるようになった！激変したのはこの辺りでしょうか。
css3
横並びの「flexbox」と、時間を変化させる「transition」。
flexbox以前はfloatを使って右へ左へ並べていましたが、最後にクリアの命令を書かないといろんなところで回り込んでしまって複雑。。
横並びってよく使うので、flexboxを使うと楽です。
そしてtransitionは、ボタンのhoverや画像などのエフェクト、ふんわりと切り替えるようなところで使えます。
cssのアニメーションで動かす
keyframesのアニメーションです。
これも従来はjsを使ってしか表現できなかった。
jsが増えることで、予期せぬコンフリクトが起きたり、読み込む順番が間違っていて動かなくなるなどの心配事も増えます。cssでできるようになったのは嬉しい！
WEBフォントを使う
紙のデザインと異なる点。WEBはフォントが限られています。
見ている人の環境にないフォントを指定しても、表示ができない・・。
代替フォントが当たります。
WEBではWindowsとMacというOSに標準搭載されたフォントを指定することが一般的・・。
でしたが、Webフォントができてからは、かっこいいフォントが使えるようになりました。
WEBフォントは、自分のサーバにフォントをアップロードするという方法もあります。
メリットは、Webフォントとして配布されていないようなフォントも使える点と、必要な文字だけアップすることでファイルの容量を軽くし、読み込み速度をちょっぴり早くできること。
その際は、フォントが商用利用できるのか、Webフォントとして使ってOKなのかなどの確認が必要です。woff形式にコンバートするなど、ちょっとした手間もかかります。
手っ取り早いのは、Googleさんや、Adobeさんが提供するCreative CloudのWebフォントサービス、モリサワさんなどのフォントを作る会社さんが提供しているWEBフォントのサービス利用でしょうか。
しかしながらwebフォント、使いすぎはおすすめしません。
ひらがな・カタカナだけでなく、膨大な漢字を含む日本語フォントを複数設定した場合、読み込みは当然遅くなります。
表示速度は大事です。ほどほどにね。
規模によってはSCSSを使う
SCSSは、プログラミングの考え方を持っているcssです。
変数を定義して呼び出して利用することができるので、変更することになったときに一箇所を書き換えれば全部変更できるのが便利。
5箇所ぐらいしかないのなら手書きで変えますが、2000箇所もあったらどうでしょう。やってられないですよね。
よく使うもの（色とかmax-widthとか）をmixinにまとめたりもできます。
四則演算できたり、条件分岐、ループなどもできる・・もはやプログラミングです。
ブラウザはSCSSを読めません。
SASSを使ってcssを記述、まずSCSSファイルを作ります。
そのSCSSをコンパイルしてcssに変換。
WEBサーバーでコンパイルするか、WebpackっていうモジュールバンドラやGulpのようなツールを使うなどする必要が。
他にも、プラグインやjQueryを使わずにjavascriptで書いたりするのも流行り。
上述のSASSを動かす環境「Gulp」でもそうですが、jsさんは人気者だね。
IEさん、新しいjs動くようにしてください。
追記：ちょっぴりせつないけれどとっても面白い記事！
オチもすてきですね。
良いサイトとは、発信した情報を、届けたい人へ届けることができるサイトです。
「作って終わり」ではなく、サイトは成長していくものなのだなーと実感しています。
運用がしやすいこと。やりたいことがすぐにできること。
情報の整理も大事ですが、公開して時間が経ってからも、UIの改良を加えやすいことは大事。
煩雑なコードによって、ちょっとした改良ができない、機能を追加しづらいなど、サイトを改善しにくいような作りだったとしたら・・
もうサイト全体をリニューアルするしか方法がなくなってしまいますよね。
事あるごとに全部作り変えてたら、とめどなくお金がかかってしまいます。
インパクトはとっても大事。ですが、ものすごいかっこいいエフェクトや動きをつけたら、売り上げが増えるとか、お客さんが来るとか、幸せになれるとか、そんなに短絡的なものでもないです。
確実に言えることは、作業効率が上がれば当然工数は減り、コードが綺麗だと俄然やりたいことをやりやすい！ということでしょうか。
トライアンドエラーができるサイトの方が、前向きでいられます。
結論。
従来型と比べるとイマドキの作り方の方が、作り手側にとっても、またクライアントさんにもユーザーにも優しいです。
できることが増えてデザインの幅が広がったのは事実。しかしながら、奇を衒ったデザインや機能が必ずしもユーザーの求めていることとは限らないのかもしれません。
ちょっとした機能であっても、ちょっとしたフォントのことであっても、「それが役に立つものかどうか」サイトを使う人の行動を思うこと、これが一番大事だなと思います。
