EvernoteやDropboxなど、無料でも非常に使い勝手のよいWebサービスは数多く存在します。
そして、そうした便利なWebサービスは、毎日のようにリリースされます。

今回は、Web担当者なら知っておきたい、今年大注目のWebサービスを国内外問わずご紹介します。
ホームページを運用する上で、便利なサービスがたくさんあるので、ぜひチェックしてみてください。

プロトタイピングツール

Webサイトレイアウトを行うときに、PowerPointやIllustratorを使うWeb担当者も多いでしょう。

最近ではワイヤーフレーム(どのサイズ感で何を配置するかの設計図)を作ったり、モックアップ(Webサイトそっくりのサンプル)を作ったりするのに、便利なプロトタイピングツールが多くリリースされています。

1.InVision

01_invision.jpg
InVisionは、Uber社やNETFLIX社も使っているコラボレーションプロトタイピングツールです。
ドラッグ&ドロップで簡単にサイトやアプリのモックアップを作成でき、期限を設定して工程を管理するプロジェクトマネジメント機能やバージョン管理機能も付いているので、とても重宝します。

2.Webflow

02_webflow.jpg
Webflowは、Salesforce社やPinterest社が採用しているプロトタイピングツールです。
静止した(スタティスティックな)モックアップだけでなく、ダイナミックな動きをするサイトのモックアップも作ることができます。作成した動的なモックアップは、HTML5・CSS3・JavaScriptとして出力可能です。

3.HotGloo

03_hotgloo.jpg
HotGlooは、ザックリとプロトタイピングを行いたいWeb担当者にオススメのツールです。
シンプルなUIウィジェットが2000種類以上用意されており、サイトのイメージをわずかな時間で組み立てたい場合に適しています。

4.PowerMockup

04_powermockup.jpg
いきなりプロトタイピングツールを使うのは敷居が高い……という人にオススメなのが、モックアップ用のPowerPointのアドオンであるPowerMockupです。このツールを使えば、あらかじめ用意されているモックアップ用のシェイプを使って、簡単にドラッグ&ドロップでモックアップを作成することができます。

MAシェアと国産MAツールランキングを紹介

資料を無料ダウンロード

Webサイトビルダー

Webに関する知識に自信がない方でも、簡単に廉価あるいは無料でWebサイトを作る方法があることをご存知でしょうか。Webサイトビルダーを使えば、コーディングの知識がなくても、簡単にパーツを組み替えたり、文章を打ち込むだけでWebサイトを作ることができます。

5.Mozello

05_mozello.jpg
Mozelloを使えば、とても簡単にブログオンラインストアなどを作ることができます。サイトのメニューから「Example」に飛ぶと、どのようなWebサイトが作れるのかがよくわかります。もちろんモバイルサイトにも対応しています。サービスは無料で、2016年10月現在、独自ドメインを使ったプレミアムプランでも、わずか7ドルから始められます。

6.Ameba Ownd (アメーバオウンド)

06_amebaownd.jpg
Ameba Owndは、日本発のWebサイトビルダーです。個人ブログやプロダクト紹介、コーポレートサイトやポートフォリオサイトなどを多彩なテンプレートの中から選んで、簡単にサイトを作成することができます。独自ドメインも商用利用も、EC機能の利用もすべて無料でできます。写真のアップロード容量にも制限がありません。さらに、Ameba Ownd自体にソーシャル機能もついており、他のユーザーが作成したOwndをフォローすることで、更新情報を簡単に受け取ったり、気になる情報をリブログすることもできます。

デザイン&コミュニケーション

アイデアを共有したり、ストックすることは、創造的な仕事をする上で必要不可欠です。シームレスに、時間と場所を問わずに共有できるデザイン&コミュニケーションツールをご紹介します。

7.Visme

07_visme.jpg
Vismeは、50ヵ国以上で使われているプレゼンテーションとインフォグラフィックの作成ツールです。Vismeには、すでに100種類以上のフォントと数百万ものフリー写真、何千もの使い勝手のよいアイコンが用意されています。動画や音声を埋め込むこともできるので、印象に残るインフォグラフィックを作成できます。

8.Droplr

08_droplr.jpg
Droplrは、数十秒でできるスクリーンショットの共有ツールです。
動的なビデオとしてスクリーンショットを共有することも、矢印や枠、コメントなどをつけて静止画として共有することも可能で、Web担当者同士のアイデアの交換も、これ一つで完結します。

9.Codepad

09_codepad.jpg
Codepadは、短いコードで実装したパーツ(スニペット)を共有するコードシェアサービスです。
作成したスニペットは「プレイグラウンド」と呼ばれ、自分の関心のあるコードでプレイグラウンドを検索することもできます。

10.Redbooth

10_redbooth.jpg
Redboothは、プロジェクトマネジメントサービスです。ブラウザはもちろん、iOSAndroidにも対応しており、EvernoteやDropbox、Outlookとも連携できます。リモートワークにも重宝するサービスです。

11.Raindrop.io

11_raindropio.jpg
Raindrop.ioは、高機能のオンラインブックマーク管理サービスです。主要ブラウザのエクステンションにも対応しており、簡単に1クリックでブックマークに追加することが可能で、ハッシュタグにも対応しており、あとで見返したいWeb上のアイデアを瞬時に検索することもできます。

プラグイン

少しのコードで簡単に実装できるCSS&JavaScriptプラグインを紹介します。

12.Granim.js

12_granimjs.jpg
Granim.jsは、最近流行しているデュオトーン調のライブグラデーションを実装するJavaScriptのライブラリです。10KB以下と非常に軽量で、APIも公開されています。

13.Wing

13_wing.jpg
Wingは、軽量のCSSフレームワークです。12カラムの960pxリキッドレイアウトにも対応しています。

素材

Web担当者にとって、すぐに使える素材が手に入ると、お金も時間も節約することができます。Web上で手に入る素材の中でも、質の高い素材を提供しているサービスをご紹介します。

14.blugrapic

14_blugraphic.jpg
blugraphicでは、デザインの制作に役立つアイコンやモックアップ素材などが無料でダウンロードできます。フリーフォントもユニークなものがとても多いのが特徴です。すでに、iPhone7のモックアップも公開されています。

15.Colorlib

15_colorlib.jpg
Colorlibでは、無料でダウンロードできるWordPressテーマを配信しています。コーポレートサイトからシンプルなフラットデザインのブログサイトまで、幅広く用意されています。

16.Font Flame

16_fontframe.jpg
Font Frameは、一味違ったフォントの検索サービスです。アクセスするとTinderのような画面が出てきて、「好き(Like)」か「嫌い(Hate)」かを選んで、フォントのストックを増やしていきます。フォントを探す時間のないときに便利です。

17.365cons

17_365con.jpg
365consでは、1日1アイコン、可愛らしいアイコンがアップロードされます。

まとめ

以上です。いかがでしたでしょうか。
Webサイトの制作時間を短縮するものや、アイデアやインスピレーションをストックするものなど、便利なWebサービスをカテゴリ別にご紹介しました。役立ちそうなサービスは積極的に使ってみましょう。