TechAcademy（テックアカデミー） WordPressコース Webデザイン WordPress WP SlimStatの使い方ーWordPressプラグイン【初心者向け】
オーダーメイドコース
icon
icon
WordPress

WP SlimStatの使い方ーWordPressプラグイン【初心者向け】

WordPressのアクセス解析に便利なプラグインの1つである【WP SlimStat】の使い方を初心者向けに解説した記事です。Googleなどのクローラーのアクセスを除外する設定方法も紹介しています。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

WordPressのプラグインの使い方を紹介する記事です。

今回は、WordPressのアクセス解析に便利なプラグインの1つである、WP SlimStatの使い方を紹介します。

 

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

田島メンター！！WordPressへのサイトのアクセス状況を見たいんですけど、良いプラグインないですか？

田島悠介

それなら「SlimStat」なんてどうかな〜？リアルタイムでアクセス状況を確認できるよ！

大石ゆかり

え、そうなんですか？使ってみたいです〜♪

 

WP SlimStatとは

WP SlimStatは、サイトへのアクセス状況をリアルタイムに解析できる高機能プラグインです。管理画面の表示項目を、ドラック&ドロップでカスタマイズでき、直感的に操作することができます。

単に閲覧数がわかるだけでなく、訪問者情報、記事ごとのアクセス解析など、分析機能も精度が高いのが特徴で、サイト改善に役立つ情報を簡単に手に入れることができるプラグインです。

WP-SlimStat

 

 

プラグインをインストールする

このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、WP SlimStat公式サイトからダウンロードすることも可能です。

インストールがわからない場合は、WordPressのプラグインをインストールする方法をご覧ください。

 

インストールすると、ダッシュボードにWP SlimStatの機能が追加されます。

WP-SlimStat2

このまますぐに使うことができます。

ただし、設定を行うことでより正確なデータを取得できるので、対応しておきましょう。

 

 

[PR] Webサイト制作で副業する方法とは

クローラーの訪問を除外する

デフォルトの設定のままだと、Googleなどのクローラーの訪問数までカウントしてします。ユーザーがアクセスした数だけカウントしたいので、事前に設定をしておきましょう。

 

設定は、ダッシュボード＞WP SkimStat＞Settingから可能です。

ここで、「Track Registered Users」をNoに設定してください。

WP-SlimStat3

 

 

日本語化する

海外のツールですので、デフォルトでは英語だけの表示となります。この表示を日本語化することが可能です。

wp-slimstat > admin > wp-slimstat-admin.php　のファイルを開いてください。

 

ここにある

wp-slimstat-en_US.mo

のタグを

wp-slimstat-ja_JP.mo

に変更するだけです。

これでより使いやすくなりました。

 

 

解析結果を見る

最後にデータの見方についても紹介します。

ダッシュボードに表示されたメニューの通り、様々な角度からの解析結果を見ることができます。

WP-SlimStat5

 

主に扱うデータは下記の通りです。

  • Overview：解析結果の概要（リアルタイムもここで見れます）
  • Visitors：訪問者解析
  • Content：コンテンツ別解析
  • Traffic Sources：トラフィック解析
  • World Map：訪問者の地域を地図上で表記

これの表示項目は、ドラックして好みの配置に変更することも可能です。優先的にチェックしたいデータを上の方に表示するなど工夫してみてください。

WP-SlimStat6

 

ぜひ自分でも使ってみてください。

リアルタイムアクセスにも対応したプラグインを他にも使ってみたい場合は、StatPress Reloadedの使い方も合わせてご覧ください。

 

大石ゆかり

リアルタイムに見れるのっていいですね！今アクセスしに来ているっていうのが分かる感じがうれしいです！！！

田島悠介

そうだね。あとは表示項目も手軽にカスタマイズから、日々の運用も楽になるね！

大石ゆかり

はい、そうですね〜♪

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

記事を検索

関連するキーワード

関連する記事

Browser Shotsの使い方ーWordPressプラグイン【初心者向け】

今回は、簡単にキャプチャ画像を挿入できるプラグイン、Browser Shotsの使い方を紹介します。 なお本記事は、TechAcademyのWordPre...
WordPress

WP-Membersの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を初心者向けに紹介する記事です。 今回は、会員制のサイトを作成する上で役に立つプラグイン、WP-Membersの使い...
WordPress

WordPressで記事を非公開にする方法【初心者向け】

WordPressでサイトやブログを運営していく上で、記事によっては自分だけに表示させたい場合や、閲覧者に制限をかけたい場合もあると思います。 今回はそん...
WordPress

ページの表示速度もアップ！WordPressのキャッシュ処理プラグイン5選

WordPressは、HTMLで構成したサイトと違って動的にキャッシュを生成します。この仕組みにより、Webサイトの訪問数が増えれば増えるほど、サーバーの負荷が...
WordPress

WordPressで予約システムを導入できるプラグイン3選

WordPressでは購読者がお店やホテルなどの予約を入力フォームから行うことができる予約システムの付いたカレンダーをプラグインによって設置することができます。...
WordPress

WordPressでパーマリンクを設定する方法【初心者向け】

WordPressでパーマリンクを設定する基本操作の記事です。WordPressでは、URLの形式を変えることができますが、理解せずに初期設定のままということも...
WordPress

あわせてよく読まれている記事

WordPressの使い方！初心者でもサイト作成が簡単に｜現役エンジニアが解説

