WEBCRE8TOR.COMWEBCRE8TOR.COMTOPABOUTCATEGORYウェブデザイン演習Webの基礎知識や、HTML・CSS・jQueryのコードの記述を行いながらWebサイトの作り方を学んでいきます。ウェブデザインアーカイブデザイン性の高い素晴らしいウェブサイトのアーカイブです。デザイン制作の参考にしてみましょう。スニペットWordPressやjQuery、HTMLやCSSなど、各言語のスニペットをまとめていきます。Link前回の講義内容覚えてますか??WebサイトはHTMLとCSSでできている。HTMLは文書に名前をつけ、CSSはそれを元にデザイン装飾を行うことができる。日本ではブラウザはほとんどがIEかChrome、またはFirefoxで、不具合のほとんどは古いIEで起こる。前回の講義内容で挙げたこれらの点で、Webデザイナーがコーディングにより何をする必要があるか?という点が少しは見えたかもしれません。古いブラウザにも対応したWebサイト制作を行いましょう。その他もろもろ」で構成されていることがわかりました。それらをどうやってブラウザに表示しているんでしょうか??Webサーバーにリクエストを送ってアップロード保存されたデータを表示している下の図を見てみましょう。「このページを表示してほしい」というリクエストが送られます。リクエストを受け取ると、Webサーバーがそれに応答しウェブサイトが表示される、という仕組みです。逆に言えば、リクエストをいくら送っても(URLを打ち込んでも、検索しても)、ウェブサイトはWebサーバーにデータが保存されていなければ、データがないので応答せず見ることができません。デザインやコーディングを行って制作したウェブサイトのデータを、Webサーバーにアップロード保存するまでがウェブサイト制作になります。(※細かく言うとちょっとチガウけど・・・)ウェブサイトをアップロード保存してからの検索エンジンの上位表示や閲覧数を増やすための対策など、ウェブサイトをたくさんの人に有効に使ってもらうため日常的に行う更新やメンテナンスがウェブサイト運営になります。内部ではどの言語のファイルがどんな役割で機能しているのでしょうか??ウェブサイト制作で頻繁に使われる言語は、HTML(最終的な表示用ファイル)CSS(文字情報だけのHTMLの見た目を調整するファイル)JavaScript(HTMLに動的な要素を加えるファイル)PHP(お問い合わせフォームなど、データの受け渡しなどを行うファイル)以上の4つになります。カッコで代表的な役割を記載していますが、もう少し踏み込んでみましょう。HTMLの役割HTMLはみなさんがブラウザを通して最初に目にするファイルです。「https://ryu-ya.net」などURLを打ち込みWebサーバーがリクエストを受け取って、データが存在する場合、一般的にはコーディングを行った「HTMLファイル」が表示されることになります。HTML単体ではただの文字情報ですが(前回見せたようなもの)、後述するCSSで見た目を調整され、JavaScriptでアニメーションやタブの切り替えなどの動きを動的に加えられ、PHPでデータベースなどからデータを取り出したり条件分岐で表示を変えたりされ、好き勝手に改変されたりします。上述した4つの言語の中で唯一「受け身」のファイルになります。HTMLの役割はCSSやJavaScriptから受け取った情報を反映させて表示する受け皿です。CSSの役割CSSは文字情報しかないHTMLファイルの見た目を整える役割を持ちます。文字情報しかない状態、つまりCSSが効いていないとどういう見た目になるのかというと・・・。本当に文字情報が表示されているだけで楽しくもなんともないですね。ひとたびCSSを効かせてあげると・・・きちんとデザインされたページが表示されました。リアルタイムでの処理を行うのにとても有効です。わかりやすいものでいうとタブの切り替えなどがありますね。JAPANのトップページの中央のニュースのブロックで、各カテゴリのタブをクリックすると一覧の中身が切り替わりますよね。これもJavaScriptを使ってリアルタイムで表示状態の変更を行っています。一つ、スクロールさせるたびに要素が移動したり動いたりもJavaScriptを使うことで可能になります。龍弥デザインのクライアント様、フリフリチキンのKahana’s様でも多くのJavaScriptアニメーションを使っていて、スクロールしていくと木が動いたりチキンが回っていたり、車が走ってきたりします。チキンのKahana’sアニメーションを使うことで見に来てくれた人を楽しませ、とても有効に印象付けを行うことが可能です。PHPの役割おそらくこの講義でPHPを使うことはないとは思いますが、念のため解説します。プリプロセッサー)とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。https://ja.wikipedia.org/wiki/PHP:_Hypertext_Preprocessor動的にHTMLデータを生成するというのは、例えばウェブサイトのトップページによくある「お知らせ一覧」がわかりやすいです。お知らせ一覧はほとんど場合、新しい記事から順番に表示されて古い記事は消えていきますよね。これを記事を更新するたびに自動で行ってくれるのがPHPなどのプログラム言語です。その他にもお問い合わせフォームや掲示板なんかもPHPで構築することが可能です。クライアントサイドとサーバーサイドこれも覚えておくといいと思います。代表的な例としてクライアントサイドで働く言語はJavaScript、サーバーサイドで働く言語はPHPとして解説します。クライアントサイドはPCのブラウザまずクライアントサイドとは、簡単に言えば皆さんが使っているPCのブラウザの事です。クライアントサイドで働く言語は閲覧環境に非常に影響を受けます。スクロールしたら画像が動くアニメーションをJavaScriptで作るとします。JavaScriptを使っているので、JavaScriptが正常に動作する環境ならアニメーションが動きますが、JavaScriptが無効になっていたりして動かない環境だとアニメーションは動作しません。次にサーバーサイドとは、構築したウェブサイトのデータをアップロードしたサーバーのことです。サーバーサイドはサーバーに置いているプログラムを動かせるため、クライアントサイドほど閲覧環境に影響されません。Webサイトにおけるデザインさてこの講義はウェブデザイン演習です。前期のウェブデザインBでデザインやPhotoshopの使い方に関してはレクチャーしましたが、デザインと銘打った以上、デザインのお話をしないわけにはいきません。」こと、それを最も重要な役割や目的としています。「見やすさと操作性の向上」を図ること、そして、「トーン・マナーの設計」というものがあります。見やすさと操作性の向上こういう表があります。例にとって説明してみましょう。amazonは世界最大の通販型オンラインショッピングサービスです。買い物をした人がいるでしょう。みて、商品画像が並んでいて、どんな名前で価格がいくらか、すごくわかりやすい設計になっていると思います。商品名をクリックしても移動することがわかるように、リンク色を青色にしています。商品価格などの重要な情報には赤色の文字で表示しています。「誰が見ても理解しやすく」なっています。ようにどんなユーザーでも訪問の可能性があるサイトは、アクセス解析やサイトでの閲覧・検索情報を元に、訪問ユーザーが好みそうな情報を元に表示結果を変えることがあります。その結果、購入の確率が増え、「目的の達成」に近づきます。amazonは、基本的に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は可変サイズ、紙は固定サイズ。それぞれに役割を持たせることでターゲットユーザーに有効に訴求することができる。第06回CSSリセットを行ったheaderからfooterの役割について解説します。講義を始めるにあたって、ウェブデザインの基礎知識を学んでいきましょう。第03回なぜHTMLタグを使ってコーディングをするのか?とよく使うHTMLタグの説明を行います。コーディングに向けてフォルダやファイルの準備も行いましょう。第04回いよいよコーディングを始めていきましょう。必須の記述を行ってHTMLファイルの基本形を作ります。第05回CSSの基本的な考え方と記述方法の習得、そしてCSSリセットの記述を行っていきます。「ブロック」と「入れ子」、「インライン要素」と「ブロック要素」について説明を行います。第08回main.cssへページ全体の指定を行い、idとclassのCSSでの記述、画像アセットに関して解説します。第09回headerセクションのコーディング、さらにmarginやpaddingに関しても詳しく説明を行います。第10回navセクション、footerセクションのコーディングを行います。簡単にJavaScriptを設置できるjQueryを使ってスライドショーを実装します。メインコンテンツ部分のarticleの内容である#mainとasideの記述を行います。第12回Web動画の埋め込み方法の解説を行います。簡単に実装するためjQueryプラグイン「CoverVid」を使用します。第13回スクロールアニメーションの実装方法を解説します。第14回スマートフォンやタブレットなどの端末への表示最適化の手法「レスポンシブWebデザイン」について解説します。前回行ったレスポンシブWebデザイン対応で非表示にしたナビゲーションメニューを復活させます。(11)LINK龍弥デザインTwitterFacebookお問い合わせCLOSEMENUMAIL。