WEBデザイナー講座その② ホームページを作るソフトを知ろう

さて、ホームページの成り立ちについては

前回解説しましたが、「何を使って作るんだと」という話だと思います。

今回は、webデザイナーの大工道具を紹介します。

おおまかに

  • 画像作成ツール
  • プログラミングツール
  • FTPソフト

の3つになります。

各ソフトの使い方については、使用段階まで講座が進んだときに解説をします。

 

俺は、私はデザイナーになるんだ!という方は、

どこの会社に就職しても、使うソフトは「プロ仕様」のソフトなので、

下記にある有料版を手に入れましょう。

趣味程度、とりあえずと言った方は、無料版のものをダウンロードで大丈夫です!

デザイン作成ソフト

デザイン作成ソフトと書きましたが、

画像を作成することが出来れば何でも大丈夫です。

例えば、windowsのPCなら最初から入っている、

「ペイント」でも大丈夫です。

 

このデザイン作成ソフトを用いて「デザインカンプ」と呼ばれる、

ホームページの完成形のデザインを作成することが、

最初の作業になります。

この作成したデザインカンプを基に、プログラムを行う。

といった流れでホームページは作成されます。

 

jpg png gif などがファイルの名前についていると思いますが、

この形式の画像を作成できるソフトであれば、極論ワードでもエクセルでも大丈夫です。

進藤も使用中!プロ仕様なら、アドビソフト「Photo Shop」

webに限らず、クリエイター御用達の定番ソフトです。

写真の修整、文字の入力、画像作成などなど

ホームページを作成する上に置いて、出来ないことはありません。

 

このソフトを使えば、写真中の60歳の人を20歳に若返らせることも

腕次第では可能になる、すごいグラフィックソフトです。

1ピクセル(グラフィックの最小単位)の描写力や制御が

ズバ抜けて優れていて、直感的かつ、簡単に美麗な画像を作成することができます。

 

街で見かけるポスターや、あなたが見ている漫画やアニメ、チラシなどなど、

世に溢れるクリエイティブ作品は、ほぼこのソフトを使って作っていると

言っても過言ではありません。このソフトを使いこなせれば、あなたも立派なデザイナーです。

 

その代わり、こちらは有料で毎月1000円~2000円ほどかかります。

(学生契約、法人契約、個人契約で価格が変わります)

■ アドビ フォトショップ公式ホームページ

https://www.adobe.com/jp/products/photoshop.html

無料でそこそこ使える LibreOffice

当組合の機関紙「ユニプレス」の作成でも使っています。

こちらも、最低限webを作成するソフトが複数収録されています。

無料でこれだけの機能が使えるのは正直スゴイです!

ただ、プロ目線から見ると、絶妙にかゆい所に手が届かない

言った印象を持ちます。

しかし、全然問題なくデザイン作成が最低限度で行えます。

■ リブレオフィス 公式ホームページ

https://ja.libreoffice.org/

プログラミングソフト

htmlや、cssなどのプログラム言語を入力して、

htmlファイルや、cssファイルを作成するソフトを紹介します。

 

とは、言ってもこれも正直windowsの「テキストエディタ」でも問題ありません。

ただ、文字さえ入力出来て、保存したファイルを

htmlやcssに拡張子を変えればいいだけです。

私も、テキストエディタで書いたりもしてます。

 

しかし、膨大なプログラム言語を暗記するのは大変なので、

「コードヒント」と呼ばれるヒントを出してくれるソフトを

使用しながらプログラムを入力をしたほうが、早く作業ができます。

 

最初のうちは、プログラミングソフトの助けを借りながら、

作業を行うことが賢明です。

定番中の定番。アドビソフト「Dreamweaver」

様々なプログラム言語に対応し、入力もササッと出来る優れものです。

また、実際に入力したプログラムが正常に機能しているかを、

リアルタイムで確認しながら作業することもできます。

 

また、サーバーへこのソフトを使って直接データをアップロードすることも

出来て、後述するFTPソフトを使用する手間が要りません。

 

のちのち、皆さんがプログラミング言語を理解した時にわかりますが、

かゆいところに恐ろしいぐらい手が届くソフトです。

これも有料で、毎月1000円~2000円ほどかかります。

■ アドビ ドリームウィーバー 公式サイト

https://www.adobe.com/jp/products/dreamweaver.html

無料なら サクラエディタが無難です

無料ですが、なんのことなく全然使えます。ドリームウィーバーほど多機能ではありませんが、

プログラム構文の入力を助けてくれるサポート機能がついているので、なんなく使えます。日本語なのもわかりやすくてすばらしい。

■ サクラエディタ 公式サイト

https://sakura-editor.github.io/download.html

FTPソフト

FTPソフトとは、出来上がった画像やプログラミングファイルを、

ネット上にあるサーバーにアップロードするソフトの事を言います。

サーバーへのアクセスは基本的にこのFTPソフトを利用して行うことになります。

どのソフトも大した差はないので、無料のソフトで大丈夫です。

無料かつ、定番。プロも使います。FFFTP

日本で一番有名なFTPソフトです。

しかも無料。

これはホームページ制作をする上では必須ソフトなので、

ダウンロードをお願いします。

■ FFFTP公式サイト

https://forest.watch.impress.co.jp/library/software/ffftp/

道具はそろったかい?それじゃ始めようか

さて、次回より早速ソフトを使って…というわけではありません。

ソフトを使う前に、まずは知識を蓄えましょう。

知識がなければ、ソフトを使いこなすことも、どうすればいいのかもわかりません。

 

本講座では、

①デザインの基本講座、②プログラミング講座、③サーバー講座、④応用編、⑤プロのテクニックと言った流れで講座を行っていきます。

千里の道も一歩から、ゆっくりみんなでプロレベルを目指していきましょう。