WordPressを使用するとデザインの変更や機能のカスタマイズ、データの管理を手軽に行える多機能なブログサービスを作成することができます。実際、このTechAcademyマガジンもWordPressを使って作られたサイトです。 他にも企業のコーポレートサイトやブログサイトなどの多くはWordPressを使われているのです。サイト作成に便利なプラットフォームなので、ぜひ使えるように理解していきましょう。 そもそもWordPressとは何なのかよく分からない方は、今さら聞けない！WordPressとは【初心者向け】をご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、WordPress講座の内容をもとに紹介しています。   大石ゆかり 田島メンター！！WordPressのことはなんとかわかったんですけど、どうやって使うんですか〜？ 田島悠介 WordPressを使うにはインストールや初期設定が必要なんだ。 大石ゆかり なんだか難しそうですね・・・。 田島悠介 きちんと手順に従えば簡単にできるよ。インストールさえしてしまえば、簡単に記事の作成とかサイトデザインとかもできるから。それじゃあ教えてあげるね。 大石ゆかり よろしくお願いします！！！   目次 WordPressのインストール手順 初期設定とインストール WordPress管理画面の基本設定 記事の投稿方法 カテゴリーとタグの管理 ユーザー管理 パーマリンクの設定 テーマの使い方 プラグインの使い方 WordPressで知っておきたいその他の設定   WordPressのインストール手順 用意するもの PHP・MySQLが使用できるサーバー(レンタルサーバーなど) 以下の条件があります。 PHP バージョン 7.4 以上 MySQL バージョン 5.6 以上 または MariaDB バージョン 10.1 以上 HTTPS対応 (2020年6月時点) FTPクライアント(今回はFileZillaを使用します) 独自ドメイン(yahoo.co.jpのように自分のサイトを公開する場合に必要です) 独自ドメイン、レンタルサーバーについては別途記事内で比較しています。合わせてご覧ください。   本体の入手とサーバーへのアップロード まずはWordPressの公式サイトのダウンロードページにアクセスしましょう。 WordPress – ダウンロード 以下のボタンをクリックしてWordPress本体をダウンロードします。 ダウンロードし、解凍した「wordpress」という名前のフォルダを任意の半角英数字の名前に変更します。ここではwpとしています。(変更せず、「wordpress」のままでもOKです) FTPクライアントを使用してサーバーに本体をアップロードします。今回はFileZillaを使用します。サーバーに接続し、WordPressを設置したい場所にフォルダごとアップロードします。 アップロードしたフォルダのある場所にアクセスします。※ ※例えばhttp://xxxx.ne.jp/に「wp」と名前変更したWordPressフォルダをアップロードした場合、アクセスする場所はhttp://xxxx.ne.jp/wpとなります。また、これがそのサイトのアドレスになります。   [PR] Webサイト制作で副業する方法とは初期設定とインストール データベースの設定を行います。「さあ、始めましょう！」のボタンをクリックします。 データベース名・ユーザー名・パスワード・データベースのホスト名を入力し、「送信」ボタンをクリックします。これらは使用しているレンタルサーバーにより設定が異なります。 以下は、レンタルサーバーのスターサーバーでの例です。(管理画面の「データベース設定」から見ることができます) パスワードはこのデータベースで設定したものを入力します。 また、データベースの文字コードは「UTF-8」にしておきます。 「インストールを実行」をクリックします。 ここではWordPressサイトの基本的な設定を行います。 また、これらの項目は全て後でいつでも変更できます。「検索エンジンがサイトをインデックスしないようにする」にチェックを入れるとサイトが検索エンジンに表示されない状態にしておくことができます。 テスト導入時などにチェックします。入力後「WordPressをインストール」をクリックします。 インストール完了のメッセージと、ログイン用のユーザー名とパスワードに関する情報が表示されます。 続いてログイン画面が表示されます。設定したユーザー名とパスワードを入力し「ログイン」をクリックします。   管理画面の基本設定 ログインするとWordPressの管理画面が表示されます。記事の投稿やサイトデザインの変更、プラグインの追加や各種設定はこの画面から行います。   サイトの基本情報変更 左メニューの「外観」から「カスタマイズ」を選択します。 「サイト基本情報」を選択します。 サイトのタイトルとキャッチフレーズはここからいつでも変更できます。   ログイン・ログアウト方法 管理画面からログアウトする場合は上メニューのユーザー名から「ログアウト」を選択します。 再び管理画面にログインするときはサイト上の「ログイン」(テーマにより表示されないものもあります)か、WordPressフォルダ内にあるwp-login.phpにアクセスすることでログイン画面に移行することができます。※ ※例えばhttp://xxxx.ne.jp/wpというサイトの場合はhttp://xxxx.ne.jp/wp/wp-login.phpがログイン画面へのアクセスになります。   記事の投稿 左メニューの「投稿」から「新規追加」を選択します。 「タイトルを追加」の部分にタイトル、「文章を入力、または…」の欄に本文を入力します。 なお、WordPressではバージョン5.0からエディタが「ブロックエディター」に変更になっています。 この記事でもブロックエディターの説明を行っています。 また、/ を入力するか、+ボタンを押すことで画像などのコンテンツを挿入することができます。 入力が完了したら「公開」ボタンをクリックすると記事がサイトに反映されます。     予約投稿の方法 「公開」ボタンを押せば、その瞬間記事として公開されますが、中には決まった時間に公開したいと思う人も多くいるでしょう。 公開ボタンを押した画面の下に表示されている「公開：今すぐ」をクリックします。 カレンダーが表示され、日時を自由に決めることができます。 トップページには出したくないから過去の記事として公開したい、明日の9時に公開したいので、予約投稿にする際に便利です。 今より先の時間に設定すると、「公開」から「予約投稿」というボタン名に変わります。 設定した時間になったら自動的に公開されるので、時間に合わせて手動で公開する必要がなく便利な機能でしょう。   カテゴリとタグの管理 WordPressでは投稿した記事を分類するために、カテゴリーやタグを利用することが出来ます。一般的に、カテゴリーは、記事を大まかにグループ分けする場合に使われ、タグはさらに細かく分ける場合に用いられています。 WordPressで投稿する記事は、必ずカテゴリーを選択しなければなりませんが、タグは必ずしも設定しなくてもよいことになっています。 新規カテゴリーの作成方法 ログインした後、「投稿」から「カテゴリー」を選択すると、カテゴリー新規追加、既存のカテゴリー編集の画面が開きます。 名前にカテゴリー名を書いて、下のほうにある新規カテゴリーを追加ボタンを押すと、新規カテゴリーが追加されます。 スラッグというのは、カテゴリーのアドレスにつける別名みたいなものです。スラッグを設定しない状態で、未分類のカテゴリー一覧の記事を表示した場合、アドレスが以下のようになります。 http://あなたのHPのURL/category/%E6%9C%AA%E5%88%86%E9%A1%9E/ ブラウザのURLを見てみると、 http://あなたのHPのURL/category/未分類/ と表示されていますがそれはブラウザが気を利かせて、日本語に変換してくれただけで、本当はURLエンコードされた日本語文字列になっています。コピーしてテキストエディタや掲示板などの入力欄に貼り付けるとわかります。 未分類のカテゴリーに対して、not-categoryなどのスラッグをつけると「http://あなたのHPのURL/category/not-category/」でアクセスできるようになります。 また、カテゴリーに親カテゴリーを指定することで、カテゴリーに階層構造を持たせることも出来ます。   新規タグの作成方法 ログインした後、「投稿」から「タグ」を選択すると、タグの新規追加、既存のカテゴリー編集の画面が開きます。 タグもカテゴリーと同じで、スラッグを利用することが出来ます。タグは、記事投稿時に複数設定することが出来るので、該当するものを設定しましょう。   ユーザー管理 WordPressでは、複数人で管理することも出来て、それぞれ権限を設定することでセキュリティを向上させることが出来ます。 管理画面のユーザーをクリックすると、新規登録・編集画面になります。 権限グループごとに何ができるのか 新規追加の前に、権限について見ていきます。権限には以下の5種類のグループがあります。 購読者 WordPressにログインすることが可能。プロフィールの変更が出来る 寄稿者 記事を投稿できる。ただし、編集者や管理者が許可しない限り公開状態には出来ません 投稿者 記事を投稿できるが、他のユーザーが作成した記事は扱えないことと、固定ページ作成は出来ない 編集者 他のユーザーが作成した記事や固定ページなども扱えるが、デザインやプラグインなどWordPressの設定に関わるものは扱えない 管理者  全ての権限がある となっています。寄稿者は記事を投稿できるものの、公開状態にするには編集者以上の権限を持つユーザーの許可が必要。 投稿者は、記事を投稿できるものの、カテゴリーなどの作成や管理権限が必要なもの、他のユーザーが作成した記事の編集は行えません。 編集者は、ほとんど全ての作業が可能ですが、設定にかかわるものは変更できないです。管理ユーザーに権限を設定することで、複数人の管理人がいてもセキュリティが守られるようになっています。   新規ユーザーの登録方法 管理画面の「ユーザー」をクリックすると、登録されているユーザー一覧が表示されます。ページトップに「新規追加」ボタンがあるので、こちらをクリックしましょう。   必要な情報を設定した後、権限を決めて追加ボタンを押すと追加できます。 権限を間違えると、全ての記事が削除されてしまう恐れもあるので注意が必要です。   ユーザーの削除方法 管理者の権限を持つユーザーでログインすると、削除することが出来ます。   パーマリンクの設定 パーマリンクでは、記事ページなどのURLをカスタマイズすることができます。「設定」から「パーマリンク設定」でパーマリンクの編集を行うことができるので、確認してみましょう。 URLとは、通常であれば、ファイルの場所を示しています。例えば、URLが http://ほにゃらら.com/aisatsu/ohayou.html だった場合「aisatsu」というフォルダの中の「ohayou.html」というファイルの情報が返されます。 ところがWebサーバーの設定でこれを変更することが出来ます。WordPressのインストール先のフォルダに.htaccessファイルがあります。 中身について詳細は解説しませんが、要求したファイルやフォルダがない場合、全てのアクセスを「index.php」というファイルに集める、という設定になっています。index.phpにアクセスを集めて、ブラウザのアドレスから判断して、プログラムでデータベースから検索して結果を表示しています。 WordPressのデフォルトの設定では、2020年6月24日に投稿した場合のURLは、 http://あなたのURL/2020/06/24/hello-world/ などのようになっています。この/2020/06/24/hello-world/の部分が、パーマリンクになります。デフォルトでは、日付と投稿名でデータベースから記事を取得しているようです。 この部分をある程度自由に変更することが出来ます。   パーマリンクの変更 パーマリンクを変更した場合、どのようにURLが変わるのかを見てみます。パーマリンクの設定の変更画面は、管理画面から設定、パーマリンク設定をクリックします。 デフォルトの状態は、日付と投稿名です。2020年の6月に投稿した記事であれば、 /2020/06/投稿した記事のタイトル/ というURLになります。 基本に設定すると「/?p=123」という、記事に設定されている番号が付けられます。これはデータベース上で管理されている、その記事唯一の番号です。 月と投稿名だと「/2020/06/投稿した記事のタイトル/」になります。数字ベースだと「/archives/123」といった形になります。 投稿した記事のタイトルだけという設定もあり「/投稿した記事のタイトル/」というURLにすることも可能です。   パーマリンクのカスタム構造 パーマリンク設定では、自分でカスタマイズすることもできます。構造タグというものを使用します。詳しくは使い方を参照してください。 カテゴリーベースを変更することも出来ます。カテゴリーベースのところを.(ドット)にすると「/category/カテゴリー名/」になるURLが「/カテゴリー名/」に短縮することも出来ます。 ただし、その場合投稿記事のパーマリンクが「/記事のタイトル/」になっていた場合、重なる可能性があります。記事の投稿名がhello-worldで、カテゴリーにhello-worldがあった場合どうなるでしょうか？ どちらも http://あなたのURL/hello-world/ でアクセスできてしまいます。この場合、投稿した記事が優先して表示されてしまい、カテゴリー一覧が表示されなくなるので注意が必要です。   テーマ WordPressは「テーマ」という機能によりサイトのデザインを簡単に変更することができます。各種テーマは公式が作成したものやユーザーが公開しているものが使用できます。 個人や企業でWordPressのテーマを作っているところも多いので、費用をかけなくても十分整ったサイトを作ることができるはずです。   テーマの変更方法 左メニューの「外観」から「テーマ」を選択します。   インストール済みのテーマの一覧が表示されます。上の「新規追加」かテーマ一覧内の「新しいテーマを追加」をクリックします。   テーマは新着や人気順から探せる他、右上の「テーマを検索」からキーワードを指定して見つけることができます。   テーマをインストールし、一覧画面から「有効化」をクリックするとサイトに反映されます。   テーマの例 「WP Portfolio」テーマは、ポートフォリオ作成に適したテーマです。記事作成時にアイキャッチに指定した写真やイラストなどを一覧できるため作品を見せやすくなっています。   おすすめのテーマ 各シチュエーションで使えるWordPressのテーマを紹介します。 国内ではブログサイトやコーポレートサイトをWordPressで利用している企業が多いですが、海外ではECサイトなどもテンプレートが用意されているので、ぜひ使ってみてください。 以下では、ブログサイト、ECサイト、コーポレートサイトに分けてそれぞれ人気のテーマを紹介しています。 ブログサイト アルバトロス かなり多くのブロガーが利用しているオープンケージのWordPressのテーマ。その中でも王道のアルバトロスをおすすめしたいと思います。 有料ではありますが、技術的なスキルが全くない人でも簡単におしゃれなWebサイトを作れるのが大きな特徴です。 カスタマイズもかなり自由に行えますし、一度買ってしまえばずっとサイトを運営できるので、多くのブロガーから人気なのでしょう。 アルバトロス   賢威 SEOに強いブログ・サイトを作りたい方におすすめのテーマです。ウェブライダーという様々な企業のSEOコンサルを担ってきた会社が開発を行っています。 サイトのテーマだけでなく、SEOに関するマニュアルも載せているので、集客にも力を入れたい人にとっては一石二鳥なテーマになるはずです。 賢威   Riba Lite 画像のサムネイルが大きくバックに表示されているタイプのサイトです。カメラでよく写真を撮ったり、トップページで写真を強調させたいときにおすすめのテーマです。 ダウンロード / DEMO   Hueman よく見るニュースサイトのような作りになっているテンプレートです。サイドメニューも充実しており、どこに何を置くか難しい技術を使わなくても選択するだけで設定することができます。 個人のブログサイトとしても活用できるので、ぜひ活用してみてください。 ダウンロード / DEMO   ECサイト Shop Isle wordPressでECサイトを構築する際は、WooCommerceプラグインを使うのが定番です。WooCommereに特化したテーマの1つがShop Isleです。 様々な効果を適用でき、ECサイトだけでなくビジネスサイトとしても活用できます。より高機能のPRO版も存在します。 ダウンロード / DEMO   YITH Proteo ファッションやアパレル系のECサイトにおすすめです。 カテゴリも細かく設定できますし、洋服などを販売する際に写真にマウスオーバーすると他の写真も出てくるといった仕掛けもあります。 スマホで見るとカートに入っているアイテム数、購入金額がトップで確認できるのでユーザーとしても使いやすいでしょう。 ダウンロード / DEMO   Fukasawa 白を基調としたデザインでより一層アイテムを引き立てるテンプレートでしょう。商品自体も白をバックに写真を撮っているので、シックな印象を与えますね。 ブランディングとしての見せ方としても使えるのでおすすめです！ ダウンロード / DEMO   コーポレートサイト Zelle PRO WordPressのテンプレートの中でも非常に多機能で、出来ないことは無いんじゃないかというくらい多くのことを実現できるはずです。 また、デザイン面でもスクロールすると横からフォームが出てくるパララックス仕様になっており、おしゃれにも見えるでしょう。 ダウンロード / DEMO   Sydney 画像がディスプレイいっぱいに表示されたインパクトの大きいテンプレートです。 トップページに会社情報、事業内容、メンバー、SNSアカウント、ニュースなど多くの情報も載せられるのでスクロールしていて飽きが来ないでしょう。 ダウンロード / DEMO   他にも初心者におすすめの無料で使えるWordPressのテーマを紹介しているので、合わせてご覧ください。   プラグイン WordPressではプラグインという拡張機能を使うことによってサイトにさまざまなシステムを追加することができます。 アクセス解析を行うものや問い合わせフォームを追加するもの、スライドショーを表示させるものなどさまざまなプラグインがあります。   プラグインの検索とインストール 左メニューの「プラグイン」から「新規追加」を選択します。   テーマのときと同様に、新着順や人気順・キーワードでの検索でプラグインを探すことができます。「今すぐインストール」ボタンをクリックするとプラグインがWordPressにインストールされます。 インストールされたらすぐに利用できるわけではなく、まず有効化をしなければなりません。   プラグインの有効化 左メニューの「プラグイン」から「インストール済みプラグイン」を選択します。   インストールされているプラグインの一覧が表示されます。使用したいプラグインの「有効化」をクリックします。   プラグインの例 SNSボタンのプラグイン 「Social Media Feather | social media sharing」プラグインを使用すると、サイトの記事にFacebookやTwitterなどの共有用アイコンを追加することができます。 利用するサービスやアイコンの大きさなども自由にカスタマイズが可能です。記事をシェアしてもらうためにもSNSボタンはぜひとも設置しておきましょう。   記事編集で役立つプラグイン TinyMCE Advanced 記事作成をする前に必ず入れておきたいプラグインです。ビジュアルエディタに追加できる各機能を手軽に設定できます。 TinyMCE Advancedの使い方   WP Videos YouTubeやVimeoといった外部の動画を記事内に埋め込むことができるプラグインです。URLを入力するだけで追加できるので、簡単に設定できるはずです。 WP Videos   SEO対策に役立つプラグイン All in One SEO Pack SEO対策全般の設定をまとめて行えるプラグインです。 FacebookやTwitterといったSNSとの連携、SEOにおいて欠かせないタイトルタグ・ディスクリプションタグの設定も行えるので、まず最初に入れておきましょう。 All in One SEO Packの使い方   Google XML Sitemaps XMLサイトマップを作成してGoogleに更新を通知させることができます。サイトマップがあることでサイトにどんなページが存在するのかGoogleに認識させることができるので、SEOの効果も見込めます。 Google
WordPress

