Wixホームページ制作で使える便利ツールやChromeアドオン紹介
TLWorksではホームページ制作ツールWixを使い、様々な企業や店舗のホームページ制作を承っております。
今回は、実際にWixを使いご自身でホームページを制作してみよう！という方や、これからホームページ制作を仕事にしていこう！と考えられている方向けに、普段TLWorksがホームぺージ制作の際に使用しているWix以外の外部ツールをご紹介したいと思います。
ベテランのウェブデザイナーの方には基礎的なツールばかりかと思いますが、ウェブ制作初心者の方に参考になれば嬉しいです。
■インストール型ツール（有料） ・Adobe Photoshop ・Adobe illustrator ・Wondershare Filmora
■Webブラウザツール（無料） ・Tinypng ・Bulk Resize ・Google翻訳
■Chromeアドオン（無料） ・ColorPick Eyedropper ・Page Ruler ・What Font
■SNS関連ツール（無料） ・Twitter Publish ・Insta Widget
【インストール型ツール（有料）】 ①画像加工やgifアニメ作成などデザイナーの基礎ツール『Adobe Photoshop』
Adobe（アドビ）が提供している画像加工ツールです。画像加工の定番ツールとして世界中のクリエイターに使用されているツールで、TLWorksでも人物や物を切り抜いたり、明るさや色を調整する画像加工、切り抜き、画像合成、gifアニメ作成などで使用しています。
http://www.adobe.com/jp/products/photoshop.html
②ロゴやアイコン作成など業界標準のベクターグラフィックツール『Adobe illustrator』
こちらもAdobe（アドビ）が提供しているツールです。ベクターベースなので、モバイルの画面に収まるように縮小したり、広告用に拡大したりできます。サイズを変更しても、その鮮やかさと美しさが損なわれることはありません。 TLWorksでは主に企業や店舗のロゴ作成の際に使用しています。
http://www.adobe.com/jp/products/illustrator.html
③豊富なフィルターやエフェクトがあり素早い動画編集が可能な『Wondershare Filmora』
Wondershare Technologyが提供する初心者から中級者向けの動画編集ソフトです。 ピクチャー・イン・ピクチャー(PIP)、高度テキスト編集機能、クロマキー合成、画面録画など、直感的な操作で簡単編集出来る点がWixと通じる部分があります。 TLWorksではホームページの背景動画の編集や、紹介動画やPVのテロップ付け、制作事例紹介動画などでFilmoraを活用しています。
https://filmora.wondershare.jp/
【Webブラウザツール（無料）】 ①画質を落とさず画像ファイルを軽量化『Tinypng』
SEO対策を意識したWIXブログ更新方法をお伝えした以前の記事でも紹介しましたが、画質を落とさずファイルサイズを軽く出来るTinypngは、ほぼ全ての画像をWixにアップロードする前に使用しています。無料で5MB以下で20ファイルを一気に圧縮できます。
②多くの画像を一括リサイズ『Bulk Resize』
こちらもTinypngと同様、画像ファイルをページにドラッグ＆ドロップするだけで簡単にリサイズできるブラウザツールです。例えばホームページ制作の事前取材で、デジカメやスマホで撮影したり、クライアントが撮影した画像を頂いたり、画像サイズがバラバラなので、一括でホームページに適切なサイズにリサイズ出来ます。
③英語表記の綴り確認『Google翻訳』
翻訳ツールはホームページ制作に関係ある？と思うかもしれませんが、最近の傾向としてお洒落なデザインにする為、メニューや目次、キャッチフレーズなどを、あえて英語表記にする傾向があります。そこで綴りが間違ってしまってはいけないので、Google翻訳で綴りチェックを行います。
https://translate.google.co.jp/
【Chromeアドオン（無料）】
次にChromeアドオンのツールをご紹介しますが、大前提としてTLWorksはメインのWebブラウザにGoogle Chromeを使用しています。以前の記事でも紹介しましたが、仕事の基本ツールとしてG Suiteを使用しているので、同じGoogleなのでG Suiteと相性が凄く良いからです。また、キーボードのF12キーを押すと使える『Chromeデベロッパー・ツール』もかなり便利です。 IE、Edge、Firfox、Safariなどの他ブラウザは、あくまでホームページの動作チェックなどでのみ使用しています。
https://www.google.co.jp/chrome/browser/desktop/index.html
①参考カラーなどカラーコードを楽々チェック『ColorPick Eyedropper』
ブラウザ上の全て色のカラーコードをすぐさま判定して教えてくれる便利なツールです。ロゴの色合いからホームページの色合いを決める場合や、クライアントから参考サイトの色合いなどの指定があった際や、他サイトで使っている色のカラーコードが気になる場合などで活躍します。生まれつき色弱のTLWorksにはホームページ制作の必須ツールです。
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg
②間隔のサイズ測定や画像のサイズ測定『Page Ruler』
使用頻度は低いのですが、最近はパーツ毎にすご～く広い間隔を取ったデザインが流行ってきており、クライアントから指定のあった参考サイトなどで、どの程度スペースを取っているのかや、画像サイズなどを測る際に使用します。
https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn
③クリックするだけでフォントが分かる『What Font』
ホームページ制作で重要な要素であるテキストのフォントを、クリックするだけで教えてくれる便利なツールです。クライアントから指定のあった参考サイトや、ニュアンスやデザインイメージが参考となるサイトがあれば、フォントは何を使っているんだろう？とチェックする際に使用します。あいにくWixは日本語フォントが少ないので、どうしてもこだわった日本語フォントを使いたい場合は該当のフォントをPCにインストールしてから、Photoshopで画像を用意して使用します。
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
【SNS関連ツール（無料）】 ホームページに主要SNSを連携させるのは、今やホームページ制作の常識となっており、TLWorksでもWixアプリの『Facebook Feed』『Instagram Feed』などを活用する事が多くなってきました。今回はWixアプリには無い下記2つのウィジェット作成ツールを紹介します。
①Twitterの最新フィード表示ウィジェット『Twitter Publish』
Twitterの最新フィードをホームページに埋め込む際に使用します。表示させたいTwitterのページURLを入力するだけで作成でき、Wixサイトへはhtmlパーツを追加し、その中にコードをコピーして使用します。
②Instagramの最新フィード表示ウィジェット『Insta Widget』
Instagramの最新フィードをホームページに埋め込む際に使用します。表示させたいTwitterのページURLを入力するだけで作成でき、Wixサイトへはhtmlパーツを追加し、その中にコードをコピーして使用します。ウィジェットのサイズや表示する投稿数などもカスタマイズ出来ます。 TLWorksでは、Wixアプリの『Instagram Feed』とこの『Insta Widget』をホームページのデザインによって使い分けています。
【Wixの事ならお任せ！格安でWixのホームページ制作代行・サポートします！】
以前の記事でも紹介しましたが、TLWorksではホームページ制作にWix.comを使用する事を推奨しています。
新たにホームページを立ち上げたい方、リニューアルを検討中の方、またご自身でリニューアルを行ったがサポートが必要な方などお気軽にご相談ください。
デザインのサポートから、SEO設定のサポート、ドメイン接続のサポートなど、ご要望に合わせて柔軟に対応させていただきます。 Wixの事でお悩みの方は問い合わせフォームから、お気軽にご相談いただければと思います。
