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

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

WordPressのプラグインの使い方を初心者向けに紹介する記事です。今回は、スパムコメントの対策に便利なプラグイン、Akismetの使い方を紹介します。

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

WordPressのプラグインの使い方を初心者向けに紹介する記事です。

今回は、スパムコメントの対策に便利なプラグイン、Akismetの使い方を紹介します。

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

 

大石ゆかり

田島メンター！！大変です！！！

田島悠介

どうしたの？

大石ゆかり

お客様のWordPressのサイトが、スパムコメントで荒らされてしまったんです！！！

田島悠介

対策とってなかったんだね。じゃあ「Akismet」っていうプラグインを使うと良いよ。

大石ゆかり

教えてください！！！

 

Akismetとは

ある程度アクセスを集めるとスパムコメントも比例して増えてきます。

Akismetは、そういったスパムと思われるものを自動判定して分類してくれる便利なプラグインです。

また、WordPressをインストールするとデフォルトで入っています。

 

Akismetの設定方法

Akismetの設定を順を追って解説していきます。

まずは、WordPress.comに登録します。

 

プラグインのページで、Akismetを有効化すると、「Akismetアカウントを有効化」というボタンが表示されます。

スクリーンショット 2016-01-21 16.10.06

このボタンをクリックし、次に「APIキーを取得」ボタンをクリックします。

スクリーンショット 2016-01-21 16.10.27

 

次の画面では「GET AN AKISMET API KEY」をクリックしましょう。

スクリーンショット 2016-01-21 16.10.48

ユーザーの登録画面が表示されるので、メールアドレス、ユーザーネーム、パソワードを入力して、「Sign up」ボタンをクリックします。

スクリーンショット 2016-01-21 16.21.31

次に、登録したメールアドレスに本登録用のメールが届きます。

そのメールの「Activate Account」をクリックして「activated!」と表示されれば、WordPress.comの登録完了です。

 

続いて、APIキーを取得しましょう。

スクリーンショット 2016-01-21 16.30.32

 

「Sign in to Akismet」ボタンをクリックして以下の画面にアクセスし、一番左の「GET STARTED」を選択します。

スクリーンショット 2016-01-21 16.11.19

すると以下のような画面に飛びます。

スクリーンショット 2016-01-21 16.12.01

クレジットカードの情報を求められたり、右上のプランが$36/yearとなっていますが、

この料金のところはスライドして無料にできるのでご安心を。(以下参照)

スクリーンショット 2016-01-21 16.12.32

クレジットカードの情報などの項目が消えたら「CONTINUE」ボタンをクリックします。

すると、APIキーとそれを有効化するボタンが表示されるので、クリックしましょう。

 

しばらくして「Akismetアカウントの設定が完了しました。」と表示されれば、完了です。

これでAkismetが自動でスパムかどうか振り分けてくれるでしょう。

 

今回の記事は以上です。

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

 

大石ゆかり

ありがとうございました！！助かりました！！！

田島悠介

よかったね。これからはWordPressを入れたらすぐにAkismetを入れておくといいよ。

大石ゆかり

はい♪

 

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

記事を検索

関連するキーワード

関連する記事

WordPressで問い合わせフォームを設置する方法【初心者向け】

サイトを運営していく上であったら便利な機能の1つに、問い合わせフォーム機能があります。 ブログやサイトにお問い合わせフォームがあることで仕事につながったり...
WordPress

WordPressに検索フォームを追加する方法【初心者向け】

WordPressで制作したWebサイトのページ数が増えてきたら、訪問したユーザーのことを考えて、サイト内に「検索フォーム」があると便利です。 閲覧したサ...
WordPress

WordPressにFAQを追加できる「FAQ Manager」の使い方ーWordPressプラグイン【初心者

WordPressのプラグインの使い方を初心者向けに紹介する記事です。 今回は、Wordpressで簡単にQ&Aページを作成できるプラグイン、FA...
WordPress

【SEO対策にもなる！】WordPressでパンくずリストを表示できるプラグイン3選

パンくずリストは現在サイト内でどの位置にいるのかを閲覧者に表示し、各階層へのリンク・移動を可能にする機能です。 WordPressではプラグインを使用して...
WordPress

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

WordPressのプラグインの使い方を初心者向けに紹介する記事です。 今回は、WordPressから簡単にメルマガを配信できるプラグイン、Subscri...
WordPress

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

WordPressは、HTMLで作成した普通のサイトと比較して表示速度が遅くなってしまいがちです。サイトの表示速度が遅くなると、せっかくアクセスがあっても、表示...
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

今すぐ設定できる！Javaの開発環境の構築方法(Windows編)【初心者向け】

