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

webデザインも出来る様になりたい Part.1

投稿日:2017年10月13日 更新日:

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の場合

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>

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

HTML5の場合

<!DOCTYPE html>

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

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

 

CSSのハナシ

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

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

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

h1 {

font-size:16px;

color:red;

}

と記述するだけでデザインを変更する事が出来ます。書き方としては、指定したい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

スポンサーリンク

この記事が気に入ったら
いいね ! しよう

Twitter で

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

執筆者:


コメントを残す

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

関連記事

地域ポータルサイトを作ろう 第2回

前回地域ポータルサイトを作ろう 第1回から約1ヶ月経ちました。 あれから進んだ事は、トップページのデザインが概ね出来た事。下層ページのスマホデザインがなんとなく出来た事くらいです。 その他、サイトの構 …

組版(くみはん)

組版(くみはん) もともとは活版の版を作成する作業のこと。現在では、ページレイアウトソフトなどで文字や図版をページに配置していく作業のことも組版と呼ぶ。組版には、文字を美しく、読みやすくレイアウトする …

DTP画像

ちゃんと出来てますか?データフィニッシュのやり方

  グラフィックデザイナーにとって、必要不可欠なスキルの一つにデータフィニッシュがあります。言葉自体を知らない人はまずは調べてください。読んで字のごとく、印刷物を作る為のデータを完璧に仕上げ …

仮想ボディ

日本語の文字全体がぴったりと収まる正方形の枠よりひとまわり大きな正方形の領域のこと。ボディというのは、もともと活字で、文字が彫られている正方形の面のことを意味しているが、写植やデジタルフォントでは実態 …

デザインに役立つ色の組み合わせ

デザインに大事な色のセンス。以前、色を決める時ってどうしてるんですか?って質問をされた事があります。配色を考える場合、闇雲に決めている訳ではありません。色々と意味合いがあって配色をしているのですが、そ …

2018/06/24

35mm版(さんじゅうごみりばん)

一般的なロールタイプの写真フィルムサイズ。35mmフィルムがかつてライカに採用され全世界に広まったことから、このサイズのフォーマット(縦3.6 cm×横2.4 cm)をライカ版と呼ぶこともある。1カッ …

2018/06/24

三原色(さんげんしょく)

割合を変えて混ぜ合わせることで、あらゆる色を表現出来る3つの基本的な色のこと。光の三原色は、RED(赤)、GREEN(緑)、BLUE(青)であり、全てを混ぜ合わせると白(本当は透明)になる。また、イン …

2018/06/01

サムネイル

画像やページのイメージ等を、小さいサイズで一覧表示する機能のこと。また、その画像を指す。thumbnailは親指の爪という意味。本来は、小さなアイデアスケッチなどを指す言葉。業界的には、サムネなどと略 …

2018/04/07

レバテッククリエイターさんでこのブログが紹介されました

昨年末くらいにレバテッククリエイターというweb、ゲーム業界のクリエイター向けの求人サイトのブログで、このブログが紹介されました。ということでご紹介させていただきます。 レバテッククリエイターさんの取 …

2018/04/03

地域ポータルサイトを作ろう 第3回

前回地域ポータルサイトを作ろう 第2回からさらに1ヶ月以上が経ちました。 現状は、mottokasukabe.comで確認できます。 本業のデザイン仕事で、現在とある酒蔵のホームページリニューアルがか …

クリックしていただけると助かります


デザイナーランキングへ にほんブログ村 デザインブログへ
にほんブログ村

スポンサーリンク

    スポンサーリンク

    %d人のブロガーが「いいね」をつけました。