デザインどおりのWEBに組み立てる表現技法 | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて
タイトル画像

最近のWeb制作では、デザインの基礎知識がきちんと身についていない状態にもかかわらず、いきなりWeb制作に取りかかることが増えている。そこで本特集では、Web制作に取りかかる初期段階でデザインをつくり込み、それを実際にWebへ落とし込むときの知識とテクニックを紹介する。Web制作を行ううえで、きちんとWebデザインする制作方法と、それをマークアップするコーディング術をしっかり身につけ、Web制作に役立てよう。

chapter 1 手書きのラフからモックアップをつくりWebサイトを制作する

chapter 2
Webサイトをデザインする際に押さえておきたい知識

chapter 3
モックアップをカッコよくデザインする方法

chapter 4
できあがったモックアップからWebサイトを組み立てる

完成したモックアップをスライスする
基本となるスライスの切り方・設定・書き出しなどについて考察しよう。
文=大須賀政裕(oskadesign)
 INDEX
>>> スライスをする前にWebサイトをイメージする
>>> スライスの切り方・設定を工夫してから書き出す
>>> スライスの名前や保存形式などの設定をする
>>> タイトルやボタン画像など細かい素材をスライスする


XHTML+CSSでWebサイトを構築する方法
ここでは実際にスライスした画像をXHTML+CSSでマークアップしていく方法を紹介する。
文=加茂雄亮(株式会社ロクナナ・ロクナナワークショップ)
 INDEX
>>> ディレクトリ構成を考えて下準備をする
>>> 文書構造重視のマークアップを考える
>>> スタイルの付与・常套テクニックを使う


chapter 5
モックアップどおりにWebへ再現するコーディング術


本記事は『web creators』2009 vol.85からの転載です。本特集全記事は誌面で読むことができます。
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在