Javaの開発環境の構築方法について解説しています。Eclipseを使ってJavaでのプログラミングができるように設定していきましょう。 Javaについてそもそもよく分からないという方は、Javaとは何なのか解説している記事をまずご覧ください。   なお本記事は、TechAcademyのJava講座の内容をもとに作成しています。   田島悠介 今回は、Eclipseを使ったJavaの開発環境の構築手順を見てみよう。 大石ゆかり 田島メンター！！Eclipseというのは何ですか～？ 田島悠介 Eclipseは総合開発環境(IDE)のひとつで、Javaやそれ以外のたくさんの言語に対応しているんだ。今回はWindowsでのインストール方法を解説していくよ。 大石ゆかり よろしくお願いします！   目次 事前準備 Javaのインストール Eclipseのインストール Eclipseを日本語化 初期設定の手順 入れておくと便利なツール   事前準備 Eclipseを動作させるためには、JRE1.7以上が必要です。JREが17.以上がインストールされている場合は、「Javaのインストール」を読み飛ばしてもかまいません。今回は、コマンドでのJavaの実行もできるように、JDKをインストールしておきます。 また、Windows10を使用していますが、Windows7、8でも同様の手順でインストール可能です。   ※ライセンスについて Java自体はオープンソースであり、オープンソース版のJDKとして無償で利用できるOpenJDKが存在しています。 Javaのライセンス自体はOracle社が保有しており、Oracle社が提供するJDKはOpenJDKと区別できるよう、OracleJDKと呼ばれています。OracleJDKは2019年4月16日以降「個人的な使用や開発目的に限り無償」、企業での使用などそれ以外は「有償」に変更となりました。 OpenJDKとOracleJDKは基本的には「同一」であり、セキュリティパッチの提供期間がOpenJDKの方が短い、という違いがあります。 本記事では機能が同一であり、個人使用や開発では無償で利用できることから、OracleJDKのインストール方法を紹介しています。 OpenJDKを利用したい場合は、以下の公式サイトからダウンロードします。 jdk.java.net   [PR] Webサイト制作で副業する方法とはJavaのインストール 事前準備 まずは、32bitと64bitでダウンロードするファイルが異なるので、パソコンのビット数を確認しておきましょう。デスクトップの左下のWindowsのマークを右クリックして、システムをクリックします。   システムの種類のビット数をメモしておきます。 JDKのダウンロード Javaの開発環境であるJDK(Java SE Development Kit)をダウンロードします。 ※以下の手順では最新版のJDKがダウンロードされます。過去のバージョンのJDKは以下のサイトからダウンロードできます。 過去のバージョンのJDKをダウンロードする： Oracle Java Archive それでは最新版のJDKをダウンロードしましょう。Javaのページにアクセスして、「無償で試す」をクリックします。   「JDK Download」をクリックします。   Windows x64 Installerの右側にある「jdk-14.0.1_windows-x64_bin.exe」をクリックします。   「I reviewed and…」にチェックを付けてダウンロードボタンをクリックします。   JDKのインストール ダウンロードしたインストーラを実行し、次へをクリックします。   後でパスを設定するときに必要なので、インストール先をメモしましょう。次へをクリックします。   インストールが実行されます。   閉じるをクリックしてインストール完了です。   環境変数の設定 次は、インストールしたJavaを使うための、環境変数を設定します。 デスクトップの左下のWindowsのマークを右クリックして、システムをクリックします。   システムの詳細設定をクリックします。   環境変数をクリックします。     システム環境変数のPathを選択して、編集をクリックします。     新規をクリックし、インストール時にメモしたパスに「bin」を追記して入力します。 入力が終わったらOKをクリックします。   環境変数の画面に戻るので、OKをクリックします。 システムのプロパティの画面もOKをクリックして、設定を完了します。   動作確認 最後に、動作確認を行いましょう。 動作確認はコマンドプロンプトでjavacを使い、バージョンを表示することで確認できます。 デスクトップの左下のWindowsのマークを右クリックして、ファイル名を指定して実行をクリックします。   「cmd」と入力し、OKをクリックします。   コマンドプロンプトの画面に、「javac -version」と入力し、Enterキーを押します。 以下のように「javac 14.0.1」などとバージョンが表示されれば、JDKのインストール確認完了です。 ※表示されるバージョンはインストールしたJDKのバージョンにより異なります。 大石ゆかり EclipseじゃなくてJDKというのをダウンロードするんですか？ 田島悠介 JDKはJavaの開発環境なんだ。総合開発環境の前にこちらをインストールしておくよ。 大石ゆかり 分かりました！次はどうしたらいいんでしょう？ 田島悠介 今度はEclipseの方をダウンロード・インストールするよ。手順を見てみよう。    Eclipseのインストール Eclipseの ダウンロードページにアクセスして、インストーラをダウンロードします。   Download の「Windows 64bit」をクリックします。   もう一度、Downloadをクリックすると、ダウンロードが始まります。   ダウンロードしたインストーラ(eclipse-inst-win64.exe)を実行します。 Eclipse IDE for java Developersをクリックします。   後で日本語化する時に使うので、Installation Folder(インストールフォルダ)をメモしておいてください。 メモをとったら「INSTALL」をクリックします。   Accept Nowをクリックします。   インストールが完了するまで数分待ちましょう。   以下のような画面になったらインストール完了です。 LAUNCHをクリックしてEclipseを起動します。   ワークスペースを指定します。 特に指定がなければ、そのままLaunchをクリックします。   Eclipseが起動しました。 英語のメニューになっていますので、次は日本語化してみましょう。 一旦、Eclipseは終了しておいてください。   Eclipseを日本語化 日本語化するためにPleiadesというプラグインを導入します。 Pleiadesのダウンロードページにアクセスして、Windowsをクリックします。   以下のリンクをクリックします。   ダウンロードしたzipを解凍します。 解凍により出てきたsetup.exeを実行します。   選択ボタンを押し、Eclipseをインストールしたフォルダの中にある「eclipse.exe」を選択します。 選択が終わったら「日本語化する」をクリックしましょう。   日本語化が完了したら、Eclipseをインストールしたフォルダに有る「eclipse.exe -clean.cmd」を実行します。   以下のように、日本語化されたEclipseが起動します。 次回以降は、デスクトップのEclipseのショートカットから起動すれば、日本語化された状態で起動します。   初期設定の手順 それではEclipseを使ったJavaプロジェクトの作成と実行方法について確認しましょう。 「ようこそ」のタブは閉じます。 Eclipseではプロジェクトと呼ばれるまとまりを作成し、その中にパッケージやソースコードを作成していくことでプログラミングを行います。 ファイルメニューから新規>Javaプロジェクトをクリックします。   プロジェクト名を適宜設定します。 半角英数字で指定しましょう。漢字などの日本語は使用できません。 入力したら「完了」をクリックします。   以下のような画面になります。   次に「src」を右クリックし、新規 > パッケージをクリックします。   パッケージ名を適宜設定します。 こちらも半角英数字で指定しましょう。 入力したら「完了」をクリックします。   作成したパッケージを右クリックし、新規>クラスをクリックします。   名前を適宜設定します。 また「public static void main(String[] args)(V)」にチェックを付けます。 入力したら「完了」をクリックします。   以下のような画面になります。 「MyProject1」の中に「mypkg」というパッケージを作成し、さらにパッケージの中にJavaのソースコード「MyClass1.java」を作成した状態です。 「.java」の部分は拡張子と呼ばれ、ファイルの種類を表しています。 Javaのプログラムの拡張子は「.java」となります。   それでは簡単なソースコードを入力しましょう。 MyClass1の「// TODO 自動生成された…」の下に以下のように入力します。 System.out.println("こんにちは！Javaプログラミング！");   入力が終わったら実行してみましょう。 ツールバーの実行ボタンをクリックします。   以下のように実行結果が表示されれば成功です！ 正しく動作しない場合、入力ミスなどが無いか確認しましょう。   入れておくと便利なツール Eclipseには「プラグイン」と呼ばれる機能拡張の仕組みが存在します。 例えば、前述した日本語化もPleiadesというプラグインを導入することで実現しています。 以前は機能毎に後からプラグインを導入する必要がありましたが、最近のEclipseではあらかじめ主なプラグインが導入済となっています。 ここでは導入しておくと便利な設定の1つとしてダークモードを紹介します。 またプラグインのインストール、インストール済プラグインの確認方法についても見ていきましょう。   ダークモード 最近はOSや多くのエディタなどでも取り入れられているダークモードですが、Eclipseでも対応しています。 Eclipseでダークモードを設定するにはウィンドウメニューから設定を選択し、一般>外観でルック＆フィールを「ダーク」に選択します。   設定後はEclipseを再起動すると良いでしょう。 起動すると以下のようにダークモードが適用されます。   プラグインの導入方法 新たなプラグインを導入するには、ヘルプの「新規ソフトウェアのインストール…」をクリックします。   作業対象を「すべての使用可能なサイト」とし、名前からプラグインを選択します。 今回はデータベースPostgreSQL用のプラグインを選択しました。   確認画面が表示されます。次へをクリックします。   ライセンスに同意し、完了をクリックします。 しばらくするとプラグインのインストールが完了します。   導入済プラグインの確認方法 導入済のプラグインを確認するには、ヘルプから「Eclipse IDE について」をクリックします。   表示された画面の「インストール詳細」をクリックします。   以下のようにインストール済のソフトウェアやプラグインを確認することが出来ます。   以上、WindowsでJavaのEclipseを使った開発環境の構築と動作確認ができました。   実際にJavaでプログラミングをしようと思ったら準備するものが多いと感じるかもしれませんが、一連の作業を終えれば実際にプログラミングをすることができます。   田島悠介 以上でJavaの開発環境構築とEclipseの日本語化は完了だよ。 大石ゆかり Pleiadesの導入がちょっと難しそうですね…… 田島悠介 このような環境構築はバージョンが変わったりするとやり方も変化する場合があるので、うまくいかない場合は新しい情報もチェックしてみよう。 大石ゆかり 調べながらやるのが大事ってことですね。ありがとうございました！   Javaの学習サイトもまとめているので、合わせてご覧ください。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。 [お知らせ]オンラインのプログラミングスクールTechAcademyでは、Java講座を開催しています。JavaやServletの技術を使ってWebアプリケーションの開発を学ぶことができます。 現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートします。
Java

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

