Web制作者は絶対チェックしておきたい、デザインやコーディングに取り入れていきたい便利なツールのまとめ
Post on:2016年5月23日
sponsors
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への対応も予定されています。
レスポンシブ対応のレイアウトやエレメントが作成できるOS X用のアプリ。ページのレイアウトだけでなく、インタラクションを備えたプロトタイプ・プレゼンテーションツールとしても利用できます。
レスポンシブ対応の縦長ページが簡単に作成できるオンラインサービス。16種類のレイアウトが用意されており、カスタマイズも簡単で、ブランクも用意されています。作成したページは同ドメインで無料で公開もできます。
iOS, Androidのスマホ用のさまざまなインタラクションをコレクションしているサイト。ローンチしてまだ1ヵ月ほどですが、既にかなりの数が掲載されています。
無料の写真素材、フォント、アイコン、PhotoshopやSketch用の素材、カラーツール、プロトタイピングツールなど、Web制作に役立つ無料のリソースをコレクションしているサイト。
Google, Twitter, Facebook, Amazonなど、スマホアプリのさまざまなジャンルのフローやプロトタイプをコレクション。
Flexboxを使ったさまざまなレイアウトを簡単に作成できるオンラインツール。
1プロジェクトまで無料で利用できます。
テキストや画像、高さ不明のdiv要素などを天地中央・左右中央・天地左右中央に配置するスタイルシートのコードを生成します。コードはインラインスタイルで表示されるので、classを作成してご利用ください。
Twitter, Facebook, Google, Instagramなど、ソーシャルメディアで決められているサイズの画像をオンラインで簡単に作成することができます。
グリッドベースのレイアウトを作成・構築できるiOSアプリ。
スマホやタブレットでWebサイトを制作する時代がくるかもしれませんね。
sponsors