サイト運営に必須！無料で使えるアクセス解析ツール10選

Webサイトを運営していく中で欠かせないのがアクセス解析。 どれだけ良いサイトを作っても人が来ないと意味がありません。どうやったらもっと人が来るか、どのページが一番見られているかなど分析することで改善に繋がります。 今回はサイトのアクセス解析ができるツールをまとめて紹介しています。知らないツールがあればぜひ試してみてください。   なお本記事は、TechAcademyのWebマーケティングオンラインブートキャンプのカリキュラムをもとに執筆しています。   Googleアナリティクス Webのアクセス解析ツールと言えばこれでしょう、逆にこれ以外を思い浮かべる方が難しいです。題名の通りGoogleがサービスも元です。 広告の投資収益率の測定や、Flash、動画、ソーシャル ネットワーク（facebook/twitterなど）のサイトやアプリケーションのトラッキング、売り上げやコンバージョン数に加え、ユーザーの行動や訪問経路の解析までなんでもカバーします。 さらにインターフェイスも見やすいのでまさに無敵です。とりあえず悩んだらこれを選んで間違いはないでしょう。 Googleアナリティクス   忍者アクセス解析 こちらもかなり有名で使われている方も多いと思います。何より設置が簡単ですね。特に無料ブログである忍者ブログとの親和性も高いのでそのコンボはオススメです。 無料版は広告が出てしまうのですが、有料版にすると広告を非表示にできます。ログは4ヶ月間保存できます。アクセス解析初心者から業務までまで幅広く使えるのが人気の理由でしょう。 忍者アクセス解析   [PR] Webサイト制作で副業する方法とはYahoo!アクセス解析 これもまた超有名検索サイトYahooのアクセス解析です。Googleのほど有名ではありませんが、原則無料で使え、ユーザー属性分析、リアルタイム分析、組織分析、広告・コンバージョン分析など機能的には引けを取りません。 直感的に使えるグラフィカルなインターフェースもみやすく初心者でも楽しいです。各種基本的数値のリアルタイム解析やリアルタイム足あとなど、リアルタイム分析に重点を置いている点、訪問組織分析やユーザー追跡など、個別の分析が可能な点は他とは一線を画すため重宝されている。 最初に紹介したGoogleアナリティクスと併用して使っている方も多くいて、それがベストな選択肢なのかもしれません。 Yahoo!アクセス解析   Ptengine 登録アカウント数55,000アカウント以上になり最近注目が集まってきているアクセス解析ツールです。グッドデザイン賞も取得したことからセンスのよさが伺えます。なのでユーザーのサイト内での行動をサーモグラフィーで可視化するヒートマップ機能などのグラフィカルな特徴が印象的で使っていてとても楽しいツールといえるでしょう。 リアルタイム解析もうれしいです。カスタムイベントトラッキング機能というのもあり、それは計測したいリンクを管理画 面上で選択すると、そのリンクに対するクリックが計測される機能 です。 WordPressと親和性も高く、専用プラグインがあり、すぐに導入できる点もありがたいですね。 Ptengine   アクセス解析研究所 アクセス解析研究所は、水準が非常に高く独特の機能で人気を集めるアクセス解析ツールです。他社にはない新機能が利用てきるのが特徴で、GPSで誰かの居場所を解析したり、相互リンクの損得バランスのサイトごと分析と面白いことができそうですね。 広告が表示されないので、デザイン的にも美しいです。もちろん無料です。 アクセス解析研究所   FC2アクセス解析 – 無料アクセス解析レンタル/SEO対策 ご存知FC2のアクセス解析ツールです。検索キーワードチェック、リンク元解析、携帯対応、120ページ解析、など他さまざまな機能が搭載されてます。もちろん無料ブログサービスのFC2ブログを利用している人は連携がとてもいいのでぜひ使うべきでしょう。 リアルタイム解析でもあるのもうれしいですね。ごちゃごちゃしてないシンプルなインターフェイスで、すっきり見やすい、管理画面が特徴的です。 FC2アクセス解析 – 無料アクセス解析レンタル/SEO対策   USER LOCAL（ユーザーローカル） USER LOCALは最近良く話題になる無料アクセス解析ツールです。Yahoo!アクセス解析と似ていますが、Yahoo!アクセス解析よりは面倒臭くなく、その点で導入しやすく、より初心者向けといえるでしょう。性別や年齢などのユーザー属性情報を自動で取得できるのも非常に便利です。 USER LOCAL（ユーザーローカル）   ace analyzer　（エースアナライザー） まだ最近できたばかりの比較的新しい解析ツールで、機能も充実していて注目が集まってきています。 アクセス解析用のタグをWEBサイトに設置することが簡単ですし、月・日・時間・曜日別が最初から閲覧できるのは楽で、使いやすいです。 ace analyzer　（エースアナライザー）   アクセス解析 [AccessAnalyzer.com] アクセスログ、アクセス統計、アクセス元統計、システム統計、訪問者統計が解析できます。 アナログな昔ながらのインターフェイスで、数値のみを重視してチェックしたい方におすすめです。 アクセス解析 [AccessAnalyzer.com]   i2i.jp（アイツーアイドットジェイピー） 3G携帯サイト対応なので、3G携帯用ブログページも解析可能で高性能生ログ検索や訪問者のルートが追える足あと追跡機能が搭載されています。 i2i.jp（アイツーアイドットジェイピー）   以上、サイトのアクセス解析ができるツールを集めてみました。 多くの企業がGoogle Analyticsを利用しているかと思いますが、他にも解析ツールはたくさんあります。ツールによって使える機能はそれぞれ違うので、自分たちの運営しているサービスに合わせて選びましょう。 まだこういったツールを導入していないという人は、今回紹介したツールは基本無料で使えるので、ぜひ試してみてください。 [お知らせ]TechAcademyでは初心者でもWebマーケターになれるWebマーケティングオンラインブートキャンプを開催しています。SEOも含めてメンターのサポートによって短期間で習得可能です。
Webマーケティング

