WordPress

WordPressでECサイトが作れる！ショッピングカートを追加できるプラグイン6選

WordPressで【ショッピングカート】を追加できるプラグインを6紹介した記事です。WordPressの汎用性を生かして、ECサイトを構築するときに便利なプラグインです。無料ですぐに使えるプラグインもあります。

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

監修してくれたメンター

吉﨑智正

トゥービーコンティニュード合同会社代表。1995年ぐらいからHTMLを生業としており、ここ7年はWordPressを中心に仕事をしています。直近2年半は神奈川と広島で2拠点生活をおくっています。

WordPressは非常に汎用性が高く、ECサイトを作ることも可能です。

今回は、ECサイトを作るときに欠かせない「ショッピングカート（買い物かご）」の機能を簡単に追加することができるプラグインを紹介します。

機能の違いなどを比較してみてください。

1：easy myShop

ネットショップを作成する上で人気なeasy myShop。

WordPressでの利用も簡単にできます。

デザインのレイアウト、人気ランキングの表示、Amazonで見るようなレコメンド機能、さらにはクーポンも発行できます。

これ1つで、ショッピング機能はかなり本格化するので、ぜひ利用することをおすすめします。

easy myShop

2：welcart

国産のWordPress専用プラグインで、商用でも無料で利用できます。

有料でカスタマイズできる追加機能もあり、よりカスタマイズしたい人も満足して使えそうです。

公式サイトのヘルプが充実しているのも嬉しいですね。

welcart

welcartの使い方

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

3：ネットショップ管理プラグイン

その名の通り、ネットショップに必要な機能がすべて揃ったプラグインです。

通常版は55,000円の有料販売ですが、その分機能は充実しています。

ネットショップ管理プラグイン

4：Easy Digital Downloads

WordPressサイトで、ダウンロード販売の機能を追加できるプラグインです。

公式プラグインなので、設定が簡単にできます。

Easy Digital Downloads

5：SKELETON CART

PHPとHTMLを組み合わせた有料のカートシステムです。

デザインの自由度が高いのが特徴です。

無料のプラグイン、SKELETON CART Connector for WPをダウンロードすると、WordPressのショッピングカートとして使えます。

SKELETON CART

6：WP e-Commerce

英語のプラグインですが翻訳ファイルも付いているので、ある程度、問題なく使えます。

決済方法が豊富で、PayPalだけでなくGoogle Checkoutにも対応しています。

WP e-Commerce

WP e-Commerceの使い方

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

WordPressでECサイトを作れる無料テーマの記事もあるので、あわせてご覧ください。

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

WordPressを学習中の方へ

これで解説は終了です、お疲れさまでした。

つまずかず「効率的に」学びたい
副業や転職後の「現場で使える」知識やスキルを身につけたい

WordPressでのサイト制作を学習していて、このように思ったことはありませんか？

テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。

まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。

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

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

WordPress

WordPressのテーマをインストールする方法【WordPress初心者向け】

WordPress初心者向けに、テーマ（テンプレート）のインストール方法を紹介する記事です。基本中の基本の操作ですので、しっかりと覚えておきましょう。 ...

WordPress

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

WordPressのプラグインの使い方を紹介する記事です。今回は、WordPressのページ表示速度を高速化できるプラグインの1つである、Quick C...

WordPress

WordPressでファビコンを表示させる方法【初心者向け】

ブラウザ上のタブや、お気に入り一覧で表示されるそのサイトのアイコンを「ファビコン（favicon）」といいます。テックアカデミーマガジンのファビコンはこ...

WordPress

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

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

WordPress

予約システムが簡単に！MTS Simple Booking Cの使い方ーWordPressプラグイン【初心者向

WordPressのプラグインについて初心者でも分かるように解説しています。 MTS Simple Booking Cは完全日本語対応の予約システム運用プ...

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

【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

今さら聞けない！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

ゼロからの始め方！WordPressでブログサイトを作る手順とは【入門向け】

