Web制作者は絶対チェックしておきたい、デザインやコーディングに取り入れていきたい便利なツールのまとめ

Webサイトのデザインやコーディングは、やるべきタスクが年々増えてきました。それらの手間がかかる面倒な事が楽にできるツールやアプリも年々リリースされています。
これからのWeb制作にどんどん取り入れていきたいツールやアプリを紹介します。

最近の特に便利なツールのまとめ

写真: Photo AC

サイトのキャプチャ

Adobe Experience Design(Adobe XD)

Adobe XDはWebサイトやスマホアプリのデザインやプロトタイプを作成するベクターベースのツールで、PhotoshopやIllustratorともスムーズに連携して利用することができます。

以前は「Project Comet」の名称で発表されていた新ツールが、2016年3月に「Adobe Experience Design(Adobe XD)」としてプレビュー版が公開されました。現在はOS X版のみですが、2016年後半にはWindows 10への対応も予定されています。

サイトのキャプチャ

Antetype

レスポンシブ対応のレイアウトやエレメントが作成できるOS X用のアプリ。ページのレイアウトだけでなく、インタラクションを備えたプロトタイプ・プレゼンテーションツールとしても利用できます。

サイトのキャプチャ

Carrd

レスポンシブ対応の縦長ページが簡単に作成できるオンラインサービス。16種類のレイアウトが用意されており、カスタマイズも簡単で、ブランクも用意されています。作成したページは同ドメインで無料で公開もできます。

サイトのキャプチャ

UI Intractions

iOS, Androidのスマホ用のさまざまなインタラクションをコレクションしているサイト。ローンチしてまだ1ヵ月ほどですが、既にかなりの数が掲載されています。

サイトのキャプチャ

Resource Cards

無料の写真素材、フォント、アイコン、PhotoshopやSketch用の素材、カラーツール、プロトタイピングツールなど、Web制作に役立つ無料のリソースをコレクションしているサイト。

サイトのキャプチャ

Inspire By CanvasFlip

Google, Twitter, Facebook, Amazonなど、スマホアプリのさまざまなジャンルのフローやプロトタイプをコレクション。

サイトのキャプチャ

Visual CSS flexbox builder

Flexboxを使ったさまざまなレイアウトを簡単に作成できるオンラインツール。
1プロジェクトまで無料で利用できます。

サイトのキャプチャ

How to Center in CSS

テキストや画像、高さ不明のdiv要素などを天地中央・左右中央・天地左右中央に配置するスタイルシートのコードを生成します。コードはインラインスタイルで表示されるので、classを作成してご利用ください。

サイトのキャプチャ

Landscape

Twitter, Facebook, Google, Instagramなど、ソーシャルメディアで決められているサイズの画像をオンラインで簡単に作成することができます。

サイトのキャプチャ

GRID

グリッドベースのレイアウトを作成・構築できるiOSアプリ。
スマホやタブレットでWebサイトを制作する時代がくるかもしれませんね。

top of page

©2017 coliss