今さら聞けない！WordPressとは【初心者向け】｜現役エンジニアが解説

WordPressをご存知でしょうか？最近ではホームページの制作をするときにも、よくWordPressを使う場面が多くなってきています。 しかし、そもそもWordPressとは何か？と質問されたら説明するのは難しいものです。 この記事では、WordPress初心者の方でも、そもそもWordPressとはどんなものであって、どんなメリットやデメリットがあるのかが分かるように解説したいと思います。 ぜひ、WordPressの使い方を覚えましょう！   なお本記事は、TechAcademyのオンラインブートキャンプ、WordPress講座の内容をもとに紹介しています。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   大石ゆかり 田島メンター！！あのちょっと聞きたいことがあるんですけど〜 田島悠介 ん？何がわからないの？ 大石ゆかり あの、WordPressってなんですか？ 田島悠介 あぁ、WordPressかー。WordPressはCMSと呼ばれるものの一つで、プログラミングなんかをしなくても簡単にサイトを作ることができるものだよ。 大石ゆかり CMS、ですか。具体的にどういうことができるんですか？ 田島悠介 それじゃあ１つずつ説明していくね。 大石ゆかり はい♪お願いします！！！   目次 WordPressとは WordPressが人気な理由 WordPressでできること WordPressでサイト運営する上で必要なもの WordPressで作られた実際のサイト WordPressの学習方法 WordPressと一緒に使うと便利なツール WordPress利用時の注意点   そもそもWordPressとは何か WordPressとは、いわゆるコンテンツマネジメントシステム（CMS）というものです。 簡単にいうと、「ホームページの制作ができない人でも、簡単にコンテンツを管理できる仕組み」ということです。 通常、ホームページに新たに記事を追加しようとすると、HTMLという言語を勉強して、自分でコードと記事の文章を書いていかなくてはなりません。 それがWordPressの場合は、HTMLのコードがわからなくても、マイクロソフトのワードに文章を書いたり写真を挿入したりする感覚で、記事やニュースを更新していくことができます。   [PR] Webサイト制作で副業する方法とはWordPressが人気な理由 プログラミングができなくてもWebサイトが作れる 上記したように専門知識なくしてWebサイトの管理等ができますが、ここでの専門知識とは主にプログラミングに関することです。 特別な機能を持たせる開発をするような場合を除き、情報発信ができるようなメディア立ち上げをする場合にはWordPressそのものの操作に慣れるだけで作ることができるのです。 通常自分でゼロから作成しようとすると「HTML」や「CSS」、そしてもう少し華やかさや簡単な機能を加えるには、「JavaScript」や「PHP」等も知っておくと有利になりますが、WordPressを使えば全くこれらの知識がなくとも作れてしまいます。   無料である なにより、無料でこれらのシステムを使えることによって未経験者にも敷居が下がり使用者の増加に繋がっています。 しかしながら、インターネット上に公開するにはWordPressの利用とは別に、ドメインの取得やレンタルサーバーなどが必要となりこれらには当然費用が必要となります。 WordPressでできること 画像引用元：https://unsplash.com/photos/tZc3vjPCk-Q それでは、具体的にWordPressのメリットとデメリットをご紹介します。 WordPressのメリット HTMLがわからなくても自分でニュースを追加、更新できる WordPressは記事更新の管理画面が、わかりやすいインターフェースで設計されています。 そのため、直感的に記事の追加や編集、画像や動画の挿入が可能です。HTMLの知識は不要です。 Webサイトの構築が簡単 もし自分でWordPressのサイトを立ち上げたいと思った時でも、各サーバー会社が予め”かんたんインストール”という設定をしてくれている場合がほとんどです。 WordPressはデータベースという、記事のデータが入った箱から、ページの読み込みごとにそのデータを取ってくるという動きをするのですが、これらデータベースの設定も自動でサーバー会社が行ってくれます。 拡張性が高くてお手軽 たとえば、お問い合わせフォームを設置したいというときにHTMLであればCGIやPHPというものを勉強する必要がありますが、WordPressの場合はそれが不要です。 プラグインという便利な拡張機能が無料で、豊富に用意されているので、そのプラグインを”インストールする”ボタンを押すだけで実装できてしまいます。   WordPressのデメリット HTMLのサイトより表示スピードが遅い HTMLは、ページごとにコードを書いたファイルをサーバーに置いてあるだけなので、ページの表示スピードが早いです。 それに比べてWordPressは、ページの表示ごとにデータベースから、ページを構成するパーツをその都度呼び出してページを構築するため、HTMLに比べると表示スピードがどうしても遅くなってしまいます。 セキュリティの心配 WordPressはPHPというプログラミング言語でできている関係上、不正な操作や攻撃を受けやすいというデメリットがあります。 例えばログイン画面に、IDとパスワードをランダムに超高速に試されることで、不正ログインされてしまう可能性もあります。 そのため、WordPressのバージョンは常に最新にしておく必要があります。 この点は、Windows(ウィンドウズ)などのパソコンと同じです。 常にバージョンは最新のものを利用しましょう。 実際に自分でWordPressを運営したいという方は、WordPressをインストールする方法をご覧ください。 WordPressでサイト運営する上で必要なもの 画像引用元：https://unsplash.com/photos/gcsNOsPEXfs 独自ドメイン 自分のサイトを公開するには、ドメインというものを取得する必要があります。 有名なところで言うと「お名前.com」「ムームードメイン」などがあります。 初心者でもすぐ使える！ドメインが取得できるサイト10選   レンタルサーバー 誰がアクセスしてもサイトを公開させるためにはサーバーが必要です。 サーバーを自作する人もいますが、基本的にはレンタルサーバーを月額1000円程度で利用します。 レンタルサーバー比較・10選【Webサイト制作の初心者におすすめ】を参考に選んでみてください。 「ロリポップ」や「さくらのレンタルサーバー」は初心者の方にも人気です。   Webサイトのデザインテンプレート サイトの見た目を整形するデザインを用意する必要があります。 WordPressの管理画面上に用意されているものもありますが、無料で利用できるおしゃれなテーマも多いので、そちらがおすすめです。 初心者におすすめ！無料で使えるWordPressのテーマ20選【日本語対応のみ】   WordPressで作られた実際のWebサイト 画像引用元：https://unsplash.com/photos/OGOWDVLbMSc それでは、実際にWordPressで動いているサイトを6つほど紹介していきます。 AdverTimes(アドタイ) 宣伝会議の運営している広告や宣伝に関するメディアです。 記事だけでなく、FacebookやInstagramの写真を載せることもできます。   田中直染料店 オンラインショップ機能を追加しているWordPressサイトです。商品登録を、お店のスタッフの方が追加更新できるようにしているものと思われます。   浦和レッドダイヤモンズ公式サイト スポーツチームの公式ホームページでもWordPressが使われている例はいくつかあります。 過去の試合結果などを溜めておくことも、WordPressであれば簡単に行えます。   イルカ交通 名古屋の交通会社のホームページ。ニュースの定期発信にWordPressを役立てています。   渋谷教育学園渋谷中学高等学校 学校の発信するニュースを、複数のカテゴリに分割して管理しています。   TechAcademy magazine 実は、このサイトもWordPressで作られています。 こういった記事を発信していくようなサイトとの相性は非常にいいでしょう。   WordPressの学習方法 画像引用元：https://unsplash.com/photos/QklJV_Q0Pig 人気が高く利用者も多いWordPressなので、その分学習環境も整えられています。 本も多く出版されていて、また学習サイトに関しても無料で多くのサイトが公開されています。 学習サイト ドットインストール ドットインストールではWordPressの基本的な操作方法から細かい構築手順まで幅広く学ぶことができます。 ドットインストール   バズ部   こちらの特徴はWordPressの使い方全般に加えて、サイト構築後の集客等についてもまとめられているというところです。 バズ部   Webクリエイターボックス     WordPressにおけるポイントやコツなどが多く紹介されており、オリジナルテーマの作り方といった中級者以上に向けられた内容も学ぶことができます。 Webクリエイターボックス   書籍 いちばんやさしいWordPressの教本 プログラミングスキルがなくてもパソコンやスマートフォンに対応したWebサイトの完成ができるように丁寧に解説されています。   本格ビジネスサイトを作りながら学ぶ　WordPressの教科書 こちらは初級的な内容から発展的なことまで含まれており、本格的に使おうとする人に向いています。   WordPressと一緒に使うと便利なツール 画像引用元：https://unsplash.com/photos/hpjSkU2UYSU WordPressにはプラグインというツールを導入して機能を拡張することができます。 よく使われているプラグインを紹介します。   WP Social Bookmarking Light SNSへのリンクボタンを追加できるプラグインです。 現在ではWebサイトの投稿をSNSでシェアしたり、逆にSNSの投稿をWebサイトで引用したりということが当たり前に行われています。Webサイトを構築した際、早い段階で必要になるのがSNSへのリンク機能でしょう。 このプラグインは各SNSの公式のボタンを使った表示ができるのが特徴です。 WP Social Bookmarking Light   Table of Contents Plus 投稿ページが増えてくると、目次ページ（サイトマップ）が欲しくなります。 このプラグインは、長い固定ページ内の目次のほか、サイト全体の目次ページ（サイトマップ）の作成も可能です。 手作業で目次ページを作成するのと比較して圧倒的に容易ですので試してみるといいでしょう。 Table of Contents Plus   Contact Form 7 Webサイトにお問い合わせフォームを追加するプラグインです。 鉄板中の鉄板プラグインであり、とても多く利用されています。 導入が容易であり、広く利用されていることから設定方法などの情報も多く得られることができます。 Contact Form 7   WP-PageNavi ページナビゲーションを行うプラグインです。 このプラグインを導入することで、分かりやすいページ送り機能を実装することができます。 とても多く利用されているプラグインの１つです。 WP-PageNavi   All-in-One WP Migration WordPressで構築したWebサイトの移設を行うためのプラグインです。 Webサイトの設定や投稿などを全て１まとまりのファイルにエクスポートすることができます。 Webサイトをリニューアルする際に別環境にサイトのコピーを立ち上げたり、自分のパソコンでWordPressを動作させる場合など、幅広く活用できます。 またサイトのバックアップを取得するツールとしても有用です。 All-in-One WP Migration   なお、プラグインを導入すると、その分WordPressの動作も少しずつ遅くなります。 プラグインの導入は必要なものに限定し、多用しないようにしましょう。   WordPressの利用時の注意点 WordPressは便利な反面、利用する際にいくつか注意点があります。 画像引用元：https://unsplash.com/photos/iEiUITs149M ページ構成を考えておく WordPressは自由度が高いため、かなり複雑なWebサイトも構築可能です。 そのためページ構成を考えずに適当にWebサイトを構築してしまうと、収集がつかなくなってしまいます。 通常の記事で投稿するのか、固定ページと呼ばれるページで作成するのか、ページ間のナビゲーションはどうするか等、ページ構成を考えながらサイトを構築するといいでしょう。   動画や画像を多用しない 前述のとおり、WordPressには表示がやや遅いという弱点があります。 また一般的にユーザーがWebサイトのページ読み込みを待てる時間は約3秒程度と言われています。 特にWebサイトのトップページで容量の大きい画像や動画を貼り付けることは表示を遅くする原因となるため、控えるようにしましょう。 また素材自体を軽くするテクニックも様々ありますので活用するといいでしょう。 具体的には写真であれば、カメラで撮った写真のファイルはそのままでは画像サイズとファイルの容量が大きいため、画像編集ソフトでサイズを縮小する、または減色処理を行うなどの方法があります。 Webサイトがレスポンスよく表示されるよう、心がけましょう。   自動アップデートを有効にする WordPressは既定値で自動アップデートが有効になっています。 以前はアップデートによりシステムの動作が不安定になるなどの事象が発生することがありましたが、最近では安定してきていますので、自動アップデートは有効にしていて問題ないでしょう。 むしろアップデートによりセキュリティやバグ（不具合）への対応が行われますので常に最新版にしておくことが重要といえます。   必要最低限のSEO対策を行う Googleなどの検索結果でWebサイトが上位に表示されるよう対策を行うことをSEO対策と呼びます。 SEO対策は専門の会社もあるぐらいで非常に奥が深い領域です。 とはいえWebサイトの構成を整えるという意味でも、必要最低限の対策は行っておいたほうがいいでしょう。 「WordPress SEO by Yoast」というプラグインを使うと、ガイダンスに従いながらSEO対策を行うことができます。 試してみるといいでしょう。 WordPress SEO by Yoast   広告（アフェリエイト）の導入は慎重に Webサイトを構築するモチベーションの１つに広告収入（アフェリエイト）もあると思います。 しかし最初は広告を入れず、投稿を増やすことに専念したほうがいいでしょう。 広告の導入を考えているのであれば投稿のテーマや方向性を決めておくことが重要です。 投稿数が増えてユーザーの流入数が増加傾向にあることを確認できるようになったら、AdSenseなどに接続して広告導入の手続きを行いましょう。 AdSenseヘルプ – コード導入ガイド A8.net – アフェリエイトの始め方！   いかがだったでしょうか。 普段皆さんがご覧になっているウェブサイトも、WordPressで作られているかもしれませんね。 最後に、もし「WordPressって何？」と誰かに聞かれたら、「ホームページに自分で記事の追加や更新ができるツールだよ」と教えてあげましょう。 実際、どんなWebサイトが作れるのかイメージするために無料で使えるWordPressのテーマ30選も合わせてご覧ください。   執筆してくれたメンター 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり なるほど！！結構色々なサイトがWordPressを使って作られているんですね！！！ 田島悠介 そうだね。1からコーディングしなくても簡単にデザインを作ったり記事を更新したりできるから、様々な場面で活用されているよ! 大石ゆかり 私も今度使ってみます！！ 田島悠介 うん、何かサイトを作ったら見せてね♪ 大石ゆかり はい！！頑張ります！！！   TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressコースを開催しています。 期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。 オンラインの説明動画や無料体験も実施中です！まずはこちらからお気軽に試してみてくださいね。 人事・研修担当の方は、WordPress研修も提供しているので、合わせてご覧ください。
WordPress