【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由

本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。また本記事は、Mary Stribley氏によって投稿されたものです。 グラフィックデザイナーにとって、グリッドは特に重要なデザインツールであるとされています。   ほんの数本のグリッドの存在がデザインに加わることが、デザインプロジェクト全体にとって、極めて重要なのはなぜでしょうか？ デザイナーは一人一人異なる答えを持っているかもしれませんが、要するに、グリッドは、それなしでは時間もかかり、面倒で困難なデザインを構築するのに役立ってくれるのです。 もしあなたがグリッドデザインの世界を探求しようか迷っているとしたら、グリッドをレパートリーに加えるだけで、デザインが非常に良くなる15の理由をお話します。   01. コンテンツが整理される グリッドの主な利用価値の1つは、デザインの要素を整列化、順序化したり、Webページをクリーンできちんとしたデザインにするのに役立つことです。これはグリッドの整列機能の効果であり、グリッドの役割の大部分を占めていると言えます。 グリッドシステムを確立することで、要素を整列化するのに使える基本構造を自分自身で創ることが可能となるのです。そして、これによりクリーンで整理されたレイアウトを実現できます。 例として、Christine Wisnieski によるTwist CreativeのGridデザインのレイアウトを見てみましょう。各要素がきれいに整列されて、全体としてクリーンな仕上がりになっています。 グリッドを使うときには、各要素をきれいに整列できるようなタイプのものを見つけましょう。要素とは具体的には、文章、画像、グラフィックなどで、その他どのような対象も要素となりえます。 最終的な完成イメージという大まかな全体像から始めて、それに合うグリッドを組み立てましょう。   02. あなたの仕事を高速化する 常に高速化と効率化を追い求める世界で生きる私たちにとって、「効率改善」などは耳に聞き慣れた言葉ですから、このメリットの説明は、すんなりと受け入れてもらえるかもしれません。 グリッドは、あなたのデザインにかける時間を、よりスピードアップして充実したものにしてくれるでしょう。というのも、どのポジションに要素を配置するのが最高の選択なのかを示すガイドとしても、機能してくれるからです。 要素が良く見えそうなポジションを手さぐりで探してから、ランダムに配置するという作業をしなくても、グリッドがあれば、あなたを自然な解へと導いてくれるでしょう。   グラフィックデザイナーのTroy Templeman氏が述べるように、「Gridデザインは、どの場所にコンテンツを配置できるかというよりむしろ、どの場所にコンテンツを配置すべきかという、デザイナー自身の決定をサポートすることで、デザインのプロセスをスピードアップしてくれる。」というわけです。 グリッドは家の建築の土台のようなものとして考えることができます。一番最初に建造しておくべきものの1つであり、そこからさらに構築を進めます。   [PR] Webサイト制作で副業する方法とは03. 文章の居心地が良くなるようなレイアウトを実現できる 少なくとも、グリッドと文字は、2つのデザイン要素として相性のいいの組合せです。強力なグリッドは、文章量の多いレイアウトを、よりすっきりとして組織化された印象に整えてくれます。ボディコピーの文章も読みやすくしてくれるでしょう。 文章を読みやすくするのに役立つグリッドの手法の1つに、「ベースライングリッド」があります。これはノートの罫線のようなもので、文章の1行1行がベースラインとなるグリッドの上に乗ります。これらのグリッドは、文章で作られた各要素が、同じ高さに並ぶように整えてくれます。 もしあなたが文章の行を整列していなくても、多くの人はその特定のアンバランスな箇所には気づかないかもしれませんが、あなたのデザインが全体として散らかっているということは無意識的に気づくものです。つまり、小さな変化が大きな効果をもたらしてくれるのです。 これは、「ベースライングリッド」の実例です。各行がそれぞれ整列されていて、クリーンですっきりとしたタイポグラフィーの効果を生み出しています。   04.　他のデザイナーとの共同作業をもっと容易にしてくれる あなたも今までに他のデザイナーと共同で仕事をしたことがあるでしょうか？ そのような場面では、グリッドは、ストレスとコミュニケーションの齟齬をいくらか和らげてくれるかもしれません。 すでにお話したように、グリッドはデザインに基本構造を作るのに役立ち、個々の要素がどの場所に置かれるべきかについての方針も示してくれます。もし、あなたが最初にグリッドからデザインを組み立てていれば、新しいデザイナーが途中から加わったときにも、あなたのデザイン手法や、要素の配置の意図を理解してもらえるでしょう。   例として、あなたが下にあるようなデザインに取り組んでいて、これから第3パラグラフを作成するときに、他のデザイナーに参加してもらうよう依頼するケースを考えてください。 グリッドシステムを使っていれば、配置や整列を正確に実践できます。加えて、「カラムの幅はどのくらいにしますか？」「1つ前のカラムからどのくらいの距離を空けて配置しますか？」などのメッセージが行ったり来たりすることも少なくなるでしょう。というのも、グリッドによって全ての答えはすでに用意されているからです。   他のデザイナーと共同で仕事をする時には、わかりやすくて、最終的な完成品に合うグリッドシステムを構築しましょう。必要なカラムの数が3つであるなら、13も使う必要はありません。グリッドシステムを組み立てていないうちから、要素の整列を行うのは避けましょう。グリッドを機能的で役立つものにしておくのが大切です。   05. バランスの整ったデザインを創りやすい グリッドの美しさはその統一感にあります。あなたのデザインを複数のカラムに分割しようとするときには、シンメトリーなレイアウトから始めることになるでしょう。左右のどちら側のデザインがもう一方の側からずれているか判断することも、容易になるでしょう。   例として、以下のMaan Ali氏によるWebサイトのデザインを見てみましょう。左右対称なグリッド、大きさの均一化されたブロックと文章を使うことで、均整のとれたデザインになっています。 他の例として、Braulio Amado氏によるデザインでは、中央のグラフィックを加えて3つのカラムとして表現することで、シンメトリーで完璧なバランスになっています。 かなり強いデザインであるために、圧迫感のある印象を人に与えやすいにもかかわらず、きちんと整列して完璧なバランスを実現することで、クールで落ち着いたデザインになっているのです。   06. マルチページのレイアウトに統一感を与える グリッドは複数ページのレイアウトにも役立つでしょう。レイアウトにグリッドを使うことで、あるページから別のページへ、あるレイアウトから別のレイアウトへ、グリッドを継承することが可能です。容易にレイアウト全体の一貫性を保つことができます。 例として、WebサイトのRolling Stoneを考えてみましょう。数多くのページから構成されていますが、各ページの構造やコンテンツはそれぞれ異なっています。全体のページで一貫したレイアウトを保ちながら、各ページごとに最高の方法でデザインするには、どうしたら良いと思いますか？   以下の画像では、WebサイトのRolling Stoneの音楽のページとトップページを比較しています。4つのカラムで構成されるグリッドデザインを使うことで、一貫性があり、クリーンで、親しみが持てるような外観になっています。一方で、各ページにある空白のスペースも、ページがしっかり機能することに役立っています。 グリッドがマルチページのレイアウトに役立つ具体例としては、スタイルガイドのようなマニュアルが一般的です。これらは教育目的で使われ、線形のデザインで整えるのが望ましいため、グリッドが活用されるのです。例として、以下のMike CollingeによるBosphorusのスタイルガイドでは、グリッドが統一して使われています。 複数のページをデザインするプロジェクトに取り組んでいるとしたら、「素晴らしいマルチページのレイアウトを設計するためのチェックリスト」に目を通しておきましょう。   07. 階層化したデザインを表現できる Gridデザインの共通の前提は、グリッドを使うことで各要素を均一なサイズのブロックに分けることですが、こうすることで自動的にデザインをコントロールできます。 階層化はデザインにとって大切なことであり、グリッドはこの階層化をスピードアップして容易にしてくれます。あなたが階層化の大切さにまだ気づいていないとしても、全てのデザインは少なくとも3段の階層を持つべきである理由のリストによって、その認識は変わるでしょう。   例として、NASAのホームページのデザインを見てみましょう。 4つのカラムのグリッドで構成されるデザインで、より重要度の高い画像を、複数のカラムや列の領域まで引き伸ばして大きくすることで、階層を表現しています。 「ハロウィーンの空を飛ぶ活動を終えた彗星」の左上の画像は、2カラム×2列分のサイズに広げられ、ページの中で最も注目を引くようにデザインされています。他の重要な話にも、画像が複数のカラムに引き伸ばされたものがあります。 印刷物にもグリッドをデザインの基本として使うことができます。複数のカラムのサイズに拡大することで、ある要素に注目を集めたり、逆に小さなカラムのサイズにして、ある要素を目立たないようにすることができます。   次の例は、David Tang氏によるデザインで、数字の23や30に注目を集めるように、グリッドの大きさや配置が工夫されています。   08. 散らかったレイアウトと、さよならできる グリッドは、恐怖の散らかったデザインを一掃してくれる素晴らしいツールです。そのためには、マージンを使いましょう。 マージンとは、デザインのまわりの余白のことです。一般的に、マージンが狭いほど、あなたのデザインは詰まって 散らかって見えてしまいます。マージンをより広くすることで、整ったクリーンなデザインに見せることができます。   以下の例では、マージンがグレーの色でマークされています。 グリッドとマージンはしばしば一緒に使われますが、この組合せには、デザインをより開かれたクリーンな印象にする効果があります。 散らかったデザインを回避するもう1つの方法は、ガターを使う方法です。ガターとは、グリッドのカラム間にある余白のことです。ガターのサイズは調整できますが、機能するグリッドを作るためには、全体のガターサイズは統一しましょう。 マージンとガターを組み合わせることで、効果的な結果を生み出している例を見てみましょう。このAisle One によってデザインされた壁紙は、マージンとガターが目立つようなデザインであるため、それぞれいかに効果的に使われているかに気づかせてくれます。   09. 心地よいデザインの世界が開ける 芸術家や写真家など数多くのデザイナーが、グリッドを作品のベースに使っている理由は、数学的な美しさを持つデザインを生み出すと考えられているからです。 グリッドによって心地よいデザインを生み出す方法の1つに、「三分割法」があります。 最も基本的かつ簡単な方法の1つです。写真の技術としてもよく使われる方法ですが、理論の根本は、各2本の水平線と垂直線によって、全体のデザインを9つの均一な区画分けることにあります。線の交点(以下の例ではブルーの円)にデザイン要素を置くことで、心地よいデザインを生み出します。 この理論が写真に使われるとき、写真家は、レンズの焦点がこれらの交点に集まるようなフレームを慎重に選びます。 試しに「三分割法」をあなたのテキストデザインに取り入れて、目に心地よくなるかどうか確認してみましょう。ページを水平方向と垂直方向に均等な3×3の区画に分けて、これらのシンプルなガイドを応用するだけです。   10.　グリッドのルールを破ってインパクト効果を狙う グリッドのレイアウトのルールを守ることで、クリーンで整った美しいデザインを生み出すことができますが、時にはグリッドのルールを破ることで、ユニークで人目を引くような効果を狙うことができます。   例として、99Uによるデザインでは、シンプルな3カラムグリッドが使われていますが、イエローの文字を対角方向に ページ全体に走らせることで、グリッドによるクリーンな直線性のルールを破っています。「Think differently(考え方の転換)」というメッセージを伝えるには、印象的で記憶に残りやすく、実に効果的なデザインです。 グリッドのルールを破ると、特定の要素に注目を集める効果もあります。例として、このBig CartelのWebサイトのデザインを見てみましょう。要素はグリッドに従って整列されていますが、いくつか例外的なデザイン要素があります。グリッドから飛び出ている要素が、強い垂直ラインのデザインを破ることで、人の視線を引く効果があります。   11. 柔軟性に富む グリッドがあなたのデザインに合うかどうか心配になりますか？全てのグリッドは柔軟性に富むので、デザインの変化にも対応できますから、心配する必要はありません。 あなたがグリッドを作るときには、好きなだけカラムの数を選ぶことができるのは、グリッドの柔軟性の１つです。   以下の例では、1カラムのデザインと、2または3カラムのデザインの比較を示しています。 もちろん一般的には、デザイナーやデザインの必要性に応じて、最大13カラムの範囲でグリッドが構成されます。以下の例では、フルページサイズの画像と文字、そしてシンプルなレイアウトタイプを活かしたデザインで、1カラムのグリッドシステムとして完璧です。 次のDesign Surgeryによるレイアウトのデザインは、13カラムで構成されています。所々に入っている画像と相まって、長くなりがちな記事の文章を効果的に魅せています。 最終的にカラムの数はあなた次第です。ただ、カラムの数が多いほどデザインの柔軟性が高まり、数が少ないほどシンプルで柔軟性が低くなることも、デザインする時には心に留めておきましょう。   12. 対角線のデザインに役立つ 文字通り、異なる角度からのデザインのアプローチにも、グリッドは役に立ちます。グリッドは水平または垂直に並べるだけではなく、対角線の軸上に配置しても、効果的です。 Andrew Ackroyd氏によってデザインされたポスターは、フォントと画像が対角線のグリッド上に並べられ、モダンでスタイリッシュな効果を生み出しています。 対角線のグリッドは、画像の多いレイアウトにも役立ちます。Karen Hoffstetter氏によるこのデザインでは、対角線を活かしたフレームを使った画像で、全体が埋め尽くされたデザインです。 またこのデザインでは、対角線のグリッドに加えて、水平方向と垂直方向グリッドも使われていることが、要素の美しい整列を可能にしています。   13. 万能に使える グリッドが最も利用されているのは、雑誌や編集のレイアウトなどですが、その他のどんな用途にも、デザインツールとして活用できます。 多くの有名なロゴは、グリッドシステムに基づいて作成されています。例えば、Braunの有名なロゴは、グリッドを使用して、文字をクリーンで強さのあるデザインに統一するプロセスから、誕生したのです。 グリッドはまた、イラストレーション全般にも使うことができます。Dean Gorissen氏による、都市のイラストレーションでは、クリーンでシャープな角度が使われていますが、これが対角線のグリッドの形が利用されたことを示しています。 どのような用途であれ、グリッドは、計り知れないほど便利なツールとなってくれるでしょう。全てのデザインスタイルやデザイナーにとって有益なツールではないかもしれませんが、多くのケースにおいては役に立ちます。あなたの次のプロジェクトでも、グリッドの活用を考えてみてください。   14. 余白のデザインに役立つ あなたは余白を活かしたデザインの世界を深く掘り下げてみたいと思っていますか？グリッドは余白のデザインにも役立ちます。 デザインを複数のカラムに分けて、要素を並べた後、残ったいくつかの列やカラムは空けたままにして余白を作りましょう。 João Oliveira氏によるこのレイアウトでは、グリッドのいくつかの領域を空けておくことで、余白を広く作っています。その結果として、スタイリッシュかつ洗練されたデザイン、機能的でミニマルなレイアウトが実現されていて、散らかりや不要な要素は全くありません。 同様に、Mehmet Gozetlik氏によるポスターのデザインでも、グリッドの機能が活かされています。フォントと画像が中央のカラムに整列され、外側のカラムは余白にされています。美しくバランスが取られていて、要素が中央に集められた、視覚効果も高いポスターデザインです。   15. 読者の目に優しいデザイン 活字印刷のレイアウトを読みやすくすることで、グリッドは、文章のデザインにも役立ちます。 人間の目は、文章のまとまりの長さにとても敏感です。文章のまとまりが長すぎると、最後まで読み進めるのも辛くなりますが、短すぎても細切れな印象になり、しっかりと読み込むのが難しくなります。 一般的に、行の黄金比は、1行あたり、単語数で6以上、合計文字数で空白も含めて約50～65文字になるとされています。 文字の多いレイアウトにグリッドを使うことで、簡単に素早く均一なカラムを作ることができます。カラムを使うことで、文章の長さを強力にコントロールできます。 これこそ、新聞でグリッドを基本としたレイアウトがよく使われている理由です。読みやすいコンテンツを作るのに役立っているのです。 編集に関することをもっと学びたいと思いますか？「世界の編集デザインベスト50」のリストが紹介されているWebページを訪問して、目を通しておきましょう。   次はあなたの番です：グリッドデザインを早速実践しましょう あなたがグリッドのファンであるなしに関わらず、非常に多くのデザインで役に立つことは明らかです。グリッドの起源は13世紀に遡るというのも、驚くにはあたらないことかもしれません。 グリッドには、デザインのバランスを整えて整列することから、対角線のデザインでタイポグラフィーをクールに見せることに至るまで、数多くの活用方法があります。 グリッドは、デザインのページ上のただの線ではありません。デザインを構造化し、デザインの方向性を示し、デザインを形作ることで、あなたの望む完成イメージを実現する力があるのです。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
Webデザイン

