メディアデザイン演習3γ
04 HTMLの基本を知ろう3

HTMLを書きながら要素を知る

前期は、ウェブサイトを表示するために必要なHTMLというプログラムを学びます。
前期合評時の製作目標は、自分が編集長となるウェブマガジンサイトをつくることです。

HTMLを実際に書いてみながらその構造と書式を勉強しています。
今週もさらによく使われる要素を、実際にタグを書きながら学んでいきましょう。
引き続き、「UNDER CONSTRUCTION」工事中のページを作成していきます。

今日は宿題だったウェブマガジン工事中の看板画像データ(IllustratorもしくはPhotoshopで作成)をウェブ用に保存する方法を学びます。

また、その画像を使って工事中のページをカスタマイズして自分のウェブマガジンのイメージに近づけていきましょう!

この間のふりかえり

これまでの授業で作成したファイルを継続して使っていきます
準備:
デスクトップに、アルファベットで自分の名字を名付けたフォルダを出して下さい。
中にはindex.htmlやimageフォルダが入っているはずです。


ウェブ用に画像を書き出す

Web用の画像(GIF、JPEG、PNG)を書き出す方法
Adobeのプロダクトでシンプルに書き出す場合 :「Web用に保存」を使う

ポイント1
解像度は72ppi

ポイント2
ウインドウに表示したい"原寸サイズの2倍"で書き出す
<img src="image/moon.jpg" alt="moon" width="50" />
※実際の画像サイズは横幅100pxで作られています。

ポイント3
切りのいい数字で作る

ポイント4
画像の保存する場所は分かりやすい場所に(今回はimageフォルダ)
わかりやすい名前で(アルファベット半角小文字のみ)

[ 一緒に書き出してみましょう! ]

PHOTOSHOPなどのAdobe製品 : 「Web用に保存...」コマンドの使用方法
http://tv.adobe.com/jp/watch/learn-photoshop-cc/21907/

Photoshop CCの基本 第4回:Web用画像を書き出す4つの方法をマスター!
https://blogs.adobe.com/creativestation/web-design-photoshop-cc-basics-export-images

Illustrator入門 | Webデザイン編 第6回 デザインから画像を書き出そう
https://blogs.adobe.com/creativestation/web-start-illustrator-web-design-06-export-images



タイムラインを使用してアニメーションを作成する方法(GIFアニメーション) https://helpx.adobe.com/jp/photoshop/kb/7072.html  


リンク文字の色設定

リンクの文字色 [CSS : color]

</title> のあと </head> のまえに

<style type="text/css">
<!--
a:link { color: red; }
a:visited { color: green; }
a:hover { color: blue; background-color : lightblue;}
a:active { color: yellow; }
-->
</style>

