イラストレーターSenJ4のブログ■女性イラスト・水彩画・キャラクタ・建築パース/鳥瞰図・エアブラシなどGalleryでOver800点〜の幅広いタッチを掲載し、お仕事を承り中!素材集もOK♪
  
<< イラストレーターへの道程:2mainイラストレーターへの道程:3 >>
WEBデザインの行方:2
WEBデザインの行方
2【HTML表現方法】
■さて次に、完成したデザインをドーやってWEB上に表現するか!?
つまりレイアウトをどうやってHTML書類にするか!が重要な問題になるわけです。
広告のグラフィックの場合は、文字なら斜めにしたりタテに組んだり、画像横にキレイに回り込ませたり・・・
紙媒体が主なので、レイアウトは見た目通りに自由に出来ます。

■ところが初心者がWEBに表現するのはなかなか難しい。
デザインしたものを更にHTMLという特殊な言語・表現方法に変換し、ブラウザを通して見なければならない。
しかも紙媒体の広告デザインに比べてかなりデザイン制約が多いです。パターン化になりやすい。
例えば丸い画像の縁にキレイに文字を回り込ませることは、文字を画像にしないかぎり困難でしょう。
私が思うにHTMLのレイアウトって“小さな四角の組み合わせパズル”だと思います。
四角(セル)をいくつも並べて作っていかなければなりません。
せっかくキレイに思い通りに素材を作り、レイアウトが決まっても
それをブラウザ上に表現できなければ なんの意味もありませんよね!

じゃ、そのためにはドーするか!?



よくあるフリーのHTMLテンプレートを利用し、アレンジするのもいいですが、
とにかく自分の手でサイト研究&学習、学習&研究です。
HTMLを分解・解析するわけです。分解するためにはお手本を捜します。
クールサイトを見つけたら まずソースを覗いちゃおう!
最初はなんでも真似から始まるんです。
自分の感性にピッタリくるものや『あ、このデザイン、表現方法いいな!』
と思ったら まず覗きましょう!みんな覗くの好きでしょ!?
そのうち自分の血となり肉となり、一人前の人間に成長してゆ・・・

■ただ・・・これが初めは難解で・・・何が何だかサッパリわからん!
で、いいなと思ったレイアウトはほとんどTableの使い方が上手いんですよね。

しかし、Tableの仕組みでひっかりました。テーブル・・・なんだコレ(・.・;)?・・・・む、むずかしいぃ〜(;_;)
Table・・・要は四角い大きなワクのこと。一番外側のTableの中にTableを作ったり、
さらにその中に四角いワク(セル)を TRやTDと言ったタグで縦横に並べていくんですが、
もう、頭がパニックです。『ドーやって思い通りに配置するんだ!? 』まるで数学!!
で、考えますよ、HP製作ソフト・・・買っちゃおうかな・・・ってね。

でも、ちょっと待て!その考えが死を招く。
ソフトに頼ってしまうと “仕組み”がまったく覚えられませんよ!
タグ打ちを覚えてから 取り組んだほうがイイと思うけどナァ。。←simple textでタグ打ちの私。
とか言いながら、私も最初からソフト使ってたら こんなコラム書いてないけどサ。(* ̄ー ̄)v♪

しかもスタイルシートや Java に Flash なんて使われてた日にゃぁ、あなた!
『な、なんだコレ!??....ε(・・;)』とタメ息出ます。しかも最近はphpにXML言語のBlogでしょ・・・

cssはブログで大活躍してますね。css は確かに便利♪後の編集で威力を発揮します。
でもねぇ・・・基本的にブログの1ページに記事もメニューも全て凝縮し文字中心、
しかもタテ長にズラ〜〜〜〜〜ッと延びたあのお決まりのデザインが 本当はキライでっす!!
とか言いながらブログ使いまくってる人がこの記事書いてるんですけどね...(^_^;)ダハハ。←結局ミーハー。

要は『HTML』でページの内容を記述し、『スタイルシート〜css』でページのスタイルデザイン(色・サイズ・配置など)を指定するというふうに、役割分担する感じですね。

■あと、流行ってるのが php ですが、私はあのページごとに切り替わるときに、メニューとコンテンツが一瞬真っ白になって消えるのがうざったい!別にフレームで区切って 見せればいいじゃン!?とか思ってしまいます。メニューが消えるのが好きじゃないな。
キライじゃないけど、好きじゃない!←あ!コレって、女の子に言われたら 悲しいねぇ〜→ドーでもイイっ!?

