Webデザイン

Webオーサリングツールまとめ【ホームページ制作に使える・無料ツールあり】

Webオーサリングツールをまとめた記事です。フリー（無料）で使えるものからプロ向けの高価なツールまであります。Windows・MacのOS対応についても比較しているので、ご自身のPC環境にあったツールを見つけてみてください。

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

ホームページを制作をこれから始めたい！という方のためにWebオーサリングツールを紹介します。

Webオーサリングツールとは、Webページ作成ソフトで、HTMLやCSSなどのファイルを編集することができます。

無料で使えるものから高価なものまで様々ですので、OSの対応も含めて紹介していきます。それぞれの紹介にWindows用/Mac用、金額も記載してるので比較してみてください。

グーペ

1,000円/月〜　Windows Mac

ECサイトや会社のサイトなどが簡単に作成できるグーペ。今風なデザインで本格的なWebサイトを気軽に作れるので、ぜひ試してみてください。

とても安い価格で手厚いサポートを受けながら作成できるので、今までWebサイトを作ったことがないという人でも安心して行えます。

テンプレートも多く揃っているので、ぜひ活用しましょう。

グーペ

Jimdo

945円/月〜　Windows Mac

数多くあるテンプレートの中から選び、Wordで文字入力するような感覚でWebサイトを作ることができます。

完全初心者向けのサービスなので、サイト作成だけでなくパソコンの操作にもちょっと不安がある人には良いかと思います。本当に簡単に自分のサイトが持てるので、ぜひ活用してみてください。

Jimdo

[PR] Webデザインで副業する学習方法を動画で公開中

PAGEKit

無料　Windows Mac

自分でコードを書きながらちょっとしたところを編集できたりもするので、カスタマイズしたい人におすすめです。

海外のサービスのため英語での使用になりますが、操作に慣れれば慣れるほど使い勝手の良いサービスになるでしょう。デザインを変えたり機能を追加するなど自分でオリジナルのWebサイトを持ちたい人に向いてます。

PAGEKit

Dreamweaver CC

authoring_dream

2,200円/月　Windows Mac

アドビシステムズが提供するツールです。旧称はMacromedia Dreamweaverです。WindowsとMacのどちらでも使用できます。

可変グリッドレイアウトを利用して、見る側の環境を選ばないレスポンシブなサイトを作成することが可能です。

コード側で編集しているところがプレビューのどの部分にあたるかすぐに参照できるなど、作業効率を重視しています。操作にはHTML、CSSの基本的な知識が必要で、中級者・上級者向けの本格ソフトです。

Dreamweaver CC

ホームページ・ビルダー

authoring_builder

14,800円　Windows

ジャストシステムが提供するツールです。

Dreamweaverと比べると操作がわかりやすく、初心者でも楽しくサイト作成ができます。

画像のスライドショーなどの本格的な機能でも、テンプレートに入れていく感じで作れるので便利です。

ホームページ・ビルダー

BiND for WebLiFE

authoring_bind

19,800円　Windows Mac

ブログ感覚の簡単操作で、スライドショーやショッピングカートなどの本格的な機能の付いたサイトを作ることができるツールです。初心者から上級者まで対応しています。

あらかじめ作られたデザインにコンテンツを入れていくだけの「スマートモード」と、レイアウトの配置から作成できる「エディタモード」があります。

BiND for WebLiFE

Coda2

authoring_coda2

8,500円　Mac

コード編集作業の効率を重視したMac用ソフトで、言語カラーリングをはじめとしたさまざまな機能が充実しています。プレビューをiPadに映し出すこともできるようになっています。

自分でコードを編集する人にとっては慣れれば慣れるほど便利になるツールです。

Coda2

RapidWeaver

authoring_rapid

7,800円　Mac

こちらもMac用のソフトですがCodaと比べると視覚的・直感的な操作が多くなっています。

豊富なテンプレートを使って簡単に本格的なサイトを作成することができます。英語のソフトですが日本語化が可能です。

RapidWeaver

Google Web Designer

authoring_google

無料　Windows Mac

2013年10月にベータ版としてGoogleが公開したばかりのツールで、無料でダウンロード可能です。日本語で利用できる多機能なオーサリングツールです。

アニメーションを付ける、画像のスライドギャラリーを作成するなどの高度な作業がワンタッチで行えます。コード表示やプレビューも簡単で、全体的に見やすく分かりやすい仕様になっています。

Google Web Designer

Microsoft Expression Web

authoring_mycrosoft

無料　Windows

マイクロソフトが提供するツールで、こちらも無料で日本語対応のソフトです。（ダウンロードの際にDetails→Japaneseを選ぶことで日本語版をダウンロードすることができます）

視覚的な操作も行えますが、比較的自分でコードを入力する人向けのシステムになっています。

Microsoft Expression Web

Aptana Studio

authoring_aptana

無料　Windows Mac

無償のオーサリングツールのひとつで、単体としての利用のほかに統合開発環境のEclipseにプラグインとして導入することもできます。英語のソフトですが、日本語化が可能です。

Eclipseと同様、コード補完などの便利な機能がいろいろ備わっています。

Aptana Studio

Webオーサリングツール比較

今回紹介したツールを表にまとめてみました。

ツール名	料金	Windows	Mac
グーペ	1,000円/月	○	○
Jimdo	945円/月	○	○
PAGEKit	無料	○	○
Dreamweaver CC	2,200円/月	○	○
ホームページ・ビルダー	14,800円	○	×
BiND for WebLiFE	19,800円	○	○
Coda2	8,500円	×	○
RapidWeaver	7,800円	×	○
Google Web Designer	無料	○	○
Microsoft Expression Web	無料	○	×
Aptana Studio	無料	○	×

ご自身のPCの環境・ニーズにあったツールをぜひ使ってみてください！

ホームページ制作に使える無料ツールを紹介した記事もあるので、参考にしてみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

最先端をおさえておきたい！フラットデザインとは【初心者向け】

近年Webやアプリデザインで話題の「フラットデザイン」。フラットデザインを採用したアプリやWebサービスも増えているためデザイナーでも習得を目指している...

Webデザイン

SCSSでforを使ってループ処理をする方法を現役エンジニアが解説【初心者向け】

SCSSでforを使ってループ処理をする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

HTMLでCache-Controlを使用する方法を現役エンジニアが解説【初心者向け】

HTMLでCache-Controlを使用する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLでiframe要素のpaddingを指定する方法を現役エンジニアが解説【初心者向け】

HTMLでiframe要素のpaddingを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...

HTML

【サンプルから学ぶ！】優れたデザインだけをまとめた旅行・ホテルのサイト集

本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また、本記事はWebデザイナーのNataly Birch氏によって投稿...

Webデザイン

デザインを実装する上で知っておきたい！9つの原理とは

本稿は、Smashing magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UXディレクターでありデザイン本の執筆も...

Webデザイン

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

おすすめのRPAツールはどれ？選ぶ際のポイントやそれぞれの特徴を解説

