【初心者が学ぶ】Webページをつくるなら特化したテキストエディタを使おう。

Learn HTML by yourself

Webページで表示されている映像の元データは、テキストで構成されています。文字を入力するエディタさえあれば、Webページは誰でも簡単に作成することができます。

Windows;メモ帳

Mac;テキストエディット

OSに搭載されている標準テキストエディタでも作成できます。

Webページをつくるなら特化したテキストエディタを使おう

エディタは、OSに標準搭載されているとお伝えしましたが、Webに特化したエディタを利用することをおすすめします。なぜなら、標準搭載されているテキストエディタでは満足がいくには、オプションが欲しいと思うからです。

 

 

コーディング専用エディタ

代表的なテキストエディタはさまざまあります。共通している機能は、HTMLやCSSのコードを作成していくと、コードヒントと呼ばれる関連する情報が表示されたりします。また、間違ったコードを書いてしまうとミスを指摘してくれる機能があります。

Sublimetext

Sublime Text - A sophisticated text editor for code, markup and prose
Sublime Text is a sophisticated text editor for code, markup and prose. You'll love the slick user interface, extraordinary features and amazing performance.

Atom

A hackable text editor for the 21st Century
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We c...

Brackets

A modern, open source code editor that understands web design
Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With ne...

Visual Studio Code

Visual Studio Code – コード エディター | Microsoft Azure
ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

プラグイン(拡張機能)を導入することで、自分好みにカスタマイズしていくこともできます。

これらは、無料でインストールすることができるのでぜひ試してみてください。

Webサイトに使用される画像には4つの形式がある

Webサイトの魅力を高めるためには画像が大切です。画像は様々な形式があり、用途によって使い分けることができます。また、画像を加工したり、作成したりするアプリケーションを使い編集することができます。

画像ファイル形式一覧

ファイル形式 色数 透明 用途
 PNG  256色フルカラー  通常の画像
 JPG  フルカラー ×  写真
 SVG  フルカラー  ロゴマーク・イラスト
 GIF  256色  色数の少ない画像

コンピュータで扱う画像の種類は、2種類に大きくわかれます。

ビットマップ;色のついたドットの集合体

ベクター;点の座標とそれを結ぶ線の数値データから成立つ

その中で、画像ファイルにはいくつかの形式があり、代表的なものが上記一覧の4種類です。

PNG形式(ピットマップ)

一番よく利用されているのがPNG形式の画像です。

PNG形式は3種類に分別されます。

ファイル形式 色数 透明 用途
 PNG-8  256色  部分的に透明 軽い
 PNG-24  フルカラー ×  フルカラー写真 重い
 PNG-32  フルカラー  半透明 重い

PNGは色数の少ないイラストから、半透明のグラフィックまで対応した画像形式です。

例)左;原本 / 右;一部半透明

 

 

 

 

JPG形式(ビットマップ)

デジタルカメラやスマートフォンで撮影した画像がJPG形式です。色数が多いため、グラデーションを使用した画像などに利用されます。JPG形式は、画像を圧縮してファイルサイズをおさえられる特徴がありますが、一度画像を圧縮してしまうと画質を元に戻すことはできません。画像を圧縮する際には、元データをバックアップしておくことが必要です。

GIF形式(ビットマップ)

以前のWebサイトは、JPG形式とかわらず使われてきましたが、複雑なグラフィックが苦手とします。ですが、ファイルサイズの軽さが特徴で、イラストや単調な画像、色数の少ない画像に使われるようになりました。

例えば、複数のGIF形式の画像を一つのファイルに格納します。パラパラ漫画のような「GIFアニメ」をつくることもできます。

SVG形式(ベクター)

フルカラーの色数を使えるベクター形式の画像フォーマットです。XMLで作成される画像形式でテキストエディタでも編集が可能です。Illusteatorなどのグラフィックアプリケーションで作成して、SVG形式に書き出します。

Illustratorを無料でお試し | Adobe Illustrator完全版のダウンロード
Adobe Illustrator完全版を無料でダウンロードできます。印刷、web、インタラクティブ、ビデオ、モバイル向けにロゴからアイコン、スケッチ、タイポグラフィ、複雑なイラストレーションまで作成。まずは無料体験。

ベクター形式は画質が劣化することがないのが特徴で、データサイズも軽いです。一つのファイルでいろいろな環境に対応することができるようになります。

企業のロゴマークやブランドマークなどに適しています。

画像を加工するアプリケーション

Web用の画像を作成するアプリケーションの代表的なものといえば、Adobeです。グラフィック作成ソフトの定番中の定番です。もちろんAdobe以外の製品も多数に開発されており、高いものから無料のものまであるので、試してみるのも良いでしょう。ここからは人気のアプリケーションをご紹介します。

Adobe Photoshop

定番のグラフィックアプリケーションです。2019年バージョンはPhotoshop CCです。

扱う画像はビットマップが中心ですが、幅広くファイルの編集や書き出し、SVG形式の作成も行うことができます。

Adobe Illustrator

Photoshopと並ぶ定番のグラフィックアプリケーションです。

Illustratorは、ベクター形式を主に扱います。ドットを描いていくビットマップ画像とは違い、パスと呼ばれる点と点をしていしてその中間を計算して線をひくという使い方をします。ロゴ制作やイラスト作成向きです。

Adobe XD

PhotoshopやIllustratorよりもWebサイト作成やアプリ画面作成に特化しています。Webサイトは、デザインだけでなくUI(ユーザインタフェース)やUX(ユーザーエクスペリエンス)といった、画面の操作設計やユーザが操作する際の使い勝手を考えていかなければなりません。

このAdobe XDは、特にモバイルサイト用の画面設計を得意とします。

Sketch(Macのみ対応)

Bohemian Coding社が開発・販売しているSketchは、Adobe XDの競合とも言われているアプリケーションです。Macのみの対応で、UIやUXを設計するWebデザイナーには人気を集めています。

ここまでのまとめ

Webのデザインを作成する時には、グラフィックアプリケーションでページのレイアウトを決めておくパターンがあります。これを「デザインカンプ」と呼んでいます。デザインカンプは出来上がりの見本のようなもので、Webページの全体をHTMLで作る前の段階です。クライアントに見てもらうときなどに利用します。

以前は、Photoshopでデザインカンプを作成していましたが、最近はIllustratorでデザインカンプを作成することも多くなってきているそうです。

コメント