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デザイン10選

今回はコーポレートサイトでWebデザインが参考になるサイトを紹介します。 Webサイトを作るためにはHTMLだけでなく、デザインのためにCSSも意識しなけ...

Webデザイン

直接予約を増やす！ホテルのWebサイトを作る上での5つのベストプラクティス

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UXコンサルタントのArmen Ghazarian氏に...

Webデザイン

これから求められるスキルとは！Webデザイナーの将来性

Webデザイナーの将来性について解説しています。これまで求められていたスキルと今後求められるスキル、それぞれ知っておくことで今身につけるべきものが分かるはずです...

Webデザイン

余白を指定したい！CSSのpaddingの使い方【初心者向け】

CSSで書くpaddingについて解説しています。そもそもpaddingとは何なのかよく分からないという方でも分かるように細かく説明しています。実際に書...

CSS

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

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

HTML

デザイン作業に役立つ！本格的なオープンソースツール6選

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Ezequiel Bruni氏によって投...

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社以上の企業様の研修を実施しています。受講生一人ひとりに現役エンジニアのメンターが付き、皆様のニーズにあったサポートを行います。学習時の「わからない」を確実に解消いたします。

ツール系

【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

誰でもできる！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

「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.

プログラミング

最もよく使われるデザインの3大ツールを比較してみた！

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、デザイナー、ライターであるJake Rocheleau氏によって投稿されました。絶えず拡大し続けるデザインの世界に初めて入った人にとって、この世界は理解しにくいと思えるかもしれません。あまりにも多くのツールやテクニックがあるため、何から始めたらいいか分かりにくいかもしれません。最も広く使用されているのデザインソフトウェアは、Adobe Photoshop、Adobe Illustrator、Sketchです。このガイドでは、これらの3大ツールを比較しながら、デザインの一般的なタスクにおける活用方法をご紹介します。どれも優れたツールですが、それぞれ長所と短所があります。タスクごとに最適なツールを知っていれば、デザインの学習や作業は、はるかに効率的になると思います。目次 UIデザインアイコンのデザイン写真の編集グラフィックデザインデジタルペインティング UIデザインインターフェースのデザインは、通常、Webサイトやモバイルアプリを対象としますが、ゲームのUI、インタラクションデザインの画面を対象に含むこともあります。過去数年においては、PhotoshopがUIデザインにおける第1位のツールでした。Photoshopを使用すれば、ベクター形式のアイコンとテクスチャ素材の背景を組み合わせて、1つのレイアウトを作成することも可能です。また、本来Photoshopは、画像編集のソフトウェアパッケージ（スイート）ですが、Adobe社によってFireworksの開発終了が宣言されたため、Photoshopの需要は一層高まっていました。こうした状況で新たに登場したのがSketchです。Sketchのアプリの最初のリリースは、2010年後半のことでした。それ以来、Sketchの学習コミュニティ、無料サイトなどが拡大しています。 Sketchの使い方現在では、UIデザインツールの覇者はSketchです。Sketchは、WebとモバイルのUIデザインに特化したソフトウェアパッケージです。パタン、テクスチャ素材、ベクター素材などを組み合わせた編集は、Photoshopで行うよりも簡単です。唯一の短所は、対応OSがMac OS Xのみであるため、Windowsのユーザーは利用できない点です。 UIのデザインにIllustratorを好んで使う人もいますが、機能が不十分に思えます。Illustratorは、インターフェースに求められるピクセルパーフェクトなデザインを実現できるソフトウェアではありません。一方Sketchを使えば、ベクター素材とピクセル単位のデザインを組み合わせて、インターフェースを作ることも可能です。シェイプとベクターの編集、レイヤーの編集もより簡単に行うことができます。もし、UIデザインのためのソフトウェアを探しているとしたら、Sketchが明らかにベストな選択です。しかし、OSがWindowsの場合にはSketchは選択できないので、Photoshopがベストな選択になります。PhotoshopでもSketchと同じような作業ができますが、Sketchを使った方が、UIデザインのワークフローは円滑に進みます。現在Photoshopを使っていてSketchに乗り換えようか迷っている人は、「Sketchに乗り換えた理由と気に入っている点」を解説したSagi Shrieber氏による記事などが参考になると思います。またもし、試しにSketchでデザインの作業をしてみたいという方は、Sketchのサイトで提供されているフリートライアルやチュートリアルを活用することもできます。 Sagi Shrieber氏による記事 Sketchによるヘッダーのデザイン例 Sketchによるログインフォームのデザイン例 Sketchによるニュースレターのデザイン例 Sketchのフリートライアル [PR] Webデザインで副業する方法とはアイコンのデザインアイコンのデザインは、ベクター形式で進められることがほとんどです。多くのデザイナーは、まずアイデアを紙に書き出して、次にそれをデザインソフトウェアに取り込むことでトレースします。私の経験からいうと、ペンツールによる直感的な描写が可能なIllustratorが良いと思います。私はPhotoshopのペンツールもよく使っています。Photoshopは、アイコンをトレースしたり、デザインをマッピングする際に優れたツールとなります。ただし、Photoshopで作成したベクター素材をIllustratorで編集するのは簡単なことではなく、その逆もしかりです。しかしどちらかというと、IllustratorからPhotoshopへ編集を移行する方が、ワークフローはスムーズになると思います。 Illustratorではアイコンの細かな編集が可能で、Photoshopのパスパレット（paths palette）を使うよりも、レイヤーの編集が容易になります。 Sketchにも、アイコンのデザインに使える優れたツールが備わっています。操作性はIllustratorととよく似ていて、オンラインのチュートリアルなどを利用して練習を積めば、基礎を学べると思います。Sketchにおける重要な機能は、シェイプ（shape）を結合するときに使える、結合ボタン（Union button）です。これはちょうどIllustratorにおけるパスファインダー（Pathfinder）と似ていて、リアルな質感のアイコンをデザインするには欠かせないツールです。ベクター形式のアイコンのデザインに関しては、Illustratorがベストな選択です。しかし、Sketchも基本的な機能を備えていて、アイコンのデザインに使うには優れたツールでしょう。写真の編集 Adobe Photoshopが特に優れているのは、写真の編集です。独自のアイデアからフォトバッシュ（photobashing：複数の写真や画像を組み合わせて、ペイントなどを加え、新たな1つの画像を作成するデザイン技法）をするとしても、古い写真をレタッチするとしても、Photoshop1つあれば全てのデザイン作業を完了できます。 Photoshopには、赤目の修正機能、部分編集に使える複製（duplicate）＆パッチツール、カラーやテクスチャのブレンドモード、選択したサイズで画像をエクスポートする機能など、豊富なツールが備わっています。このような機能に関しては、IllustratorやSketchは到底敵いません。 Photoshopの代替ツールとして、AffinityやGIMPなどもありますが、Photoshopと同じようなワークフローを実現できるツールはほぼないといえます。タスクによっては、アイコンのデザインはPhotoshopで行い、インターフェースのデザインはIllustratorで行うなど、複数のツールを切り替えて使うのが良い場合もあります。しかし写真編集に関しては、IllustratorやSketchを開く必要はありません（Photoshopだけで十分です）。 Photoshopは写真編集のソフトウェアパッケージとして25年の歴史があり、ベストなツールとして選ばれ続ける理由があるのです。グラフィックデザイン一言に「グラフィックデザイン」といっても、様々なタスクが含まれます。アイコンのデザインも、グラフィックデザインの領域に含まれるといえますし、アイデンティティデザイン（identity design：視覚的なブランディングデザインなど）、ロゴのデザイン、印刷物のデザインなども同様です。 Photoshopは、グラフィックデザインに関しても優れた機能を備えています。写真の編集や加工については基本的に何でもできます。またテキストの編集ツールも備えています。もっとも個人的な意見としては、タイポグラフィをカスタマイズするには、Illustratorの方が優れていると思いますが。 Sketchは、グラフィックデザインに関してはまずまずのツールです。しかし、ほとんどの人はSketchをインターフェースのデザインに使っているため、Web上のSketchのチュートリアルも、Webとモバイルのデザインに焦点を当てたものが多いです。これらの特定のタスク以外では、Sketchはグラフィックデザインに使うにはベストなツールではありません。グラフィックデザインに関してはIllustratorが一番だと私は思います。ポスター、ステッカー、パンフレット、さらにはTシャツのデザインに至るまで広範囲に使えます。またどのようなプロジェクトにおいても、グラフィックの最適なサイズを選択できます。もっとも、写真加工に関してはPhotoshopも大いに役に立ちます。雑誌の中の広告のデザインなどでは、写真加工がよく使われています。しかし、その他についてはIllustratorの方が優れています。 IllustratorはPhotoshopよりも長い歴史があります。PSファイルとAIファイルを相互に変換したときにも、Illustratorほどスムーズな編集が可能なソフトは、私は他にはないと思います。熟練したグラフィックデザイナーになるためには、おそらく両方のソフトウェアを学ぶ必要があります。クリエイティブなプロジェクトにおいてそれぞれ、異なる目的、異なる段階で役に立ちます。いずれにしても、Sketchはグラフィックデザインにおいてはベストなツールではないと思われます。また、印刷物のデザインに使うツールとして、もう1つおすすめなのがAdobe InDesignです。Adobe製品なので、Photoshop、Illustrator、InDesign間でファイルを移動するときにも、インポートの設定に困ることもありません。デジタルペインティング（デジタル絵画）デザイナーが、アナログ媒体からデジタル媒体へとツールを移行するときには、2つの問題に直面します。：「どのタブレットを購入するか」と「どのソフトウェアを使うか」です。デジタルペインティングには、ペイントツールSAI、Kritaなどのツールを使うこともできます。しかしほとんどの人は、Photoshopを選択するでしょう。またもし、IllustratorとSketchを比較するとしたら、どちらも遜色ないと思います。 Photoshopには、ピクセル単位のデザインを可能とするペイントツールとしてブラシが備わっています。ブラシを設定からカスタマイズすれば、滑らかな線を描いたり、筆圧感知をコントロールすることも可能です。また、Photoshopは数多くの描画タブレットと互換性があります。Coolorus（カラーホイールのプラグイン）などのプラグインを追加すれば、Photoshopを使ったデジタルペインティングのワークフローを、よりスムーズに進めることができます。 Illustratorがデジタルペインティングにおいて良い選択とはいえない理由は、主にベクター形式で編集するツールであるからです。ベクター形式は、デジタルペインティングにおける画像の繊細な描写などに使う形式としては、適していません。 Photoshopのブラシのツールを利用すれば、ピクセル単位のデザインが可能であるため、デジタルアートにも最適なツールです。まとめこれら3つのソフトウェアはどれも、それぞれが得意とするタスクで役に立ちます。デザインのワークフローはデザイナーによって異なるため、一般化するのは難しいですが、私としては次のようにまとめられると思います。 Adobe Photoshop：写真加工とデジタルペインティングに最適なツール Adobe Illustrator：アイコンのデザインとグラフィックデザインに最適なツール Sketch：全てのUI/UXのデザインと一部のアイコンのデザインに最適なツールこれらのソフトウェアには、それぞれにニッチ市場があり、各分野の専門家から過剰に称賛されることもあります。これらの中で、どれか1つのソフトウェアが他よりも絶対的に優れているというわけではありませんが、それぞれが得意とするタスクにおいては他を凌駕します。あなたがクリエイティブな分野に進出したり、デザインの新たな領域に挑戦するときには、ぜひこのことを覚えておいてください。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。デザインのスキルを磨きたい方はぜひご覧ください。

Webデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

グーペ

Jimdo

PAGEKit

Dreamweaver CC

ホームページ・ビルダー

BiND for WebLiFE

Coda2

RapidWeaver

Google Web Designer

Microsoft Expression Web

Aptana Studio

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

関連するキーワード

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

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

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

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

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

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

最もよく使われるデザインの3大ツールを比較してみた！

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

グーペ

Jimdo

PAGEKit

Dreamweaver CC

ホームページ・ビルダー

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

記事を検索

関連するキーワード

関連する記事

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

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

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