RPAツールについて解説します。田島悠介今回は、ツール系に関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 RPAツールについて詳しく説明していくね！大石ゆかりお願いします！なお本記事は、TechAcademyの法人向けIT・プログラミング研修での実績をもとに紹介しています。 RPAとは RPAとはRobotic Process Automationの略称で、ロボットによるプロセスの自動化を行うことです。RPAは繰り返される作業と相性が良く、主にホワイトカラーの作業がRPAに取って代わるとされています。例えば、インターネット上にある情報の収集 MicrosoftのOfficeの操作 Excelへのデータ入力インストール作業サイトの更新印刷、PDF化の作業サーバーのコマンド操作・DBソフトの操作といったデスクトップ上の操作であればほぼ全ての自動化が可能です。RPAツールでこれら操作を予め登録すると、その操作を自動的に行ってくれます。ロボットが行うので、ミスもなく正確にかつ速く処理することが可能になり、人件費の削減、作業効率の向上が期待できます。 RPAツールの種類 RPAツールにはデスクトップ型・サーバー型の2種類があり、それぞれ特徴があります。デスクトップ型のRPAツールの特徴デスクトップ型のRPAツールは、各々の作業PCにインストールされ使われることになります。RPAツールの導入が一部のPCとなるので、個人レベルの業務を自動化したい場合にも導入可能となります。また導入も1台から導入できるので、導入しやすいと言えます。サーバー型のRPAツールの特徴サーバー型のRPAツールは、各々の作業PCではなく、それらを管理する立場であるサーバーにインストールされています。サーバーに導入されたRPAツールは、全体的な業務・大規模な業務に対して自動化を行います。つまり、サーバー型はデスクトップ型とは違って各々の作業を自動化するのではなく、ある一定人数で行われる作業または組織的な作業を自動化するRPAツールと言えます。 [PR] Webデザインで副業する学習方法を動画で公開中RPAツールを選ぶ上でのポイント RPAツールを選ぶ際、幾つかのポイントがあります。自動化したい範囲を特定する RPAツールは、PC上の操作を自動化する汎用的なRPAツール、人事や経理などの専門的な業務に特化したRPAツールなど幾つか種類があります。自動化したい業務に合ったRPAツールを選ぶことになるので、まずは自動化させたい範囲を特定することがポイントです。 RPAツールのシステム動作環境のチェックする RPAツールを動かすにはシステム環境が合っていなければなりません。目的に合ったRPAツールを見つけたとしても、そのRPAツールが社内のシステムに合わない場合には使うことができないのです。 RPAツールを選ぶ際には、そのツールの動作するシステム環境のチェックも大切となります。カスタマイズが出来るかをチェックする RPAツールを導入後、導入前には気付かなかった点に気付くようになります。導入してからカスタマイズが可能であれば対応できますが、カスタマイズできないのであればそのまま使い続けることになるので注意が必要です。またプログラムの追加で新たな機能を拡張したい場合などは、このカスタマイズが可能なRPAツール、契約内容である必要があります。サポート体制があるかチェックする RPAツールは、他の一般的なツールと同様に上手く動作しないなどのトラブルもあります。導入したRPAツールにサポート体制があれば、問い合わせにより問題が解決します。サポート体制がない・または不十分な場合には、自力で問題を解決しなければならないことになるので、この点もチェックが必要となります。おすすめのRPAツールここではおすすめのRPAツールを紹介します。 WinActor https://winactor.com/ 概要：NTTアドバンステクノロジによる国産RPAツールです。国産なので日本語による動作はもちろん、価格も他のRPAツールよりも安く設定されています。主な機能： Word・Excel・ブラウザなどWindowsPCから操作可能なソフトウェアであれば、これらをこのWinActorで自動化させることが可能です。具体的には、データの投入や転記、メールの送信、サイト検索、インターネットの情報収集、キッティング時の設定、インストール作業、サイトの更新、印刷、PDF化の作業、サーバーのコマンド操作、DBソフトの操作などです。価格： 1台あたりの1年間の利用で90万8,000円 WinActor実行版は24万8,000円動作環境： OS：Windows 7 SP1, Windows 8, Windows 8.1, Windows 10 推奨CPU：Intel Pentium4 2.5GHz 相当以上メモリ：2GB以上 BizRobo! https://rpa-technologies.com/ 概要： BizRobo!は、RPAテクノロジーズ株式会社が開発したRPAツールです。BizRobo!は、RPAツールのみならず、導入前のヒアリングや導入後のサポートまでトータルとしてRPAサービスの提供を行っています。主な機能： BizRobo!の機能としては、ウェブ上のデータを収集・処理・加工・集計・保存・スキャニングなどの自動化、Excelへの出力作業などができます。また紙文書のデジタル化、FAXやデジタルカメラの画像データからの文字抽出といったことまで対応しています。価格：トライアル：30万円従量課金：50,000円～（月額）レンタル（クラウド）：30万円～（月額）レンタル（自社運用）：60万円～（月額）動作環境： OS：Windows Server 2008 R2、2012、2012 R2 Linux（64bit）CentOS-7、Red Hat Enterprise Linux 6.x/7.x/、Debian 8.2 推奨CPU：Intel Xeon X5680/X5677相当以上メモリ：8GB以上 Automation Anywhere https://www.automationanywhere.com/jp/ 概要：Automation Anywhere社が販売しているサーバー型のRPAツールです。自動化ツールとしてセキュリティにも力を入れているRPAツールです。主な機能： Automation Anywhereは、スケジュールの実行、パスワード管理、ログ分析、アクセスログの取得等が可能で、これら集中管理機能があります。シナリオ作成時のためのレコーディング機能や、コマンドツリーから自動化したい処理を追加することができます。これらに加えて、Automation Anywhereの特徴でもある高いセキュリティ機能も備えています。例えば、アクセス権限、RBAC、パスワードの暗号化、不正アクセスなどの防止です。さらに解析機能もありより効率的な自動化を目指すことが可能です。価格：価格は非公開となっており、問い合わせを行う必要があります。動作環境： OS：Windows Blue Prism https://www.blueprism.com/japan/ 概要：Blue Prismはブルー・プリズム者が提供するサーバー型のRPAツールです。サーバー型なので、全体的な管理やログの取得が可能です。主な機能： Blue Prismは、大きく分けてプロセス制作・管理、オブジェクト管理、コントロール管理、アナリティクスの4つの機能があります。特に管理機能に力を入れており、RPA ロボットを一元管理することができます。これにより、知らず知らずのうちにRPAツールとして放置され管理されなくなる状態を防ぐことが可能です。他の部門で取り扱っているRPAロボットを編集はできないようにし、参照は可能にするなどの権限制御も可能です。サーバー型であるので、実行したログも取得できます。メインフレーム・WEBサイト・社内開発された業務アプリケーションなどとの連携も可能です。価格： 1ライセンスが1年間で120万円（お試しとして最大2か月間の無償ライセンスもあります。）動作環境： OS：Windows 必要なソフトウェア：SQL Server （情報を格納するデータベースが必要となります。Express エディションでも動作は可能です。） NICE https://www.nice.com/websites/rpa/index.html 概要：NICE社が提供するRPAツールです。アシストロボット、全自動ロボット、デスクトップ分析3つの機能で自動化をサポートします。主な機能： NICEのRPAツールは主にアシストロボット、全自動ロボット、デスクトップ分析の3つの機能があります。アシストロボットは、人が行うタスクに対して、アシストロボットがディスクトップに常駐して人を介して業務の支援をします。全自動ロボットは完全にロボットのみで業務を行います。デスクトップ分析は、オペレーターの手順による違いなどから、新たな効率的な手順を可視化します。業務の記録は専用ツールで行う事ができ、プログラミングも不要です。これらにより、アプリの起動、マウスの操作、フォームへの入力、コピー＆ペーストなどのルーティンワークの自動化させることが可能です。価格：全自動ロボの1体350万円動作環境： OS：Windows 他のアプリケーションとの互換性についてはロボットが自動的に確認します。 UiPath https://www.uipath.com/ja/ 概要：UiPath社が提供するツールで、手動、ルールベース、反復するプロセスを自動化します。主な機能：自動化する業務を設計する機能として、レコーディングにより自動化を設計、または既成のライブラリからドラッグ・アンド・ドロップで行うことができます。また、VB.Net、C#、Python、Javaなどプログラミング言語で、より複雑な設計も可能です。実装・管理する場合には、ウェブブラウザやモバイルアプリにより、会社全体の自動化をスケジューリング・管理・制御が可能です。これらは、リアルタイム監視により展開されている自動化の把握もできます。またこれら管理を分けることも可能です。実行する際には、ユーザーのタイミング、または管理者の指定したタイミングで、業務を実行させることができます。価格：無料、有料ともにあります。 community edition：無料エンタープライズ用評価版：60日間無料 UiPath Studio：30〜60万円 UiPath Orchestrator：250万円 UiPath Robot：15〜75万円動作環境： OS：OS Windows 7、8.1、10 Windows Server 2008 R2、2012 R2、2016 推奨CPU：4 x 2.4GHz 64-bit (x64) 以上メモリ：4GB以上 RPAツールについてのまとめ RPAツールは、繰り返される定期的な業務を自動化させることができます。全てを自動化する万能なツールではありませんが、使い方によっては業務の生産性の向上に繋がります。RPAツールの導入には繰り返される業務を突き詰める必要があり、自動化したい業務の特定が最も大切です。ここでは、 WinActor BizRobo! Automation Anywhere Blue Prism NICE UiPath の6つのRPAツールを紹介しました。RPAツールはこれ以外にも複数存在します。どれを選んだら良いのか迷うかと思いますが、自動化したいシナリオの登録し実行する点はどのツールもほぼ変わりません。まずは、自動化したい具体的な業務を明確にし、デスクトップ型で良いか？サーバー型が良いか？を選び、予算・システム環境・サポート体制の有無を考慮して選ぶことになります。RPAツールによってはお試し期間として期間の限りがある無償ライセンスで無料で利用できる場合もあります。まずは気になったRPAツールを無償ライセンスで導入して使ってみたり、不明点を提供している会社に問い合わせするなどしてみてはいかがでしょうか？以上、「RPAツールについて」でした。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、従来の講義型研修とは違い、実務を想定したカリキュラムで実践的スキルを短期間で確実に身につけられる法人向けオンラインIT・プログラミング研修を展開しています。 1名〜数百名規模・業界を問わず、500社以上の企業様の研修を実施しています。受講生一人ひとりに現役エンジニアのメンターが付き、皆様のニーズにあったサポートを行います。学習時の「わからない」を確実に解消いたします。

ツール系

「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

アプリデザイン

プログラミングに使える！フリーのテキストエディタ15選

