ラック
Home > ブログ > 記事 > 2016年3月 > Webサイトデザイン・制作の変化について雑感

Webサイトデザイン・制作の変化について雑感

カテゴリ: ホームページ

ふと思い立ったので、ここ最近感じていることを雑感として書き留めておきます。

あまり裏付けを取っていないため、間違いがあったり、私見による推測が多分に混じっていたりすると思いますが、予めご了承ください。

それでもこうして文章に起こしたのは、分野を越えてどんどん守備範囲が広がっている現状を伝えたいからです。

そして、ここで勉強を怠ると置いていかれてしまうのではないかという危機感を表すためでもあります。

 

 

今Webサイト制作の世界は変化の真っ最中であるとつとに感じています。

その変化の起爆剤、転換のキーとして大きな要因となったのは、やはりスマホやタブレットの普及ではないでしょうか…と考えています。

iPhoneがAdobeのFlashをサポートしないことを打ち出してから、Flashを使用したサイトが減少したのはその最たる例でしょう。

しかし、スマホやタブレットの普及による影響はFlashだけに留まりません。

例えば画面の表示です。

PCのディスプレイよりも物理的なサイズははるかに小さいのですが、解像度はどんどん上昇していきました(最近は落ち着いてきているようですが)。

 

そうしたこともあって、PC用に作られたデザインをそのままスマホで表示させると、全体が圧縮されて文字やコンテンツが非常に小さく表示されてしまいます。

そこで、スマホに対応したレイアウト・デザインを考える必要が出てきました。

そうして生まれたデザイン手法の一つが「レスポンシブ・デザイン」です。

これは、1つのURL・ファイルでブラウザ(スマホの場合は画面幅)の表示幅に合わせて表示を変更する手法です。

しかし、1つのhtml・cssで対応するということはPC用・スマホ用双方のデザインを同じファイルの中に記述するということになります。

そうなると、予めコードのレイアウトを決めて上手く記述しないと中身が煩雑になりがちです。

そのような制御を全てスクラッチ(0から自分で作る)で行おうとすると時間も技術も必要な上、デバッグも大変になることが予想されます。

さらに、デザインはサイトごとに大きく異なることもままありますから、使い回しが難しく汎用性が低くなってしまう恐れもあります。

そのような流れもあってかどうかは分かりませんが、ここ数年で台頭してきたのは「cssフレームワーク」と呼ばれるライブラリです。

こうしたものの代表例としては、Twitter社が開発した「Bootstrap」や、Zurb社が開発した「Foundation」が知られています。

Bootstrap

Foundation

こうしたフレームワークは、グリッド(格子状)にレイアウトを区切り、1グリッドを最小単位として表示幅に応じてコンテンツを横に並べたり縦に並べたり、といった可変性を持たせた「グリッドシステム」を予め標準機能として備えており、これを用いることでレスポンシブデザインに簡単に対応させることができます。

他にも、≡マークのボタンとして認知されているハンバーガーメニューや、それをクリックすると横からメニューが開くドロワーメニュー(オフキャンバスとも)など、現在のWebサイトでよく見られる機能を、こうしたフレームワークを導入するだけで簡単に実装することができます。

 

一方、スマホの特徴としてはデスクトップPCに比べれば機器の性能やインターネット回線のスピードが比較的乏しいという点も挙げられます。

こうした状況では、Webサイトの表示速度にも気を使う必要があります。

さらに、上述のように物理的な表示領域が狭いこともあり、PCでの表示よりもスマホでの表示に重きを置く「モバイル・ファースト」の考え方が広まりました。

しかも、スマホでは通勤電車の中や休憩時間など、スキマの時間にWebサイトを閲覧するというシチュエーションが考えられます。

単純に機器の性能や回線のスピードだけでなく、スキマの時間でWebサイトを閲覧するというシチュエーションからも、必要なコンテンツをすぐに表示させるニーズが生じました。

現在のHTTPの仕組みでは、通常1つのファイルに対してサーバへリクエストを送信します。

そのため、単純なファイルサイズ(容量)だけではなく、Webサイトを表示させるために必要なファイルの数を削減する、ということも有効な手段となり得ます。

そこで、最初に全てを読み込むのではなく、例えば画面をスクロールして表示が必要になった際に初めて該当部分のコンテンツを読み込ませる遅延読み込みの技術も時として必要になるでしょう。

この領域では、Ajaxが最も有名だと思います。

Ajaxを標準でサポートしているJavaScriptライブラリといえば、jQueryが有名です。

 

上記のような背景の中で、スマホでページの遷移をなるべく抑えるものとしてシングルページ(単一のページでコンテンツを完結させる)のWebサイトも増えています。

特にキャンペーンやイベント、ランディングページ(広告ページ)といった短期、あるいはピンポイントにコンテンツが絞られたものに対してシングルページは強いです。

このようなWebサイトを作成する上では、より高速で制作を行うことも求められています。

よく取り上げられるのは、アジャイル開発やスクラム開発といった手法です。

