TechAcademy（テックアカデミー） WordPressコース Webデザイン WordPress プラグインで簡単導入！WordPressでメルマガを発行できるプラグイン5選
icon
icon
WordPress

プラグインで簡単導入！WordPressでメルマガを発行できるプラグイン5選

WordPressで【メールマガジン】を発行できるプラグインを5つ紹介する記事です。初心者を対象としているため、比較的簡単に導入できるものばかりです。プラグインを使うことで、登録のフォーム作成やメールの送信が簡単にできます。

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

メールマガジンを使ったマーケティング手法は今も有効な手段です。そんなメルマガをWordPress上から発行できるプラグインがあります。

ゼロからメルマガ配信の準備をしようと思うと、メールアドレスの収集やリストの作成、メーラーとの連携などがあり面倒です。プラグインを使うことで簡単にメルマガ登録のフォーム作成やメールの送信をおこなうことができます。

今回は、初心者でも使えるプラグインを5つに絞って紹介します。

 

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

 

1:Subscribe2

mail1

Subscribe2は、メルマガ送信の代表的プラグインです。日本語化ファイルも配布されているので、初心者でも簡単に使うことができます。管理画面でメールアドレスの一覧や、メールマガジン本文の作成、配信までメルマガ配信に必要な一連の流れを完結させることができます。

サイト上に表示したフォームに、ユーザーが情報を入力するだけで自動的にメールアドレスが登録されるので、運用も非常に簡単です。

Subscribe2の使い方

 

 

2:MAILPOET NEWSLETTERS (WYSIJA)

mail2

日本語化されているプラグインで、簡単な操作でメルマガを配信することができます。

このプラグインの特徴としては、メールの送信元がGmailかSMTPか選択できる点にあります。これがなぜ重要かというと、送信したメルマガが迷惑メールに分類される可能性が少なくなるからです。せっかく配信したメルマガが、スパム扱いされて読まれないのはもったいないですよね。

また、無料ながら定期的なニュースレター配信も可能。たくさんのテンプレートから選ぶことができるので、デザイン面でも優れています。

MAILPOET NEWSLETTERS (WYSIJA)

 

 

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

3:MailPress

mail3

通常のメルマガ配信はもちろん、見込み客へのアプローチに有効なステップメールの配信も可能な高機能プラグインです。なかなかステップメール配信までできる無料プラグインはないので、貴重です。

また、HTML形式かテキスト形式か、好きな配信方法を選ぶことができます。デフォルトではシンプルな機能しかありませんが、アドオンを追加することで様々な機能を利用できます。本格的にメルマガやニュースレターを活用したい人におすすめです。

MailPress

 

 

4:Email Newsletter

mail4

英語のプラグインではありますが、とにかく簡単な操作を謳ったプラグインです。

ステップメールなどは贈ることができませんが、「まずは簡単にメールマガジンやニュースレターを送付したい」という人におすすめです。専門的な知識がなくてもメルマガ送信ができるというコンセプトなので、直感的な操作でメールマガジンを作成・送付することができます。別のプラグインと組み合わせることで、問い合わせがあった人にだけにメールするという使い方も可能です。

Email newsletter

 

 

5:Knews Multilingual Newsletters

mail5

自動配信で定期的なニュースレターの配信もできる高機能プラグインです。一度設定しておけばメルマガが途切れることがないので嬉しいですね。

また、HTMLメールに特化しています。テンプレートも選ぶことができるので、簡単に華やかなメールを作成することが可能です。最近のアップデートで、ステップメール機能も追加されたので、しっかりとメルマガ運営をしたいと考えている人は一考の余地ありです。

Knews Multilingual Newsletters

 

今回のプラグイン紹介は以上です。

ぜひ気になったものから使ってみてください。

 

さらに他のプラグインを使ってみたい場合は、WordPressのアクセス解析に便利なプラグインも合わせてご覧ください。

ぜひ、WordPressの使い方を覚えましょう！

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

記事を検索

関連するキーワード

関連する記事

WordPressで記事に「続きを読む」を設定する方法【初心者向け】