【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Doru Ciobanu氏によって投稿されました。   jQueryはまだ必要でしょうか？ リリースから約10年が経過した現在、jQueryは、最も普及しているJavaScriptライブラリです。10年前のブラウザのエコシステムにおいては、HTMLのDOM操作の複雑さを最小限に抑えるために開発されたブラウザ同士の戦争が繰り広げられていました。 こうした状況で登場したjQueryはクロスブラウザを実現できたため、数多くのエンジニアを混乱から救ったのです。   基本的にjQueryは、粗悪なネイティブAPIに代わる新しいAPIを開発し、ネイティブAPIでサポートされていない機能を実装し、バグのあるネイティブ機能の複製からバグのない機能を作成しました。 JavaScriptコミュニティの中には、ブラウザ間の不規則性に対処できるjQueryのメリットは非常に誇張されており、実際にはquerySelectors( )メソッドの実装があるためにjQueryは人気を得ているのだと主張する声もあります。   現在のブラウザのエコシステムは10年前ほど複雑ではありません。一部のブラウザにおいてはHTML5のいくつかのAPIに非対応であることもありますが、以前ほど問題となることはありません。Chromeで何も問題がなければ、FirefoxやEdgeにおいても上手くいくでしょう。 jQueryは生産性と効率性を向上することができる、きちんと整理されてドキュメント化された、数多くのプラグインを提供しています。   以下に、無料の素晴らしいjQueryプラグインのリストを挙げています。ぜひ使ってみてください。   1. Freewall FreewallはクロスブラウザなjQueryの豪華なプラグインであり、CSS3のアニメーション効果を伴うグリッドレイアウトを構築することができます。 フレキシブルレイアウト、画像を使ったレイアウト、ネスト構造のグリッドレイアウト、Pinterestのようなレイアウトなど、どのようなレイアウトを構築するとしてもFreewallは、デスクトップとモバイル両方において動的なグリッドレイアウトを構築できるオールインワンのプラグインです。 旧IE8を含むほとんどのブラウザをサポートしていて、汎用性の高いツールです。   2. multiscroll.js multiScroll.jsは、Webサイトに多方向スクロールを追加するのに役立つ優れたプラグインです。2つの垂直方向のレイアウトまたはパネルを備えた、マルチスクローリングなWebサイトの構築を容易にします。 UXを損うことなく、最初のページでユーザーの注目を集めることが図られています。すべてのモダンブラウザで完全に機能し、従来のブラウザでも上手く機能します。 言うまでもなくこのプラグインはモバイルフレンドリーです。   [PR] Webサイト制作で副業する方法とは3. rowGrid.js Googleの画像検索の表示のように、画像をすっきりとディスプレイすることができるプラグインです。親要素に合わせて、他の要素は行方向にまっすぐに並ぶように自動的に最適化されます。 このとき全体的なバランスが取れるように、要素間の余白は調整され、要素のサイズは縮小されます。ただし同じ高さの要素を使わなければ、プラグインは正しく機能しません。   4. Slidebars Slidebarsは、プッシュメニュー（クリックすると開くメニュー）やサイドバーなど、canvas要素以外の要素をWebサイトに追加するのに役立つjQueryプラグインです。 バージョン2は、マークアップを完全に書き直して改良され、canvas要素以外の要素を無制限に使用できるようになりました。   5. pagePiling.js シングルページのWebサイトを構築するときに最適なプラグインの1つです。スクロールのイベント発生時に、インターフェースは複数のページで構成されているように動作し、ユーザーに印象的なエクスペリエンスを提供できるでしょう。 ナビゲーションの方向、スクロールの速度、アニメーションは自由にカスタマイズ可能です。カスタマイズに関してはこのプラグインの可能性は計り知れません。 また完全にレスポンシブデザイン対応であるため、すべての画面上で正しく動作します。IE8を含めてほとんどのブラウザに対応しています。   6. Animsition Animationはページ間の自然な遷移を実現することで、楽しいユーザーエクスペリエンスを提供することが主な目的です。軽量なプラグインであり、ページ遷移に伴うスムーズで美しいCSSアニメーションを作成できます。 標準的なフェード、フェードアップ、フェードダウン、回転、フリップx / y、ズームを含む60以上のさまざまな効果を表現できます。Animationは必須のプラグインです。   7. ZooMove マウスオーバーのイベント発生によって拡大される画像は、私は個人的には好きではありませんが、実装する必要がある場合にはZooMoveを使います。 この洗練されたプラグインはスムーズで使いやすいです（添付したGIF画像だけでは十分に良さをお伝えできません）。   8. Rippleria Rippleriaは、Googleのマテリアルデザインからインスピレーションを受けた、軽量のjQueryプラグインです。 クリック・タップのイベント発生によって波紋の効果が発動することで、ユーザーの視覚的なエクスペリエンスを高めます。 button要素、アイコン、div要素、image要素などのDOM要素に応用することができます。実装とカスタマイズは簡単です。   9. Flickity Flickityほど詳細なドキュメンテーションを備えたjQueryはありません。ドキュメンテーションは正確、詳細、論理的に構造化されているので、Flickityの開発者はドキュメンテーションの最高賞を受けるにふさわしいでしょう。 製品自体も美しく目の保養です。最も優れたカルーセルプラグインの1つです。タッチフレンドリー、レスポンシブデザイン、フリック操作対応のイメージギャラリーを実装できるプラグインです。 個人利用の範囲では無料ですが、商用利用には有料のライセンス契約が必要です。   10. Unslider Unsliderは、Webサイトにスライダを設定するときには最も速く最も簡単なプラグインです。 小型ですが柔軟です。オプション、設定、メソッド、コールバックイベントなどを通して自由に変更できます。   11. Lightcase.js Lightcaseはライトボックスのための素晴らしいプラグインです。まだjQuery 3では動作しませんが、開発者は新しいリリースを計画中です。レスポンシブなCSS3アニメーションのライトボックスを作成するための素晴らしいツールです。 scrollTop、scrollRight、scrollLeft、scrollVertical、scrollHorizontal、scrollBottom、fade、fadeinline、elasticなどのメソッドによって、CSS3のアニメーションを表現できます。 また、div、image、iframe、videoなどのDOM要素、text、Flashをサポートしています。   12. PhotoSwipe PhotoSwipeは、JavaScriptの画像ギャラリーを実装できる私のお気に入りのプラグインです。指で広げる（ズーム）、ピンチ（閉じる）、縦方向にスワイプ（閉じる）、横方向にスワイプ（切り替え）などのタッチジェスチャーをサポートしています。またシングルタップジェスチャーとダブルタップジェスチャーは、カスタマイズ可能です。他の多くの画像ギャラリーのプラグインと異なり、ナビゲーションフレンドリーな構築が可能です。またキーボードコントロールもサポートしています。HTML5による全画面表示モードによって、ユーザーにイマーシブな体験を提供できます。 ページ読み込みが完了するまで、ギャラリーに使われているJavaScriptの読み込みを遅らせるよう設定できるので、プラグインがページの読み込みを遅らせることもありません。 また、「ギャラリーを開くボタン」によって、プラグインのみ読み込みを開始することもできます。PhotoSwipeは、レスポンシブデザインの画像を詳細に保存することにも優れています。 画像は最大サイズで表示され、表示領域が画像よりも小さい場合には拡大できます。これらの機能を合計しても約14 KBの容量であり、開発ツールキットとして必須のプラグインです。   13. Strip Stripは、Webサイトにエレガントなライトボックスを追加することができる柔軟なプラグインです。 滑らかでスマートです。大きな画面においてはページを部分的に覆うだけなので、UIの要素、テキスト、その他のレイアウト部分を表示する余裕が確保されていて、インタラクションの邪魔になることもありません。 小さな画面においては一般的なライトボックスとして機能します。このプラグインは使いやすく、調整するために数多くの設定が用意されています。   14. Turntable.js あなたの製品を紹介することができるショーケースのプラグインは数多くあり、玉石混交です。動的でイマーシブな体験を通してユーザーに製品を紹介したい場合、特に実体のある3次元世界の製品を販売しようという場合には、Turntable.jsが良いでしょう。 最初に私がこのプラグインを試したときには、360°の全角度からこれほど滑らかなビューを作成できることに驚きました。従来のWebスライダーのスイートパッケージ製品、jQueryのスライダーや画像ビューアなどと比較すると、Turntableは革命的なプラグインです。 このプラグインの最大の売りは、ナビゲーションアイコンを使わずに済むことであり、タッチスクリーン上でマウスや指を使って画像を回転・フリップすることができます。インストールは簡単で、クリーンなコードです。   15. Vide.js あなたのWebサイトの背景に動画を追加するための最も簡単な方法は、Vide.jsです。 すべてのモダンブラウザでサポートされているため、プロジェクトで素晴らしい外観をデザインするのに役立つでしょう。 動画のプラグインに通常期待される設定は備わっているので、あなたが必要とする外観を得ることができるでしょう。   16. Trianglify 背景で動画を再生したくはないものの、普通の画像や背景だけでは退屈だと思う場合には、Trianglifyが良い選択です。独自のアルゴリズムにより三角形のパタンを生成します。分散、セルのサイズ、色は指定できます。 急ぎの場合にはTriangle Generatorを使うこともできます。パタンは、canvas要素、svg要素、png形式などにレンダリングできます。またレンダリングの実装をオリジナルに作成することもできます。   17. LazeeMenu Webページのメインメニューをシンプルにしたいのに、メニューツリーが巨大である場合には、追加のサイドバーメニューを使用すれば、使いやすさと完全性のバランスを図ることができます。 LazeeMenuは、順序付けされていないネスト構造のリンクを、複数の階層構造で構成されるナビゲーションメニューに変換します。少しの調整であなたのニーズに合わせたカスタマイズが可能です。   18. Web-ticker 開発したアプリの新しいバージョンを公開したときには、あなたは誇りと達成感を感じるでしょうか？こうしたニュースは世界と共有するべきです。Web-tickerの開発者は、使い始めるときに役立つ手順についてのガイドを提供しています。 Web-tickerには多くの設定が備わっているため、あなたの望む外観のデザインに合わせて微調整することができます。 事例として、ニュース、告知、販売などに利用されています。 また画像を配置することもできますが、ユーザーを動画で悪酔いさせたくなければ、この機能は使わないことを強くおすすめします。   19. Inputmask UXにおいては詳細が重要であるともいえます。無効な日付形式を入力したときに、フォームに再入力を求められる場面を経験したことはありますか？ こうしたことは非常に面倒なので、私はフォームを実装するときには必ずInputmaskを使っています。あらかじめ定義されたフォーマットを保証することでユーザーの入力をサポートできます。 日付、数字、電話番号などに使用できます。Inputmuskは軽量なプラグインですが役に立ちます。使いやすく、柔軟性があり、数多くのオプションがあります。また、動的データマスク、正規表現のマスク、オルタネーターマスクなどをサポートしています。   20. jquery.email-autocomplete.js また電子メールアドレスのドメイン部分を自動入力するための単純なプラグインが必要な場合は、jquery.email-autocomplete.jsが最適です。 あらかじめ定義済みの電子メールのドメインリストに基づいて、対応するドメインをプラグインが提案してくれます。ユーザーは、タブキーまたは右矢印キーを押すか、提案をクリックすれば、ドメインの残りの部分は自動的にプラグインが埋めます。 このプラグインはモバイル環境でも機能します。   21. tinyDatePicker 小さく、速く、拡張性と柔軟性の高い、日付時刻のプラグインとしてはtinyDatePickerがおすすめです。多くの機能が組み込まれていて容量は約5KBです。 カレンダー、アジェンダ、予約システムなどがこのプラグインが非常に役立つ場面です。Bootstrapなどの他のフレームワークと統合することもできます。   22. ReadRemaining.js 「光陰矢の如し」ということわざがあります。20のブラウザのタブが同時に開かれ、スマートフォンに多くの通知が表示され、情報が流れ続ける現代においては、ますます読むための時間が少なくなっています。 ReadRemaining.jsは時間を魔法のように止めることができるわけではありませんが、ユーザーにWeb上の記事を読み始めてからの経過時間を知らせることができます。このプラグインはさり気なく、コンテンツを読む邪魔となることはありません。   23. Tooltipster Tooltipsterのツールチップとは、ユーザーのアクションに反応して表示されるテキストラベルのことです。ツールチップは悪用されない限り、アプリのUXを良い方向に強化してくれます。 Tooltipsterは拡張可能なjQueryプラグインであり、ツールチップで豊富な機能を実現するのに役立ちます。誰にとってもシンプルで万能なプラグインです。   24. TableExport.js 簡単に実装できるjQueryプラグインです。 たった1行のコードだけで、HTMLのtable要素を素早く動的に、Excelのスプレッドシート、コンマで区切られた値、通常のテキスト、テキスト形式のファイル（.txt）などに変換します。とてもシンプルです。   25. Addel Addelは、form要素を念頭に設計された、HTML要素の動的な追加・削除をUIに実装するための軽量なjQueryプラグインです。 このプラグインは直感的で柔軟性があり、動的なフォームを作成するときには時間の節約になります。   26. Chart.js Chart.jsは統計データを表示するのに最適なプラグインです。 データの表示には、8つの図表のデフォルト設定を利用できます。拡張性を備えた図表を表現することができます。データを変更時には、遷移アニメーションを実装できます。 すべてのモダンブラウザにおいてレンダリングのパフォーマンスも優れています。積極的に開発が続けられているプラグラインであり、定期的に新機能が追加されています。もはや退屈な図表となることはありません。   27. jQuery Flip-Quote テキストに躍動感を持たせるには最高のプラグインです。 Flip-Quoteはドキュメント内のテキスト引用符から引用を作成し、スクロール時に画面に表示されると、引用を表示しながら反転します。ドキュメントの引用元もハイライト表示できます。もはや退屈な引用符となることはありません。   28. Sharetastic あなたのWebサイト、アプリ、製品へのトラフィックを増やしたい場合には、ソーシャルメディアにおける存在感を維持することが不可欠です。Sharetasticはシェアボタンを表示するときに役に立ちます。 完全にカスタマイズが可能で、3つのビルトインテーマが組み込まれていて、とても使いやすいプラグインです。   29. HideSeek HideSeekは、あなたが探して求めてきた検索用プラグインかもしれません。検索モジュールとしては最高のインタラクティビティが実現されています。 検索された用語をハイライト表示したり、検索結果間にナビゲーションを表示したり、要素を無視したり、アクセント記号付きの文字を無視したり、見出しのあるリストをサポートすることもできます。   30. Timedropper Timedropperは楽しい外観のプラグインです。カスタマイズに優れていて、4つのスタイルオプション：プライマリー色・テキスト色・背景色・ボーダー色と、6つの機能（自動スイッチ・時刻表示形式・フォーマット・アニメーション・マウスホイール・現在時刻の自動取得）があります。 Timedropperと似たもっと多機能のプラグインも他にいくつかありますが、Timedropperは滑らかで直感的で動作を正確に実現できます。 また、Timedropperの開発者による他のプラグインとしてはDatedropperがあり、8つのスタイルオプションと8つの機能オプションを備えているため、あなたが必要とする外観を正確に構築できます。   おわりに TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。 現役エンジニアがパーソナルメンターとして受講生に1人ずつ付き、マンツーマンのメンタリングで学習をサポートし、フロントエンドの技術をマスターすることが可能です。
JavaScript

