イラストレーターSenJ4のブログ■女性イラスト・水彩画・キャラクタ・建築パース/鳥瞰図・エアブラシなどGalleryでOver800点〜の幅広いタッチを掲載し、お仕事を承り中!素材集もOK♪
  
WEBデザインの行方:1
WEBデザインの行方
【サイト製作の動機】
最近 また少しだけ サイトデザインを模様替えしてみたのですが、
このカテゴリは 私がサイトデザインする上で どのようなアプローチで
試行錯誤して作ってきたかを 書いて行こうと思います。
* * * * * * * * * * * * * * * * * * * * 
私が、見るだけのネットから 自分のサイトを運営しようと思ったキッカケは
2003.8月に、2匹目のネコを飼うことになってからでした。
想い出にアポロのHPを作ってみようかな?と思ったのです。

5??¬?? class=

そして超ド素人の私はHP無料レンタルサービスのGaiaxで作ろうとしたのです。
そこはHTMLの形が出来ていて 中身だけを作ればいいわけなんですが、
ドーしたら画像を表示できるの?画像をアップするって、ど、どこに??
リンクってドーやるんだ??(・.・;)?...etc.そんな感じでした。
4ヶ月後に 独自ドメインを取り サーバーも借りて 本格的仕事絡みのサイト運営に踏み切りました。
そんな私もHP作り初めて すでに1年過ぎました。
* * * * * * * * * * * * * * * * * * * * 

1【センスあるサイトを作る準備〜流れ】
■私はホームページ製作では HP制作ソフトは一切使っていません。
Macなのでメモ帳の“Simple text”オンリーです。何故なら 
・まずソフト買うお金がない!(*^_^;) 
・ソフトを覚えるのも面倒くさい! と言うのが一番で、次に 
・WEBデザイナーを仕事にしている訳でもないからです。

要は “WEBデザインを趣味として”楽しんで作っているのです。
だから製作時間は関係なく 好きなだけ費やすことができ、
自分が納得するまでデザインを煮詰めることができます。
納期だって無い!←これって最高♪

■で、幸い 私の場合は仕事でイラストを描いてるので
もともとPhotoshopやIllustratorで素材のビジュアルは作れるわけです。
で、ページをデザインする前に 一体何を作ろうとしたいのか?何を見せたいのか?考えます!

■次にそれを伝えるためには 何が必要か、何を作るか?考えます。
それからビジュアル的な大まかなラフデザインを考えて幾通りか作ってみます。《大ラフ》
実際、そこらへんにある紙の上で 試行錯誤します。あーだこーだ(-""-;)ムム・・・

■で、そこそこ決まったら・・・


次に何の要素を入れるか、何を作ったらみんなに伝わるのか考えて
素材作りに取り掛かるわけです。タイトル文字・タイトルイラスト・アイコン・ページロゴなど。
既に頭の中にはサイトのデザインができ上がってるのですが
実際 素材作りをしていると 次々に違うアイデアが出てくるものです。
この本館サイトも どれだけデザイン変わったか・・・(^_^;)←飽き性。。
そこで アーだコーだの繰り返し・・・とりあえず、使う使わないに関わらず
思いついた素材は PhotoshopやIllustratorで作っておきます。
そしてビジュアルを完成させ、本格的にレイアウト・デザインに移ります。

■基本的に 私は極力シンプルに見やすく無駄を省いたデザインをしようと試みます。
が、いかんせん アレも入れたいコレモ入れたい!となってしまいます。
せっかく作った素材だし、もっと見せたい!見て欲しい!!
いかん!いかん!!シンプルにしなければ。で、ビジュアル重視。
来た人は画面が開いたら 全てを見ようとはしないはずです。

■大手の商用サイトなどは TOPページに思いっきり詰め込んでいますよね!
特に文字情報が多すぎると 見る人も疲れます。
もう、何処を見たらいいのかワケわかんなくなりませんか!?
逆にシンプルだと物足りなくなりますが、来た人は逆に中身を見ようとするはずです。
ポスターやパンフレットなどは表紙にそれほど情報を並べていません。
ページをめくって欲しいからです。当然『何コレ?』と人は次のページを開きます。

2【HTML表現方法】へ続く・・・
■広告・出版業界で活動中のイラストレーターSenJ4のコラム by | comments(0) | trackbacks(0) |
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