Sponsored Link
前回の講義内容覚えてますか？？
- WebサイトはHTMLとCSS（+ その他もろもろ）でできている。
- HTMLは文書に名前をつけ、CSSはそれを元にデザイン装飾を行うことができる。
- 日本ではブラウザはほとんどがChromeで、次いでSafariやEdge、Firefoxが多い。
- 不具合のほとんどは、バージョンの古いIEで起こっていたが、最新版のEdgeでさえ不具合を起こす。
前回の講義内容で挙げたこれらの点で、
Webデザイナーがコーディングにより何をする必要があるか?
という点が少しは見えたかもしれません。
簡単に言うと、
HTMLとCSSの正確なコーディングでEdgeなどにも対応したWebサイト制作を行いましょう。
ということですね。
この記事の目次
ウェブサイトが表示される仕組み
前回の講義でウェブサイトが「HTML + CSS + その他もろもろ」で構成されていることがわかりました。では、それらをどうやってブラウザに表示しているんでしょうか？？
Webサーバーにリクエストを送ってアップロード保存されたデータを表示している
下の図を見てみましょう。
みなさんが使っているPCやスマホで検索をすることによって、
ウェブサイトのデータが保存されているWebサーバーに、
「このページを表示してほしい」というリクエストが送られます。
リクエストを受け取ると、Webサーバーがそれに応答しウェブサイトが表示される、という仕組みです。
逆に言えば、リクエストをいくら送っても（URLを打ち込んでも、検索しても）、ウェブサイトはWebサーバーにデータが保存されていなければ、データがないので応答せず見ることができません。
なので、デザインやコーディングを行って制作したウェブサイトのデータを、
Webサーバーにアップロード保存するまでがウェブサイト制作になります。
（※細かく言うとちょっとチガウけど・・・）
ウェブサイトをアップロード保存してからの検索エンジンの上位表示や閲覧数を増やすための対策など、ウェブサイトをたくさんの人に有効に使ってもらうため日常的に行う更新やメンテナンスがウェブサイト運営になります。
それぞれの言語の役割
ではウェブサイトがブラウザで表示された時、
内部ではどの言語のファイルがどんな役割で機能しているのでしょうか？？
ウェブサイト制作で頻繁に使われる言語は、
- HTML（最終的な表示用ファイル）
- CSS（文字情報だけのHTMLの見た目を調整するファイル）
- JavaScript（HTMLに動的な要素を加えるファイル）
- PHP（お問い合わせフォームなど、データの受け渡しなどを行うファイル）
以上の4つになります。
カッコで代表的な役割を記載していますが、もう少し踏み込んでみましょう。
HTMLの役割
HTMLはみなさんがブラウザを通して最初に目にするファイルです。
「https://ryu-ya.jp」などURLを打ち込みWebサーバーがリクエストを受け取って、データが存在する場合、一般的にはコーディングを行った「HTMLファイル」が表示されることになります。
HTML単体ではただの文字情報ですが（前回見せたようなもの）、後述するCSSで見た目を調整され、JavaScriptでアニメーションやタブの切り替えなどの動きを動的に加えられ、PHPでデータベースなどからデータを取り出したり条件分岐で表示を変えたりされ、好き勝手に改変されたりします。
上述した4つの言語の中で唯一「受け身」のファイルになります。
HTMLの役割はCSSやJavaScriptから受け取った情報を反映させて表示する受け皿です。
CSSの役割
CSSは文字情報しかないHTMLファイルの見た目を整える役割を持ちます。
文字情報しかない状態、つまりCSSが効いていないとどういう見た目になるのかというと・・・。
こうなります・・・。
本当に文字情報が表示されているだけで楽しくもなんともないですね。
そしてひとたびCSSを効かせてあげると・・・
きちんとデザインされたページが表示されました。
Photoshopなどで制作したデザインを反映させるにはCSSが必要、ということがわかりましたか？？
JavaScriptの役割
JavaScriptはHTMLとCSSを使ってデザインが反映されたページが表示されたのち、
表示状態を変更したり、要素をアニメーションさせたりといった、
主にリアルタイムでの処理を行うのにとても有効です。
わかりやすいものでいうとタブの切り替えなどがありますね。
Yahoo! JAPANのトップページの中央のニュースのブロックで、各カテゴリのタブをクリックすると一覧の中身が切り替わりますよね。これもJavaScriptを使ってリアルタイムで表示状態の変更を行っています。
もう一つ、スクロールさせるたびに要素が移動したり動いたりもJavaScriptを使うことで可能になります。龍弥デザインのクライアント様、フリフリチキンのKahana’s様でも多くのJavaScriptアニメーションを使っていて、スクロールしていくと木が動いたりチキンが回っていたり、車が走ってきたりします。
アニメーションを使うことで見に来てくれた人を楽しませ、
とても有効に印象付けを行うことが可能です。
PHPの役割
おそらくこの講義でPHPを使うことはないとは思いますが、念のため解説します。
PHP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。一般的には PHP と省略して用いられており、これは「個人的なホームページ」を意味する英語の “Personal Home Page” に由来する[2]。
引用元：Wikipedia https://ja.wikipedia.org/wiki/PHP:_Hypertext_Preprocessor
動的にHTMLデータを生成するというのは、例えばウェブサイトのトップページによくある「お知らせ一覧」がわかりやすいです。
お知らせ一覧はほとんど場合、新しい記事から順番に表示されて古い記事は消えていきますよね。これを記事を更新するたびに自動で行ってくれるのがPHPなどのプログラム言語です。
その他にもお問い合わせフォームや掲示板なんかもPHPで構築することが可能です。
クライアントサイドとサーバーサイド
これも覚えておくといいと思います。
代表的な例としてクライアントサイドで働く言語はJavaScript、
サーバーサイドで働く言語はPHPとして解説します。
クライアントサイドはPCのブラウザ
まずクライアントサイドとは、簡単に言えば皆さんが使っているPCのブラウザの事です。
クライアントサイドで働く言語は閲覧環境に非常に影響を受けます。
例えば、スクロールしたら画像が動くアニメーションをJavaScriptで作るとします。
当然JavaScriptを使っているので、JavaScriptが正常に動作する環境ならアニメーションが動きますが、JavaScriptが無効になっていたりして動かない環境だとアニメーションは動作しません。
サーバーサイドはウェブサイトのデータが置いてあるサーバー
次にサーバーサイドとは、構築したウェブサイトのデータをアップロードしたサーバーのことです。
サーバーサイドはサーバーに置いているプログラムを動かせるため、クライアントサイドほど閲覧環境に影響されません。
Webサイトにおけるデザイン
さてこの講義はウェブデザイン演習です。
前期のウェブデザインBでデザインやPhotoshopの使い方に関してはレクチャーしましたが、
デザインと銘打った以上、デザインのお話をしないわけにはいきません。
そもそもデザインってなんでしょう？
また、Webサイトのデザインは、何を目的としているでしょう？
デザインは、「情報を整理して伝える 」こと、
それを最も重要な役割や目的としています。
さらにもっと掘り下げてデザインの役割を考えると、
「見やすさと操作性の向上」を図ること、
そして、「トーン・マナーの設計」というものがあります。
見やすさと操作性の向上
こういう表があります。
| 見やすさと操作性の向上 |
|
|---|---|
| トーン・マナーの設計 |
|
たとえばamazon
amazonは世界最大の通販型オンラインショッピングサービスです。
みなさんの中にもおそらくamazon
例えばパッとみて、商品画像が並んでいて、どんな名前で価格がいくらか、すごくわかりやすい設計になっていると思います。
商品画像をクリックすればその商品のページに移動し、
商品名をクリックしても移動することがわかるように、リンク色を青色にしています。
さらに商品価格などの重要な情報には赤色の文字で表示しています。
無意識のうちにある法則を使って設計を行なっているので、
「誰が見ても理解しやすく」なっています。
中小規模のサイトであればターゲットユーザーはある程度絞ることができますが、
amazon
アクセス解析やサイトでの閲覧・検索情報を元に、訪問ユーザーが好みそうな情報を元に表示結果を変えることがあります。
その結果、購入の確率が増え、「目的の達成」に近づきます。
またamazonは、基本的に3ページ以内で目的のページにたどり着くようになっています。
何度もクリックしないと目的のページにたどり着けなかったら、今自分はどこにいるのかわからなくて迷ってしまうことも少なくありません。
Webサイトには「3クリックルール」というものがあって、
目的のページに3クリック以内にたどり着けるようにしなければいけません。
これが「迷わせない」という基本的な設計ですね。
例えば同じサイトでリンク色やボタンの色、レイアウトがページごとに大きく違っていたらどうでしょう？
商品一覧ページに2つの商品があって、リンク先のページは同じように商品の購入ページなのに、片方はボタン、片方はテキストリンク。1ページだけならまだしも、それが何ページにも及んだら、購入する前に疲れてしまって、モノを買うどころじゃなくなりますよね。
ページの訪問者を逃さないために「早くサイトに慣れてもらうこと」がとても重要。
そのためにルールに一貫性を持たせようというのが「一貫性のあるルール」です。
これら全てが重要で、デザインする上で欠かすことのできないものなんです。
トーン・マナーの設計
トーン・マナーの設計とは、
そのWebサイトの特性やターゲットの年齢・性別をよく考え、
ふさわしいデザインや文章で構成する、いうなれば「らしさ」です。
例えばネットで可愛い靴を買うとします。
みなさんなら次のAとBのWebサイトのどちらで買いますか？
また、どちらで買うのが楽しいですか？
どう見てもBでは違和感が先行して靴を買おうという気にはなりませんよね・・・。
「トーン・マナーの設計」とはそういうこと。
いくら優れた見た目でも使い方が適切でないものは得られる効果を消してしまう。
そりゃそうですよね。
紙のデザインとWebのデザインの違い
皆さんもイベントフライヤーなどのチラシやポスターなんかはよく目にすると思いますが、それ以外にも名刺や新聞や書籍、雑誌や看板など、情報の伝達手段の総称を「グラフィックデザイン」と呼びます。
これらグラフィックデザインとWebデザインの違いはなんでしょう？？
挙げればきりがありませんが、最も大きな違いは「サイズの違い」でしょう。
例えば、Webにはスクロールという動作があるのでページを縦に伸ばしても対応できますが、印刷物はA4やB4などサイズがあらかじめ決まっているためスクロールの概念自体が存在せず、決められたスペースの中に情報を詰め込まなければいけません。
Webは可変サイズ、紙は固定サイズです。
これによって、Webと紙で別々の役割を持つこともあります。
一時期、CMなどで「詳しくはWebで」というキーワードが流行りましたが、CMや紙など、伝えられる情報量に限りがあるものにはWebサイトへの誘導の役割を持たせ、Webサイトに来てもらって初めて伝えるべき情報を伝えるという分担を行うことで、商材に興味があるターゲットユーザーのWebサイトへの訪問を判別しやすくする手法もあります。
本日のまとめ
- Webサイトが表示される仕組みは、
PCやスマートフォンを使って検索やクリックなどの方法でWebサーバーにリクエストを送り、
Webサーバーが応答して表示されるというもの。 - HTMLファイルの役割は他の言語の受け皿で最終的な表示用ファイル。
CSSファイルの役割はHTMLへデザインを反映させること。
JavaScriptファイルの役割は表示状態などの変更をリアルタイムで処理すること。 - ウェブサイトデザインで大事なのは、
「見やすさと操作性の向上」と「トーン・マナーの設計」。 - 「見やすさと操作性の向上」とは、
誰が見ても理解しやすくすること、目的を達成しやすくすること、
迷わせないこと、一貫性のあるルールを持たせること。 - 「トーン・マナー」とは、
属性や世界観を伝える要素、メッセージを伝えるための色・形・言葉の軸となるものです。
これを設計していくことにより、Webサイトに「らしさ」を持たせましょう。 - Webは可変サイズ、紙は固定サイズ。
それぞれに役割を持たせることでターゲットユーザーに有効に訴求することができる。
第01回課題の「知りたいこと・聞きたいこと」への回答
コーディングについて
コードの書き方で先生のやっていた覚え方などを聞きたいです。
スマホでwebページを閲覧するときとパソコンでwebページを閲覧するとき、絶対にサイズが変わると思うんですけど、それもソースコードをいじって調節するのか知りたいです。
ウェブページを作成するために必要な専門的知識、技術を身につけたいです。
ブラウザについて
普通にパソコンやスマホを使っていると、chromeやsafariしか見かけませんが、
別のブラウザと出会う経緯ってどんな感じなのでしょうか。
専門的に興味を持って突き詰めるほど出会えるものでしょうか。
触れる機会ないなぁと思って質問してみました。