【事例付き】自然言語処理とは！仕組みやライブラリを解説

2016年末頃、Google翻訳の翻訳精度が飛躍的に向上し、大きな話題となりました。それまでは、英語を日本語に翻訳すると不自然な文章になってしまうことも多かったのですが、現在では、より自然な日本語の翻訳結果を得られるようになっています。それには人工知能（AI）の研究成果が深くかかわっています。 SNSや自然言語の情報をデータ分析する上で、自然言語処理の理解は欠かせません。 自然言語処理とはどのような技術か、実際にどのようなサービスに使われているのか、ぜひ知っておきましょう。   なお本記事は、TechAcademyのAIオンライン講座の内容をもとに作成しています。   目次 自然言語処理とは 自然言語処理の仕組み、原理とは 自然言語処理の事例 自然言語処理ができるライブラリまとめ   田島悠介 今回は自然言語処理について解説するよ。 大石ゆかり 田島メンター！自然言語処理って、なんだか難しそうですね。理解できるでしょうか〜？ 田島悠介 丁寧に説明するから大丈夫だよ。詳しく見ていこう。 大石ゆかり 分かりました！ 自然言語処理とは 自然言語処理とは、私たちが日常的に使っている言葉（以降「自然言語」と表記します）をコンピューターに処理させる一連の技術のことです。人工知能（AI）と言語学の一分野です。 自然言語は、人間がお互いにコミュニケーションを行うために自然発生しました。そのため、プログラミング言語と違い、曖昧さを含みます。また文化的な背景、時代や地域によって様々に変化するため、ルール化が難しい、コンピューターにとって扱いづらいという特性があります。 自然言語処理は、とても古くから研究されており、その研究分野は多岐に渡ります。また現在でも毎年のように各分野で新しい技術が生まれています。 大規模データ時代に求められる自然言語処理   [PR] Webサイト制作で副業する方法とは自然言語処理の仕組み、原理とは 自然言語処理は、「形態素解析→構文解析→意味解析→文脈解析」の順で行われます。 また、自然言語処理の前段として、処理対象となる文章群（コーパスといいます）と、単語を識別するための辞書が必要となります。現在では、インターネットを経由して、日々大量の言葉がやりとりされ、多くの新しい単語が生まれています。 処理対象となる文章を収集することが、とても容易になったとも言えます。また、それらの文章から自動的に辞書を作る試みも行われています。   形態素解析 自然言語を、辞書や文法ルールをもとに、「意味を持つこれ以上分割できない最小の単位（以降、総称として「単語」と表記します）」に分割する作業です。 例えば「高い富士山と海が美しい。私はそれを彼女に伝えた」という文章があったとします。前半部分「高い富士山と海が美しい」を形態素解析すると、以下のようになります。 自然言語処理では多くの場合、単語を1つの単位として表し、以降の「構文解析→意味解析→文脈解析」の処理により意味を導き出して行きます。そのため、形態素解析は、自然言語処理で必要不可欠な最初の手順となります。 英語を含む多くの言語では、基本的に単語と単語の間はスペースで区切られているため（わかち書き）、単語への分割は非常に容易です。しかし日本語や中国語、タイ語などでは、通常単語と単語の間にスペースを挿入しないため、文を単語に分割する処理はより複雑となります。   構文解析 形態素解析で得られた単語の関係性を解析する作業です。 係り受け解析とも呼ばれます。構文解析の結果は「構文木」というもので表すことが出来ます。例えば「高い富士山と海が美しい」を構文解析した構文木は以下のようになります。 しかし、もう一つの例として、以下のように「高い」が「富士山と海」に係る例も考えられます。 日本語に慣れていると、前者が正解だということがすぐ分かりますが、それは構文解析とともに意味解析も行っているためです。構文解析段階では、どちらも正解となります。   意味解析 構文解析で文章の係り受けの構造が把握できました。しかしこの状態では、 高いのは富士山だけか、海も高いのか 美しいのは「高い富士山と海」なのか、海だけ美しいのか といった点がはっきりしておらず、正しいものを選択しなければなりません。これは、「意味」を利用して正しい構文木を選択することを意味します。それが意味解析です。 意味解析では、辞書をもとに、単語と単語の関連性を調べながら、正しい構文木を選択します。 「富士山」と「高い」は関連性が高い 「海」と「高い」は関連性が低い よって、高いのは富士山だけ しかし、意味解析は、コンピューターにとっては非常に難しい作業です。コンピューターは「意味」という概念は分かりません。ルール化して伝える（プログラムする）必要がありますが、前記した「単語と単語の関連性」だけが「意味」のルールではないためです。 例えば「高い富士山」と表現すれば、「山としての富士山」を想像しますが、場合によっては「富士山」という商品があり、その価格が高いということを意味しているのかもしれません。 また、前出の文章「高い富士山と海が美しい。私はそれを彼女に伝えた」において、「それを彼女に伝えた」の「それ」とは何を指すのでしょうか？　その答えを得るには、文脈を通して判断する必要があります。   文脈解析 文脈解析は、複数の文を通して、形態素解析と意味解析を行います。文脈解析は、単に解析の対象が長くなっただけではなく、文の関係性も解析しなければならない、とても複雑な作業です。 例えば「高い富士山と海が美しい。私はそれを彼女に伝えた」において「それ」は直前の文章を指します。しかし文章の並びをかえるだけで、とたんに「それ」が指すものは分からなくなってしまいます。 「私はそれを彼女に伝えた。高い富士山と海が美しい」 ここまでの、形態素解析→構文解析→意味解析→文脈解析の過程を経て、やっとコンピューターが自然言語処理を完了した状態となります。それでは、冒頭にお伝えした、Google翻訳の翻訳精度の向上と人工知能（AI）とは、どのような関係があるのでしょうか。   人工知能（AI）との関係 形態素解析と構文解析は、コンピューターにとって比較的行いやすい作業です。しかし意味解析や文脈解析は、より高次元な判断が必要となります。これまで、コンピューターによる翻訳結果が不自然な文章になりがちだったのは、正しい意味解析や文脈解析を行うのが、非常に難しかったからです。 意味解析や文脈解析を行うには、大量のデータでコンピューターに学習させることが必要です。 大量のデータでコンピューターに学習させることを「機械学習」と言います。「機械学習」は人工知能（AI）で総称される技術の１つです。 従来は、紙の辞書を編纂するように、人間がひとつづつ、単語意味や関連性を記述してコンピューターに学習させていました。もととなる文章も、新聞や書籍などから転記していたため、非常に手間と時間がかかりました。 しかし2000年代に入り、高速・高性能なコンピューターが容易に入手できるようになりました。また、インターネットの発展により、従来より格段に多くのデータを収集できるようになりました。 大量の学習データを高速にコンピューターに学習させることができる環境が整ったことで、これまでの何倍ものスピードで、意味解析や文脈解析の学習が行えるようになりました。それにより、コンピューターが人間により近い「意味」の概念を習得できるようになり、自然言語処理の精度が飛躍的に向上することになりました。   自然言語処理の事例 それでは、自然言語処理が使われている例をいくつか見てみましょう。 日本語入力（かな漢字文字変換） キーボードで入力した「かな文字」を「漢字混じり文字」に変換する際、自然言語処理が使われています。ワープロの時代から研究されている分野で、最近は長い文章も精度良く変換できるようになっています。 ATOK Google 日本語入力 MicrosoftIME   機械翻訳 冒頭にお伝えした、Google翻訳をはじめ、ここ数年で急速に精度が上がってきている分野です。また合成音声と組み合わせたサービスも一般的になってきています。 Google翻訳 音声翻訳アプリ NICT（独立行政法人 情報通信研究機構）が開発した多言語翻訳エンジンが使われています。   対話システム 音声または文字で入力した文章を、コンピューターが理解して応答を返すシステムです。スマートスピーカーやSiriなどのアシストサービス、LINEのボット（自動応答システム）などがあります。また、対話システムを容易に構築できるAPIも提供されています。 Amazon Echo LINE Clova WAVE Google Home Siri Cortana りんな Microsoftが作成したLINEの自動応答システム Watson Conversation 対話システムAPI   自然言語処理ができるライブラリまとめ 最後に、自然言語処理ができるライブラリについて見ていきましょう。 MeCab 日本語の自然言語処理器（形態素解析器）システムとして最も有名です。 MeCab   JUMAN こちらも形態素解析器です。WikipediaやWebサイトから収集した辞書により、MeCabと比較して、最近の言葉でも正確に処理を行うことが可能です。 JUMAN   Cabocha 構文解析器です。MeCabと組み合わせて使用します。機械学習(SVM)を利用しています。 Cabocha   KNP 構文解析器です。Webから自動構築した大規模格フレームにより、より精度の高い解析が行えます。 KNP   田島悠介 自然言語処理について、理解は深まったかな？ 大石ゆかり 身近に感じていましたが、とても奥が深い技術なんですね。勉強になりましたー！ 田島悠介 気軽に利用できるAPIもあるから、使ってみるといいよ。深層学習や機械学習、画像認識技術については、また別のところで説明するね。 大石ゆかり 分かりました。ありがとうございました！   今回は、自然言語処理について解説しました。 これから自然言語処理を勉強したい、機械学習を使って何か作ってみたいという方は最初に理解しておきたい内容でしょう。   また、オンラインのプログラミングスクールTechAcademyでは、AIオンライン講座を開催しています。 AI（人工知能）の構築に必要な機械学習・ディープラーニングについて実践的に学習することができます。 現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、習得することが可能です。 この記事を監修してくれた方 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。
機械学習