Webサイトを作成する上で人気が伸びているWordPress(ワードプレス)。今回は、WordPressを使ってブログサイトを作る手順についてTechAcademyの現役エンジニアが解説しています。 WordPressについてそもそもよく分からないという方は、WordPressとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、WordPress講座の内容をもとに紹介しています。目次 WordPressとはサイト作成に準備するものブログサイト公開までブログサイト公開後今回の登場人物田島悠介（29）あらゆる言語をマスターしている万能型エンジニアでTechAcademyのメンター。人の成長を見るのが一番のやりがい。好きな映画は『トスカーナの休日』大石ゆかり（24） TechAcademyの受講生。 Instagramには3つの写真加工アプリで編集してからアップするという。大石ゆかり田島メンター、私今アメブロでブログ書いてるんですけど、もっとおしゃれな感じにしたいんですっ！なんか良いサービス知らないですか？田島悠介ってか、ゆかりちゃんアメブロやってたんだ！教えてよ！笑大石ゆかりそれは秘密です♪（スッピン写真とか載せてるし、絶対見せられない）田島悠介ええー。。ブログやるなら「WordPress(ワードプレス)」っていうのがおすすめだけど知ってる？大石ゆかり Word(ワード)なら知ってますけどそれとは違うんですか？田島悠介 Wordでは無いんだけど、同じような使い方で自分のサイトを作れるんだよ！大石ゆかりへえ〜そんな便利なものがあるんですね！具体的に教えてくださいっ！田島悠介おっけ〜！教えたら今やってるブログも教えてね！大石ゆかりそれはダメです！！ WordPressとは WordPressとは、CMS(コンテンツマネジメントシステム)と呼ばれるサービスの一つで、無料で使えることで有名です。ちなみにCMSとは簡単にサイト上のコンテンツを管理することができる仕組みです。普通、サイトを作ろうと思ったらHTML/CSSといった言語を使いながらプログラミングの作業が必要になります。しかし、WordPressの場合は、プログラミングを一切することなく自分のサイトを作ることができるのです。下の画像は、当サイトのTechAcademy magazineですが、このサイトもWordPressを使って動いています。ブログのように記事配信を行っていくようなサイトにはWordPressが適していると言えるでしょう。最近では企業のコーポレートサイトもWordPressで作成されているサイトがどんどん増えてきています。大石ゆかりなんでWordPressってすごい人気なんですか？田島悠介やっぱり無料で手軽なのに機能が多く何でもできるところじゃないかな！大石ゆかり私アメブロしかやったことないんですが、大丈夫ですかね？笑田島悠介もちろん！特に専門スキルは必要ないよ！ [PR] Webサイト制作で副業する方法とは準備するもの WordPressを使い、実際にWebサイトとして動かしていく上で必要なものを紹介しています。とは言ってもWordPressを使えるレンタルサーバーを利用すれば、とても簡単に済みます。現在、ほとんどのレンタルサーバーでWordPressを利用できます。初心者にも人気なレンタルサーバーには以下のようなものがあります。さくらインターネットエックスサーバーロリポップ ConoHa WING レンタルサーバーを利用すれば月額500~1,000円程度でWebサイトを運営することができます。またレンタルサーバーではアドレスが「https://◯◯.sakura.ne.jp/」のようになりますが、「◯◯.com」や「◯◯.jp」のように自由にアドレスを決めたい場合、独自ドメインサービスも利用する必要があります。独自ドメインサービスには以下のようなものがあります。お名前.com ムームードメインそれでは、さくらインターネットを例に、WordPressを利用する手順を確認していきましょう。さくらインターネットでWordPressを利用する場合、スタンダードプラン以上で契約する必要があります。以下で紹介している手順は、さくらインターネットで公開されている手順「【新コントロールパネル：クイックインストール】WordPress(ブログ)のインストール」をもとにしています。【新コントロールパネル：クイックインストール】WordPress(ブログ)のインストール WordPressを利用する手順は以下のとおりです。 WordPressをクイックインストールする Webサイトのタイトルなどを決めるでは、一つずつ解説していきます。 1. WordPressをクイックインストールするさくらのレンタルサーバ「サーバコントロールパネル」にアクセスしてログインします。サーバコントロールパネルサーバコントロールパネルホームの左側のメニューから「Webサイト/データ>クイックインストール」を選択します。 WordPressの「新規追加」ボタンをクリックします。はじめてWordPressを導入する場合は、WordPressの設定や記事を格納するデータベースと呼ばれるものを作成する必要があります。「データベース作成」をクリックします。データベースや接続用パスワードを決めて入力します。データベース文字コードは「UTF-8」のままとします。入力が終わったら「同意する」にチェックを付けて「作成する」をクリックするとデータベースが作成されます。インストールURLには「blog」などとすると良いでしょう。その他は既定値のままでかまいません。「ライセンス・利用規約に同意する」にチェックを付けて「作成する」をクリックします。インストールが完了すると以下のように表示されます。簡単ですね！次に管理画面URLにアクセスしてWebサイトのタイトルなどを決めましょう。 2. Webサイトのタイトルなどを決めるブログサイトの「サイトのタイトル」、WordPressの管理画面にログインする際の「ユーザー名」「パスワード」「メールアドレス」を入力しましょう。あとで変更することも可能です。「検索エンジンがサイトをインデックスしないようにする」にチェックすると、ブログサイトが検索結果に出てこなくなります。通常はチェックしなくて大丈夫です。 WordPressをインストールし、「成功しました！」と表示されれば無事完了です。実際にログインしてみましょう。設定したユーザー名、パスワードでログインするとWordPressの管理画面に入ることができます。無事ログインできればWordPressの管理画面に入ることができるはずです。上記の画像がWordPressの管理画面になります。ブログを投稿したり、サイトの設計を編集したり、アカウントを追加するなどは基本的にこの管理画面上で行うことが可能です。サイドメニューに情報が多く、慣れるまで少し大変かもしれませんが毎日ログインして利用していればすぐ使えるようになるはずです。大石ゆかりわぁ、WordPressっていろんな機能があるんですね。田島悠介管理画面の使い方についてはこの後詳しく見ていくから付いてきてね！大石ゆかりは、はいっ（汗）ブログサイト公開まで実際にWordPressが利用できたらWebサイトのデザインや構成を編集していきます。これから作っていこうと思っているブログ記事やカテゴリなどデザインを整える必要があるでしょう。 Webサイトの構成(サイトマップ) テーマの選択公開するブログサイトの構成、つまりサイトマップを考える必要があります。作る前から細かく設定する必要はありませんが、サイト内にどんなページが必要なのか書き出しておくとテーマも選びやすくなります。簡単にブログサイトのサイトマップを作ってみました。テーマとは、簡単に言えばサイトのデザインです。 WordPressが人気な理由の一つとして最初にも紹介しましたが、HTMLやCSSなどデザインやプログラミングの作業をしなくてもテーマを選択するだけで一つのサイトにすることができます。何もしなければサイトデザインはデフォルトテーマ「Twenty Twenty」が適用されています。このテーマでも十分魅力的なWebサイトを作成することができますが、「もっとおしゃれなテーマにしたい」、「ヘッダーやフッターをつけたい」などサイトに合わせてテーマを選んでいきましょう。テーマを変更する際は、「外観」>「テーマ」で変更することが可能です。テーマ自体は、WordPressだけでなくいろんな企業や個人で提供しているので、調べてみることをおすすめします。無料で使えるWordPressのテーマ30選も合わせて紹介しておきます。大石ゆかりサイト上に大きく動画が流れるようなデザインとかもできますか？田島悠介もちろん動画が流れるテーマはたくさんあるよ！大石ゆかりおお、そうなんですね♪ 下から浮き上がったり横からスライドしたり動きのあるサイトとかも作れます？田島悠介パララックスっていうサイトかな。もちろんあるよ！WordPress自体世界中で使われてるからテーマを作る人も世界中にいて、種類に困ることは無いと思うよ！固定ページについて固定ページは更新することが少ないページで利用します。企業ページの場合、会社概要やお問い合わせページなどが該当します。また、デザインテーマによっては、固定ページで設定した内容を上部のナビゲーションメニューで自動的に表示してくれます。例えば、次のように、ニュース・インタビュー・テクノロジー・キャリア・お問い合わせという5つの固定ページを作成した場合、ページ上部にこの様に表示されるイメージになります。投稿ページについて WordPressは元々ブログを作成するために開発されたアプリケーションです。投稿ページでは日々のブログを投稿するイメージで、ページが作成されます。固定ページと異なり、デザインテーマの標準状態で、ページ上部のナビゲーションメニューに投稿ページの内容が表示されることは、ほぼありません。通常は、トップページに投稿日の新しい順に表示されます。ブログサイト公開後 WordPressが選ばれている理由の一つにカスタマイズの柔軟性がよく挙げられます。記事を追加、更新できるだけでなくWebサイトのSEO対策や会員機能の追加など簡単に行えるのです。せっかくブログサイトを作ったらより多くの人に見てもらいたいはずです。プラグインの導入ブログ記事の投稿プラグインの導入は「プラグイン>新規追加」から行います。キーワードなどで検索を行い、導入したいプラグインの「今すぐインストール」をクリックします。プラグインをインストールしたら「有効化」を行います。ちなみに以下のプラグイン「WooCommerce」はWordPressでECサイトを構築する定番中の定番のプラグインです。プラグインはいつでも設定できるので、必要に応じてインストールしましょう。 WordPressでまず最初に入れるべきプラグインを参考にしながらより本格的なサイトにしていきましょう。続いてブログ記事を実際に投稿してみましょう。新規でブログ記事を作成する場合は「投稿>新規追加」で新しく公開することができます。 WordPressはバージョン5.0からエディタがブロックエディタに変更されています。/か+ボタンで要素を選択しながら、ブロックを組み立てるように記事を作成していくのが特徴です。文章だけでなく画像や動画を記事内に挿入し、素敵な記事を作成すると良いでしょう。サイドメニューの「投稿」>「投稿一覧」で現在公開している、下書きの記事を一覧で見ることができます。サイトデザインはデフォルトテーマ「Twenty Twenty」が適用されていますが、以下のように「Hello world!」というタイトルのブログ記事を読むことができました。大石ゆかりついにブログ更新が始まるって感じですね♪ 田島悠介そうだね！ちなみにゆかりちゃんはどんな事書いていくの？大石ゆかりんー特に決めてないんですけど海外の映画とか見た感想をつらつらと書いていこうかなって思ってます♪ 田島悠介おお、いいね！じゃあ、僕の好きな「トスカーナの休日」もぜひ紹介してね！おさらい WordPressとは誰でも簡単にサイトを作れる便利なサービス！ WordPressはレンタルサーバーで簡単に始められる！サイトを作る上でサイトマップを作成しよう！ WordPressはテーマとプラグインが充実している！初めてWordPressでサイトを作る際、サーバーやドメインの契約、新しいツールの導入など慣れない作業が多いかもしれませんが、サイトを公開してしまえば後はどんどんブログ記事の作成に集中できます。 WordPressの使い方を覚えて、ぜひ自分だけのブログサイトを作ってみましょう。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressコースを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。オンラインの説明動画や無料体験も実施中です！まずはこちらからお気軽に試してみてくださいね。

