Webデザインに絶対に役立つツール6選

こんにちは、web デザインを作る際、悩まれた経験はあるのではないでしょうか!?今回はWeb デザインを作る際に役立つツールを紹介してます。

1.0to255

http://0to255.com/

利用料金:無料

カラーを選択したい際に便利な、カラーチャートツールです。コード表をみて微調整をしたり、少し色を変更するためだけにPhotoshopを起動して色を変更する手間を省くことができます。カラーを選択するだけで、明るい色から濃い色までのカラーコードが表示されますので、色の微調整などを行う際に活用できて便利です。

パソコンにインストールしているフォントを、ブラウザ上で一覧表示してくれるツールです。「Load more」をクリックすると、すべてのフォントが読み込まれます。スクロールしているだけでフォントを見比べることができますので、フォントを選択する際に非常に便利です。複数のフォントを比較する際は、フィルタリング機能を使うことをオススメします。英語対応のサービスですが、テキストは日本語入力できますので、単語や文章などを画面上部中央のボックスに入力して最適なフォント選択に活用してください。

2.wordmark.it

http://wordmark.it/

利用料金:無料

パソコンにインストールしているフォントを、ブラウザ上で一覧表示してくれるツールです。「Load more」をクリックすると、すべてのフォントが読み込まれます。スクロールしているだけでフォントを見比べることができますので、フォントを選択する際に非常に便利です。
複数のフォントを比較する際は、フィルタリング機能を使うことをオススメします。英語対応のサービスですが、テキストは日本語入力できますので、単語や文章などを画面上部中央のボックスに入力して最適なフォント選択に活用してください。

利用料金:無料

3.Cocoapotrace

http://www.geocities.jp/applescriptdepot/iWeb/AppleScriptDepot/

画像をドラッグ&ドロップするだけで、モノクロのベクター画像へ変換してくれるサービスです。変換した画像を画面左側の枠にドロップすると、右側のボックスに変換後のプレビューが表示されます。プレビューがあまり気に入らなかった場合は、枠下の各パラメーターの値を調節して。
アップデートボタンをクリックすると、プレビューが更新されます。カラー情報は吐きされてしまうので、使用の際は少し注意が必要です。

利用料金:無料

4.webflow

https://webflow.com/

利用料金:$84〜/月、無料トライアルあり

短時間で高いクオリティのホームページを作成することができるサービスです。特に、デザインは得意だけれどプログラミングが苦手というデザイナーの方にオススメです。直感的にデザインをすることができ、作成したものはファイル出力またはホームページとして公開することができます。より細かい微調整を行う場合は個別のプログラミング編集が必要になりますが、ほとんどの作業をこのサービスで完了させることができます。

5.Placehold.jp

https://placehold.jp/2.

利用料金:無料

ダミー画像を瞬時に生成することができるサービスです。ホームページを制作する際には必ずと言っていいほどタミー画像が必要になります。使い方もシンプルで、placehold.itというドメインのあろにサイズを指定するだけで完了です。例えば、1136×852pxのダミー画像が欲しい場合は「http://placehold.it/1136×852」というURLにアクセスすれば指定したサイズの画像が表示されます。ドメイン、サイズ、カラーコードの順にURLを書けば、カラー指定したダミー画像を生成することもできます。

6.Google Web Designer

http://www.google.co.jp/webdesigner/

利用料金:無料

ウェブコンテンツを簡単に作成できるサービスです。グラフィックツールとタイムラインでアニメーションを作成すると、プラットフォームを問わずに動くHTML5、CSS3、JavaScriptを出力してくれます。直感的に操作できますので、誰でも簡単に使用することができます。
このツールを使用すれば、Flashを使用しなくてもアニメーションバナーなどを作成することができますので、今後より必要となってくるツールです。

今回は、Web デザインに役立つツールを紹介させて頂きました。是非参考にしてみてください。