WordPressを簡単インストール利用する方法【さくらインターネット編】

WordPressには通常インストール方法の他に簡単インストールというものがあります。 簡単インストールを使えば、FTPクライアントソフトなどの準備がいらず、Webブラウザ上だけで完結できます。 WordPressの簡単インストールが使えるレンタルサーバーにはいくつかありますが、今回は「さくらのレンタルサーバー」を題材にして紹介します。 他のレンタルサーバーでも同じような手順で使うことができます。 目次AkismetとはAkismetの設定方法   大石ゆかり 田島メンター！！WordPressのことはわかったんですけど、実際にどうやって始めたらいいんですか〜？ 田島悠介 まずレンタルサーバーを借りるところからだね。例として「さくらのレンタルサーバー」を使って説明するね。 大石ゆかり はい、お願いします〜。   さくらインターネットのレンタルサーバー登録 まず初めに、さくらインターネットのレンタルサーバーに登録します。 ページを開いたら、左上の「お申し込みはこちら」と書かれたボタンをクリックします。   最初にサービスプランを選択します。 ここではWordPressが利用できる最低価格のスタンダードを選択した例を示します。   次にドメイン名を入力します。 取得済みのものでなければ、自由なサブドメイン名が入力できます。 即時利用可能な初期ドメインかどうかが分かります。 ドメイン名が入力できたら「お支払い方法の選択」ボタンをクリックします。   すると以下の画面が開きます。既にさくらのインターネットの会員の方は「ログイン」ボタンをクリックして、会員IDとパスワードを入力します。 さくらのインターネットを利用したことのない方は「新規会員登録へ進む（無料）」のボタンをクリックしてください。   ここで登録するメールアドレスを入力します。 「個人情報の取扱いについて」の内容を確認できたらチェツクボックスをクリックし、「会員登録のご案内メールを送信」ボタンをクリックします。   ここで登録したメールアドレスに、しばらくして送られてきたメールに書かれている認証コードを入力し「次へ進む」ボタンをクリックします。   会員情報を入力する画面が表示されるので、必須項目で漏れがないように入力してください。 入力し終わったら「確認画面へ進む」ボタンをクリックします。   次の確認画面で入力内容を確認できたら「会員登録する」ボタンをクリックします。   会員登録が完了すると次にお支払い方法の選択画面が表示されます。 年間一括払いと月払いのどちらかの選択と、「クレジットカード」、「銀行振込」、「請求書払い」のいずれかを選択してください。 ※お申込後2週間のお試し無料期間がありますが、クレジットカード払いを選択した場合は、解約の手続きをしない限り2週間後に自動で本登録が行われますのでご注意ください。   クレジットカードを選択した場合は、クレジットカードの新規登録（会員メニュー）画面へ移動します。   会員メニューで「新しいクレジットカードを登録」ボタンをクリックします。   カード情報を入力し、確認画面から「カードを登録」ボタンをクリックします。   最後に「お申し込み内容のご確認」ページが表示されるので、それぞれの項目で誤りがないか確認した上で、約款のご確認後、チェックマークで同意し「この内容で申し込む」ボタンをクリックします。   最後に「お申し込み完了」の画面が表示されます。 これでレンタルサーバーの登録手続きは完了です。登録したメールアドレスに「お申し込み受付完了のお知らせ」と「[さくらのレンタルサーバー]仮登録完了のお知らせ」が届くので確認してください。 このメールの内容はあとで使うので、消さないようにしましょう。     サーバーの設定 続いてWordPressをインストールするためのサーバーの設定を行っていきます。   まず、さくらインターネットの会員メニューにアクセスします。 ここで「会員ID」と「パスワード」の入力を求められます。 このときの「会員ID」には登録したメールアドレスに届いている「お申込受付完了のお知らせ」の「会員登録情報」に表示されている「会員ID」を、「パスワード」には先ほどのサーバー契約時にご自分で設定したパスワードを入力してください。   「ログイン」ボタンを押すと「さくらインターネットの会員メニュー」が開きます。 ページ左メニューにある「契約中のサービス一覧」をクリックします。   契約中のサービス一覧から、先ほど契約したスタンダードサービスの「コントロールパネルを開く」ボタンをクリックします。   これで「さくらのインターネット　サーバコントロールパネル」が開きます。   ショートカットから「WordPressインストール」をクリックします。   これからWordPressをインストールするためのデータベースを作成します。 画面途中の「データベース作成」ボタンをクリックします。   お好きなデータベース名を入力し、文字コードは「UTF-8」を選択します。 「接続用パスワード」はデータベースに接続する際のパスワードになります。 半角英数字、記号を組み合わせて設定してください。 全て終わったら「作成する」をクリックします これでデータベースの作成は完了です。   大石ゆかり サーバーを借りて、サーバーの設定は終わりました！ 田島悠介 お疲れ様。これでもうWordPressをインストールできるから、早速やってみよう！   [PR] Webサイト制作で副業する方法とはWordPressのインストール それではいよいよWordPressのインストールを行っていきます。 先ほどの画面で主要な項目を入力します。   インストール先にはWordPressをインストールしたいディレクトリ名を入力します。 任意のディレクトリ名を入力することで、インストール先のディレクトリが作成されます。 また、「データベース」の欄は先ほど作成したデータベースを選択し、「データベースパスワード」にはデータベース作成の際に設定した「接続用パスワード」を入力してください。 「データベースの接頭語」にはご自分でわかりやすい英数字を設定して下さい。あらかじめ入力されているものをそのまま使っても大丈夫です。   すべての入力が終わったら、「ライセンス・利用規約に同意する」にチェックして「作成する」ボタンをクリックします。 コントロールパネルに作成されたサイトの表示リンクと、WordPressの管理画面へのリンクが表示されます。 こちらをクリックしてWordPressへのログイン画面が表示されたら成功です。   この画面は今後WordPressを利用する際に必要な画面になりますので、ブックマークなどをして保管しておくと良いでしょう。   先ほど設定した「ユーザー名」と「パスワード」を入力し、「ログイン」クリックすると、WordPressの管理画面が表示されます。   これでインストールは完了です。 完了したら、WordPressで記事を書いていきましょう。   大石ゆかり これでWordPressが使えるわけですね！ 田島悠介 そうだね。インストールさえしてしまえば記事を書いたり好きなテーマに入れ替えたりするだけで色々なサイトが作れるから、とても便利だよ！ 大石ゆかり はい♪     WordPressを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？ テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。 まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。
WordPress

