こんにちは、キノトロープアカデミーです。
「キノトロープアカデミー」は、Web業界のトップランナーである株式会社キノトロープの社員が講師を務めるオンラインアカデミーです。リモートワーク時代に不可欠な「個のスキル」を高め、職人のような「匠」を目指す人を増やしたい。そんな願いを込め、基礎から経営判断、業務フローまで、一生モノのナレッジを惜しみなく公開していきます。
＜共通編 第4回＞
これからのWebサイト構築手法Part2
についてお伝えします。
担当は生田です。
スマートフォンの普及やマルチデバイス対応が当たり前となったこれからのWebサイト構築において、今最も注目すべきキーワードが「粒度」という概念です。
多くのWebサイトが日々の運用や度重なるデバイス検証に追われる中、文章の最小単位である「エレメント」と、その組み合わせである「コンポーネント」をあらかじめ定義して構築する手法が、劇的な効率化をもたらします。
本記事では、これからの時代に欠かせない、Webサイトの構築・運用を爆発的に楽にする「粒度」に基づいた次世代の手法について詳しく解説します。
”これからのWebサイト構築手法”をテーマに、
今日お伝えしたいことは3つあります。
以前の記事でもご紹介しましたが、これからのWebサイト構築には、
1.ユーザー体験シナリオ
2.コンテンツファースト
3.粒度の設定
4.マルチデバイス対応
5.コンテンツデータ一元管理
この5つが必要です。
今回はこの3番目の「粒度」について詳細を説明していきたいと思います。
Webをやられている方でも、「粒度」という言葉を聞いたことがある人は少ないと思います。つまりそのくらい、「粒度」という概念でWebサイトは語られていないということです。
Webはどんなメディアかというと、月刊誌・週刊誌・新聞、これよりもスピーディーに運用・更新ができるツールだ、こういう必要があると信じています。
そうすると何をやらなければいけないか。週刊誌あたりでも、大体3日で作ってしまわないといけない。そうすると完全にレイアウトが固定されていて、入る文字や文字数がある程度固定されていないと、そんな3日ではできないわけです。
毎回レイアウトをしているわけにはいかないのです。そのために記事のパッケージ、これを「コンポーネント」と呼びますが、こういったものを決めておく必要があるということです。
つまり、きちんとしたコンポーネントを保持しておいて、それに基づいて記事を書いたり、それからサイトを構築したりするということです。
これは運用に爆発的に有効です。他にも有効なことがたくさんあるのですが、運用に困っている方は、粒度に対するこの動画を見ていただくのが一番早いかなと思います。
「粒度」とは何かというと、まず文章の最小単位を「エレメント」と呼びます。例えば「名前」や「商品名」だとか。これが最小単位です。分解できる粒の最小単位ということです。
そして、これが組み合わさったもの、ある程度わかる範囲で組み合わさったもの、例えばタイトルがあって写真があって本文があるもの、これを「コンポーネント」と呼びます。このコンポーネント単位でサイトを作っていきましょう、という考え方です。
例えば、CMSをお使いの人にも、この概念はすごくマッチしています。例えばホテル情報に「エレメント」が10個あるとします。これをまとめて登録すると1つのパッケージになる。このパッケージがいろいろなページに表示される。しかも表示形式も変わる、ということですね。
こういう使い方ができる。CMSをこのように使っている方がおられたら、CMSを有効に活用していると言えるかもしれません。これができるのも、「粒度」という概念があるからです。粒度の概念がないCMSをちょっと紹介しておきます。
例えばブログページみたいに、HTMLを入れなくてもWYSIWYGエディタで書きます。エディタ1個から、そうすると1ページ出来ます。これ、我々に言わせると「更新ツール」ということになります。そのページをテキストベースで更新できるような更新ツールです。これ多いですよね、たくさんあります。
しかし、CMSとしては、先ほど言った「コンポーネント」単位で登録して、コンポーネント単位で使い回せるということが重要になります。逆に言うと、コンポーネントを1個直すと、全部のコンポーネントが直るということになります。
さっきのホテル情報であれば、ホテル情報を1ヶ所変えれば、電話番号を1ヶ所変えれば、使われているページ全ての電話番号が変わることになります。とても便利そうですよね。
「コンポーネント」「テンプレート」というのは、一番低い粒度、粒の小さな部分から、ある程度人間が覚えられる「こんなコンポーネントあったよね」と覚えられるようなレベルです。
そしてサイトの中で必要最低限度、「このくらいのパーツを使うよね」というのを洗い出して、このパーツを作ります。これが「エレメント」です。エレメントを組み合わせて「テンプレート」を作ります。
この時にもしルールとして、「繰り返し」はOKですよ、それから「トルツメ」もOKですよ、だけど「コンポーネントの場所」は入れ替えられませんよ、と決めていただければ、このテンプレートはレイアウトが乱れることがなく作ることが出来ます。
もちろん考えないと出来ないですけれども、我々は大抵こういう形でテンプレートを作ります。1個のサイトに対して5つぐらいのテンプレート、それから1個のサイトに対して50程度のコンポーネント。こういう風な作りをしておけば、運用更新に対して負荷がすごく少なくなる。
HTMLがわからない人でも、このコンポーネントをコピーして積み上げていく。そしてコンポーネントが積み上げられたテンプレートを見てテキストを変える、もしくは写真を替える。こういう行為で運用更新ができるわけです。
しかも品質も安定しますよね。同じコンポーネントを使っている、バグが出ない。HTMLのバグが絶対に出ないということが起こります。このテンプレートしか使わないと決めてくれれば、もう検証が必要ありません。
今は検証が結構大変です。なぜならばほとんどのサイトがレスポンシブで作ることになります。つまりPCでもスマートフォンでも見えるとか、各種ブラウザがあります。こういったもので新たに作ったものは常にチェックをします。「ちょっと崩れるよね」という話が出るわけです。
ところが、もう検証されたパーツ、検証されたテンプレートで作ることによって、検証はしますけど、大きな問題は出にくいということになります。これでサイトを構築することによって、非常に運用・更新、構築が楽になります。
CSSを変えるだけで雰囲気の違うコンポーネントとして使えるわけです。これが溜まっていくと、サイト構築がすごくスピーディーにできるようになる、運用も楽になります。
ぜひコンポーネントの概念をもってWeb構築をやっていただきたいです。なおコンポーネントにはメリットがあります。何かというと、日本語の文章構造が等しく守られるということです。見出しがあって中見出しがあって、読みやすい文章構造になっているわけです。ダラダラと長い文章を書けないわけですね。
そうするとパッケージ自体が読みやすくなります。それを組み合わせることによって、ページとしても読みやすいです。お客さんに対しても非常に大きなメリットがあるということですね。それから文章を作るにしても、「大体こういう風に作ってください」と指定できるわけです。これは素晴らしいことだという風に思います。
これからのインターネット・Webサイトはスマートフォン最適化をしなければならないです。スマートフォンは文字数の制限が結構かかったりしますね。そういうものがコンポーネントで担保されているということです。それを担保して次に進めることは、非常に大きなことだと思います。
ぜひこの概念を基にして、サイト構築に取り組んでいただければと思います。
最後までご覧いただきありがとうございました。
の３点についての内容でした。