a:link { color: ***; } /* 未訪問の色
a:visited { color: ***; } /*アクセス済みの色
a:hover { color: ***; } /*マウスがリンク文字の上に乗っているときの色
a:active { color: ***; } /*クリックした瞬間の色


設定できるもの

文字色、背景色、サイズ(例: a:active {font-weight : bold;})などなど、、、。
色の便利ツールを参考に、 いろいろ変化させてみて下さい。

色の便利ツール:
216色カラーチャート
原色大辞典
和色大辞典


独自に勉強して、もうすこし表示にこだわってみたい人は、以下を参照してみてください。

CSSリファレンス http://css.uka-p.com/reference/
・幅・高さ・背景・罫線関係
・余白・レイアウト関係
・フォント・テキスト・リスト・テーブル関係

より詳細に設定できる内容をしりたければこちら
CSS3リファレンス http://www.htmq.com/css3/


ウェブマガジンの企画をたてる

どんな順番でつくっていけばいいのか

ウェブサイト プロジェクトワークフロー[画像]
(via Webデザイン エンジニアリング - 第65回 [図解]Webサイト構築プロジェクト・ワークフロー:ITpro)
ひとつのウェブサイトをチームで作り上げるときにどのような順序でどのようなプロフェッショナルがかかわっていくのかが分かりやすく図示されているので紹介します。拡大して目を通してください。


誰のため?何のため?Webサイトを作り始める前に。
ウェブデザイナーがまとめた、ウェブサイトを作るときに考えたり調査が必要なことが書かれたブログ記事です。
順を追ってみて行くと勉強になると思います。

 

0 企画を考える

何故つくるのか 自分が作らなければならない理由はどこにあるか
誰が見る/どう感じる/どのような関係を築きたい
そうするためにどんな内容をどのように見せるか

こんな感じにしたいという類似例をいろいろ集めて分析してみる(オンラインのソーシャルブックマークを活用すると良い)

 企画書を書く  
  ターゲット
  コンテンツ/掲載するもの
  構造/リンクなどの方法や見せ方
  視覚的要素/全体的なグラフィックの方向性をスケッチ

1 手書きのワイヤーフレームを書く

ワイヤーフレームとは、内容をどのように配置すれば見ている人に伝わりやすいかを考えて作った画面構成図です。

どんなものか  ⇨例1   ⇨例2

コツ
・大きさ、場所、順番などをしっかり決める
・色味(テーマカラー)なども検討する
・いくつかページレイアウトのバリエーションがある場合は、全ページの形ぶんつくる

 

[point]配置とサイズをしっかり決める
- 画面サイズについて
現状、横幅950px〜1024pxを使う事が多い。[資料1]いろんな画面サイズ
[資料2]Retima ディスプレイについて
スマートフォンやタブレット端末が普及するにつれて、Webデザイナーは様々な画面サイズや縦横比を考慮したユーザーインターフェースを設計する必要に迫られている。 画面サイズ・縦横比に対応して柔軟に表示を調整する「レスポンシブWebデザイン」も考えて行く必要がある。

- グリッドデザインをしよう [資料]
見えない補助線を使って整列させて行く

[todo] スケッチ用のノートをつくろう
これからつくるウェブサイトについての資料やスケッチをまとめるためのノートもしくはクリアファイル一冊を準備しましょう。
参考にしたいウェブサイトがあればプリントアウトして貼ったり、なにかアイデアを思いついたら書き込んだりします。
また、何か図形を書き込むときにはなるべく定規を使って書きましょう。




2 IllustratorやPhotoshop、もしくはFireworksで内容をデザインして行く

ウェブ画像作成専門アプリケーション、Adobe Fireworksについて
[リンク]Web素材、モバイルアプリデザイン、プロトタイピング | Adobe Fireworks CS6

Fireworksの使い方、チュートリアル、デザインアイディアを紹介するサイト
Fireworksマニア http://fw.v-colors.com/

IllustratorでWebデザインをするためのポイント まとめ
・ポイント [資料]
・気をつけておきたい設定あれこれ [資料]

ウェブ用画像のPOINT
・色はRGB
・単位はピクセル
・画像形式 GIF・JPEG・PNG [資料]



4 HTMLを使ってレイアウトコーディングしていく

いままで学んできたHTML+CSS そして、これから学ぶCSS応用を使ってレイアウトしていきます。

HTMLを使って、計画していた地図とおりに、集めた要素を配置していく。
この段階でデザインを大幅に変更しないことが重要です。

ブラウザでオフラインのチェック
作成したHTMLファイルをWEBブラウザのアイコンにドラッグ&ドロップする/
もし見られなかったら、もう一度テキストを見直して、打ち間違えた所がないか確認する。
特に、イメージのリンクはずれや、リンク先の指定に注意する。


5 アップロードする

CyberDuckを使い、必要なデータをアップロードして公開します。

ウェブには更新性という特徴があります。
つくったらそのまま手をつけない、のではなく、新しい情報があれば追加したり、古い情報を消したり、まちがった情報を訂正したりすることが大事です。
継続して閲覧してほしいサイトを考える場合、たまに大幅なデザイン変更なども必要でしょう。

ヒアリング+ 工事中ページ作成

どんなウェブマガジンを作るのか概要を聞いていきます

まずは、今後自分ウェブマガジンをどのようなものにするのかを聞かせてください。

その間、イラストレータもしくはフォトショップで工事中のページに貼付ける画像を作り、ウェブ用に書き出してみてください。
そして月の画像のかわりに貼付けて、文字のデザインなどを調整して、工事中のページを完成に近づけていってください。

来週の内容

引き続き要素と属性の紹介
今日作ったファイルは保存して次週も使える様にしておいて下さい。
[宿題] 次週アップロードを行いますので、工事中のページを完成させておいてください。

今日の内容を振り返って、よく理解しておきましょう。
わからない事は早めに質問して下さい。