まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。
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などのプログラム言語です。
また多くの場合ページの一番下に著作権の表記として「© Copyright 20XX Allrights Reserved.」といった文字列がありますが、この「20XX」の年度は年度が替わるタイミングで手作業で変えている・・・わけがなく、PHPでその時の年度を取得して自動でhtmlの書き換えを行っています。
その他にもお問い合わせフォームや掲示板なんかもPHPで構築することが可能です。
クライアントサイドとサーバーサイド
これも覚えておくといいと思います。
代表的な例としてクライアントサイドで働く言語はJavaScript、
サーバーサイドで働く言語はPHPとして解説します。
クライアントサイドはPCのブラウザ
まずクライアントサイドとは、簡単に言えば皆さんが使っているPCのブラウザの事です。
クライアントサイドで働く言語は閲覧環境に非常に影響を受けます。
例えば、スクロールしたら画像が動くアニメーションをJavaScriptで作るとします。
当然JavaScriptを使っているので、JavaScriptが正常に動作する環境ならアニメーションが動きますが、JavaScriptが無効になっていたりして動かない環境だとアニメーションは動作しません。
サーバーサイドはウェブサイトのデータが置いてあるサーバー
次にサーバーサイドとは、構築したウェブサイトのデータをアップロードしたサーバーのことです。
サーバーサイドはサーバーに置いているプログラムを動かせるため、クライアントサイドほど閲覧環境に影響されません。
Webサイトにおけるデザイン
さてこの講義はウェブデザインA・演習です。
前期のウェブデザイン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回課題の「知りたいこと・聞きたいこと」への回答
デザインについて
出来るようになったら面白そう。どうデザインするかを考えられるくらいできるようになれたら楽しいだろうと思う。
見やすいウェブサイトを作るためのコツ
コード・コーディングについて
前期の他の講義でソースコードを触ったことがあるのでなんとなくは理解していますが、このサイトのような見やすいデザインにするにはどのようなコードを使っているのかを知りたいです。
簡易的なウェブページやウェブコンテンツを作成するための技術について知りたいと思っています。
コードは覚える必要がありますか？
継続していれば誰でも慣れていくものですか
ブラウザごとの表示の違いの例が見てみたいです
・・・極端ですが分かりやすい例かも？？
表示するブラウザごとに違う見え方をする「コードで描かれた絵」とは？ – GIGAZINE
前期でプログラミング演習でpythonを使って似たようなコードの授業を受けたんですけど、プログラミングのコードとウェブデザインのコードって何か違いがあるんですか？
プログラミングで難しかったので頑張りたいです。
コードを打てるようになるまでに、どれくらい時間がかかるのですか？
HTMLやCSSの意味が知れてよかったです。
＜P＞から＜/P＞が今回の授業で紹介されてたのですが、ほかに何がありますか？どれくらいありますか？
HTMLとCSSで一つのコンビということが分かったのですが、ほかにもどのようなコンビがあるのですか？
コンビではないけど、PHPというhtmlを陰で操る存在がいますよ！
このコードを使うとどんな表示になるのか知りたい。この講義のためだけに大学に入ったのでマジで真面目にしたい。今回はブラウザで表示の仕方が違うことにびっくりでした。脇坂先生がFirefoxを使用しない理由が脇坂先生らしく笑いました
高校の授業でホームページ作成を体験してからウェブデザインが気になっていたので学べることができて嬉しいです。今回聞いた話や見たもので想像より難しそうに思ったので不安もありますが、これからの講義を楽しみながら頑張りたいです。先生が思うまずはこれを完璧にしておいたら良いことはありますか？また、コードやタグなどをどうやって理解し覚えて身につけたのか知りたいです。
ウェブサイト構築はすごく興味があったけど難しいというイメージが強かったので楽しく学べたらうれしいです！！
基本的な言語のHTML、CSS、JavaScriptについてまだあまり理解できていないので知りたいです！
ブラウザについて
講義全体を通して知りたいことと少しずれてしまうのですが、初回の講義で紹介されていたブラウザの中で、私はパソコンではMicrosoft egde、スマホではsafariを使用しているのですが、Google chromeのが使い勝手がよいのか知りたいです。ウェブサイトを作る側ではなく閲覧する側でもchromeのが良いのでしょうか？(講義ではGoogle chromeを使用しようと思います)
世界最初のブラウザを知りたい。世界最社のウェブサイトを知りたい。
言語について
脇坂先生が言語をスムーズに活用出来るようになるまで何年ぐらいかかったか知りたいです。
デザイン・コーディング全般のこと
実際に仕事などで重宝するような知識やテクニックを知りたいです。
一年生の時は、全く分からなくて放棄していたので今回の授業でできるようになりたいです。
自分で何かを作ったり、デザインなどを考えたりすることはとても好きなので自分でウェブサイトのデザイン、作成を学べるのはとても楽しみです。プログラミングの授業も個人的には楽しかったのでウェブデザインも楽しみながら知識、技術を身に着けていきたいです。
・Webの作り方を知りたいです。
・私はプログラミングが苦手なのでソースコードを覚えたり活用するのが嫌いです。簡単に覚えれるやり方があったら教えてほしいです。
6月にパソコンを購入しいたのに、いまだにライセンス認証を通していないくらいとんでもなく面倒くさがりです。普通購入時の横側の認証コードでは入れると思うんですけど、なんか入れなかったんですよね。サポートに電話かけるのも面倒なのでずっと放置です。右下のライセンス認証を促す不透明度40％くらいの文字列と一生同居していこうと思います。夏休みはバイト詰め込んで期間内だけで25万ちょっとくらいになりました。なのにほとんど残らない計算です。なんで？？？？
ウェブサイトを作っていく上で気をつかうべきポイントや脇坂先生が絶対にこれだけは意識して作っている！みたいなことがあれば教えていただきたいです。どのようなウェブサイトが良いとされるのかを踏まえて見やすさや利便性についても問題なく、自分らしいデザインも取り入れたウェブサイトが作れるようになりたいです。
授業で指定されたHTMLを作るだけではなく、プラスで装飾ができるようになりたいです。知りたいことは、ボタンをクリックしたらYoutubeのサイトに飛ぶ方法・写真を載せる方法・同じサイト内でボタンをクリックすると、別のページに飛ぶ方法・入れたい文字を入力したときに、ゴシック体などにする方法・サイトを開くまでに0％-100％までで表して、開けるまでの時間を表示する方法
ブログをソースコードで見てたくさんの言葉や数字、記号などで構成されていることがわかりました。たくさん勉強してwebデザイナーになれるよう頑張ります！
HTMLというものを初めて知りました。まだまだウェブデザインについて知らないことが多いので、前期もマルチメディアでパソコンでの編集の仕方や、文字入れなどを学ぶことはできて、普段はスマホでしか編集をしないのでパソコンでの知識もみにつけることで、将来就職したときにパソコンでいろいろなことを扱うことが多いと思うので今、この授業で学んでいきたいです
私は食べ物を売りたいです。買う人がインターネットで注文できるウェブサイトを作りたい。