デザイナーなら必見！どんな作業にも便利なSketch用プラグイン12選

本稿は、WebDesignerDepotのブログ記事を許可を得て日本語翻訳し掲載した記事になります。 本記事は、ライターでありUXデザイナーでもあるJake Rocheleau氏によって投稿されました。   Sketch44のベータ版終了に伴い、Sketchの最も優れた機能のひとつである豊富なオープンソースのプラグインを見ていきましょう。 Sketchのコミュニティはとても便利で、ワークフローを根本から改善させるすばらしいプラグインをたくさん見つけることができます。この記事では、デザイナーの皆さんが持つべき12のベストSketchプラグインについて説明します。 なお、初心者向けにSketchの使い方も解説しているので、詳しく操作方法を見たい方は参考にしてください。   1. Sketch Measure Sketch Measureは、デザイナーが開発者・プロジェクトマネージャー・および他のチームメンバーの作業を計画し、その要点を説明するのに役立ちます。 しかしこのプラグインは、自分でデザイン・コーディングすべてを行う一匹狼にとっても便利なものです。Measureプラグインを使用すると要素の幅・高さが表示され、ひと目で適切な測定を行うことができます。 ボタン・テキスト・アイコン・アートボードの主要部分など、ページ内のすべての要素を測ることが可能です。 Sketch Measureを使用すると、ページをそのままHTMLとCSSにエクスポートすることもできます。Adobeのツールでも同じことはできますが、Sketch内でこの機能がすべて備わっていることによって仕事がより簡単になります。   2. InVision Craft 以前にInVisionチームは新しいプラグインCraftを発表しました。これはどちらかというとプラグインのパッケージのようなもので、たくさんの機能とショートカットが追加されています。 ひとつの例として、デザイナーがWeb上のパブリックAPIからテキストとデータを直接取り出すことができるようになるDataプラグインというものがあります。これによって、実際のコンテンツと画像をその場で自動的にアプリに取り込むことが可能です。 CraftはInVisionの開発者によって常に新しい機能のプラグインが更新されており、デザイナーにとってとても価値のあるものになっています。 現在Craftには、6つの主要なプラグイン機能があり、そのすべてがデザインワークフローに追加すべきものです。 Freehand：リアルタイムでの共同作業 Prototype：動的で再現度の高いプロトタイピング Sync：InVisionのプロトタイプとSketchのインスタント同期 Data：Webにある実際のデータを、Sketchのモックアップ上で取得する Library：チーム全体で共有できる、クラウド上のデザインアセット Duplicate：軽快なUIクローニング Craftのホームページを見て、一度試してみると戻ってこれなくなるでしょう。   [PR] Webサイト制作で副業する方法とは3. Sketch Toolbox すべてのSketchユーザーはSketch Toolboxについて知っておく必要があります。プラグインのインストールとカスタマイズをとても簡単にする、優秀なプラグインマネージャーです。 Toolboxを使用すると、何百ものSketchプラグインを検索してそこからインストールするものを選ぶことができます。必要なものをクリックするだけで自動的にコンピュータにダウンロードされ、すぐに使用が可能です。 また、Sketch Toolboxはプラグインをスムーズに動作させるために自動的に更新を行います。 このプラグインはまだベータ版でありGitHubで常にアップデートされていますが、制作ワークフローで使用するのには充分です。実際、この素晴らしいプラグインマネージャーなしでは良いSketchのワークフローは完成しないと思います。   4. Export Assets デザイナーにとって最も詳細なタスクのひとつとして、リソースを割り当てて開発者と共有するということがあります。すべての小さなアイコンやグラフィック、背景パターンを(通常は手作業で)エクスポートしなければなりません。 Export Assetsプラグインを使うと、このプロセスが簡単になります。このプラグインは、デザイナーがAndroid・iOSインターフェイスのアセットをエクスポートしなければならないモバイルアプリに向けたものです。@2xと@3x画面サイズのRetinaアセットが含まれています。 Sketch Exporterプラグインもチェックするのもいいでしょう。現在ベータ版であり、元々のバージョンを改良したものです。   5. Content Generator 前述のCraftプラグインはコンテンツの生成に役立ちますが、Timur CarpeevによるこのContent Generatorのようなシンプルなものが必要なときもあります。 このプラグインをインストールすると、以下のような自動生成されたダミー素材を入れることができます。 ユーザーアバター ファーストネームとラストネーム ダミー段落テキスト カスタム文字列(位置情報・価格・CCカード番号など) すべてのコンテンツはUnsplashやUinamesのようなオープンソースのデータベースから取得されているため、商用プロジェクトでも利用することができます。   6. Looper Photoshopは独自のアクションパネルで繰り返しアクションを自動化することができます。Sketchにはこのようなパネルはありませんが、完全無料で使いやすいLooperプラグインがあります。 このプラグインはページ全体を占める繰り返しパターンを作成する場合に便利です。Webデザイナーよりもグラフィックデザイナーにとって便利なプラグインかもしれません。繰り返しの調整や複製のタスクによる時間を短縮してくれます。 Looperのホームページで機能を確認することができます。誰にでも必要であるというプラグインではないかもしれませんが、使いこなせる人にとっては時間の節約になるものだと思います。   7. Sketch Iconfont Webデザイナーはアイコンフォントを愛用しています。UIデザインがやりやすくなるだけでなく、フォントファイルは一般的に画像よりも容量が小さくなるというメリットもあります。 Sketch Iconfontプラグインはアイコンフォントを格納・ソート・取得するための完成された管理パッケージです。 デフォルトでは空の状態なのでプラグインを利用する際にはアイコンフォントをダウンロードする必要がありますが、それによってオンラインで見つけたアイコンフォントを使い作業するためのアクセスを完全に得ることができます。 アイコンフォントフォルダをすぐに充実させたい場合はこのプラグイン用に特別に作られたフォントバンドルパックを使うことができます。そしていつでもサイトを精錬することができるようになります。 私はこのパッケージを必ず持っておくことをおすすめします。アイコンフォントは普及しており、現在のWebサイトに欠かせないものです。   8. Style Inventory Sketchファイルを新規作成するときは最初からスタイルを作り直すか、以前のモックアップからスタイルをコピー＆ペーストする必要があります。 Style Inventoryプラグインを使うとこの余分な作業を回避することができます。数回のクリックで以前のすべてのスタイルが新しいSketchドキュメントにインポートされ、簡単にアクセスできるようになります。 これらのスタイルには色・テキストスタイル・シンボル・特定のレイヤースタイルが含まれます。 このプラグインはめったに更新されませんが、同種のモックアップをマージするために導入をおすすめします。カラースキームの保存とインポートのためにSketch Palettesプラグインを使用するのもいいかもしれません。   9. Pixel Perfecter デジタルデザイナーは誰もが、ピクセル・パーフェクトなモックアップを誇りとしています。この作業は難しいことではありませんが、すべてのデザイン要素が重なりや欠陥なくグリッドと完全に合わさっていなければなりません。 エクスポートの前に確認したい場合はPixel Perfecterを使用しましょう。この小さなプラグインはすべてのファイルアセットをチェックして、従来のX・Y座標からのピクセルのはみ出しがないか確認を行います。 このプラグインは、相殺するピクセルを自動で修正するものではありませんので注意してください。問題の原因となっているレイヤーがハイライトされるので、それを自分で直すことになります。それでも、各レイヤーを手動で確認するような時間を大いに短縮することができます。   10. Dynamic Button オリジナルの動的ボタンプラグインは2015年に廃止されましたが、新しいDynamic ButtonプラグインはSketch3.5+との互換性がさらに向上しました。 作成した任意のテキストレイヤーにパディングとボタンスタイルを自動的に追加します。またパディングは動的なので、テキストサイズに関係なく更新されます。これはモックアップを常に変更しているUIデザイナーにとってとても役立つものです。 このプラグインはボタンが一般的に固定のサイズ・比率に従うモバイルアプリケーションにも使用できます。Dynamic Buttonは最も魅力的なプラグインというわけではありませんが、そのタスクはよく機能しています。   11. Compo ボタンジェネレータといくつかの特別な機能が必要な場合は、Compoプラグインを試してみるといいでしょう。 Compoの製作者は、Dynamic Buttonをしばらく使用してアイデアを得ました。Compoは仕様に合わせて、適切なボタンサイズとテキストサイズを自動生成します。このプラグインを使うとワンクリックで自動的にサイズ調整・配置されたSketchコンポーネントを作成することができます。 通常はボタンを作成してからテキストを変更すると、テキストレイヤーにしか反映されず下のボタンはサイズが小さすぎる状態になります。Compoは、ボタンとテキストを自動的にひとつの要素としてサイズ変更を行います。 GitHubレポジトリには、初めて使用する人のためのいくつかのユーザーズガイドとたくさんのデモがあります。   12. CSSketch 最後にCSSketchプラグインを紹介します。これは作成している全てのスタイルのCSSコードに直接アクセスしたい、デザイナーと開発者の組み合わせにとって便利なものです。 デザインしたページのアセットを含むスタイルシートを丸ごとエクスポートすることができます。ただし、自動化されたものであるためA++品質のコードは期待できません。 私はまだ手作業でCSSをコーディングする方が好きですが、このプラグインは技術を持っていないデザイナーや、時間を節約したい開発者にとっての手助けとなるでしょう。 デザイナーにとって当たり前のツールとなりつつあるSketchですが、機能や使えるプラグインもどんどん増えています。 プラグインは状況によっては非常に作業時間を短縮するツールになり得ます。今は必要なくても必要になった時に知っておくとデザインの作業に役立つでしょう。   また、TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） WordPressコース Webデザイン WordPress WP SlimStatの使い方ーWordPressプラグイン【初心者向け】