WordPress

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

アプリデザイン

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、WebデザイナーであるChristian Krammer氏によって投稿されました。 UIデザインツールはこれまでにおいてかなりの人気を集めてきました。Affinity Designerや、Gravit、Sketch等の素晴らしいアプリケーションが大きく進化した一方でAdobe XD （Adobe Experience Designの略）やFigma のようなプレイヤーもこのフィールドに参入してきました。個人的には後者に最も魅力を感じます。Sketchとの類似性から、Figmaも最初の段階から簡単に正しく理解できました。更にFigmaは簡単なファイルの共有やvector networks、「constraints」(レスポンシブデザイン向け）、リアルタイムコラボレーションのような他の使い易い競合相手とは明確に違う独自の個性があります。この記事ではSketchとFigma 両方のアプリケーションを細部に渡り比較し、それぞれの長所がどのような点かに焦点を当てていきます。 Sketchの最大の弱点は常にAppleのエコシステムにロックインされている事です。設計するだけではなく、ファイルを開きチェックするのにもMacが必要です。WindowsやLinux上では全く機能しません。その為しばらく経つとSketchファイルのスペックを持つ有料のサービスが現れた訳ですが、それにしても厄介で余分な手順です。上：Sketch 下：Figma これが恐らくFigmaが最初の段階から一線を画す理由の1つです。すなわち、世界中基本的にどのデバイスでもFigmaはWebブラウザで使うことができます。どのインストールも一切不要です。ただChrome（又はFirefox）を開いてアカウントを作成して設計を開始するだけでいいのです。私は以前からずっとブラウザベースのツールを躊躇していましたが、Figmaは一瞬で私の懸念を仏拭しました。Figmaは多数の要素を含みながらもSketchと同様高性能です（もし同様でなければFigmaの方がより高性能です）。 WindowsやMac用のFigmaのスタンドアローンデスクトップアプリも入手可能ですが、基本的にそれらはただのブラウザバージョンのラッパーにすぎません。それらはキーボードショートカットにより優れた一方で、常にオンライン上にいなければなりません。勝者：Figma 理由：プラットフォームに依存しないためユーザビリティ（特徴的機能とユーザーインターフェース）基本的に、FigmaはSketchのインブラウザ版と呼ぶのが最も相応しいでしょう。機能はほぼ同じ、インターフェースも似ている、キーボードショートカットでさえもほぼSketchから受け継いでいる。もし既にSketchを知っていれば、Figmaが2016年の始めにリリースされた時にすぐに簡単に使いこなせるようになったでしょう。 Figmaはリリース当初から様々な点において改善され、いくつかの部分ではSketchを上回ってきました。しかし、プラグインやサードパーティ・ツールとの統合、リアルデータを利用できる機能（Craft Pluginも使用して）など、欠けている機能が未だにいくつかあります。それにも関わらず、この調子で改善が進むとFigmaがSketchに肩を並べるのはもはや時間の問題でしょう。勝者：引き分け理由：現時点では大差はありません。しかしSketchの方があなたの仕事を効率化させる要素を持ち合わせています。価格 Sketchは元々新しいバージョーンごとに約99USドルの初回手数料のみで発売されました。しかしやがてこのビジネスモデルは維持不可能だと判明されます。Bohemian Coding社は最近価格を定期購入が必要なモデルに変更しました。99USドルで1年間の無料アップデートが入手できます。その後はそのまま使い続けることができるか、更に同額を支払うことでまた別の1年アップデートが行えます。この値上がりは当初不適切なように見受けられましたが、デザイナーとしてあなたのメインツールへの99ドルの価値とは何でしょうか？そうです、大した額ではありません。 Adobe’s Creative Cloud の定期購入よりはまだ安いのです。（又、Sketchは何の問題もなく使い続けることができる一方、Creative Cloud の定期購入を辞めたらどのAdobe CC アプリも使い続けることができなくなります。）当分の間は、Figmaは全ての人が無料で使えるようになっていますが、今年後半には変わってくるでしょう。きっと定期購入制になり、月額10~15USドルになるでしょう（あくまで私個人の見解ですが）。確かな事は1つあります。それは、Figmaは学生に対して常に無料でしょう。（Sketchが教師と学生に対しリーズナブルなディスカウントを提供しているのと似ています。）勝者：引き分け理由：Figmaの価格に関する発表はまだない為 [PR] Webサイト制作で副業する方法とはコラボレーション機能 Figmaの主な差別化要因は恐らく「マルチプレイヤー」と呼ばれるリアルタイムコラボレーション機能でしょう。その機能を使って他のユーザーと同時に1つのファイルを編集することができるだけでなく、他のユーザーがデザインをいじっているのを見たり、内蔵型のコメント機能を使って変更を知らせることができます。 1つの例として、この同時編集はプレゼンテーションやリモートチームにとって素晴らしく、また関わっている全てユーザーが同じ状態を確認し、意図していなかった上書きを防ぐことができます。 Sketchには（プラグインを使用してですら）そのようなコラボレーション機能はありませんし、多分そのような機能がない方がSketchにとってはよいのかもしれません。なぜなら「このボタンをもっと大きくしよう。ちょっと待てよ、勝手にやっちゃえ！」というような結末をもたらすかもしれないからです。もちろんこれは少し大げさな例です。この機能は多少価値はありますが、事前に特定のルールを決めておかないとリスクがあります。勝者：Figma 理由：同時に同じファイルを複数の人で共同編集できる為ファイル共有とスペックリアルタイムコラボレーション機能に幾らか関連しているのは設計ファイルの共有です。なぜならFigmaではすべての事がブラウザで行われるため、全てのファイルが必然的にURLを持っていて、それを同僚や上司に送ることができます（閲覧専用モードでも可能です）。このブラウザベースのアプローチの別の大きな利点は、開発者をはじめ全ての人がサードパーティツールの必要性なしにすぐにデザインを開き検証できることです。 Figmaでは簡単に他のユーザーとデザインを共有できます。これはまさに、1つのファイルにおいて必要不可欠な全ての情報（例えばフォントサイズや色、寸法、アセットなど）を他の共同制作者に提供するためにSketchに求められているものです。しかしながら、前にも述べたように、ここであなたを手助けするZeplinやSimpli、InVisionの Inspect、Avocode、Marklyなどの有料のツールが必要です。公平な立場からみて、最初の3つは1つのプロジェクトでは無料ですが、より複雑なものに取り組む際にはそれだけでは十分ではないでしょう。更に何らかのツールを必要としている場合や、そのような（正直なところ基本的な）機能にお金をかけたくないというのであれば、MarketchやSketch Measureという無料のプラグインもあります。多くの有料のアプリではコメントを追加したり自動的にスタイルガイドを作成することができます。あるいは、FigmaはSketchのファイルフォーマットをサポートしているので、SketchのファイルをFigmaにインポートしてチェックすることさえできます。左上から右下順に:Avocode、Zeplin、Simpli、Markly。これら全てにおいて様々な方法でSketchのデザインの閲覧、共有可能。もし共同編集者とデザインをちょっと見たいだけであれば、内蔵されているSketch Cloudが正にその役割を果たしてくれます。iOSデバイスでデザインを見るには、Sketch MirrorやFigma Mirrorを使って、Androidのデバイスであれば、MiraやCrystalを使用することができます。 FigmaはAndroidベースのアプリを提供しないのですが、（デスクトップコンピューター上で）フレームかコンポーネントを選択後、デバイス上で「www.figma.com/mobile-app」を開くと、1種のプレビューが見れるでしょう。勝者：Figma 理由：サードパーティツールの必要性なしにブラウザ上で簡単にファイルの共有が可能な為ファイルの整理 Sketchには、ページを提供するという組織能力があるため1つのファイルでアプリやWebサイト全体を作ることができ、ページ同士のスイッチも即座に可能です。Figmaはこの点において後れをとっています。 Figmaはページを提供しませんが少なくとも複数のファイルを1つのプロジェクトに結合することは可能です。左：Sketchでは1つのファイルを複数のページに整理でき簡単にスイッチ可能右：Figmaのプロジェクトは未発達アートボードというSketchのもう1つ重要なコンセプトも適応され強化されました。Figmaでは塗りつぶしやボーダー、エフェクトを簡単にアートボードに適用でき、またそれらをネストしたりグループから簡単に作成することもできます。1つの例として、これにより組み合わされた範囲より大きな要素のコンテナも許容され、「constraints」機能の手助けになりうるでしょう。更には、各アートボードには独自のネストされたレイアウトグリッドがあり、それによりレスポンシブデザインに役立つのです。 Sketchでもアートボードをネストすることが可能ですがそのインプリメンテーションはFigmaと比べると全く有効的ではありません。勝者：引き分け理由：Sketchにはページがあるが、Figmaのアートボード（フレーム）はより有効的な為レスポンシブデザイン Figmaが導入した（Sketchにも何ヶ月か経ってから導入された）機能はレスポンシブデザイン、すなわち、どのように要素が異なるアートボードやデバイスのサイズに対応するかを設定した機能です。 Sketchでそのような機能を提供するプラグインが以前からありますが、ちょっと使いにくい感じがありました。「group resizing」という特有の機能だけはFigmaの「Constrains」機能に匹敵して簡単に使用できます。左：Sketchの「group resizing」機能は1つのドロップダウンメニューで設定され慣れるまで少し時間がかかります。右：Figmaの「constraints」機能はより目で見てわかるようになっています。両者とも基本的に同じような動作ですがその見栄えは一目瞭然。Sketchでは4つのオプション付きのドロップダウンメニューしかなく、操作中に一体どんなふうになるなるのかがイメージしずらいです。Figmaはよりビジュアル化した方法でこれらのプロパティを明確にします。例えば、ある要素をアートボードの端に固定するか、それと均一にリサイズする事などができます。 Figmaの大きな利点はこれらの制約がレイアウトグリッドと一緒に組み合わせることで機能することです。要素は、例えばある列（又は行）に固定されるか、それらの幅に一致します。更には、各軸にこれらの設定を個別に変更することができ、グループだけではなくアートボードにも機能します。Sketchではあり得ない機能です。勝者：Figma 理由：その制約機能は遥かに進化していてより多くのオプションがある為ベクトル　マニピュレーション Figmaが発売された時の1つの大きな特徴は「vector networks」でした。もはやベクトルはただ一連の繋がった点（ノード）ではありません。今や、新しい線でどのノードからも分岐する事ができます。例えば、矢印を作るのなんて朝飯前です。 Figmaのvector networksはベクトルのどの点にもセグメントを追加することができます。しかしそれよりも遥かに勝っているものがあります。ベクトルのパーツはPaint Bucketツールで簡単に塗りつぶされる（又は削除される）事ができます。ベンドツールを使ってセグメント全体を動かす（又は曲げる）事も可能です。そして1つのベクトルから別のベクトルへ線点も同様に）をコピーするのは一瞬でできます。 Figmaのvector networksでセグメントを簡単に動かしたり曲げたりする事ができます。この特殊な機能1つでFigmaはSketchと一線を画しており、アイコンデザインに適したものになっています。それに比べ、Sketchで利用可能なツールはほぼ時代遅れな感じを受けます。Sketchではベクトルオブジェクトを作成し操作するために必要なすべてのものが揃っているかもしれませんが、より複雑なベクトル操作が必要になってくるとすぐに扱いにくくなるでしょう。はじめの図：Figmaでは、ペイント塗りつぶしツールを使って2つの重複した円の塗りつぶされた部分を削除し1つの輪をつくる。 2番目の図：Sketchではブール演算を用い従来の手法を使っている。(ちなみにこの方法はFigmaでも可能) ほとんどの場合、Sketchではある特定のタイプの形を作るのにブール演算を使用しなければいけませんが、その多くはFigmaのvector networksではより簡単に作成可能です。Sketchでは2つのベクトルオブジェクトを繋げたり、またはブール演算が適用された後に形を平らにすることさえしばしば難しいという事実がさらに物事を悪化させます。このアプリはこの点において問題が山積みなのは確かです。勝者：Figma 理由：vector networksは全く新しい次元をベクトルマニピュレーションにもたらします。Sketchにおいてはまだそれと匹敵するものはありません。サポートされているファイルの種類新しいアプリケーションが出るたびに、もしプロジェクトを移行したければ全てをやり直さなければいけないという問題によく直面するでしょう。Figmaではそうではないのです。見事なほどに正確な方法でSketchのファイルを開くことができ、この時点で既にFigmaが優位です。残念なことに逆パターンでは機能しません。1度Figmaでデザインをスタートしたらもうそれを使い続けるしかないのです。SketchにエクスポートすることもPDFファイルを作成すること（またはインポートすること）もできません。SVGにエクスポートするオプションもありますが、デザインアプリケーション間で複雑なファイルをエクスチェンジするのに理想的なフォーマットではありません。エクスポートオプションは一見似ていますがSketchにはより多くのオプションがあります。左：Sketch 右：Fiigma もう1つの制限要因はJPG画像をFigmaでエクスポートしたときにその品質水準を設定できないことです。なので画像を最適化する他のアプリケーションが必要になるかもしれません。Sketchの最新版ではさらにもっとエクスポートのオプションが改善しています。現在ではファイル名に接頭辞と接尾辞の両方を設定できると同様、Androidへのエクスポートをはるかに簡単にさせるエクスポートプリセット機能があります。各アプリケーションがサポートするエクスポートファイル形式を見てみましょう。 Sketch PNG JPG TIFF WebP PDF EPS SVG Figma PNG JPG SVG 勝者：Sketch 理由：より多くのファイル形式とより良い保存、エクスポートのオプションがある為アクセシビリティ FigmaにはSketchで使用できる多くのショートカットキーがありますが、そのアクセシビリティのレベルは同じではありません。Sketchではほぼ全ての事がキープレスで行うことができます。もし気に入らないショートカットキーの組み合わせがあればあなた独自のやり方をシステム環境設定で登録することが可能です（デフォルトによって割り当てられないショートカットコマンドが主になる傾向があります）。 macOSのシステム環境設定でSketchのあなた独自のショートカットキー設定が可能 Figmaはブラウザ上に存在しているためそのようなことは一切不可能です。デスクトップアプリでその点を補うことができますが、特定のメニューバーコマンドが無いせいである特定の機能を単純にキーボードに割り当てることは不可能です。勝者：Sketch 理由：そのアプリケーションのほぼ全ての機能がショートカットキーでアクセスすることができ、更にはカスタマイズできる為シンボル（コンポーネント） 1つの重要な機能がちょうどFigmaに導入されました。それはシンボル、又はここではコンポーネントと呼びます。コンポーネントを使用すると、「instances」の形式で簡単に再利用できる1つの複合オブジェクトにいくつかの要素をを組み合わせることができます。主要なコンポーネントが変更されるとすぐに、全てのインスタンスがその変更点を受け継ぎます。（しかしながら、その同じコンポーネントのバリエーションを考慮して特定のプロパティは個別に修正されます。）最近では、Figmaではファイル間や複数のユーザーと一緒に共有できるコンポーネントのライブラリを作成することさえ可能です。これは確固たるデザインシステムへの大きなステップです。 Sketchでは、個々のインスタンスの修正がインスペクタパネル上でオーバーライドの形で処理されるので、各インスタンスごとにテキスト値や画像の塗りつぶし、ネストされたシンボルの変更が可能です。 Figmaでは、塗りつぶし、ボーダー、効果（影やぼかし）を含め、キャンバスで直に1つの要素のプロパティをアップデートすることができます。上：Sketchではインスペクタパネル上でオーバーライドを使用してシンボルインスタンスの内容を変更します。下：Figmaではテキストの色を含め直接キャンバスキャンバスでコンポーネントのインスタンスをカスタマイズできます。シンボル（コンポーネント）の真の強みはレスポンシブデザインで発揮されます。どちらのアプリでも、親のサイズが変更された時にどの様に要素がシンボル内で反応するか定義することができ、異なる場所や画面のサイズでシンボルを使うこともできます。 Figmaが未だに後れを取っている領域はレイヤーやテキストスタイルです。形やテキストレイヤーのスタイリングを保存することができなく、他の要素と同期することも不可能です。しかしながら、1つの要素から別の要素にスタイリングをコピーして貼り付けることはできます。勝者：引き分け理由：インプリメンテーションは極めて同じレベルですが、Figmaはその共有可能なコンポーネントでわずかに有利です。プラグイン Sketchは並外れて素晴らしい機能を兼ね備えていますが、それを決定打にしているのはSketchを強化させたり足りない機能を補うサードパーティプラグインの存在でしょう。 1度に複数のレイヤーの名前を変更したり、ダイナミックボタンを作成したり、カラーパレットを保存し読み込んだり、Unsplashから簡単に画像を挿入したり、Git機能を有効化したり、Sketchの中でアニメーションを創り出すことができたりなど、使用目的は様々です。プラグインの全リストは公式ディレクトリやGitHub上で見ることができます。公式WebサイトとGitHubの両方で、Sketchの膨大なプラグインのセレクションを閲覧可能です。では、Figmaですが、現段階では全くそのような機能はありません。公平に言うと、Sketchは恐らく開発の初期段階ではこれらの多くの機能はありませんでした。そして将来的にはFigmaにもプラグインエコシステムが導入されるのは確実でしょう。注意したいこと：プラグインがSketchに大きな利点を与えた一方で、それらが何かしらの落とし穴にもなりえます。それらは新しいリリースの度に正常に機能しない傾向があり、Sketchチームは将来の開発者たちを遠ざけないためにも細心の注意を払う必要があります。勝者：Sketch 理由：単純に、Figmaにはプラグインが全くない為プロトタイピング AdobeXDと違ってSketchもFigmaもプロトタイピング機能が備わっていません。今のところFigmaには導入される予定はありませんが、Sketchには少なくとも基本的なプロトタイピング機能をもたらすCraft Pluginがあります。更にその人気でSketchは他のプロトタイピングツールとの幅広く統合することが可能です。例をいくつか挙げると、InVision、 Marvel、Proto.io、Flinto、Framerなどがあります。これらを一緒に使うことによって簡単にデザインをインポートしてアプリを同期することができます。現時点でFigmaと動作する唯一のアプリケーションはFramerです。似たようなツールのサポートが将来どのようになっているか述べるのは難しいですが、そのようなインターフェースが既に製作段階かもしれません。勝者：Sketch 理由：Craft Pluginには説得力のあるプロトタイピング機能がありませんが、Sketchは多くのプロトタイピングサービスと統合している為実データでの作成 Sketchが提供する数あるプラグインの中でいわゆる「content generators」というものを見つけるでしょう。その一例として、ダミーコンテンツでデザインを埋めることができます。しかし、より興味深いことはこれらのちょっとした機能が様々な情報源から実データを引き出すことを可能にし、またJSONファイルの形で内容を挿入することさえ可能です。これにより設計の初期段階でより情報に基づいた判断ができ、エッジケースも明らかにできます。このカテゴリーで最も優れているのはInVisionのCraft Pluginです。それを使ってある要素に内容を追加するとすぐに、1つのステップで簡単にその内容を複製・変更する事ができます。Craftではデザインのアセットを保存し、チーム内で共有したり又は自動的にスタイルガイドの作成も可能です。他の機能やオプションの中でも、SketchのCraft Pluginでは要素を複製し、同時に他の内容を追加することができます。 Craftよりは優れてはいませんが、似たような機能を持つプラグインがもう数個あります。Sketch Data Populator、Content Generator 、 Day Playerがそうです。 Figmaにはまだそのような機能はありませんが、時間の問題だと思います。Adobe XDが少し前に適応したようにアプリにその機能を統合するのか、もしくはプラグインシステムに依存するのか、どちらの手段をとるか興味深いところです。勝者：Sketch 理由：Sketchでは様々なプラグインで備え付きの機能の不足を補い、簡単に実データを使用できる為バージョニング私がいつも行っていることの1つは、始めの頃のデザインがどのような感じだったか見るためにCommand+Zを使って変更点を1つ1つ元に戻すことです。評価の基準を持つか、新しいイテレーションをベースとして複製するかのどちらかです。Figmaはブラウザ上の限られたリソースのためここで行止まりと思うかもしれませんが、実際はSketchに劣ってはなんかいません。どちらのアプリでも古いバージョンをブラウズして復元する事ができ、自動的に保存されます。しかしながら、Sketchのインプリメンテーションは理想とはかけ離れていて、どこから始めるかもわかりません。何といっても時間がかかるのです。実際に閲覧できる前にバージョンを復元しなければいけなかったり、ハードドライブ上でスペースを無駄にする結果になるかもしれません。さらに言えば、クラウド上で(Dropboxを介してなど)複数の人が同じファイルで作業している時に簡単にダメになってしまう可能性があります。 Figmaでは瞬時に前のバージョンを復元する事ができ、複数の人が同じファイルを編集している時はそれぞれの人の変更を分離できるので役に立ちます。それから前の状態に戻ったり、新しいアイデアの出発点としてバージョンを復元することができます。勝者：Figma 理由：Sketchのバージョニングは不完全過ぎて勝敗は明らかです。テキスト機能他の点と同様に、どちらのアプリケーションでもテキスト操作はかなり似ていますが、いくつかの違いは言及する価値があります。デフォルトによってFigmaではGoogle Fontsからでしか選択できないのですが、単純にインストーラーでシステムォントにもアクセスできます。私が常にSketchに物足りなさを感じる部分はテキストレイヤーのボーダーの位置の変更機能です。ここでは「中心」だけが唯一の選択しです。Figmaにはその他にもシェイプレイヤー用であるかのごとく「内側」と「外側」が選択できます。左：Figmaでは、テキスト枠内の垂直の位置（上）が設定でき、さらにボーダーの位置のオプションがある（下）右：SketchではOpenType機能が適用されるさらにFigmaではテキストを垂直に配列する設定ができる為、枠内で垂直に中央揃えすることが容易です。対照的にSketchではより多くのタイポグラフィのオプションがあり、スモールキャップス、古い形式の図形、スタイルの選択肢や合字（フォントでサポートされていれば）等のOpenType機能が適用できます。勝者：引き分け理由：どちらのアプリケーションもそれぞれ違った利点があります。Sketchの方がその進化したタイポグラフィオプションで少しリードしていますが、完全な勝利にはまだ不十分です。結論簡単に各アプリの長所をおさらいしましょう。 Sketchの良い点キーボードのアクセシビリティがより良くサポートされているプラグインとプラグインエコシステムがあるサードパーティツールとサービスを統合可能ファイルタイプとエクスポートオプションが豊富複雑なプロジェクトを1つのファイル（ページ付き）にまとめることが可能 Sketchでは簡単に実データを使えるより洗練されている Figmaの良い点ブラウザベースなので、世界中どの場所からどのプラットフォームでも使用可能リアルタイムで共同作業できるファイルの共有が簡単ベクトルマニピュレーションが優秀（vector networksを介して）レスポンシブデザインオプションがより優れている（constraint機能により）コンポーネントのライブラリを作成しチームのメンバーと共有可能アートボードがより強力今後の展望 2013年のAdobe Fireworksの廃止はUIデザインツール界に大きな空白を残しましたが、Sketchがすぐにその空白を埋めてくれました。 Sketchが大成功を収め、その人気は主なライバルであるPhotoshopに徐々に迫り、ついには昨年インターフェースデザイナーのユーザー間における調査「the tool of choice」でトップの座に輝きました。 Sketchは恐らくWindows版があればより成功したでしょうが、他のツールにも問題はあります。Affinity

アプリデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

WordPressでECサイトが作れる！ショッピングカートを追加できるプラグイン6選

監修してくれたメンター

吉﨑智正

目次

1：easy myShop

2：welcart

3：ネットショップ管理プラグイン

4：Easy Digital Downloads

5：SKELETON CART

6：WP e-Commerce

WordPressを学習中の方へ

関連するキーワード

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

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

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

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

ゼロからの始め方！WordPressでブログサイトを作る手順とは【入門向け】

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

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

監修してくれたメンター

吉﨑 智正

目次

1：easy myShop

2：welcart

3：ネットショップ管理プラグイン

4：Easy Digital Downloads

5：SKELETON CART

6：WP e-Commerce

WordPressを学習中の方へ

記事を検索

関連するキーワード

関連する記事

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

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

吉﨑智正

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