これは基幹業務システムのようなウォーターフォールの開発とは異なるワークフローとなります。

ある意味対極といっても良いかもしれません。

 

Webサイトのデザインを担うcssをより速く楽に記述するための手法として、LESSSass(Scss)といったものがあります。

Sass(Scss)に限って言えば、例えば変数を宣言することで色やpx・emの指定などを何度も使い回すことができます。

他にも要素やプレフィックスでネストしたり、関数処理(ミックスイン)を使うことができたりします。

これを使うことで速度の上昇が見込め、運用上のメンテナンスや仕様変更に対応しやすくなります。

JavaScriptではCoffeeScript等がやはり高速開発のための技術として用いられることもあるようです。

しかし、Sass(Scss)もCoffeeScriptも、独自の拡張言語から元のcssやJavaScriptにコンパイルしてあげる必要があります。

そこで、こうしたアップロード前の処理を一度にまとめて処理させるタスクランナー・ビルドシステムヘルパーが導入されることもあります。

こうしたツールは、Node.js上で動作させるGruntgulpが有名です。

Grunt

gulp

 

ここまで来ると、開発環境もどんどん複雑になります。

Sass(Scss)はRuby言語で動作します。Gruntやgulpは先述の通りNode.jsです。

しかも、レスポンシブデザインのテストとなると、モバイルブラウザでの確認も必要になります。

例えば、SafariはMac(PC)とiPhoneのものでは微妙に挙動が異なり、新しいcssの中にはMacのSafariでは問題ないが、iPhoneのSafariでは動作しないというものもあります。

このような複合的な要因から、PCのオーサリングツール上のみでWebサイトの制作を完結させることが難しくなってきました。

端的な例では、デザインカンプを作りこまずに早いうちからモックアップを作成して、ブラウザで表示を確認しながら開発する「インブラウザ・デザイン」も行われています。

インブラウザ・デザインは早い段階でモックアップを作成することから、先方と実際の表示や挙動を確認しながらこまめにフィードバックを行い修正していくアジャイル開発の手法とも相性が良いといえます。

こうなると、使うツールだけでなくワークフローそのものの見直しも迫られるかもしれません。

 

また、WordPressに代表されるようにCMSも勢いは強いです。

国産のbaserCMSや、実際の表示を見ながら編集が行えるconcrete5など、多種多様なCMSが存在しています。

これらのCMSでは主にPHPが使われていますが、PHPの動作はWebサーバでないと正確な確認ができません。

そのため、XAMPPDockerといった仮想サーバ環境を導入することもあります。

XAMPP

Docker

このように、Webサイト製作・Webデザインを行うにしても、今やこうした仮想サーバ環境とそれを構築できる知識・技術が必要とされるという場面も生じています。

 

上に列挙したように、現在のWebサイト制作では様々な技術やツールが登場し、それぞれ凌ぎを削っています。

そして、それらを活用しないと効率的に仕事ができないという事態も発生しています。

 

しかも、これらの技術は常に変化しています。

CMSでいえばWordPressは年に3回メジャーアップデートを行っており、新しい機能が次々と追加されています。

BootstrapやFoundationといったフレームワークに関しても同様で、Bootstrapは4、Foundationは6がリリース間近で、その内容が徐々に明らかになっています。

Webサイトの根幹であるHTMLもHTML5の最新版であるHTML5.1が今年w3cから正式に勧告される予定です。

HTML5では文書構造の記述というHTMLの基本が強調され、「セクショニング・コンテンツ」が多数追加されました。

これらはWebサイトのセマンティックWebとして、SEOとしても注目されているようです。

したがって、Webサイト制作においてもHTMLの定義を理解し、コンテンツの内容にきちんと合致したタグでマークアップする知識と技術も求められます。

より根幹の技術であるHTTPも、HTTP2がRFC 7540として文書化されました。

 

少々逸れますが、css3も各ブラウザの対応がおおよそできてきたため、これからはcss3で新しく追加された機能を使った斬新なデザインも求められるでしょう。

それというのは、ユーザは世界中のWebサイトを見ることができますし、インターネットで仕事を発注することもできます。

時として、これらの技術を使いこなしている業者やフリーランサーと同じ土俵の上で戦わなければならないこともあるかもしれないからです。

 

以上のように、Webサイトにまつわる知識や技術、ツールは膨大になっているのが現状です。

しかも、WordPressのデザインテーマにBootstrapが組み込まれていたり、そのBootstrapやFoundationも裏側でSassが使われていたり…とそれぞれが連携している場合もあるため、総括的に習得する必要も出てきています。

そして、これらの技術やツールは頻繁にアップデートされるため、関連技術も含めて情報も常に更新していかなければなりません。

場合によっては技術やツールの導入のために、ワークフローを変革させる必要もあるでしょう。

 

これら全てを習得しなければいけないわけではないですが、いずれも全く無視することはできないのも事実です。

これらの変化に柔軟に対応し、たゆまずに研鑽を続けることができるか…それが今、必要とされているのではないでしょうか。

タグ: 随想, 単語・用語

 



関連する記事一覧