avatar
こんにちわ!
突然ですが、ホームページを作りたいけど、何からしたらいいかわからないので教えろください!
avatar
こんんちわ、本当に突然だね・・・
どんなページを作りたいかは決まってるの?
avatar
全然決まってない!
とりあえず自己紹介できるホームページが作りたい!
avatar
自己紹介できるホームページ・・・
それならポートフォリオサイトだね!
avatar
ポートフォリオ?なにそれ!
avatar
自分の紹介や、作品の紹介ができるホームページのジャンルみたいなものだよ。
avatar
ならそれにする!
avatar
そうと決まれば、まずはホームページを作るために必要な物をそろえよう!

準備するもの

まずホームページ制作をするのに必要な物を集めましょう。

エディッタ(EDITOR)

HTMLやCSS等を書くときに使うツール 。
HTMLエディタと呼ばれ、HTML形式に対応したテキストエディタで、通常のメモ帳等にくらべたらタグを見やすくしてくれたり、入力補助をしてもらえるソフトです。つまりは簡単にコードが書けるソフトで、必須ではありませんがあるとすごく便利です。なれるとメモ帳だけでも書くことは可能です。

有料ソフト

Adobe Dreamweaver

Adobe社から出ている、Adobe Dreamweaver(アドビ ドリームウィーバー)です。 有名すぎてみんなが知っているソフトだと思います。とにかく全ての機能が詰まっており、困ったところがほとんど見当たらないのが現状です。しかし、有料ソフトで費用がけっこうかかります。

Adobe Dreamweaver ページへ

Adobe

無料ソフト

Brackets

Adobe社から出ている、Bracketsです。こちらはオープンソースのため、「無料」で使用することが可能なソフトです。インストールしてすぐにライブプレビューに対応していたり、ハイライト機能やRubyやPythonなどの他言語もサポートしているため、使い勝手は良いソフトだと思います。大きな欠点としては、ソフトの読み方が未だに固定されていないことだと思います。

Brackets

Adobe

Visual Studio Code

Microsoft社から出ている、 Visual Studio Code です。こちらはオープンソースのため、「 無料 」で使用することが可能なソフトです。 2015年にプレビュー版として提供を開始され、比較的歴史の浅いソフトになります。しかし、このソフトを愛用している人は多いのでないでしょうか。企業でコーディングをする場合はこのソフトを触っておけば大丈夫とまで言われています。プラグインで追加できるものが多く、ショートコードも使えるのが利点だと思います。私も愛用して使用しています。欠点はアップデートが行われるたびに日本語化が解除されることではないでしょうか。

Visual Studio Code

Microsoft

avatar
まだまだ沢山ありますが、とりあえずこの3点だけご紹介をいたします。また別でエディタ紹介ができればそちらで沢山紹介予定です。

画像加工・編集ソフト

ホームページ制作でエディタの次に必要になるのが、画像加工・編集ソフトです。以下でも紹介しますが、代表的なものでAdobe社の「Photoshop」「Illustrator」がありますが、やってみようと思っている段階で購入する価格ではない気がします。

有料ソフト

Adobe Photoshop

Adobe社から出ている、Adobe Photoshop(アドビ フォトショップ)です。 これがフォトショです、フォトショ。 Photoshopは画像編集・加工ソフトとして特化しているソフトになりますが、イラストでも使用されることが多いです。ご存知の通り有料ソフトで費用がけっこうかかります。

Adobe Photoshop ページへ

Adobe

Adobe Illustrator

Adobe社から出ている、Adobe Illustrator(アドビ イラストレーター)です。 こっちはイラレです、そうよく聞くイラレです。Illustratorは画像作成ソフトとしてよく使用されます。ベジェ曲線という線を利用することにより、ギザギザしたものではなくきれいな曲線を作成することができます。ご存知の通り有料ソフトで費用がけっこうかかります。

Adobe Illustrator ページへ

Adobe

無料ソフト

Adobe PHOTOSHOP EXPRESS EDITOR

Adobe社から出ている、Adobe PHOTOSHOP EXPRESS EDITORです。無料版Photoshopと思っていただいて間違いないと思います。切り抜きや各種補正などの基本的な画像編集機能を揃えた高機能となっております。しかし無料版のため、有料版Photoshopと比べるとできることは狭まっています。

PHOTOSHOP EXPRESS EDITOR ページへ

Adobe

Fotor

Everimaging社から出ている、Fotorです。手軽に画像加工ができるサービスです。無料で使えるベーシックの他に、アップグレード版のPROがありますが、無料でも加工、エフェクト、美肌、素材使用などの機能を使用することがかのうです。Fotorは毎月アップデートが行われており、とても沢山のコンテンツに対応したスタンプやフレーム、テンプレートなどの素材をしようすることができます。上記にも紹介しましたように、無料版と有料版があるので注意してください。

Fotor ページへ

Everimaging

GIMP

The GIMP Teamが開発している、GIMPです。オープンソースで開発・配布されている画像加工ソフトです。オープンソースのため無料で利用がかのうですが、有料のソフトと比べても劣ることがない性能をもっています。パスやレイヤーもPhotoshopやIllustratorと同等に使うことができます。Photoshopのプラグインが使用でき、ブラシ等を自作することも可能です。イラストで使う方も昔からおおいイメージです。

GIMP ページへ

The GIMP Team

avatar
こちらもまだまだソフトがありますが、紹介は以上となります。また別途紹介ができそうでしたらもっと沢山紹介をいたします。
avatar
で、どれを選べばいいの?
avatar
エディタ: Visual Studio Code
画像: Adobe PHOTOSHOP EXPRESS EDITOR
個人的にはこれがあれば問題ないと思います。私個人では画像加工系はPhotoshopとIllustratorを使っています。
ここでは紹介していませんが、今ではホームページデサインはAdobe XDを使用しています。
avatar
わかった!
じゃあ準備するから、準備したらまた声をかけるね!
avatar
ソフトとは長い付き合いになりますので自分にあったものを使うのが一番です。
色々とためしてみてください。
avatar
次回は実際にコードを書き込んでみたいと思います!

お見積・お問い合わせ

お気軽にご相談・お問い合わせください。

お問い合わせ

K2De-sign