グラフィックデザインからDTP、Webデザインまで
デザインに役に立つテクニックやコツをお届けします。

ホームページを作ろう!webデザインも出来る様になりたい Part.1

AdobeCreative Cloud Illustrator webデザイン wordpress デザイン

ホームページを作ろう!webデザインも 出来る様になりたい Part.1
Pocket

普段はグラフィックメインで、主に紙媒体しかやってないけど、webのデザインも出来る様になりたいって方もいると思います。もしくは、webのデザインも必要に迫られている方とかいますよね。

私も10数年前に以前いた会社で突然、

「webの部署に仕事断られたから、お願い出来ないかな。」

って上司に言われ、

「個人のホームページくらいしか作った事ないレベルなので、無理です。」

と断ったのですが。

「それでも良いから、頼む。」

と言われ、渋々やる事に。これが必然てやつですね。この上司が何故こんなに必死に頼んで来たのか、それは月曜日のあさイチにプレゼンしなければいけなかったんですね。ちなみにこの話を持ってきたのは金曜日の夕方。

この時の会社は、土曜日は半日出社という小学校みたいなシステムだったのですが、1からwebのデザインを起こして、プレゼンで見せられるカタチにするのは半日では無理がありますね。普段、紙媒体はこんなノリで常にやっているのですが、webはそうは行きません。という事で、日曜日に休日出勤が必須しかも終わるのかというレベル。ですので本来やるべきはずのwebの部署は断って来たんです。そりゃそうですよね。そして、火の粉は私に降りかかったという訳です。

さて、この時私がやった事は、今のwebってどういう仕組みになってるの?って事を調べる事からでした。

これは、紙媒体でも一緒ですね。サイズや企業のCIなどは、必ずレギュレーションがありますよね。webにもこういった決まりがあり、紙媒体と違うのは日進月歩で進化変動を常にしているという点です。

webは常にトレンディーでナウなのです。

私は、学生時代に学園祭のホームページを作っていたので、この頃からwebは触っていましたが、その時代のwebは、レイアウトをするのにテーブルを使っていましたし、画像も通信速度が遅い為にバラバラにスライスして使うなど、今では決してありえない仕組みで作っていました。いや、私がではないですよ。世の中全体が、そうしてwebを作っていたのです。さらに、Flash全盛の時代でしたので、Flashでアニメーション作るのが楽しくて、Flashだけはかなり使いこんでいました。

話を10数年前に戻します。

学生時代チョロっと触ってた私が、当時のwebを調べてビックリしました。

作り方や構造が全く違う。。

テーブルレイアウトじゃなくなってる。。

CSSってなんだ。。

オールFlashのページとかある。。。

学生時代からたったの5年くらいで、webは全くの別物になっていたのです。

プレゼンまで2日しかなかったので、書籍を2冊買いました。Dreamweaver8の使い方の本とCSSデザインの本です。

この時、いちばん大きく変わっていた事は、HTMLとデザインを切り離して考える構造になった事でした。従来のHTMLとCSS(カスケーディングスタイルシート)に切り離して、デザインを制御する方法論に仕様が変更になっていました。そこで、1からCSSについて独学で学び、デザインする為の知識はざっと入れてからデザインに入りました。

デザイン自体は割と直ぐに完成したので、ついでにプレゼン用にwebブラウザで閲覧出来る様にコーディングまでして、更にスペシャルコンテンツをFlashで作成するつもりだったので、Flashでアニメーションを作成してティーザーサイトまで用意できました。ここまで2日で出来たので、プレゼンには間に合いました。

結果としてプレゼンが通り、予算300万円のwebサイトを受注することが出来ました。

そんなこんなで、現在。

10年間でwebにも色々ありましたね。

スマートフォンの登場、ガラケーの淘汰。

web2.0時代の到来を経て、

HTML5とCSS3の登場から

モバイルファーストの時代。

更にはFlashの完全衰退

と、前置きが長くなりましたが、紙ベースのデザインからコーディングまでノンプログラマーでもwebデザインを求められる時代になりました。そこで、普段は紙媒体しかやってない人にでも分かるようにwebの作り方を書いて行こうと思います。

ノンプログラマーでも出来るwebデザイン

普段webのデザインをやってない方は、まずはwebそのものを理解する必要があります。

ですので、デザインそのものよりも先にwebの構造を知る為、コーディングの仕方から触れて行こうかと思います。

そのまえに、webって一体何かという点を、ざっとおさらいも兼ねて書いて行きます。

webって?

そもそも、webってなんでしょうか?

昨今ではwebといえばインターネットそのものを指したり、webブラウザで表示出来ることを意味する事が一般的になってきています。

webに使われる言語は主にHTML(HyperText Markup Language)です。このHTMLという言語を世界中に蜘蛛の糸の様に張り巡らせたモノを、World Wide Webと呼びます。そして、この略称こそがwebと呼ばれる所以になります。

ホームページのURLのアタマにwwwって付いているのもこのWorld Wide Webの略です。決して草生える的な意味はありません。

ハイパーテキストとは、文書内にある文字列が、別のテキストやファイルにリンク出来る画期的な言語です。

HTMLは1989年にスイスにあるCERN(欧州合同素粒子原子核研究機構)のティム・バーナーズ・リー氏が内部システムの為に考案したモノです。ですので、世界最初のウェブサイトはhttp://info.cern.ch/ といったCERNのものだそうです。

ハイパーテキストシステムはユーザーがWebブラウザーにURLを入力すると、Webサーバーへの接続とWebページを取得するためのコマンドが送信され、指定されたファイルが存在するとWebサーバーから指定したファイルが転送されてくる仕組みになっています。