プログラミングをこれから勉強する場合、「どのエディタを使ったらいいの？」という疑問を持つかもしれません。そこで、初心者にもおすすめのテキストエディタをピックアップしてみました。また、テキストエディタ以外に統合開発環境も一緒に紹介します。 Windows、Macそれぞれに使えるエディタで、できるだけ日本語に対応したものを選んでいます。紹介するテキストエディタを比較して自分に合ったものを探してみてください。そもそもテキストエディタとは何なのかよく分からないという人でも知っておいて損は無いでしょう。なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。目次テキストエディタとは TeraPad(テラパッド) サクラエディタ Atom Notepad++（ノートパッドプラスプラス） CotEditor mi Sublime Text Brackets 秀丸エディタ Liveweave mou Visual Studio Xcode Eclipse vi(vim) / Emacs Visual S Visual Studio Code テキストエディタとはテキストエディタとは、パソコン上でメモやプログラムを書くことのできるソフトです。基本的には無料のソフトが多く、Windowsでは「メモ帳」、Macでは「テキストエディット」という名前のアプリケーションがデフォルトで入っているかと思います。もちろんそのアプリケーションを使ってプログラミングをしたり、執筆作業をすることもできますが、プログラミング用のテキストエディタを使うことで便利な機能が多く効率的に開発作業を行うことができるのです。外部ツールを取り入れることができたり、画面を分割して複数のファイルを同時に確認することができるなど様々な機能が備わっています。フォントや色なども自分好みに合わせることができるので、プログラミングをする人は専用のテキストエディタをインストールすることをおすすめします。今回紹介するテキストエディタは、利用する人も多く人気のソフトが多いので、まだ使ったことがない人はぜひ選ぶ上での検討材料にしてもらえればと思います。 [PR] Webデザインで副業する学習方法を動画で公開中1. TeraPad（テラパッド） Windows用のテキストエディタです。国産のエディタですのでインタフェースが日本語です。シンプルさを特徴としており複雑な設定が必要ありません。ソースコードの色分け機能などが付いており初心者でも安心して使えます。英語のエディタでは分かりにくく、すべて日本語であってほしいという人にはおすすめです。機能面はそこまで充実してるとは言えませんが、使い勝手は良いでしょう。 TeraPadの使い方 2. サクラエディタ Windows用のテキストエディタです。オープンソースでだれでもソースコードを編集できるため、多くの開発者によって機能が追加されてきました。こちらも国産エディタなのでインタフェースは全て日本語です。複数のファイルから同時に検索できるGrep機能や、キーボードマクロの登録などが可能で、豊富なカスタマイズ機能を持っています。サクラエディタの使い方 3. Atom 2014年にGitHubが公開したテキストエディタになります。とにかく便利なプラグインが多く、他のエディタを使っていたエンジニアもAtomに乗り換えた事例をよく耳にします。エディタのインターフェースが非常に見やすく、機能追加も無料でできるので初心者の方でもすぐ使い慣れるでしょう。Windows、Mac OS X、Linuxで利用できるので、誰でも手軽に使えます。特にテキストエディタを使ったことがないという人は、Atomを使うところから始めて見ても良いかもしれませんね。 Atomの使い方 4. Notepad++（ノートパッドプラスプラス）「メモ帳」に替わるエディタを目指して開発されたWindows用のエディタです。開発元は海外ですが、様々な言語に対応しており、日本語でも使うことができます。動作が軽快で、他のエディタよりもデフォルトで多くのプログラミング言語の色付けをサポートしています。 Notepad++の使い方 5. CotEditor（コットエディター） Mac用のテキストエディタです。国産のためインタフェースがすべて日本語で使えます。とてもシンプルで初心者でも使いやすく、様々なプログラミング言語の色付けも行ってくれます。Mac のテキストエディタの中でも人気がある定番エディタとなっています。軽量のアプリなので、PC自体の容量も特に気にせず利用できると思います。 CotEditorの使い方 6. mi（ミ） Mac用のテキストエディタです。国産のためインタフェースが日本語です。自動的に関数の一覧表や、ファイルの一覧表などを作成してくれるプログラマに嬉しい機能が付いています。また、エディタの背景画像を設定できるので見た目にこだわりたい方にもおすすめです。UTF-8といった文字コードも画面の上から簡単に変えることができます。 miの使い方 7. Sublime Text（サブライムテキスト） Windows、Mac、Linux対応のテキストエディタです。インタフェースは英語ですが、日本語の入力は可能です。使い勝手やデザインが良く、最近特に注目されています。シンタックスカラーリングや、ソースコード全体のマップ表示など便利な機能も揃っています。有料ソフトなのですが、現在はバージョン3の評価版が無料で無制限に使えます。気に入ったらそのまま購入することも可能です。エディタはタブの表示で使うこともできます。プラグイン機能も充実しており、使えば使うほど自分用にカスタマイズすることができます。 Sublime Textの使い方【初心者向け】 8. Brackets Bracketsは、Adobeが提供しているエディタで、クイックエディット機能など拡張性に優れており素早くコーディングすることができます。クイックエディット機能の例を紹介すると、HTMLファイル上である要素のCSSを編集したいと思ったらCSSファイルに移らずにその場で編集することができます。HTMLファイル上にCSSを書いていくのではなく、CSSファイルをポップオーバーとして表示され、選択した要素のスタイルのみ編集することができるのです。また、HTML/CSSだけでなくJavaScriptのコードヒントも質が高いので、まだプログラミングを始めたばかりでも詰まらずにコーディングすることができるでしょう。 Brackets 9. 秀丸エディタ Windows用の有料エディタになります。より作業を効率化させる機能が多く搭載されており、例えばマクロ機能やコードの折りたたみ機能など複雑なソースコードでもシンプルに見せることができるでしょう。タグの色分けも細かく行えるので、複数人で開発しても読みやすいコードを書くことができるかと思います。学生は無料で利用できるので、Windowsユーザーは試してみても良いかもしれませんね。秀丸エディタ 10. Liveweave Liveweaveは、HTML5、CSS3、JavaScriptをリアルタイムで確認できるテキストエディタです。自分で編集しながらその場で確認でき、かつ軽量なので、スペックの低いPCでも手軽に利用できるのが特徴です。 HTML/CSS、JavaScriptのみの対応ですが、静的ページを作成する際には便利でしょう。初心者の方は自分の勉強にも役立ててみてください。簡単なソースコードの確認などに向いています。 Liveweave 11. mou マークダウンで書くことができるMac専用のエディタです。記述用とプレビュー用の2画面をリアルタイムで確認することができるので、非常に便利でしょう。 Macユーザーしか利用できないアプリですが、マークダウンで書くことに慣れている人にはおすすめのエディタになるはずです。 mou 12. Visual Studio（ビジュアルスタジオ） Microsoft が提供するWindows用の統合開発環境です。テキストエディタも内部に含んでおり、Windows用のアプリケーションを開発するときや、Xbox 360 用のゲーム、Windows Phone 用のアプリケーションを開発するときなどに使います。多言語に対応しており日本語でも使うことができます。 WindowsやXbox360用のプログラムを開発したい方はこのソフトに慣れておくと良いでしょう。いくつかのエディションがあり、Expressエディションが無料になっています。また、Microsoftはオープンソースの無料IDEである、Visual Studio Codeを公開しています。 Visual StudioとVisual Studio Codeの差は、利用者数全体の割合からすると徐々に縮まってきています。そうはいっても、Visual Studioの方が、ソースコードの管理、バグトラッカー、デプロイメントツール等全部入りとも言える機能を保有しています。そういう意味でも、.Net開発者にとっては、単なるIDEというわけではなく、これ以上無い有益なソリューションと言えます。 Visual Studioの使い方 13. Xcode（エックスコード） Appleが提供するMac用の統合開発環境です。iPhone や iPad、Mac用のアプリ開発に必要な機能がそろっているため、 iPhone アプリを開発したい方は、使い方を覚えて損はないでしょう。もちろん、その他のアプリケーションを開発するためにも使えます。ただし、インタフェースは英語です。 iPhoneアプリ上に地図を表示したい、ボタンを表示したいといった際もソースコードを書く必要はなく、それ用のキットが多く揃っているので、簡単に設置することができます。エラー箇所も指示してくれるので、初心者でもスムーズに開発を進められるはずです。 Xcodeのインストール方法 14. Eclipse（エクリプス） IBMによって開発された、様々な用途に使用できるオープンソースの統合開発環境です。Windows、Mac、Linuxなど多くのOSに対応しています。 Androidアプリを開発するときには、Google が提供するADT Bundleという開発セットの中に入っているEclipseを使うこともあります。Androidアプリを開発したい方はEclipseの操作に慣れておくと良いでしょう。インタフェースは英語ですが日本語化も可能です。大規模なアプリケーションの開発にも向いているので、ファイル構造が複雑になっても操作しやすいでしょう。 Eclipseのインストール方法 15. vi(vim) / Emacs つぎに、viとEmacsを紹介します。こちらは主に CUI 環境で使われるエディタです。Linuxユーザやサーバエンジニアによって広く利用されています。 GUI のエディタに慣れたユーザにとってはキー操作が異なり取っ付きづらい部分もありますが、サーバの設定をしたりLinuxの操作をしたい方は慣れておくと良いでしょう。もちろんプログラミングにも使用できます。 GNU Emacs ※ viは多くのLinuxディストリビューションで最初から使用できます 16.

