ローディング中

HP作成で活用したいフリーソフトを集めてみました。

目次

HP作成はフリーソフトで十分!

ipad-820272_640

最近風邪気味で喉がガラガラのマンノです。

季節の変わり目は高確率で体調を崩します。

医療費も無料になれば良いのにって、って体弱い人間は常々思います。

さて、今回はHP作成におけるソフトのご紹介。

HP作成を行っている会社って

Adobeとかアドビとかの高いソフト使ってるんでしょう?

何て思っていませんか?

使ってます!

でもHP作成において必ずしも、高いソフトが必要というわけではありません。

実際に現場でもフリーソフトというのはバリバリ使います。

コーディングに置いてはフリーソフトしか使いませんし、

Adobeの製品よりも使い勝手やクオリティも高いと感じるものも少なくありません。

そこで今回はHP作成をフリーソフトでやっちゃおう!って事で、

HP作成に使えるフリーソフトのご紹介です。

フリーソフトでコーディング!

HP作成を行う上で、必要な工程としては、

  • コーディング
  • 画像素材の作成
  • アップロード

が思い浮かびます。

今回はフリーソフトの紹介ですので、

  • 画像をどこから集めてくるんだ。
  • コーディングをどうやって覚えるんだ。

ってあたりは無視します。

まずは、HP作成のコーディングをしっかりできるフリーソフトのご紹介。

Aptana studio3

aptana_logo

Aptana

Adobeのオーサリングソフト「Dreamweaver」と比較される事の多いApatana Studio。

コードの補完や構文のハイライト機能など、HP作成を行う上で便利な機能が搭載されており、

フリーソフトとは思えないほどの高機能です。

またHP作成で必要となる、FTP機能も搭載されいるため、

後述するFTPソフトも導入する必要がありません。

またRubyの開発でも使われる事も度々あるため、

言語に合わせてHP作成ソフトを揃える必要もなく、

長い間使えるフリーソフトと言えるでしょう。

ATOM

atom-mark1200x630

ATOM

弊社でHP作成を行う際に、フル活用しているフリーソフト「ATOM」

GITが開発したフリーソフトで、

コーディングに便利な機能や、GITとの連携が最高にクールなフリーソフトです。

後述するSublime textと比べると若干の重さはありますが、

GITとの連携という部分から、私はATOMをメインに使用しています。

パッケージも多く用意されており、コード補完やハイライト、ターミナルの導入など、

HP作成におけるあらゆる事が、ATOM一つで完結させる事ができるのが特徴です。

Sublime text

6f807828-9988-037c-a3e1-9fff651f6b6c

Sublime text

上述したフリーソフトATOMと、思想的には同じテキストエディターですが、

ATOMに比べて動作も快適で、パッケージも多く用意されているため。

とても多くの方に愛されているフリーソフトです。

ATOMもそうですが、BrowserSyncやemmet livestyleなどを導入する事で、

Dreamweaverのように、リアルタイムでコーディング結果を反映させながら

HP作成を行っていく事ができるため、

高いソフトを購入しなくても、Dreamweaverに負けず劣らずのHP作成を行う事ができます。

XAMPP

131002

XAMPP

HP作成を行う際、PHPなども使用する機会が多くあります。

PHPの開発を行う際は開発環境というのを構築しなければなりません。

そこで便利なフリーソフトがこの「XAMPP」

PHPの開発環境として最も人気のあるフリーソフトです。

これからHP作成を行っていこうという方には、必要ないかもしれませんが。

必要になった時のために、名前だけでも覚えておくといいでしょう。

Wocker

ogp-image

wocker

wordpressのテーマ開発にとても便利で、爆速のWockerも最後に紹介しておきます。

  • WordPressでHP作成を行いたい
  • テーマを自作したい

そう思った時に、Wordpressの開発環境が必要となってきますが、

その開発環境を爆速で構築できるのがWockerです。

とにかく、スピードが早く便利なので、

私もWordpress案件の場合は必ず使うほどのヘビーユーザーです。

フリーソフトで画像編集!

コーディングの次にHP作成で重要なのが、画像編集です。

これもフリーソフトでやってしまいましょう!

デザイナーにとっては、画像編集が腕の見せ所でもあります。

フリーソフトでも、HP作成で使える画像編集ソフトもありますので、

フリーソフトで完結させたいデザイナーさんもご安心ください。

Pixlr Editor

pixlr_editor_logo-5a84cc9e679c2611fe4b08c1cd83ffbc

Pixlr Editor

オンライン上で画像ができる画像編集ソフトのPixlr Editor。

会員登録なども不要で、本当にフリーで使えてしまう嬉しいソフトです。

HP作成でコーディング中にちょちょっと画像編集などを行いたい時に重宝するフリーソフトです。

GIMP

mon

GIMP

Photoshopは高くて買えない、でもPhotoshop的なフリーソフトはないかしら。

そんな人に大人気なのが、GIMP。

日本でも多くの関連書籍が販売されているほど大人気の画像編集ソフトです。

HP作成に置いてバナー作成や写真の加工など、

そういった作業がこのGIMPで簡単に行えてしまう上、

Photoshopにも負けないハイクオリティな加工なども行えます。

Photoshopを購入前にフリーソフトのGIMPを使ってみるのもありかもしれませんね。

フリーソフトでアップロード!

HP作成が完了した後、サーバーにアップロードする必要があります。

今回は簡単かつ無料で使える、FTPソフトをご紹介します。

フリーソフトだからといって、全部インストールする必要はないのですが、

いろいろ使ってみて、使いやすい相棒を見つけてくださいね。

FFFTP

FFFTP

Windows用のFTPクライアントの中でもダントツで有名なフリーソフトです。

シンプルかつ、必要な機能は全て入っているため、

Windowsであればこれだけインストールしていれば問題ないほど使い勝手のいいフリーソフトです。

Cyberduck

cyberduck-icon-384

Cyberduck

WindowsのFTPクライアントがFFFTPなら、

MacはこのCyberduck、定番としてあげられます。

FFFTP同様すっきりとした見た目ですが、必要な機能もしっかりと導入されているため。

初心者からヘビーユーザーまで幅広く使っていただけるフリーソフトです。

FileZilla

2000px-filezilla_logo-svg

FileZilla

Windows/macともに使えるFTPクライアントのFileZilla。

フリーソフトとは思えないほどの高機能クライアントです。

上述の2つとは違い、多機能で画面上にも多くの情報が記されているため、

初めて使う方は戸惑ってしまうかもしれませんが、

慣れてしまえば手放せなくなるほどの高機能なフリーソフトです。

HP作成はフリーソフトだけで完結できる

yuuki150321020i9a4366_tp_v

お金をかけなくても、HP作成ができるように、

フリーソフトが進化を続けています。

本日ご紹介したフリーソフトだけで、十分かっこいいHP作成は行えます。

実際私たちも業務で使用しているフリーソフトも、包み隠さずご紹介させていただきました。

是非、HP作成を自身の手でしてみたい!って方は、

今日紹介したフリーソフトを使ってみてくださいね!

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.