WordPressで作成したサイトのデザインにもよりますが、TOPページや記事の一覧ページには、記事の一部を表示して「続きを読む」に誘導することも多いのではない...
WordPress

WordPressで記事を投稿する方法【超初心者向け】

WordPressをとりあえずインストールしたという初心者向けの記事です。 まずは基礎中の基礎である、記事を投稿する方法を覚えましょう。  ...
WordPress

すぐに使える！WordPressの簡単インストールが使える国内のレンタルサーバー5選

ますますCMSとして使われることが多くなっているWordPressですが、簡単インストールという便利な機能があります。 簡単インストールを使うと、FTPソ...
WordPress

【効率アップ！】AddQuicktagの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を初心者向けに紹介する記事です。 今回は、様々なタグを追加できるプラグイン、AddQuicktagの使い方を紹介しま...
WordPress

PS Disable Auto Formattingの使い方ーWordPressプラグイン【初心者向け】

大石ゆかり 田島メンター！！WordPressでビジュアルエディタとテキストエディタを切り替えると表示がくずれてしまうことがあるんですけど...
WordPress

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

WordPressのプラグインの使い方を初心者向けに紹介する記事です。 今回は、ソーシャルメディアのシェアボタンをまとめて設置できるプラグイン、WP So...
WordPress

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

