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, デザイン
-

執筆者:


コメントを残す

関連記事

解像度(かいぞうど)

画像やプリンタなどのきめ細やかさを表す指標。dpi(またはppi)という単位で表される。dpiは1インチ当たりにいくつの点(ドット)があるかを表すもので、この値が大きいほど精細な画像を表現する事ができ …

ロックと隠すを利用して効率を上げよう

ロックとカットと隠すを利用して効率を上げる方法 Illustratorで効率をあげる方法があります。それはロックとカットと隠すです。 ロックはcommand+2 カットはcommand+X 隠すはco …

単位画像印刷

Illustratorの単位の設定をきちんとしよう!

スポンサーリンク Illustratorの単位には色々ありますが、これを間違ったまま作業をしている人をたまに見かけます。間違った単位で途中まで作ってしまった場合、位置や揃えまで後々影響が来てしまいます …

no image

ウェイト

書体の文字の太さの事。フォント名にはウェイトを表す言葉が含まれている事も多い。例えば同じ系統のデザインで太さが違うフォントには、基本のフォント名の後に、ライト(L)、レギュラー(R)、ミディアム(M) …

DTP向けレーザープリンター比較

DTP向けレーザープリンター比較 DTP用に使えるレーザープリンターって実は少ないんです。ただ出力すれば良いという方は、普通のレーザープリンターで構わないのですが、色も忠実に再現して、色校正紙の代わり …

スポンサーリンク

2018/04/07

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

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

2018/04/03

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

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

2018/03/30

Illustratorショートカット集

Illustratorショートカット集 Illustratorで必須のショートカットを記しておきます。Illustratorの操作を素早くする事で仕事の効率は倍以上に早くなります。覚え方は実に簡単。そ …

DTP画像

2018/02/22

これだけでデザインが良くなる!字詰めをちゃんとしよう!

さて、タイトル通り今回は字詰めのお話。 以前、デザインで素人がやりがちな事。プロっぽく魅せるコツ。でも軽く触れたのですが、先程ディレクターの方から 「字詰めの仕方を新人に教える本とか持ってない?」 っ …

2018/02/19

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

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

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


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

スポンサーリンク

    スポンサーリンク