プログラミング

【2024年最新】営業×生成AI活用術・事例｜ChatGPTで営業力強化する方法

1. はじめに：営業における生成AI活用の重要性 2024年、営業の世界は大きな転換点を迎えています。生成AI、特にChatGPTに代表される自然言語処理技術の進化により、営業活動のあり方が根本から変わろうとしています。もはや生成AIは単なるツールではなく、営業の「優秀な部下」として不可欠な存在となりつつあります。生成AI活用が重要な理由効率性の飛躍的向上生成AIは、顧客データの分析からパーソナライズされた提案書の作成まで、従来人間が時間をかけて行っていた作業を瞬時に処理します。これにより、営業は本質的な顧客との対話や戦略立案に集中できるようになります。データドリブンな意思決定生成AIは膨大なデータを分析し、人間では気づきにくいパターンや傾向を見出すことができます。例えば、過去の取引データと市場動向を分析し、「この業界のクライアントは四半期末の2週間前にアプローチすると成約率が20%上がる」といった具体的な洞察を提供します。顧客体験の向上 AIによるパーソナライゼーションにより、各顧客のニーズに合わせたきめ細やかな対応が可能になります。具体的には、顧客の過去の問い合わせ内容や購買履歴を分析し、「このクライアントはコスト面を重視しているため、ROIを強調した提案書を用意すべき」といったアドバイスを生成AIが提供します。これは顧客満足度の向上と、ひいては成約率の上昇につながります。本記事では、生成AIを活用した最新の営業手法や、具体的な導入ステップ、注意点などを詳しく解説していきます。AI時代の営業において、競争力を維持・向上させるためには、この技術を理解し、効果的に活用することが不可欠です。これから紹介する内容を、ぜひあなたの営業活動に役立ててください。生成AIの実務活用スキルを磨きたい方は、無料の生成AIコミュニティ『テックアカデミーGAIナレッジベース』をご活用ください。今すぐ無料登録 2. 生成AIとは？営業のための基礎知識生成AI（Generative AI）は、人工知能の一分野で、新しいコンテンツを作り出す能力を持つAI技術です。テキスト、画像、音声など、様々な形式のデータを生成することができます。営業の文脈では、主にテキスト生成AIが注目されています。 ChatGPTと営業活動代表的な生成AIの一つがChatGPTです。ChatGPTは、与えられた指示や質問に対して、人間らしい自然な文章を生成することができます。これは営業活動において、以下のような革新的な可能性をもたらします：パーソナライズされた営業メールの作成：顧客情報を基に、個々の顧客に合わせた魅力的な営業メールを瞬時に生成。提案書や報告書の下書き作成：基本情報を入力するだけで、構造化された提案書や報告書の下書きを自動生成。商品説明や FAQ の自動生成：製品情報を基に、わかりやすい商品説明や頻繁に尋ねられる質問への回答を作成。市場調査データの要約と分析：大量の市場データから重要なポイントを抽出し、簡潔な要約を提供。生成AIの限界しかし、生成AIにも重要な限界があることを理解しておく必要があります：データの最新性：AIの知識は学習データの時点で止まっているため、最新の情報や変化を反映していない可能性があります。事実の正確性：AIは時に誤った情報や「ハルシネーション」（存在しない情報の生成）を引き起こすことがあります。文脈理解の限界：複雑な文脈や暗黙の了解を完全に理解することは困難です。倫理的考慮：AIの使用に関しては、プライバシーやデータセキュリティの問題に注意を払う必要があります。これらの限界を認識した上で、人間の判断と AIの能力を適切に組み合わせることが、生成AIを営業に活用する鍵となります。AIは強力なツールですが、最終的な判断や顧客との信頼関係構築は、依然として人間の役割です。次のセクションでは、生成AIを活用できない場合のリスクと、活用する際の具体的な方法について詳しく見ていきます。 [PR] Webデザインで副業する学習方法を動画で公開中3. 生成AIを活用できない営業はどうなるのか生成AIの導入が進む中、それを活用していない営業や企業は、徐々に競争力を失っていく可能性があります。ここでは、生成AI未導入のリスクと、それに対する対策を見ていきましょう。 3.1 生成AIを導入しない場合のリスクと課題生産性の差：生成AIを導入している企業との間に大きな生産性の差が生まれ、同じ時間でより多くの質の高い営業活動を行える企業に後れを取る可能性があります。顧客ニーズへの対応力低下：高度なデータ分析と予測が行えないため、顧客の潜在的なニーズを見逃したり、適切なタイミングでのアプローチができなくなるリスクがあります。陳腐化：高度なパーソナライゼーションや迅速な対応ができないため、競合他社との差別化が難しくなり、顧客を失う可能性があります。 3.2 生成AI導入企業との生産性の差生成AIを導入している企業と未導入の企業の間には、以下のような生産性の差が生じる可能性があります：提案書作成時間：生成AI導入企業が30分で作成できる提案書に、未導入企業は3時間かかるかもしれません。顧客対応数：生成AI導入企業が1日50件の問い合わせに対応できるのに対し、未導入企業は20件程度にとどまる可能性があります。成約率：最適なアプローチ戦略により、生成AI導入企業の成約率が未導入企業の1.5倍以上になることも考えられます。 3.3 段階的な生成AI導入のアプローチ生成AIの利用を躊躇している場合は、以下のような段階的なアプローチを検討してみましょう：無料のAIツールから始める：ChatGPTの無料版など、コストをかけずに試せるツールから始めます。特定のタスクに限定して導入：例えば、メール文章の作成や市場調査データの分析など、特定の作業に限定して生成AIを活用します。チーム内でのノウハウ共有：生成AI活用に詳しいメンバーを中心に、チーム内で知識やスキルを共有します。段階的な投資：効果を見極めながら、徐々に生成AIツールへの投資を増やしていきます。生成AIの活用は、もはや選択肢ではなく必須となりつつあります。しかし、一朝一夕に全ての業務をAI化する必要はありません。重要なのは、生成AIの可能性を理解し、自分の状況に合わせて段階的に活用していくことです。次のセクションでは、日本企業における具体的な生成AI活用事例を見ていきましょう。 4. 日本企業における営業×生成AI活用事例日本企業でも、生成AIを営業活動に活用する事例が増えています。ここでは、大手企業と中小企業それぞれの成功事例を見ていきましょう。事例1：日清食品ホールディングス活用方法：営業部門での生成AI活用促進主な取り組み：対話型AI「NISSIN AI-Chat」の導入と活用営業担当者向けの生成AI活用トレーニングプログラムの実施業務に特化したプロンプトテンプレートの作成セキュリティ対策と利用ガイドラインの策定成果：営業担当者1人当たり年間400時間の業務時間削減が期待できる16個の標準テンプレートを作成。売り場企画の提案力向上や商談スキルの向上にも貢献。日清食品ホールディングスは、生成AIを営業活動に積極的に活用しています。特に注目すべきは、AIを使いこなすためのトレーニングプログラムの実施と、実務に即したプロンプトテンプレートの作成です。これにより、AIを効果的に活用し、創造的な売り場企画の提案や効率的な業務遂行が可能になりました。参考：https://toyokeizai.net/articles/-/689597 事例2：GMOインターネットグループ活用方法：グループ全体での生成AI活用推進主な取り組み：「AI（愛）しあおうぜ！プロジェクト」の実施：全パートナー受講必須のAIセミナーや非エンジニア向けリスキリング企画の実施複数の生成AIモデルの活用：業務に応じて最適なAIモデルを選択生成AIプロンプトポータル「天秤AI by GMO」の開発・活用成果：2024年上半期で約67万時間の業務時間削減を実現。国内パートナーの83.9%が生成AIを活用し、一人あたり月平均26.8時間の業務時間削減。参考：https://www.gmo.jp/news/article/9051/ GMOインターネットグループは、「AIで未来を創るNo.1企業グループへ」を掲げ、グループを挙げて生成AIの活用を進めています。特筆すべきは、約半数（47.2%）のパートナーが複数の生成AIモデルを使い分けており、各AIモデルの特性を理解し業務に応じてAIを活用していることです。 4.3 成功事例から学ぶポイント人間とAIの適切な役割分担：AIは定型的な作業や分析を担当し、人間の営業職は戦略立案や顧客との信頼関係構築に注力しています。段階的な導入：多くの企業が、特定の業務から始めて徐々に適用範囲を広げています。継続的な学習と改善：AIの出力を常にチェックし、フィードバックを行うことで、精度と効果を向上させています。コスト効果的なアプローチ：中小企業でも、無料や低コストのAIツールを活用することで、大きな効果を得ています。これらの事例が示すように、企業規模に関わらず、生成AIを効果的に活用することで営業活動を大きく改善できる可能性があります。次のセクションでは、生成AIによる具体的な営業プロセスの改善方法について詳しく見ていきましょう。 5. 生成AIによる営業プロセス改善生成AIは営業プロセスの各段階で活用でき、効率と効果を大幅に向上させる可能性があります。ここでは、主要な営業プロセスごとに、生成AIの具体的な活用方法を見ていきましょう。 5.1 リード獲得・顧客分析活用方法：市場調査データの分析と潜在顧客の特定ウェブサイト訪問者の行動分析とリードスコアリングパーソナライズされたリード獲得キャンペーンの作成 5.2 商談準備・提案書作成活用方法：顧客情報と過去の取引データに基づくカスタマイズされた提案書の自動生成競合分析と差別化ポイントの抽出最適な価格設定のシミュレーション 5.3 フォローアップ・顧客維持活用方法：最適なフォローアップタイミングの予測パーソナライズされたフォローアップメールの自動生成顧客の離反リスク予測と事前対策の提案 5.4 営業活動の分析と改善活用方法：営業トークの分析と改善点の自動抽出成功事例のパターン分析と共有営業予測の精度向上と資源の最適配分 5.5 生成AIによる営業プロセス改善のポイントデータの質と量の確保：生成AIの効果を最大化するには、質の高い十分な量のデータが不可欠です。人間の判断の重要性：AIの提案は常に人間がチェックし、必要に応じて修正を加えることが重要です。継続的な学習と改善：AIモデルを定期的に更新し、最新のデータと成果を反映させることで、精度と効果を向上させます。プロセス全体の最適化：個々のタスクだけでなく、営業プロセス全体を見直し、AIとの最適な連携を図ります。営業職のスキルアップ：AIツールを効果的に活用するため、営業職のデジタルスキル向上も重要です。生成AIを活用することで、営業プロセスの各段階で大幅な効率化と効果の向上が期待できます。しかし、AIはあくまでも強力なツールであり、最終的な判断や顧客との信頼関係構築は人間の営業職の役割です。次のセクションでは、ChatGPTを使った具体的な営業活用テクニックを詳しく見ていきましょう。 6. ChatGPTを使った具体的な営業活用テクニック・プロンプト例 ChatGPTは、その柔軟性と高度な言語理解能力により、営業活動の様々な場面で活用できます。ここでは、ChatGPTを使った具体的な活用テクニックと、それぞれの効果的なプロンプト（指示）の例を紹介します。 6.1 パーソナライズされた営業メールの作成活用方法：顧客情報を基に、個別化された効果的な営業メールを作成します。プロンプト例：以下の情報を基に、IT企業の経営者向けの営業メールを作成してください： - 顧客名：山田太郎 - 企業名：テックイノベーション株式会社 - 役職：代表取締役CEO - 業界：クラウドサービス - 最近のニュース：新しいAIプロジェクトを発表 - 提案製品：セキュリティ管理ソフトウェアメールは簡潔で、個人的なトーンを保ちつつ、顧客のニーズに焦点を当ててください。プロンプトの工夫点：顧客に関する具体的な情報（名前、役職、業界など）を提供し、パーソナライズされた内容を生成しやすくしています。最近のニュースを含めることで、時事性のある内容を盛り込めるようにしています。メールの tone of voice（簡潔、個人的なトーン）を指定し、望む文体を明確にしています。「顧客のニーズに焦点を当てる」という指示により、単なる製品説明ではなく、価値提案型の内容を促しています。 6.2 商談準備のための情報整理活用方法：顧客や業界に関する情報を整理し、重要なポイントを抽出します。プロンプト例：以下の情報を基に、商談準備のための重要ポイントをまとめてください： - 顧客企業：グローバルテック株式会社 - 業界：半導体製造 - 最近の業界トレンド：5G技術の普及、IoTデバイスの増加 - 顧客の課題：生産効率の向上、品質管理の強化 - 自社製品：AI搭載の製造ライン管理システム 1. 顧客企業の現状分析 2. 業界トレンドとの関連性 3. 顧客の課題に対する自社製品の適合性 4. 想定される質問と回答 5. 提案のポイントの5項目でまとめてください。プロンプトの工夫点：顧客企業、業界、トレンド、課題、自社製品といった具体的な情報を提供し、焦点を絞った回答を促しています。「5項目でまとめてください」と具体的な構造を指定することで、整理された回答を得やすくしています。各項目（現状分析、トレンドとの関連性など）を明示することで、網羅的な準備ができるようにしています。 6.3 提案書の骨子作成活用方法：顧客のニーズと自社製品の特徴を基に、提案書の骨子を作成します。プロンプト例：次の情報を基に、クラウドサービス導入の提案書の骨子を作成してください： - 顧客：大手小売チェーン - 課題：店舗管理の効率化、在庫管理の最適化 - 自社製品：AI搭載クラウド型店舗管理システム - 主な機能：リアルタイム在庫管理、需要予測、従業員シフト最適化 - 導入効果：運営コスト20%削減、顧客満足度15%向上（他社事例）以下の構成で作成してください： 1. エグゼクティブサマリー 2. 現状分析と課題 3. 提案内容 4. 期待される効果 5.