メルマガを配信できるSubscribe2の使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を初心者向けに紹介する記事です。 今回は、WordPressから簡単にメルマガを配信できるプラグイン、Subscribe2の使い方を紹介します。   なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。   大石ゆかり 田島メンター！！メルマガサイトを作れるツールってないですか！？ 田島悠介 メルマガサイトなら、WordPressでも作れるよ。 大石ゆかり え、WordPressで作れるんですか！？ 田島悠介 うん。「Subscribe2」っていうプラグインがあってね・・・。   Subscribe2とは WordPress上でメールマガジンの登録、配信がおこなえるプラグインです。日本語化の設定も簡単で、配信までダッシュボードから完結できます。 メルマガは有効な販促手段ですが、ゼロからシステムを作るとなると大変ですので、このプラグインを使ってみてはいかがでしょうか。   プラグインをインストールする このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。 インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。   有効化すると、ダッシュボードにSubscribe2というリンクが追加されます。 ただ、このままでは全て英語で使いにくいので、まず言語設定を日本語に変更しましょう。     [PR] Webサイト制作で副業する方法とはプラグインの日本語化 このサイトから、日本語化ファイルをダウンロードします。ダウンロードしたZIPファイルを解凍してください。 次に、FTPクライアントソフトを使って、該当WordPressフォルダの、wp-content/languages/plugins/を開き、そこにダウンロードしたファイルのsubscribe2-ja.moファイルをアップロードしてください。   これだけで、日本語部分が増えて操作が楽になります。   メルマガ登録画面の作成 まずはメルマガの登録画面を作成します。 固定ページでメルマガ登録用のページを作ってもいいですし、投稿の好きな場所にメルマガ登録フォームを追加することもできます。   なお、投稿画面を見ると、ビジュアルエディタのボタンにS2という機能が追加されています。これをクリックすると、任意の場所に登録フォームを追加できます。   サイト上ではこのように表示されます。     この際、記事更新後に確認しても、「You may manage your subscription options from your profile」と表示されてうまくいかないという場合は、管理画面からログアウトして確認するときちんと表示されるのでご安心ください。   また、WordPressのウィジェットからSubscribe2を選択すると、サイドバーに表示することも可能です。     このフォームから登録されたメールアドレスは、「ダッシュボード＞Subscribe2＞メルマガ読者」から確認できます。なお、手動で追加することも可能です。   メルマガの作成 最後に登録されたメールアドレスに対して送るメールを作成してみましょう。メールマガジンの作成もダッシュボードから可能です。 まずは、ダッシュボード＞Subscribe2＞Send Emailをクリックして、メール作成画面を開きます。 ここでは、件名と本文を入力するだけです。ファイルを添付することもできます。 Previewでメールの内容を確認して、「送信」のボタンをクリックするとメルマガが配信されます。送信ボタンをクリックすると、取り消しや編集はできないのでご注意ください。   今回の記事は以上です。 WordPressにお問い合わせフォームをプラグインで追加したい場合は、Contact Form7の使い方 も合わせてご覧ください。 ぜひ、WordPressの使い方を覚えましょう！ 大石ゆかり メルマガ登録からメルマガ配信まで全部WordPressでできちゃうんですね〜 田島悠介 うん。とても便利だよね♪ 大石ゆかり 管理画面も日本語ですし、操作も楽ですね♪   [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
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

デザイナーなら必見！どんな作業にも便利な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デザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

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選

自分でメルマガを配信したいと思ったとき、気になるのがメール配信システムです。今やその数も多く、使える機能も様々です。どのメール配信システムが自分にあっているかを検討しなければなりません。 この記事では主なメール配信システムの料金や特徴を解説しています。検討メール配信システムを利用する上で材料にしてみてください。   ブラストメール 特徴 業界トップクラスの法人契約を持つ（契約している3600社の中には大手企業が多数） 配信専用にネットワークが構築されているため、1時間あたり280万通以上の配信が可能 デコメールに対応している 10年以上運営が続いていて安定して、かつ稼働率が99.8% 個人情報流出が10年間で一度もないので安心して使える 料金 登録アドレス数により異なる。 3,000プラン：2,000円 5,000プラン：3,000円など ※初期費用は10,000円（1年契約で半額） ブラストメール(旧ブレインメール)   ワイメール 特徴 業界トップクラスの機能性（一般的にメール配信に必要な機能が全て実装されている） 業界トップクラスの高コストパフォーマンス 仮想独立サーバーで安心 操作がシンプルなので初心者でも使いやすい 料金 毎月自動契約：月額4,980円 6ヶ月分前払い：5,460円/月 12ヶ月分前払い：5,250円/月 ※全てのプランに初期費用が10,500円かかる ワイメール   [PR] Webサイト制作で副業する方法とはイージーメールフォーム 特徴 プログラムの知識がなくても各種メールフォームを作ることができる システムの設置作業はFTPアップロードとデータベース設定のみで手軽に設置できる 複数のフォームを一元管理できるので使いやすい 自動メール返信機能や保存されたメールデータを出力する「CSV出力機能」付き 料金 ダウンロード版（購入型） システムを利用者のサーバーに設置して使うことができます。 59,800円（税込） ASP版（月額制） サーバーの準備や設置作業が不要なので、手軽に利用できます。 月額5,980円（税込） イージーメールフォーム   メールスマート 特徴 顧客管理向けメール配信システム メール配信リストに対して一斉にメール送信を行うことができる CSVインポート&エクスポートが容易に使える メールテンプレート機能や添付ファイルの管理を行える機能付き 既読チェックやURLのクリック回数も測定できる 料金 ダウンロード版（購入型） システムを利用者のサーバーに設置して使うことができます。 98,000円（税込） ASP版（月額制） サーバーの準備や設置作業が不要なので、手軽に利用できます。 月額9,800円（税込） メールスマート   問いマネ 特徴 メール共有や管理に特化したASPタイプのメールソフト WEBブラウザからも見ることができるので、ネット環境が整っていればいつでも閲覧や返信ができる 複数人でメールを共有できる 重複返信や対応漏れ防止機能がついているので安心 EC関連企業での導入が多い 料金 スタンダードサーバープラン 月額2,840円（税抜） アドバンスサーバープラン 月額5,000円（税抜） ※両プランとも初期費用10,000円（税抜） ※1年契約で1ヶ月分の料金が無料 問いマネ   シンプルメール 特徴 添付ファイルの自動パスワード設定&Zip暗号化 万が一、誤送信してしまった場合もダウンロード前にファイルの削除が可能 Google Apps、Office365との相性も良い 添付ファイルサイズ最大1GBまで可能 料金 月額固定料金制（何人で利用しても固定料金） スタンダード：月額9,800円（1ヶ月契約） プロ：月額14,800円（1ヶ月契約） ビジネス：月額22,800円（1ヶ月契約） ※全て初期費用は0円 ※年間契約で割引あり シンプルメール   ウィルメール 特徴 クラウドアワードにて「先進技術賞」2年連続受賞 無料トライアルあり HTMLメールがドラッグ&ドロップで作成できる スマホ対応のメールもOK ユーザーの行動履歴に基づいた12種類の多角的メール配信分析が行える 用途に応じた2種類のデータベースを標準装備 料金 月額固定料金制 プレミアムプラン 月額10,000円〜（税別） 初期費用50,000円（税別） シンプルプラン 月額4,000円〜（税別） 初期費用20,000円（税別） ※両プランとも最低1ヶ月〜利用可能 ウィルメール   める配くん 特徴 コストパフォーマンスが良い 100通以上の大量Eメールを一斉に配信できるASPサービス 特別なソフトのインストールが不要 顧客管理システムとしても充実機能 料金 める配フリー 登録アドレス120個まで、月間配信数500通までなら初期費用、月額ともに0円 める配ライト 登録アドレス5,000個まで、月間配信数30,000通までなら月額1,886円（初期費用8,000円） める配７　※人気No.１ 登録アドレス7,000個まで、月間配信数42,000通までなら月額2,160円（初期費用8,000円） める配７以降 める配７以降についてはすべて、高機能Htmlエディタを搭載 める配くん   アクセスメール 特徴 登録アドレス数が無制限なので、多くの読者にメールを配信したい人におすすめ セキュリティ対策もSSL暗号化通信対応で安全 HTMLメール送信可能 開封率の調査やクリックカウンター機能がついているので、顧客分析にはぴったり 料金 ブロンズコース 月額2,300円（税込）、配信可能数10万通まで シルバーコース 月額4,700円（税込）、配信可能数25万通まで その他、200万通まで送れるコースもある アクセスメール   ベンチマークメール 特徴 グローバル規模で利用されている（世界50万社が利用） HTMLメールがドラッグ&ドロップで簡単作成 HTMLコードエディタも利用可能 マーケティングを自動化する機能がついている カラーカスタマイズや画像編集などデザイン面でアプローチを変えることができる 料金 月の配信数は無制限、登録アドレス数によってプランが異なる 登録アドレス数600の場合：月額1,500円 登録アドレス数1,000の場合：月額2,400円 登録アドレス数1,500の場合：月額3,000円 ベンチマークメール   まとめ マーケティングにおいて必要なメール配信をより効率良く行えるメール配信システムを10個ご紹介しました。それぞれのシステムによって、HTML作成が簡単なものや料金設定、デザイン仕様などが異なります。 自分が配信したい用途に応じて、どのシステムを使うか選びましょう。また、多くのメール配信システムには無料お試し期間がついているので、そちらを活用してどれにするかを決めるのも良いでしょう。   TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。 現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスやスマートフォンアプリなどを開発することが可能です。
ツール系

【営業ノルマにもう耐えられない】現状を打破する3つの手順を紹介

営業職には必ずと言っていいほどついてまわるノルマ。初めはなんとなく受け入れていたけれど、達成しても毎月ノルマがリセットされ終わりがないように感じ、だんだんとプレッシャーや重圧に耐えられなくなってきた、という人は少なくないのではないでしょうか。 ノルマという個人に課せられる目標は、会社にとっては多ければ多いほど利益につながります。それ故に、従業員側からすると「頑張ってノルマ達成をすると、さらに重いノルマを課せられてしまう」という理不尽を感じるものです。   コンビニのアルバイトで、季節ごとに販売される商品を一人何件売らなければならない、などのノルマを課せられたことがニュース記事になったこともあります。 そんな厄介な存在のノルマは、営業職の人を精神的・身体的にも追い込み、本来の仕事の目的を失わせる要因にもなり得ます。今回は、ノルマが辛い要因を改めて認識した上で、営業職の人が現状を打破するための今後のキャリアについて解説していきます。   なぜ、営業ノルマは辛いのか 「ノルマが辛い」と一口に言っても、その要因は様々にあります。具体的には、どのようなシーンでどんなことが辛いと感じるのか、以下にまとめました。いくつ共感するポイントがあるでしょうか。   なかなか達成できない 会社としては営業に対して「全力で頑張ってギリギリ達成できるかどうかのハードル」をノルマとして課すのが収益をあげるためにもっとも効率的な考え方です。 営業がノルマを達成できる月が続いたら、さらに重いノルマを課すことは会社として当然のアクションでしょう。営業は「頑張れば頑張るほどノルマが増える」「楽になることはなくどんどん追い込まれる」という状況は仕事柄、致し方ない宿命とも言えます。 ただ、それが今後もひたすら続いていくと考えると一体、何がゴールなのか？と疑問に思ってしまうのは否めませんよね。   重いプレッシャー 「今月はなんとか達成できてやっと一息つけた。でも来月からはまた1からのスタートか・・・」 過去に達成した仕事が積み上がっていかないのも辛いと感じる要因の1つです。年間ノルマなどの形で長期スパンの目標が設定されることもありますが、それも一つの事業年度が終わればまた1からのスタートとなりますので基本的には同じことです。 ノルマを達成できるかどうかのプレッシャーを年中感じることになりますから、ストレス耐性やある程度、気にしないでいられる精神力が大切になってきます。そういった気持ちの切り替えが苦手な人にとっては非常に苦しく感じるでしょう。   不本意でも売らなければいけない 営業は自分の会社の商品やサービスを売り、顧客からその対価をいただくのが仕事です。 中には「こんなもの買う人ほんとにいるのかな」というようなクオリティの商品やサービスをとにかく売ってくるように指示されることもあるでしょう。営業の本人が「必要がない」「価値を感じない」と思うものを売らなくてはならないというのは、顧客をだましているような罪悪感を感じてしまう人も少なくありません。 その罪悪感も積み重なると自分自身を責める要因となり、精神状態がどんどん不安定になってしまう人もいるでしょう。   クレーム対応 営業は担当する外部の顧客からクレームを受けることも多々あります。顧客と商品・サービスの間に立って折衝をするのが営業なので、全ての案件は営業を通して進行していきます。 自分のミスでクレームを受けるならまだしも、会社の体制・組織の問題や低品質な商品・サービスの提供によってクレーム対応をせざるをえなかったり、理不尽な要求をしてくる顧客の対応に追われたり、ストレスを感じるシーンは多々あります。 その分、嬉しい声をもらえた時のやりがいや喜びもダイレクトに感じられるポジションではありますが、クレーム対応の方が頻度としては多くなりがちで、神経をすり減らして立ち直れなくなることもあるでしょう。   上司からの叱責 営業個人にノルマがあるように、営業メンバーを管理する立場の上司にもノルマがあります。現場のメンバーがノルマを達成しなかったらその上司もノルマを達成することができず、さらに上の立場の人から叱責されることになりますから、必然的に上司からの締め付けは厳しくならざるを得ません。 ノルマを持つ人間が、さらに下のノルマを持つ人間を厳しく管理したり叱責をするという組織構造も、営業が避けて通ることができない問題です。   ノルマが辛いと感じる具体的なシーンや原因を挙げましたが、自分に置き換えるといかがでしょうか。 このような場面を日常的に経験していて、「もう営業の仕事をしていて楽しいと感じることができない。」「精神的、体力的に限界」という場合は、自分のキャリアを一度見つめ直してみても良いのかもしれません。   現状打破のために もう、営業という仕事を頑張れないかもしれない、と感じながら現状をずっと続けていく、と心と身体のバランスを崩してしまう可能性もありますので注意が必要です。精神・身体の健康があってこその仕事にも関わらず、それすらも崩壊してしまったら本末転倒です。 そうなる前に、自らアクションを起こして現状を打破すると今は見えない世界が広がるかもしれません。 では、現状を打破するためにどのようなアクションを起こせば良いでしょうか。その方法は、大きく分けて下記の3つをピックアップしました。 考え方や視点を変える 職場を変える ジョブチェンジをする 以下で順番に詳しく解説しています。   1. 考え方や視点を変える 考え方や視点を変えるというのは、今の仕事の仕方や取り組み方を変えてみるということです。例えば、「なかなか目標を達成できない」という現状に対して、これまでどのように課題を抽出して、それに対してどのようなアクションをされたでしょうか。 一度、トライしたことが良い結果を生まなかったからといってそこで諦めずに、別の角度からどうアプローチができるかを模索して何かしらの最適解を出せたでしょうか。 課題に対してその原因の分解をして本質的な要因を探ったり、それを解決するためにはどうするのがベストか導き出しアクションにまで落とし込むというのは、とても根気がいることです。それ故にそのようなPDCAを回せている人は少ないものです。 ノルマなどに負けずに日々イキイキと過ごす同僚や先輩に、仕事にどうやって向き合っているのかを聞いてみたり、これまで避けて通ってきた会食や接待に積極的に参加してみるなど、今までの自分の仕事のスタイルの中でやってみたことがないことに挑戦すると良い結果を招くかもしれません。   2. 異動希望を出す 別の企業に移る前に、営業以外の部署に異動希望を出し、営業以外の仕事を経験させてもらえないか試してみましょう。転職をするというのは環境の変化が大きく、まだその段階ではないかもしれないと感じる人もいるかもしれません。 そういった場合に、同じ企業でも別の部署で全く違う仕事を経験でき、なおかつその仕事が自分に合っていたらとても良いことですよね。 会社そのものには不満はないと言う場合には、異動希望を出してその機会を狙ってみるのも1つの手です。 別の仕事を経験することで自分の中で新しい視点が生まれて、仕事を楽しく感じるようになるなど良い刺激になることが期待できます。   3. ジョブチェンジで新しい道を 3つめはジョブチェンジ、つまりは転職です。 異動希望が認められない場合や、現在いる企業の年収、社風が限界…と感じているのであれば転職も検討してみる必要があります。 また、そもそも「営業」という仕事にもう嫌気が指していて、やりたくないということであれば本格的に検討する価値はあるでしょう。 営業という仕事ではなく、新しい職種にチャレンジしてもっと自分が活躍できるキャリアパスを描きたいのであれば、どんな職種であれば自分自身が活躍できそうか、適性が合うかを調べてみましょう。   [PR] Webサイト制作で副業する方法とはスムーズな転職方法 ここでは、新しい仕事にジョブチェンジをしてみたい！興味がある！という人にどのようなアプローチで活動を行うとスムーズなのか、効果的な転職方法を解説します。 まずは、ジョブチェンジするのであれば、どんな職種に就きたいのか自分の中で明確にする必要があります。どの職種に就くのかによって、アプローチ方法は異なるからです。 営業からジョブチェンジする際の選択肢としては、例えば下記のような職種があります。   マーケティング / マーケター 主に「どうやって顧客を集客し、セールスにつなげていくか」について取り組むマーケティングの仕事は近年人気が高まっています。 もともと営業を経験していれば、顧客のニーズなどが理解しやすいのでマーケターという仕事で営業経験が活かせる可能性もあります。 顧客の購買心理について研究し、自社の商品の販売へと段階的につなげていくにはどのような施作が適切かを検討し、所属企業に対して具体的な行動の提案を行うのがマーケティングの仕事です。   経理や財務 すべての企業は1事業年度に一回は決算という形で期間中の損益を確定し、そこから税金の金額を計算して申告納付しなくてはなりません。 このために必要な仕事を行なっているのが経理や財務の仕事ですから、実務経験を身につければ転職市場での価値も高い人材になることができるでしょう。 経理や財務はその他にも銀行との融資交渉など、企業の資金繰りについても扱う仕事ですから、経営者からも一目置かれる存在になれる可能性があります。   ITエンジニア ITエンジニアは、企業内部で利用する勤怠管理システムや会計システム、その他業務支援のためのシステム等を開発し保守運営を行う仕事です。 働く人々の流れを検討し、それらをプログラミング等の技術によって自動化、効率化できるように企業に提案するのがITエンジニアの仕事となります。 ITエンジニアが使う技術は専門性が極めて高いため、1つの企業にとどまることなく技術を評価してもらう形でキャリアアップしていける可能性があります。いわゆる「手に職をつける」と言う形で、どの企業に所属することになったとしても生きていける人材を目指す方にはITエンジニアはおすすめです。   働きながらスキルを身につける ジョブチェンジを目指すのであれば、それぞれ必要な経験や知識があります。ただし、経験がない場合は、それを補完する意味でスキルの習得をしておくと転職活動時に有利です。 営業職しか経験がない状態で、ITエンジニアへの転職はすぐに実現できそうにありませんよね。また、自分自身が転職後になるべく早く戦力になりたい・昇給をしたいと考えている場合はなおさら、事前に準備をしておく必要があります。 ここでは例として、前述したITエンジニアへの転職を考える場合、どのような準備をして転職活動をすると良いか紹介します。 まず、退職をする前に一定期間、しっかりと学習なりトレーニングをして知識・スキルアップを図りましょう。レジュメに記載する自己PRのアピールポイントとしても武器になるはずです。 ITエンジニアは未経験からでも採用される可能性がありますが、最低限の知識があるのとないのとでは採用可能性に大きな差が生まれるのは事実です。 その際、将来的な転職まで見据えて支援を行なってくれるスクールがありますので、どこでトレーニングを受けるか？がポイントになります。   自分の強みを棚卸しする 営業からITエンジニアへのジョブチェンジをする場合、営業での経験の中で自分自身のどの部分がITエンジニアの仕事に活かせるか、を明確にする必要があります。 そのためには、これまでの経験1つ1つを振り返り、営業を経験する前と経験した自分とを比較して、どの部分が変わったか？人より秀でている部分は何か？具体的にそれを伝えられるエピソードはあるか？数値を出してアピールできる実績があるか？など、細かく自己分析をしてみましょう。 業種・職種は違くても、仕事には共通して必要なスキルがあります。例えば、コミュニケーション能力・臨機応変に対応できる柔軟性・業務効率化への工夫・体調管理など。まずは、これは次に繋がらないと考えず、一通り自分の強みと思えるポイントを洗い出し、言語化してみると良いでしょう。 そして、その中でもITエンジニアという仕事にはどんなポイントが特に活かせそうか、考えてましょう。それが大切な自己PRになるはずです。   幅広い視点で求人をみる これまでとは違う職種へ挑戦する際に、転職サイトなどで求人をみると様々な条件で検索をかけることができますよね。 ただ、経験したことがない業種・職種を自らの力で選ぶ時は、「理想」を追い求めがちです。転職市場で自分自身はどの位置にいるのか、自分を客観的にみることも必要です。 求人もまずは先入観を捨てて、規模の小さなところから大きなところ、年収レンジも理想ではなく現実ラインのところ、業務内容も興味があることから想像がつかないところまで、 一通り目を通して見てみましょう。 そうすることで、その職種への転職にまつわる情報が蓄積され、選考を進みたいと思う求人もある程度まとまってくるでしょう。 IT業界でおすすめの転職サイト・エージェントもまとめているので、転職を検討している方はぜひ活用してみてください。   ここでは、営業職からITエンジニアへのジョブチェンジのステップを紹介しましたが、どの職種へチャレンジする際にも応用が効くはずです。1つ1つ順序立てて、しっかりと進めていきましょう。 ただ、今の仕事と両立しながら転職活動を進めるのはなかなかハードルが高いと思う人もいるかもしれません。 そんな人には、ITエンジニアへのジョブチェンジであれば、TechAcademy就職予備校という就職直結型スクールがおすすめです。ここは、学習から転職活動まで一貫してサポートしているので、社会人で忙しい人でも専門スキルの習得・効率の良い転職活動を実現できます。 詳しくは、TechAcademy就職予備校のページをご覧ください。 他の職種を目指す人も、このような就職サポートまで提供しているスクールなどを活用することで、自分への負担を軽減することができるのでぜひリサーチしてみてください。
キャリア・転職

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） WordPressコース Webデザイン WordPress プラグインで簡単導入！WordPressでメルマガを発行できるプラグイン5選