Late ran ラテラン は、ウェブクリエイターのためのキュレーションマガジン

メニュー
検索

2016/9/29更新

【第二回】webデザインを学ぶ 〜Webデザインの基礎知識・作成前に知っておくべきこと〜

【第二回】Webデザインの基礎知識・作成前に知っておくべきこと!

前回は“webデザイナーとは?”というテーマで仕事内容を簡単にご紹介しました!
今後は、デザイナーがWebサイトを制作し公開するまでの流れを詳しく一緒に学んでいきます!

が、、、その前に。

Webデザインの基礎知識・作成前に知っておくべきこと

ということで、今回はwebデザインを行うにあたって知っておきたいwebの基本についてまずは触れておきます。既に知っているという人も再確認の意味で是非目を通してみてください。

今回の内容はWebデザイナーという仕事をする上で基本中の基本となる内容であり、
仕事中に常に飛び交う用語でもあるので、
初心者からWebデザイナーを目指す方は必見です。
知っておくべき専門用語や、仕事を進める上で使っていくソフトなどの知識をつけていきましょう。

知っておくべき用語集

webページ

「ホームページ」や、単に「ページ」と呼ばれることもあります。HTML(HyperText Markup Language)というコンピューター言語によって記述された文書をインターネットで公開し、webブラウザで閲覧することで表示される画面です。1ページ単位のものを「webページ」と呼ぶことが多いです。HTMLについて詳しく知りたい方はコチラ>>

webサイト

通常webページは1ページだけではなく、複数ページの集合体で公開されています。各ページは相互に「リンク」という仕組みで結びついており、リンクをクリックすることでwebページを移動できます。これらのwebページは階層構造となっていることが多いです。webページ全体を「webサイト」と呼びます。

ランディングページ

上記でwebページは1ページだけではなく複数ページで構成されており、これをwebサイトと呼ぶ、と説明しましたが、例外なのがランディングページ(LP)です。一般的にランディングページ(LP)が指すものは、一つの商品やサービスを売るためのWEBページで、基本的に長い1ページで構成されています。ランディングページを紹介したサイト>>

webブラウザ

インターネットで公開されているwebページを閲覧するために使用するソフトウェアのことを「webブラウザ」といい、単に「ブラウザ」と呼ばれることもあります。webブラウザには様々な種類があり、代表的なものとして「Internet Explorer」「Google Chrome」「Firefox」「Safari」などがあります。webデザインの仕事として構築したwebサイトを様々なブラウザで見たときにもデザイン崩れがなく機能が正常に動くかチェックすることがとても重要です。

閲覧環境

webページはWindowsやMac OSなどのOS搭載された「パソコン」だけでなく、スマートフォンやタブレット、などでも閲覧できます。これらの様々な閲覧環境は「デバイス」「端末」とも呼ばれます。デバイスによってwebページの表示方法が異なるため、こちらの観点からもレイアウト崩れに注意しなければなりません。

レスポンシブデザイン

「レスポンシブデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。つまり、web用とスマホ用など2サイトを別で作らず、1つのサイトをデバイスによってデザインが異なるように構築されたものをいいます。

以上が押さえておくべき用語といったところでしょうか。
では、次にwebサイトをデザインしていく上でどのようなソフトや言語を使って作るのか?
また、どのようにしてPCやスマホでwebサイトが見れるようになっているのか?
その仕組みをご紹介します!!!

HTML

HTMLとはHyper Text Markup Languageの頭文字を取ったものです。修飾したい文字の前後にで始まりで終わる「タグ」という特殊な記述をします。ホームページを表示しているときブラウザ上で右クリックし、「ソース表示」をするとその内容が見れますがそれがHTMLです。通常、インターネット上のホームページのほとんどがこのHTMLという言語で記述されています。

CSS

CSSとは、Cascating Style Sheetsの頭文字をとったものであり、スタイルシートとも呼ばれます。スタイルシートはホームページのデザインや、レイアウトを定義するためのものです。CSSを使うと、HTML上で書いたテキストや背景に色を付けたり、サイズを変えたりしてデザインすることができます。

JavaScript

HTMLにJavaScriptを組み込むと、文字や画像、ページ等に種々の自動的な「バリエーション」「動き」が与えられ、計算や情報の検索も可能な仕組みに変化させることができます。つまりJavaScriptは文字や画像、ページ等を動かす仕掛けを作るものです。このJavaScriptを組み込まれたページはHTMLで作成された「静的ページ」に対し「動的ページ」とも呼ばれます。

Photoshop

写真・画像の編集ソフト。イラストやバナーの作成にも使えるソフト。写真編集の定番ソフトであり、印刷業界からIT業界まで幅広く使われる。最近ではwebサイトのデザインファイルを納品する際にもAdobePhotoshop形式でやり取りされることが多い。写真の修正はもちろんのこと、お絵描きからロゴ作成まで何でも幅広くできる。最近では3Dプリント機能まで付与された。

Illustrator

ベクターイメージを扱えるグラフィックデザインソフト。Photoshopと混同されやすいのですが、Illustratorはベクターイメージをメインで扱えるのが特徴。ベクターイメージは、拡大しても品質が劣化しない画像のことで、具体的にはロゴ制作やアイコン制作などはIllustratorの機能が活かされる。Illustratorでのお絵描きも可能。ペンタブを使わなくてもマウスだけでキレイな曲線が描けるのがメリット。

さて、今回は“Webデザインの基礎知識・作成前に知っておくべきこと”ということで、webデザインを行うにあたって知っておきたいwebの基本について学んでいただきました!
以前よりもWebデザイナーというお仕事について、なんとなくどんなことをやっているのか、イメージできるようになってきたのではないでしょうか?

次回からはいよいよ!
“デザイナーがWebサイトを制作し公開するまでの流れ”に入っていきます!

ではお楽しみに!

Search