生成AI・ChatGPT

これからのエンジニアに必要なスキルとは【非エンジニアサミット・イベントレポート】

TechAcademyでは、2015年6月14日に『非エンジニアサミット「プログラミングをシゴトにする」』というイベントを開催しました。これからプログラミングの学習を始める方を対象に、第一線で活躍するエンジニアから直接話を聞けるイベントです。第1回目となる今回は、株式会社クラウドワークスCTOの大場光一郎氏、株式会社Fablicの堀井雄太氏をゲストとしてお迎えしました。本記事ではイベントレポートをお届けします。これからプログラミングの学習を始める方は参考にしてみてください。ゲスト大場光一郎氏（株式会社クラウドワークス執行役員CTO） 2001年、伊藤忠テクノソリューションズ株式会社へ入社。在職中、Rubyの導入支援やRubyを用いたクラウドサービスの開発・運用に従事。グリー株式会社インフラストラクチャ部門にて、開発環境からプロダクションをつなぐDevOps周りを担当し、GitHub Enterpriseの導入による開発品質の向上や、デプロイメント支援システムをRubyで開発。 Rubyやソースコード管理に関する講演、著書多数。 2014年1月、株式会社クラウドワークスに参画、執行役員CTOに就任。堀井雄太氏（株式会社Fablic チーフエンジニア）「Fril(フリル)」を開発しているエンジニア。2007年、株式会社ECナビ（現：VOYAGE GROUP）に新卒入社。比較サイトの運営やディレクトリ検索サービス、広告配信システムの開発などを経験。2012年、株式会社Fablicを創業し女性向けのフリマアプリ「Fril」を開発、インフラ、サーバーサイドの開発担当。クラウドワークス大場氏講演まずは、大場光一郎氏から講演いただきました。講演では、エンジニアになったきっかけ、社内の開発体制、これからエンジニアを目指す人に期待することをお話しいただきました。エンジニアになったきっかけ学研の教材に載っていたマンガがきっかけでBASICを使ってプログラムを書いてゲームを作りながら自分でやってみようと思ったのが、一番最初にプログラムを書くことのスタートだったとのこと。その後は、ハードウェアを組み合わせた業務システムを開発している会社に入社。当時は「プログラムさえ書ければいい」と思って社会人をスタートしたそうです。その時のことを大場氏は「今から考えると当たり前ですが振り返るとコードを書けるだけで会社を選ぶのは良くない」とも語りました。またその頃、働いていた会社とは別に、オープンソースを開発するプロジェクトに入り、そのプロジェクトの開発者との交流を通じて、組織の垣根を越えてプロジェクトを進めることを経験したそうです。そのため、大場氏の考え方の根本は「オープン」。実際仕事の中でもオープンソースのように仕事をしているのが特徴なんだそうです。クラウドワークスでの開発体制クラウドソーシングサービスのクラウドワークスの開発体制はどうなっているのでしょうか。特徴は、UX改善会を開催してユーザー体験を大切にした開発を重視していること。「UX改善会」は、3、4人のチームを組んで、ユーザー視点でサービスを使い、サービスにおける課題を見つけ、改善案などをプレゼンテーションに落とし込んで全社員に発表するというもの。社員はもちろん、エンジニアインターンの学生から率直な意見を聞いて改善に役立てているといいます。この取り組みにより、サービスを使い続けていると当たり前になって気づかないことを、改めてフレッシュな気持ちでサービスを見つめられ、実際にサービス落としこんで、日々改善ができているんだそうです。開発分野の他に、クラウドワークスでは日報の書き方にも工夫があり、お互いがどんな仕事をしているか共有し合えるように、他の部署の人でもわかる言葉で伝えることを推奨しているそうです。これからエンジニアを目指す人に期待すること大場氏は「今は技術が折り重なってできているので、深堀りすればするほど深いし、技術の移り変わりも早いので、エンジニアとしては多層的に折り重なる技術を同時に理解できないといけない状況です。」とエンジニアとして必要なことを語りました。そのような状況の中で、初心者としてプログラミングをはじめるのは、チュートリアルなどが充実しているため、比較的簡単で、初心者から中級者に上がるにはいろいろな技術をキャッチアップする必要がでてくるため、1人では限界があるとのこと。そのため大場氏は、勉強会を通して仲間を見つけることや、プログラミング学習のサービスの活用などを推奨しているそうです。また、JavaもRubyも最初は「おもちゃ」と言われていた背景があり、「おもちゃ」と言われているような技術を使ってみることの大切なんだそうです。「イノベーションを起こすようなものは最初おもちゃのように思われがちですが、だからこそチャレンジすることが今後のエンジニアに必要なのではないか」と大場氏は締めくくりました。 [PR] Webデザインで副業する学習方法を動画で公開中Fablic堀井雄太氏講演続いて、堀井雄太氏に講演いただきました。大場氏と同じく、エンジニアになったきっかけ、社内の開発体制、これからエンジニアを目指す人に期待することお話しいただきました。エンジニアになったきっかけもともとは経済学部出身で、大学でもプログラミングの授業で受けていたわけではない、いわゆる文系プログラマーだという堀井氏。それでも大学生のころから漠然とWebサービスを作ってみたいと思っていたそうです。そこで大学生のうちにいろいろな会社でインターンをとして働いていたのがプログラミングを学ぶきっかけ。最初はHTML/CSSを使ってWebサイトを作るところからはじめ、本を読み込んでサービスを作ってみるなど独学で学んだとのことです。その後、ECナビ（現在のVOYAGE GROUP）に新卒で入社し、自社プロダクトの開発と運用をして、後半の2年はインフラの部署に所属されていました。会社に所属することのメリットとしては、独学よりも体系的に学べる、先輩や同僚がいることで成長できるなどを挙げていました。堀井氏が講演の中で話した、「エンジニアとしては遅咲きだが、遅いということはない。意志があれば、とりあえずやってみるのが大事」という言葉が印象的でした。 Frilの開発体制株式会社Fablicは、2012年7月にフリマアプリのFril（フリル）をリリース。累計ダウンロード数が300万を越えているといいます。現在は、12、13人のメンバーで開発しているそうです。エンジニアはまだまだ増やしたいとのことで、募集も随時行っているとのこと。開発体制として特徴的なことは、ユーザーと一緒に開発すること。実際にFrilを使っているユーザーをカスタマサポートとして採用しているそうです。開発の現場にユーザーがいて、「困ったことがあったらユーザーに聞く」が信条で、実際の開発フローにユーザーが関わるようにしているといいます。これからエンジニアを目指す人に期待することどんなエンジニアになるかを意識することが大事とのことです。会社のフェーズによってエンジニアに求められることは違うので、技術の経験たくさんを積むことが大事。堀井氏自体も、サーバーサイドもインフラも関わってきましたが、今では全てが関係しているそうです。それぞれの領域を学んでいく中で、強みを形成していくのが良いとのことでした。また、技術を学ぶだけでなく、行動して実践することも大事。チームで開発できる、社内で共有できる、社外にアウトプットできる、リーダーシップを発揮できるなど、技術をもとに行動することが今後のエンジニアに求められていると語っていました。また、最後には「ものづくりは楽しいので、楽しみながら開発していくのが大事」というメッセージで堀井氏は締めくくりました。パネルディスカッション「これからのエンジニアに必要なスキルとは」続いて、大場氏、堀井氏によるパネルディスカッションです。モデレーターはTechAcademyを運営するキラメックス株式会社の代表取締役社長の村田がつとめました。パネルディスカッションでは、事前に参加者から募集した質問をもとに回答いただきました。質問はこれからエンジニアになっていくことを想定して、下記のセクションに分けて進めています。エンジニアになる前の段階エンジニアとして働く段階エンジニアとしてさらにスキルアップする段階エンジニアになる前の段階（村田）それではパネルディスカッションを始めていきます。非エンジニアの方のプログラミング学習が一歩前に進むきっかけになればいいなあと思っています。最後には会場のみなさんからの質問も受け付けます。（村田）まず1つ目の質問ですが、「どのプログラム言語から勉強するべきか」という疑問にお答えいただこうと思います。これみなさん非常に悩ましい点だと思うのですが、このあたりお二人はどのようにお考えでいらっしゃいますか？（堀井）最初はPHP、Perl、Rubyあたりから始めるといいのかなあと思っています。理由は、コミュニティが活発なので困ったらそういうコミュニティに相談して聞く環境があることですね。あとは、実際に企業に入ってみて使われていることも多いです。実際、私が新卒で入った会社も主要な言語がPHPであとPerlとRubyも少しあったので就職するときも有利だと感じています。（村田）なるほど。大場さんはいかがでしょうか？エンジニア歴も長いと思いますが。（大場）最初に触る言語としては僕はなんでもいいかなと思ってるんですけど、子供向けや教育向けと呼ばれる機能が制限された言語よりは汎用的な言語を使った方がいいかなと思っています。それがコンピュータが本来持っている能力を引き出せる可能性があるという理由です。なので、あんまり学びやすさとか初心者向けといった軸で選ぶよりは、なんでもできるような言語を選ぶのがいいのではないでしょうか。（村田）では続いてプログラミングを勉強する段階になった際に「どこから着手すればいいか」という質問に入っていきたいと思います。具体的にあれば教えていただけますか？（大場）さっき話したことと関係しているのですが、一つのサービスを成り立たさせるためにはいろんな技術の積み重ねがあって、一部分だけわかっててもサービスとしては成り立たないことがあります。だから、どこからというよりは「これが作りたい」とか「こんなサービスをやってみたい」といったところを目指して、それに足りないのはどこなのか、簡単そうなのはどこなのか、一番難しそうなのはどこなのか、そういう切り分けでちょっとずつ自分がどこにいるかわかるように進めるのがいいんじゃないかなと思います。この言語を覚えたいといった学習の仕方だとモチベーションが続かないと思うんですよね。（村田）それはありますよね。（大場）コンピュータという分野も3ヶ月勉強した人や10年仕事で使ってますという人とか経験にいろいろあっても、その中で「マスターしました」って自分で言える人はあんまりいないと思うんですよね。すごい奥が深い世界なんで。だからこの言語をマスターするまでやろうとなると結構どこまでいっていいかわからない。なので、道具として何をやりたいかというところを目標にすると続きやすいんじゃないかなと思います。（村田）目的ありきでその言語をツールとして使って、形にしていくところから足りない部分を補うのがいいんじゃないかということですよね。堀井さんはいかがでしょうか？（堀井）大場さんも仰ったように一つを学べば終わりというものではないですね。プログラミングをするモチベーションを保たないと結局意味ないので、自分がこういうのがあったら便利だなというものをとりあえず手を動かしながら作るのがいいと思います。（大場）さっきTechAcademyのオンラインブートキャンプの説明の中で、Twitterクローンを作るというお話しでしたが、あれってどこまでのクローンなんですかね？投稿するだけだと簡単だけどTwitterを真面目に作ると結構難しいと思うのですが。（村田）Ruby on Railsチュートリアルに載ってるくらいのマイクロポストみたいなレベル感ですね。ユーザー登録ができてフォローして、その投稿がそれぞれタイムラインに一列に出てくるクローンです。（大場）フォローもするということは、ある程度データベースの関係性もグラフみたいなところもやるんですね。そういう意味では歯ごたえのある感じですね。（村田）そうですね。実際に世界中で使われているようなサービスに近い形で作る方がモチベーションが上がると思っています。全く使わなそうな図書館データベースを作るよりもTwitterクローン作る方がイメージがわきやすいし面白いなと感じてもらえるはずです。プログラミングを学習するときのモチベーション、特に一人で勉強する時間が長いので、自分がやる気になるようなところから始めるのがいいのかもしれませんね。（村田）では次にいきましょう。「プログラミング習得をする上でつまずきやすいポイントとその解決方法」について聞いてみたいと思います。堀井さんいかがですか？（堀井）つまずくところいっぱいありますね。特に、環境構築が一つのハードルになるかなと思ってます。弊社でもインターンに来てもらうことが多いのですが、プログラミングを書き始めるまでの開発体制を整えるところで時間がかかることがあります。ただ、今はEC2とかHerokuとか、必要なパッケージがそろっている状態で始められるものもありますね。無料プランを使うか、少しお金を出せばサーバーが簡単に手に入るので、うまく使って最初のハードルを乗り越えてから本を一冊写経してみるといったことから始めるのがいいのかなと思ったりしますね。（大場）個人的には難しいところって技術と技術の境目の部分かなと。例えば、Rubyだとアプリケーション開発の知識がいるし、データベースにアクセスするときにSQLみたいな言語をわかってないといけないし、両方わかってないといけないようなシチュエーションがサービス開発の中でたくさんあります。両方の知識が求められるところでハードルがぐっと上がって、新しいことを覚えるのが難しいのかなと思いますね。その解決方法としては繰り返すということですかね。繰り返していると、「これはこのことだったんだ」みたいに理解できることもあるので、反復するところがコツかなと思っています。もう一つつまずきやすいところとしては、技術の中でそもそも難しいところです。C言語だったらポインタ、Rubyだったらブロックとかですね。そもそも考え方が難しいものがいくつかあって、それを変な例えで理解しようとしても、結局どこかで嘘が入っていたりして本質的には理解できないところがあります。それは難しいものだと受け入れて、わかるまで何回も繰り返すところが必要なんじゃないかなと思っています。（村田さん）そうですね。僕も最初はPHPから始めたんですけど、クラスみたいな概念がそもそも理解できなかったです。その時は、10日くらいわからないまま続けたら理解できました。繰り返しながらやっていくと、ピーンとわかるときがくるので諦めずに繰り返すのが重要ですね。（大場）悟るまでですね（笑）（村田）悟りが降りてきますからね。さて次の質問ですが、「おすすめのプログラミング学習方法はありますか」ということです。いま繰り返しやるとありましたけれど、もうちょっと具体的に聞きたいと思います。大場さんは仕事を始めてから学んだという感じですか？（大場）まあプログラムを書くのがもともと好きでゲームをつくるなかで学びました。Windows3.1が出たときに「マインスイーパ」というゲームが入っていたのですが、当時Windowsが動くパソコンがすごい高かったんですよね。なので、みんなができるように、MS-DOSのキャラクターベースでできるマインスイーパを開発してみんなに配ったとか、そのなかでいろんな技法みたいなものを学んでいったというところです。今はほんと一つのアプリケーションを成立させるのにいろんな技術が必要なので、競争仲間であるとか教えてくれる先輩とかそういう人がいる環境に身を置くところが大事かなという気がします。（堀井）小さいところから考えて手を動かすのがいいかなと思っています。会社に入ってみて思ったのが、システムって完璧じゃなくてすでに困っている人がいるんですね。そこで私もわからないなりに、管理画面にあったらいい機能とかを他の部署の人から聞いたりして、改善や機能追加できるところを調べながら徐々に開発技術を学んでいくところがありました。あとは、勉強会もおすすめです。新卒で入った会社では勉強会を定期的に開催していたので、自分の回が来たら学んできたことを発表しなきゃいけない場がありました。そういう半ば強制的にでも自分のスキルを底上げするようなイベントに身を置いてステップアップしていくのはいいかなと思います。（村田）なるほど。僕も自分で学習してきていたときは、何かインターネット上で気になるサービスをまねてそれと同じ動きを作ってみることをしていました。あとは、わからないところでずっと迷ってるとやる気がなくなっていくので、すぐ人に聞くというのは結構重要ですね。僕は新卒で楽天に入ったので、エンジニアの部署にいる同期を休日にカフェとかに呼び出して、わからないことを聞くというのを結構な頻度でやってました。（大場）あとはオープンソースの開発に関わっていくこともいいですね。そんなに難しくなくても手が足りないというプロジェクトはたくさんあって、それこそプログラムだけじゃなくてドキュメントの追加みたいな簡単なところから手伝うこともできます。それでコミュニティの人たちの顔がわかってきて、だんだん開発に協力していく中でいいプログラムをたくさん読んで、自分がやるならどうしようみたいなことを考えたりすることがスキルアップにつながると思います。エンジニアとして働く段階（村田）では次の項目に入っていきますね。「採用したいと思うエンジニアの特徴」について聞いてみたいと思います。具体的にこんな人がいいなというものがあれば教えていただけますか？（堀井）大前提としてプログラミングが好きなことが当てはまるのかなと思っています。やっぱ好きな人って勝手に自分でどんどん技術習得して、自分自身でスキルアップしていくので根本的にプログラミングが好き、ものづくりが好きという素養はまず見てますね。あとは、Githubとかを使って自分が書いたコードを他の人に見てもらう、シェアするみたいな文化があると思うんですけど、自分の恥をさらすことができる、自分の持っていることをシェアするとかオープンさみたいなものを持っている人は素晴らしいかなと思いますね。（大場）堀井さんのお話の中でもサービス志向のエンジニアみたいな話題がありましたけども、スキルはすごい優秀だけどうちの事業にそんなに興味ないみたいな人は今のステージでは採用が難しいです。なにかしら共感をもってるところのプラスアルファでエンジニアリングを見て採用してます。（村田）会社の規模とかフェーズによっても変わってくるかなと思うんですけれども、やっぱりそのそもそものエンジニアとしてのプログラミングが好きであったりとか、サービスが好きみたいなところは基本的には重要ですよっていうことですね。（村田）では次です。「優秀なエンジニアはどうやって見極めているんですか？」という質問です。大場さんいかがでしょうか？（大場）正直言って僕もこれだというものはないですけど、一番確実なのは一緒に働いたことがある人ですよね。やっぱりいろんな会社にいると、こいつは本当にすごいみたいな人が何人かいたりします。（堀井）優秀の定義にもよるかなと思うんですが、見極めるとしたら今はGitHubとかあるので、どういうコードをその人が書いているのか、アプリなど個人でプロダクトを出しているのかとか見たりしますね。（村田）結局その人がどういう人かとか、どれくらいできるのかっていうのが見えるかどうかっていうのは結構重要なのかもしれませんね。ポートフォリオなりGitHubなり、今だとそういうのが結構アピールしやすい時代かなと思います。（村田）次に行きますね。「プログラミングスキル以外でエンジニアに求めることはありますでしょうか」という質問です。堀井さんどうでしょうか？（堀井）これはもうたくさんあります。まず弊社もベンチャーなのでプログラミングだけできる人は結構厳しいのかなと。具体的に言うと、やっぱコミュニケーション能力が高い人がいたら嬉しいです。実際、弊社はユーザーにヒアリングすることがあるので、ちゃんとそのユーザーさんとコミュニケーションが取れるかとか、仕様が上から降ってくるのを待つのではなくて自分で考えたものをデザイナーやディレクターに発表して巻き込んでいく力みたいなのが問われるシーンが多いです。（大場）エンジニアに求めるコミュニケーション能力でいうと、そもそも人と話すのが苦手だからコンピュータを扱う仕事を選んだみたいなところもあると思うんですよね。立ち上げ初期のベンチャーだと、とにかく作るというところがメインになっていて、そんなにコミュニケーションする必要がなかったりします。でも組織がちょっと大きくなってサービスが伸びてくると、ある時点からチーム開発みたいなものが求められて個人技だけでは限界がきたりします。そういう時にちゃんと自分に求められている役割の変化を感じて、それについてこれるかは考えてほしいなと思ったりします。具体的にはさっきの仕様の話だと、ゆるふわで落ちてきた仕様に対してこんな仕様でできるかと思うか、僕が決めてもいいんだというように受け止めるかで大きな違いがあると思うんですよ。それってエンジニアリングのバックグラウンドがあって、そういう幅のある仕様のなかで可能性として見られるかどうかっていうのは大きな違いじゃないかなと。（村田）自分から能動的に動いて、与えられたものだけじゃなくてしっかりそれ以外も自分で発信できるっていうことを理解した上でスキルを上げていけるような方が優秀になってくるし、それが求められるかもしれないですね。（村田）次の質問ですが、「エンジニアとして働き始めてからどんな勉強が必要ですか」とのことです。基本的にはエンジニアは日々勉強みたいなところがあると思うんですけど、そういったこと以外に何か具体的にあれば教えていただけますか？（大場）最近だとエンジニアの向かう方向性としてフルスタックみたいに、いろんな層の技術をまたがって自分一人でもサービス立ち上げができるみたいなところを目指したりもしますけど、実際本当に伸びてくサービス開発のなかでフルスタックになっていくのはめちゃくちゃ難しいと思っています。他に得意な人がいればなかなか手を出すのも難しい、どこをやってもいいよと言われても躊躇してしまうというところがあったりします。その中でできることは、一つひとつ極めていくところだと思っています。ただ、一個の技術だけで戦ってるとやっぱりリスクも高いので、次はこの専門家になろうみたいな二つ掛け合わせるものが何かあるといいんじゃないかと思います。（堀井）私はどういう勉強をしてたかなと思い返してみると、やっぱり学んでいくには段階的になると思うんですよね。一つの言語を学んで、データベースのことも学んで、今度はその言語の上に動いているフレームワークのことを学んだりと段階的に自分が学んだことに派生して勉強してきました。なので、最終的に自分が得意であると言えるくらいのところまで行けるように深掘りして、一つの技術を学んでいくのがいいのかなと思いますね。エンジニアにもスペシャリストを目指すのか、ジェネラリストを目指すのかいろいろ方向性があると思うんですけど、ひとつ自分はこういうエンジニアだとか自分の代表するプロダクトはこれだとか、そういうものを作れるようになるまでは深掘りすることがいいかなと思いますね。（村田）やっぱりエンジニアとしてどこか一つでもいいので、ある程度極めるというか、できたというところまでやって、そこからスキルの掛け算みたいなところが重要になってくるということですよね。エンジニアとしてさらにスキルアップする段階（村田）最後の項目に入っていきたいと思います。「エンジニアとしてどんなキャリアパスが描けると思いますか」という質問ですが、エンジニアとしてキャリアの長い大場さんお願いできますか。（大場）いまエンジニアの責任者として会社の中での役割を担っていますが、究極的には「事業のためにエンジニアリングをどうするのか」みたいな話になっていくかなと思っています。なので、技術だけではなくて、最近だとよく読んでいるのはマネジメントの本とかビジネス書みたいなところからキャッチアップするような勉強をしたりしてます。（村田）技術だけではなくて、その先の事業をテクノロジーで解決していくみたいなところに進めるようなパスがいいんじゃないかという話ですよね。（村田）では次に、「エンジニアが仕事したいと思う環境はどんなところですか」という質問です。堀井さんいかがでしょうか？（堀井）やっぱりエンジニア目線でいうと自由度が高いであるとか、個人の裁量が大きい方がチャレンジングなことがしやすいですよね。なのでそういう環境をいまの会社で作っていきたいと思ってます。弊社ののコアバリューがいくつかあるんですが、「エンジニアもチャレンジする」というのもあります。ある程度エンジニアの裁量でどういう設計をするかなど決められるような体制になっているので、自分がいいと思ったものをすぐ試せる環境があるのはエンジニアにとっていいのかなと思いますね。（村田）なるほど。では最後の質問として「エンジニアとして成長するためにどんな人がいる会社で働くべきだと思いますか」という質問です。いかがでしょうか？（大場）前職のように本当にエンジニアリングに関して職人みたいな人がいっぱいいるところにいて感じるのは、自分より優秀な人がいるところに身を置くことですね。自分が一番下手になって、あとは登っていくしかないみたいなイメージです。例えば、学生時代にインターンで初めてプログラミングをして、ベンチャー企業を手伝いながら一番下っ端でがんばってたらいつの間にか自分が一番詳しくなっていた。その後、さらに強い奴に会いにいきたいと言って弊社にジョインしてくれたエンジニアがいます。僕自身もいかに自分より優秀な人に来てもらうか、自分自身がキャップにならないようにすごく気をつけていて、優秀な人が活躍できるような環境や会社やサービスが大事だなと思っています。（堀井）これは私もほとんど同意見なんですけれども、自分よりも技術において素晴らしいと思った人がいるところですね。あとは、自分のスキルセットに近しいのを持っている人がいるような環境にいくと、自分のやろうと思っていることが一段引き上げられるのでいいのかなと思っています。あと最近は勉強会とか発表された資料とかがWebサイトにいっぱい上がっているので、そういうのを参考にしながら企業を選んだりするのはいいかなと思ってます。会場からの質問（村田）ここからは会場からの質問を受け付けたいと思います。ーー大場さんにお伺いしたいのですが、ご自身が英語情報で技術をキャッチアップするために気をつけられていることや、社内の方に英語の情報をキャッチアップするためにどんなことをしているのか教えていただけますでしょうか。（大場）今やってることでいうと、オープンソースコミュニティがだいたい英語ベースになっています。日本人しかエンジニアがいないプロダクトでもコミットとかは英語じゃないと受け付けない感じだったりします。社内に関しては、こうしないとみたいなものは今はないのですが、今週の気になる技術みたいなのを社内のGitHubにスレを立てて共有して、みんなが気になった技術は突っ込むようにしています。そういうときに情報ソースが英語のものがたくさんあるので、おのずと危機感が醸成されればと思っています。（村田）他のご質問はいかがでしょうか？ーーエンジニアが少なくて採用が大変だみたいなことを何かで読んだのですが、雇われる側としてどう感じておられるかということと、あと村田さんは育てる側としてどう思われるか教えていただけますでしょうか？（村田）まず育てる側の僕の方から話をさせていただきますね。まずエンジニアが足りてないところは事実です。エンジニアの採用が難しいっていうのは、そもそもマーケットに人材が少ないから取り合いになってるっていうのが一つあります。あとは統計的にもアメリカでは2020年には100万人エンジニアが足りなくなると言われています。日本でも2020年には20〜30万人ぐらいは足りなくなると言われています。インターネットを使ったビジネスはすごい盛り上がって市場も拡大しているのに、そこで働く人が増えていなければ足りなくなりますよね。僕らはそれをエンジニアを増やすことで解決したいと思っています。エンジニアになりたいという方は多いと思っていて、それでも増えないのは仕組みの問題もあると思っています。それが解決できる仕組みがあれば、人が足りないということに対してひとつの力になれるんじゃないかなと。エンジニアが足りないということに対して、大場さんはいかがでしょうか？（大場）エンジニアが足りないと言ってる会社も、2種類あるかなと思っています。 1つはよくよく聞いてみると、あまりエンジニアを大切にするような文化がなくてエンジニアが定着しない会社です。そういう会社の方は、「来てくれても半年くらいで辞めるから、辞めると思ってアウトソースすればいい」といったことを仰る場合もあります。こういったことが負の循環になって常にエンジニアが足りないことが常態化してしまう。僕らみたいなエンジニアリングの重要性を理解していて、Webサービス中心の会社だとまったく事情は違っていて、サービスの成長にともなって、さらに成長させるためにエンジニアは、明確に足りていなくてまだまだ必要だと思っています。TechAcademyさんみたいな取り組みでエンジニアが増えていくのはこれからの日本にはものすごい必要だなと思っています。（堀井）ベンチャーで最近伸びているサービスであれば、やっぱりどうしても人が必要になってきて、実際に弊社でもエンジニアは常にどの職種も募集しています。私もベンチャーの友達とか知り合いも多くて起業する人もいるのですが、その立ち上げにはやっぱりそれなりにWebのことがわかる人がどうしても欲しくなるんですけど、そういうスキルの高い人たちは大手であるとか名の知れた会社とかに勤めています。そもそもその会社からあまり転職市場に出てこないというのは肌感としてはあるので、僕らみたいなベンチャーはいかにいい人たちを見つけて会社のことを知ってもらって、採用につなげるかについていつも苦労しています。なので、需要はかなりあると認識しています。（村田）最後付け加えますね。プログラミングを習い事の視点でみると、換金性の高い習い事だと思うんですね。というのも、例えば10万円払って勉強してプログラミングが習得できれば10万円以上稼げると思うんですね。もちろんクラウドワークスさんのようなクラウドソーシングサービスで仕事を探してそれに応募して自分で遠隔の仕事をするのも一つだと思いますし、自分でメディアを立ち上げるのというのも一つでしょうし。そういった意味でも企業に入るだけじゃなくて働く方法はいくつかあると思います。（村田）お時間になりましたので、最後にこの会の締めくくりということで「これからプログラミングを学習するみなさんへのメッセージ」をお二方からお願いします。まずは堀井さんお願いします。（堀井）私も最初はプログラミング初心者だったんですけど、いろいろ学びながら実際にものづくりができるようになりました。最初はハードルの高い部分もあるのかなと思いますが、楽しみながら学んでいくと自分の可能性も広がって、キャリアを積む上でもいい経験だと思います。ぜひみなさんがんばって欲しいです。プログラミングは楽しいです。（大場）僕からは作るだけじゃなくて問題解決していこうみたいな話もしましたけれども、一方で何かを作り出す・生み出すということは本質的に楽しいことだなと思っています。例えば、快適に作るための環境を整えることに丸一日費やすとか、自分のエディタの設定とか、これだから開発しやすいみたいなことを考えながらものづくりを純粋に楽しむところも実際にあるんですね。そういった気持ちってなかなか社会人になってしまうと忘れてしまったり、思い出せなかったりとかあると思います。今だと、エンジニアになろうみたいなフェーズだといくらでも失敗できるので、何度も作ったり壊したりしながら、ぜひものづくりの楽しみというところを大切にエンジニアを目指していただければなと思いました。（村田）堀井さん、大場さん今日はどうもありがとうございました。イベントレポートは以上です。 TechAcademyではこれからもプログラミング学習者のためのイベントを開催していきます。

イベントレポート

誰でもできる！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オーサリングツールまとめ【ホームページ制作に使える・無料ツールあり】

グーペ

Jimdo

PAGEKit

Dreamweaver CC

ホームページ・ビルダー

BiND for WebLiFE

Coda2

RapidWeaver

Google Web Designer

Microsoft Expression Web

Aptana Studio

Webオーサリングツール比較

関連するキーワード

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

おすすめのRPAツールはどれ？選ぶ際のポイントやそれぞれの特徴を解説

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

プログラミングに使える！フリーのテキストエディタ15選

【2024年最新】営業×生成AI活用術・事例｜ChatGPTで営業力強化する方法

これからのエンジニアに必要なスキルとは【非エンジニアサミット・イベントレポート】

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

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

グーペ

Jimdo

PAGEKit

Dreamweaver CC

Webオーサリングツール比較

記事を検索

関連するキーワード

関連する記事

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

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

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