Home / WEB制作 / Webディレクターが初心に戻れるWeb制作の基礎

Webディレクターが初心に戻れるWeb制作の基礎


An insight into my process of content creation for the webAn insight into my process of content creation for the web / Nils Geylen

どんな仕事に就いていても「初心忘れるべからず」という言葉が意味する通り新鮮な気持ちを忘れないようにしたい所です。

Web制作の仕事においても同じで、たまには初心に帰ってもう一度勉強してみるのも素晴らしいことだと思います。

また、これからWeb制作の現場で働く方にも基本的な事を知って頂けるように「Web制作基礎の基礎」についてご紹介します。


そもそもHTMLって?


internet explorerinternet explorer / Sean MacEntee

普段ページを作成する時、HTMLという言語を用いてサイトのデザインをしていきます。
HTMLは、Web上のサイトを制作する時に使われる”言葉”で、私達が普段使う日本語や、英語・中国語の様なものです。それぞれの言葉は「タグ」と呼ばれています。HTMLは一定の規則があり、それに基づいてページの制作を行なっていきます。

HTMLにはいくつかの種類(バージョン)があり、W3Cという機関が仕様の制定などを行い、その都度草案を発表しています。
現在はHTML5.0が最新のバージョンとなっています。

Web制作に使うソフト


HTMLを使ったWeb制作は、テキストエディタが一つあればすぐにでも制作に入ることが出来ます。しかし、このようにして作られたページは保存の都度ブラウザでプレビューし確認する必要があります。

仕事では時間も限られる上、複数人で一つのプロジェクトに携わりますので細かな修正を除きAdobeが販売しているDream weaverや、IBMが開発し現在はジャストシステムが開発と販売を行うホームページビルダー等を使ってWeb制作が行われています。
このような場合でも、根幹にはHTMLがしっかりと使われています。


デザインに使うCSS


Web制作をする時、重要となるのがページデザインです。文字は背景色から見出しなどのデザインには現在殆どのケースでCSSが利用されています。

CSSは、「Cascading Style Sheet」の略称で、単にCSS、又はスタイルシートと呼ばれます。主にサイト全体の構成やフォントサイズ、リンクのカラーまで細かなデザインを設定できるのが特徴です。

「セレクタ」と呼ばれるスタイルを適用する対象を指定し、色やサイズを決めるために「プロパティ」と呼ばれるものを指定して、一つのデザインが完成します。

例えば見出しの色・フォントサイズを統一する場合や、特定の箇所だけ強調表示する時に使われる他、設定次第でドロップダウンメニューなどを制作することも可能です。

また、CSSはHTMLファイルに埋め込むことも可能ですが冗長になりやすく、「.css」という拡張子の別ファイルに保存して管理するのが一般的です。

CSSを外部ファイルにすることでHTMLファイルのスリム化はもちろん、プロジェクトにおいても作業の効率化を行うためにほぼ必須といえるでしょう。

現在はCSS3.0が最新バージョンとなっていて、より豊富な表現が出来るようになっています。
HTMLでページの骨組みを作り、デザイン部分はCSSで行うのが現在の主流です。

CSSの難点はブラウザにより表示に違うという点です。
昔はブラウザごとに独自の仕様を制定したり、表示が崩れるという問題が有りました。
現在は昔ほどではありませんが、PCを始めスマートフォン・モバイル端末など、ユーザーが様々なデバイスでインターネットにアクセスするようになりました。

製作中のサイトがどのような端末やユーザーをターゲットにしているかによってCSSのコーディングも変わってきますので、製作時にはこれらを念頭に置きながら作業を進めていく必要があります。

最重要な納期


Web制作と関係が薄いように見えて、一番守らなくてはならない事です。

最初慣れない内は遅々として作業が進まず、気付いたら納期ギリギリということも。
どこをいつ迄に仕上げるのか等、しっかりとしたスケジュール管理が必要です。

制作現場は常に戦場


Web制作は一つのプロジェクトをディレクター始めデザイナー、コーダーなど複数人で作業をします。

慣れてしまった時ほどついついミスをしてしまいがちです。「初心忘れるべからず」たまには初心に帰ってみるのもいかがでしょうか?


A8.netが技術スタッフを募集中

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)