Webブラウザーは、ファイル情報を読み込み、書式情報や文書構造の内容に合わせてテキストを画面に表示します。テキストだけでなく、画像、音声、映像なども表示が可能です。

ちなみに、リンクがありクリック可能なテキストになっているものをハイパーリンクといいます。

ざっとこれがwebの概要になります。

webのデザインをやるのであれば、最低限の必要な知識になります。

 

現在のwebの仕様は?

さてHTMLをなんとなく理解できましたでしょうか?HTMLにもバージョンがあり、既に10数年くらい前の時点で、HTMLのバージョンは4でした。

このバージョンを決めているのがW3Cという非営利団体です。W3C(World Wide Web Consortium)といってWeb技術の標準化を目的とした非営利団体になります。1994年10月1日に創設されています。

HTML4.01は1999年12月24日に制定されたバージョンで、この時に視覚的な要素はHTMLから切り離し、CSSで記述するというルールが定められました。

その後、XHTML1.0というバージョンが登場します。2000年1月26日に勧告されたバージョンで、HTML内の要素は小文字に限定するなど、より厳格なルールが生れました。

以前バージョンのHTMLでは、記述する際にDOCTYPE宣言というものが必須で、ここでDTD(Document Type Definition)という文書型定義をしなければならなかったのです。このDTDは3種類も存在していました。「Strict」「Transitional」「Frameset」の3つです。

Strictは、先程のW3Cに忠実な要素しか使えない厳格なもの。

Transitionalは、W3Cが制定していない非推奨要素を使いたい場合などに使う少々緩いもの。

Framesetは、現在使用が認められていないフレームを使用する際に使われていました。「XHTML1.1」では以下の理由によりフレームは廃止されました。

・ お気に入りや履歴表示、印刷が正しくできない
・ フレーム未対応のブラウザでは正しく表示されない
・ フレームページごとにスクロールバーがつき、見づらい
・ フレーム内に外部コンテンツを表示させると著作権侵害の恐れがあるなど

 

 

上記の様に、HTMLは記述するだけでも複雑で、素人からしたら良くわからない謎の部分が多く存在していました。

そして、2014年10月28日に勧告された現在のバージョンがHTML5になります。人間にも機械にも理解しやすい言語を目指し、Webアプリケーションを開発しやすい機能を実装しています。

これまでの話で重要なことは、HTMLを記述する際に冒頭にどう書くかということに関係しています。

HTML自体はテキストツールで普通に書いて行くことが出来ます。保存する際に拡張子を.htmlまたは.htmで保存するだけです。

そして、冒頭でどのバージョンかを示すのですが、

HTML4.01 strictの場合

という風に記述しなければなりません。こんなの覚えられませんよね。みんな常にコピペで記述してました。

HTML5の場合

非常に簡単ですね。これなら何も見なくてもサラリと書けます。

という感じで、HTML5は単純かつわかりやすい使用になりました。

 

CSSのハナシ

現在のwebの仕様でもう一つ重要な事が、CSS(カスケーディングスタイルシート)のバージョンです。これまではCSSのバージョンは2でした。しかし、現在のバージョンは3になり、CSS3ではデザインの幅が格段に上がりました。もうほとんどの事は、CSS3さえあれば再現できてしまいます。

そもそもCSSとは、HTMLに外部リンクしデザイン面を制御するファイルです。

例えば文字の大きさなどを16pxで赤にしたい場合は

と記述するだけでデザインを変更する事が出来ます。書き方としては、指定したいIDまたはクラス(この場合は1hの見出し要素ですが)の後に{ }で囲い、プロパティ(サイズや色、大きさなど様々なプロパティが存在します): 値 ; と記述します。するとwebブラウザで見た時に、変更した値が反映されるという感じです。

 

CSS3でしたらプロパティを指定するだけで、以前であれば角を丸くしたい場合は四つ角に角を丸くした画像を配置しなければならなかったのですが、角丸や円も簡単に再現が出来てしまいます。

さらに、透明効果で乗算やスクリーンなども画像を用意すること無く作成出来ます。ドロップシャドウなども可能です。

グラデーションすらもCSS3だけで再現出来るようになりました。

文字の縦書きなどもCSS3で可能です。

三角形のパーツもCSS3だけで作れますよ。

これらを組み合わせることで、以前は画像でわざわざ作成していたメニューボタンなどは、CSSのみで作成出来てしまいます。

画像で作成してしまうと、レスポンシブデザインのサイトなどを作る際に可変出来ない弊害が起こります。しかし、CSS3で作成した場合は、簡単に可変可能なパーツを作成する事が出来る様になったのです。メニューボタンなどは画像にしない事で、テキスト+CSS3のみで作成した場合、SEO的にも有利なサイトを作る事が出来ます。

現在では、ほとんどのブラウザでCSS3を対応している為、使わない手はないですね。

ですので、デザインを普段利用しているIllustratorで作成して、同じ様にCSSで再現する事が出来ます。わざわざ全てを画像にスライスする手間が無くなったのです。

まとめ

HTMLはHyperText Markup Language。

webとはWorld Wide Webのこと。

wwwもWorld Wide Webを表す。

現在はHTMLとデザインを切り離して考える構造。HTMLにリンクしたCSS(カスケーディングスタイルシート)でデザインを制御している。

HTMLのバージョンを決めているのはW3C(World Wide Web Consortium)という非営利団体。

現在は、HTML5とCSS3の組み合わせでwebを構成するのが最新の作り方。

まずはこの事を頭に入れておきましょう。

Part2では、具体的なHTMLの書き方に触れていきます。

次回は、webデザインも出来る様になりたい Part.2

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサーリンク