厳選:無料で使える4つのWebデザインツール


みなさん、こんにちは。最近、Wordpressがお気に入りのfabo伊藤です。

普段、私がWeb制作に使っているツールを紹介します。

ノミネートのポイントは4つ

  • 無料で使えること(上級版にアップグレードでお金払うのはOK)
  • PCとネットとブラウザだけで利用できる(要するにクラウドサービス)
  • プロツールと遜色ない機能でありながら使いやすいというワガママに対応
  • 英語メニューでも気にしない(変な日本語よりも直感で使えるインターフェースが大事)

今日は上位4つのWebサイトを紹介します。

1.PhotoShopもびっくり、iPiccy(アイピッキー)
2.Illustratorより(私は)使いやすい Sumo Paint
3.HTMLエディタはこれでいいかも KE Editor
4.少しマニアックだけど、イメージマップはこれで作れちゃう HTML-Map

へぇこんなサイトあるんだ程度でご覧ください。

 

1.PhotoShopもびっくり、「iPiccy」(アイピッキー)
http://ipiccy.com/


写真の加工はこのサイトでほぼ全て対応できます。
しかも動きがサクサクしていて嬉しいです。
個人的にはお金払いたいぐらい使っています。

このサイトでやれること。

ipiccyでできること

・写真の切り抜き、サイズ変更、色味調整などは当たり前
・顔写真でまつげをはっきり、歯を白く、小じわ消したりと個別メニューでさくっと詐称
・少しIllustratorちっくなレイヤーごとの画像編集メニューがありますが、それは次にご紹介するSumo Paintの方がオススメです。

最近はスマートフォンで加工するアプリも充実してますが、PCで編集するときはiPiccyに頼りきりです。

会員登録などしなくても、すぐ利用できて、しかも自分の作業中のファイルも保持してくれてと利用者視点のサービスです。

 

2.Illustratorより(私は)使いやすい Sumo Paint
https://www.sumo.fm/#create

→日本語対応ありでパワーアップしておりました。 (2013年2月4日 更新)
http://www.sumopaint.com/app/
 
 日本語対応は左上の国旗のマークから選択できます。iPhoneアプリもあるみたいですね。

スモーペイント
海外のサイトですが、どうやら相撲(sumo)がお好きなようです。

 

このような人の写真をずばっと切り抜いてこんなバナーを作ったりします。

複数のレイヤーをつかって編集していけるので便利です。
Illustratorのペンツールでベジェ曲線を書くことはできませんが、ワタクシそんな
高度なことは元々できないので、構いません。

 

3.HTMLエディタはこれでいいかも CK Editor
http://ckeditor.com/demo

ブログなどの書き込み(管理)画面には、フォントを太字にしたり、ちょっと知識があるひとは直接HTMLタグを編集したりできますよね。
でも、このエディターが使いづらいとか、表(テーブル)をもうちょっと複雑にツール
で書いたりしたいけど、できない・・・などのケースがありませんか?

そんな時はこのサイトで、画面見ながら編集して、HTMLタグ(ソース)をコピーして
使えばいいのです。かなり高度な機能がこれまた無料で使えます。
※ダウンロードしても使えるようですが、デモURLで十分です。

これが編集画面です。

表作成の画面ではなぜか日本語化

これはソースといわれるHTMLタグで、ブラウザで見える状態と切替ができます。

とにかく、PCにホームページ・◯ルダーとか、編集ソフトが入っていなくても、いつでもどこでも使えるので便利です。

 

4.少しマニアックだけど、イメージマップはこれで作れちゃう
http://www.html-map.com/

イメージマップというのはクリッカブル・マップとも言われ、一枚の画像の中で
クリックする(リンクを貼る)場所が複数作れるWebの表現方法なのです。

「データで考える力」イニシアティブのWebのサイドバナーではこのバナーを使っています。

 

最近は流行りじゃないかも知れないですし、利用頻度は多くないですが、いざ使いたい時はツールがほしくなります。

しかし、この機能を使うためだけでホーム◯ージ・ビルダーやAdobe Drea◯weaverのような高機能ツールを用意するのはもったいないです。

それがブラウザだけでサクサク作れちゃうのは非常にありがたい。

作業も、イメージファイルを指定して、リンクのエリアを指定して、HTML/CSSファイルを出力するだけ・・・簡単です。

 

本当のWebデザインのプロの方には不十分かも知れませんが、日曜大工のようにDIYの精神で(自分で)Web作成を頑張る人には、ブラウザだけで作業できるこれらのツールは非常に助かります。

 

「ブラウザで動くツール使っているよ〜」というのがありましたら教えて下さい。よろしくお願いします。