デザインの学校 ウェブデザイン 応用編 第6回

本日最初のお勉強はPhoto Shopからのhtmlファイル・素材の書き出しでした。
今回は前回同様のスライスを切っての書き出しです
1)画像のみ 2)HTMLと画像 3)選択スライスのみ の3パターンで書き出し。
…方法としては前回の更新分とほぼ同じです。
ということで説明は割愛させていただきます
ここで気になるのは、なんでおんなじことを何回もやるのか??てことで。
それはですね、(前回からの続きで)主要なそれぞれの画像編集ソフトでの書き出しをしてその違いを体験するためなのでした
やっぱりソフトごとにちょびっとずつ違うので気になる方はお試しあれです
そしてその後、今回は自由時間二時間半という大枠をとってそれぞれ1htmlをコーディングしました!!
今回、コーディングの前に先生が新しく教えてくださったのはリキッドデザイン(サイズ可変デザイン)
リキッドデザインとは:tableタグなどのwidthを固定しないことでサイトデザインがブラウザサイズに合わせて伸び縮みするようにつくったデザインのことを言います。

*リキッドデザインのメリット*
モニタのサイズ、ブラウザの大きさに対応してサイト幅が変化するのでスクロールが発生しにくい
A4用紙で出力可能なページが作成しやすい

ウェブサイトを閲覧するときに縦のスクロールと横のスクロールを共に行うのはとても不便ですよね
つくる人もこんな面倒なことをしているのかな?と思いますが、もちろんそんなことはありません。
ではなぜこんなことが起こるのかというと、それは製作者やユーザー、みんながインターネットを利用している環境が一律ではないからです
画面の解像度が違ったり、画面サイズが違ったりと、パソコンの仕様は色々です
例えばウェブサイトを制作して、自分のパソコンではきちんと見えていたとしても、他の人に同じように見えているとは限らないんですね。
じゃー、どうしたら良いの?っていうときにリキッドデザインの登場です
tableタグやtdタグに%で幅を指定したり、幅の指定の必要がないところはできるだけ入れないのがポイントです
ただ、慣れるまでレイアウトが上手くいかないのが難しいところ
でも、やっぱり画面の解像度やサイズに柔軟に対応できるリキッドデザインはユーザにも使いやすいのでウェブサイトをつくる時にはぜひぜひ挑戦してください
こんなかんじでリキッドデザインや今まで学んだ知識を総動員しながら、いざコーディングです
とにかく今まで教えてもらったことをできる限り盛り込んで作りたいと思ったので
・ロールオーバー(java script)
・css
・SEO対策
・リキッドデザイン

を取り入れながらの制作がスタート。
みんながそれぞれ違うソフトから書き出しを…ということで私は最近使いやすいFire Worksを使います。
まずは使う色やレイアウト、必要なボタン・画像を制作。
あとはスライスで書き出すだけ…なのですが、ここでのポイントはその制作したサイトをどのようなコーディングで表現するかです
それに従って画像の切り出し方も変わってきます。
どこはテキストにするか、とか。どの画像を背景にするか、とかとか。
計画を立てなくちゃできません
リキッドリキッド…と心で唱えつつ口からはブツブツ計算式の独り言。うるさくてすみませんー。。
時間制限があっても真剣になってしまったら、と…止まらない
制限時間を延ばしていただきながら~なんとか完成
完成図はこちら

なかなか時間がかかってしまいました。
なんとかなんとか形に
心残りはcssの設定の甘さ…あとでリベンジしなければ!!
ロールオーバーボタンcss、SEO対策、リキッドデザインなどはサイトの見栄えアップやユーザビリティ・アクセスのアップのためにも効果的な要素なのでこれからのサイト作りにも不可欠
確実にモノにしたいです
今日はこの辺で。
では、みなさんまた来週~

 

WEB(ホームページ)デザイン中級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

*

PAGE TOP