編集がラクだということでphpやcssを使うんだけど、なんかさ、面白くないじゃん!
みんな同じページレイアウトだなんて!イラストレーターだし、もっとビジュアルで行こう!!
と考え方も少しづつ変わって来て、最近の私のWEBデザインはビジュアル志向なんです。
つまり画像の多用。ほら今の時代 ADSLに光環境になってるしね。多少ページが重くてもね!
一番困るのがWinとMacの文字デザインの違い!!これで文字幅が狂ってしまう・・・
で、文字まで画像使ってたりしてます。だって、その方がレイアウト崩れないし、ラクなんだもの♪
ただし、極力データは軽くしなければいけませんが・・・

うーん、まだまだ遠いWEBデザイナーへの道。←目指してるわけじゃないけど。
次回【SenJ4のレイアウト方法】へ続く・・・
■広告・出版業界で活動中のイラストレーターSenJ4のコラム by | comments(0) | trackbacks(0) |
コメント
コメントや質問があればお気軽にお書き下さいネ▼尚、承認制です。





 


SenJ4のコラムへようこそ!
広告業界のプロが新鋭クリエーターの
人達にお届けするお役立ちコラムです
体験談メインにズバッと書いてるので
現場に即した情報や内緒の話が満載♪
            
私のギャラリー《 illustclub.com 》には
女性イラスト・水彩画・キャラクターや
Tシャツ・4コマ漫画・建築パース...まで
Over750点の幅広いタッチが満載!
 
SenJ4イラストギャラリー♪
 お問い合わせもこちらから!

Mac好き集まれ〜のブログ♪




日本イラストレーター協会


SenJ4■メンバーNo: 945
アートファイルNo: 704


SenJ4のPortfolioの一部公開

ページランク

 → プライバシーポリシーについて
▼カテゴリ別に読む
▼最近のコラム
SenJ4のオススメ♪

 ▼なんと容量50GBにパワーアップ♪

ロリポップ!
イラストギャラリーに最適!
SenJ4のサイトもコレ♪安っ!
1GBの無料ブログ3つも作成可能♪
WordPress簡単インストール!



★チカッパプラン 登場!
120GB大容量で月額500円〜
マルチドメイン、SSH対応
5つの1GBロリポブログが付属♪
WordPressも設置カンタンだよ


▼オリジナルドメイン取らなきゃ!

検索窓に打ち込めば取得可能な
jp・com・net...などが出てくるよ!

申し込みもOK!SenJ4もココ♪



マイフィギュア
コレはリアルなフィギュアです!
写真から本当に驚くほどそっくりな
ミニチュア人形を創ってくれます♪



WordPressクイックインストール!
全てが揃った究極のレンタルサーバ、
さくらのレンタルサーバ ビジネス



大容量・高機能レンタルサーバー heteml
▲クリエイターも喜ぶ256GBの容量!
動画のストリーミング配信もできるよ!
作品集を創ろう!

MyBook
▲イラストや写真を自分でレイアウトし
高品質なフォトブックを作れます!
スライドショーの公開も出来ますよ〜♪



写真の共有も保管もここひとつで
●●●30days Albm PRO●●●
クリエイター必携の本
プロになりたい人への本
Special Books Shop
This is Best Buy♪

ワイヤレスキット・付属ソフトを標準装備で「Intuos Pro」として進化した!

wacom Intuos Pro large Lサイズ PTH-851/K0


イラストレーターに必須のフォトショとイラレが入った単体版ラストのスイーツ!

Adobe Creative Suite 6 Design & Web Premium Macintosh版 アップグレード版「A」(CS5からのアップグレード)


Mac OSとWindowsの両方でAdobeのクリエイティブツールが使える!

Adobe Creative Cloud 12ヶ月版 Macintosh版 [オンラインコード] [ダウンロード]

お役立ちLINKS
素敵サイト・リスト
 
 
 
 
 
 
RECENT COMMENT
 I'm illustrator
SenJ4のTシャツデザイン
▼Tシャツ・デザイン ギャラリー



ニャンコTシャツ
▼漫画家・野間美由紀さんオーダー



▼マクプー_MP01

▼マクプー_MP02

▼可愛いニャンコ大集合♪

▼愛まっくんPeople ※超人気!

▼愛まっくんPeople ※レディース用

▼まくぶっくんPeople
ARCHIVES
Powered
サイト内検索▼
os_brouse.jpg





PAGETOP