誰でもできる！MAMPのインストール方法【初心者向け】

.post-body img{border: solid 1px #eee;} プログラミングの勉強を始める人にとって最初の難関は、開発環境の構築ではないでしょうか。そんな方でも使える開発環境のMAMPのインストール方法を初心者向けに解説した記事です。 MAMP（マンプ）はPHPの開発環境として使われます。XAMPPと同じように、MySQLも一緒に使えるので便利です。 本記事では、MAMPをインストールする方法と、PHPの最初のプログラムが書けるまでを解説しています。 本記事の目次 本記事は下記の流れで解説します。 MAMPとは？ MAMPのインストール方法 PHPでプログラミング MAMPとは？ MAMPとは「macOS」「Apache」「MySQL」「PHP」の頭文字をとったものです。 MAMPは、これらを一括で使うことができ、PHPとMySQLの開発環境として使用できます。 無料ホームページでもそれらを対応したサービスはあるのですが、データ送信に使うFTPソフトが必要だったり、SQLデーターベースの準備が必要で、初心者にとっては難しいこともあります。   なお、名前からMacでのみの利用と思われそうですが、WindowsとMacの両方のOSで使用することが可能です。 また、無料で使えるMAMPと有料版のMAMP PROがあります。違いとして、例えばlocalhostの代わりにユニークなエイリアスを与えることができるなど高機能になっています。ただし、初心者は無料版で十分でしょう。 本記事では、無料版のMAMPのインストール方法のみ紹介します。 [PR] Webサイト制作で副業する方法とはMAMPのインストール方法 それでは早速、MAMPをインストールしてみましょう。 MAMPのダウンロードサイトにアクセスしてください。   アクセスすると、このように表示されるので、一番上の画像内にある「Free Download」ボタンをクリックしてください。   Macの場合 次の画面で、MacのPCの場合は種類によってクリックする場所が違います。 新しいPC（M1やM2など）の場合は、「Apple M1/M2 CPU」と書かれた部分をクリックします。 インテルのCPU（i7やi5など）を搭載したPCの場合は、「Intel x86 CPU」と書かれた部分をクリックします。   Windowsの場合 一番上に表示されている「Windows 10+」と書かれた部分をクリックします。 上記のそれぞれのPCに対応した部分をクリックするとブラウザでダウンロードが始まります。 ブラウザの下にダウンロードの進行状況が表示されます。 Mac Windows アプリのサイズがかなり大きいので、ダウンロードに時間がかかります。     macOSでインテルのCPUかどうかを見分けるには？ 左上のりんごのアップルメニューから「このMacについて」をクリックします。 開いた画面に「プロセッサ」と書かれていればインテルのCPUが搭載されていて、「チップ」と書かれていればApple M1などの新しいPCです。   Downloadボタンが見つからないときは？ もしDownloadボタンが見当たらないときは、MAMPのトップページを下にスクロールして「Free MAMP download >」リンクをクリックします。     Windowsでダウンロードが始まらないときは？ Windowsで下記の画像が表示されたときは、「保存」をクリックします。     ここからは、WindowsとMacそれぞれのインストール方法を紹介します。   Windowsでのインストール Windowsの場合は、実行すると次のようなメッセージが表示される場合があります。 この画面は不正なプログラムが自動でインストールされるのを防ぐ機能です。 はいを押して、MAMPのインストール画面を表示してください。 Nextをクリックしてください。   一緒にインストールするアプリを指定します。 今回は無料のMAMPだけインストールするので、チェックは2つとも外してから、Nextをクリックします。   使用許諾契約が英語で表示されます。 同意してインストールを続ける場合は「I accept the agreement」をクリックして選択し、Nextをクリックします。   次はプログラムをインストールするフォルダを指定する画面です。 そのままNextをクリックしましょう。   次に表示される画面は、スタートメニューに登録する場所の指定です。 そのまま「Next」をクリックします。   デスクトップにアイコンを作成するかどうかを決める画面が表示されます。 そのまま「Next」をクリックします。   最後に、今まで入力した情報を確認します。 内容に問題なければ「Install」をクリックします。   インストールが完了するまで、時間がかかる場合があるので気長に待ちましょう。   インストールが完了した画面が表示されます。 「Finish」をクリックしたらMAMPのインストールは完了です。     Macでのインストール 続いてMacのインストール方法です。 ダウンロードしたファイルを開くと、「はじめに」の画面が表示されます。 「続ける」をクリックします。   「大切な情報」が英語で表示されます。 「続ける」をクリックします。   「使用許諾契約」の画面が英語で表示されます。   「続ける」をクリックすると表示されている使用許諾契約に同意するか尋ねられます。 使用許諾契約に同意できるなら「同意する」をクリックします。   続いて「インストールの種類」画面が表示され、インストールに必要な記憶装置の空き容量が表示されます。 インストールするのに必要な空き容量は、使用しているPCやMAMPのバージョンによって変わるので、よく確認しておきましょう。 インストール先の空き容量に問題がなければ、「インストール」をクリックします。   インストールの確認を求められるので、パスワードかTouch IDの指紋認証などで許可しましょう。   さらにインターネットからダウンロードしたアプリをインストールする確認画面が出ます。 「OK」をクリックしてインストールを許可します。   インストールが始まります。 インストールには時間がかかるので、完了するまで待ちます。 インストールが完了したら「閉じる」ボタンをクリックします。   インストールが完了すると、ダウンロードしたインストーラのファイルを削除するか尋ねる画面が表示されます。 インストールできていれば、インストーラは不要なので「ゴミ箱に入れる」をクリックして削除します。 これでMacにMAMPをインストールする作業は完了です。     PHPでプログラミング MAMPがインストールできたら、MAMPを使ってPHPのプログラミングを実行してみましょう。 今回は、ブラウザに「PHPのテスト表示成功!」と出力するプログラムを作成します。 PHPのプログラムを動作させるために、WebサーバであるMAMPを起動しておきます。 ※XAMPPなどの他のサーバアプリがすでにインストールされて起動している場合、ポート番号などが競合してMAMPのサーバが起動できない場合があります。 サーバを起動する MacでMAMPのサーバを起動する まずは、画面下のDockからMAMPをクリックして開いてください。   MAMPのウィンドウと同時に黄色の「Standard View」の画面が表示されたときは「Show this window when starting application」のチェックを外してから、左上の×で閉じます。   MAMPのコントロールパネルが表示されます。 右上にある「Start」をクリックして、サーバを起動します。 しばらくしてサーバの起動が完了すると、クリックした「Start」ボタンが「Stop」に変わって、サーバが起動中であることを表す緑色になります。 WindowsでMAMPのサーバを起動する Windowsの場合は、デスクトップ画面に作成されたMAMPアイコンをダブルクリックして起動します。 MAMPをDropboxとリンクするページが表示されますが、Dropboxとのリンクは必須ではないのでそのままページを閉じて大丈夫です。 起動時にWindows標準セキュリティ機能などにより、ファイアウォールの確認画面が表示されることがあります。 「プライベートネットワーク」だけにチェックを入れて「アクセスを許可する」ボタンを押します。 MAMPが起動してコントロールパネルが表示されます。 既定の設定では、Apache Server（Webサーバ）がMAMPの起動時に自動的に開始されます。 緑の丸がついていたら起動が完了しています。 サーバを停止するには「Stop Severs」、開始するには「Start Servers」をクリックします。 停止や開始には少し時間がかかります。 反応がないからといってサーバの開始・停止ボタンを短時間に連続してクリックしないようにしましょう。   MAMPのサーバからWebページを表示させる ここからはWindows・Mac共通の操作になります。 MAMPのコントロールパネルの「WebStart」をクリックするとブラウザが開き、MAMPのサーバが表示させたWebページが表示されます。 （画面はMacで表示した場合です） 表示されているページのURLの最初の部分が、自分で配置したWebページを表示させるときに必要になります。 自分のPCで表示されているURLの赤枠で囲った部分を覚えておきましょう。   これからPHPのプログラムを書いていきますが、MAMPは開いたままにしておいてください。   プログラムを書くには、書式情報を含まない文字だけの情報を保存できるテキストエディタが必要です。 Winodwsには「メモ帳」、Macには「テキストエディット」が標準搭載されていますので、今回はそちらを使います。   メモ帳（Windows）   テキストエディット（Mac） テキストエディット起動後、「新規書類」をクリックします。   書式情報のないPHPのコードとして保存するために、メニューバーから「フォーマット」->「標準テキストにする」を選択します。 もし、「標準テキストに変換しますか？」と確認画面が出た場合は「OK」をクリックします。   Windows・Macともに、テキストエディタが開けたら次のようにコードを入力します。 <?php print ('PHPのテスト表示成功!') ?> ※「‘PHPのテスト表示成功!’」以外は半角（漢字オフで入力する英数字や記号）で入力します。 Mac Windows 入力できたら、ファイル名をtest1.phpにして、htdocsというフォルダ上に保存します。 メモ帳（Windows）メニューバーの「ファイル」->「名前を付けて保存」Cドライブ  > MAMP > htdocs テキストエディット（Mac）メニューバーの「ファイル」->「保存」アプリケーション > MAMP > htdocs   ここまでできたら、MAMPのコントロールパネルの「WebStart」をクリックし、ブラウザのURLを以下の例のように後半部分を「test1.php」に修正します。 このように http://localhost:ポート番号/htdocs以降のファイルパス という形でMAMPで起動させたサーバから、WebページやPHPのプログラムを読み込めます。 なお、先ほど保存したファイルを更新すると、この出力結果も更新されます。   おわりに MAMPのインストール方法は以上です。 もう少しPHPの基礎を知りたい場合は、PHPで文字列を出力する方法やPHPの変数を使う方法をまずはご覧ください。   PHPを勉強していて、 ・もっと効率的に勉強したい ・誰かに聞きながら学びたい ・自分でWebサービスを作りたい と思ったことはないでしょうか？ そんな方のために、TechAcademyではオンラインブートキャンプPHP/Laravelコースを提供しています。 現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、オリジナルWebサービスを開発することが可能です。 独学に限界を感じている場合はご検討ください。
PHP

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

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