高倉組長

 芸能界で錬金術師になるクリエイターの為のデジタル媚薬

web

Web制作者は絶対チェックしておきたい便利なツール

Webサイトのデザインやコーディングは、やるべきタスクが年々増えてきた。

それらの手間がかかる面倒な事が楽にできるツールやアプリも年々リリースされている。
これからのWeb制作にどんどん取り入れていきたいツールやアプリをまとめた

 

引用元
coliss.com

 

サイトのキャプチャ

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サイトを制作する時代がくるかもしれない。

-web