デザイン作業に役立つ！本格的なオープンソースツール6選
無料で使える本格的なオープンソースツールをまとめて紹介。WebデザインやUIデザインを作る上で役に立つ業務用ツールです。プロトタイピングやグラフィック作成、Webサイトのレイアウトなど無料にも関わらず質の高いツールなので、ぜひ試してみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。
本記事は、Ezequiel Bruni氏によって投稿されました。
Webはオープンソースソフトウェア上で動作します。そのほとんどはバックエンドにあり、世界のほとんどのサーバーはUnix（Linux）系システム上で動作しています。
しかし時々、オープンソースがブラウザの世界に持ち込まれることがあると、ユーザーもそれを見ることができます。
その例はたくさんあり、現にWordPressはその1つです。
しかし、Webデザインのツールとなると話題の中心は、Photoshop、Adobe XD、Sketch、Affinityスイート、Sublime Text、数々のWebベースのプロトタイピングツールなどの有料ソフトウェアです。一方、オープンソースのWebデザインソフトウェアの話題の中心は、WordPress、GIMPなどが主です。
この記事では、知名度は高くないものの、今後有望なオープンソースツールをいくつか紹介します。これらのツールは、もっと人々の関心を集めることができれば、素晴らしいものを生み出すだろうと期待しています。
1. Krita
Kritaは強力なグラフィックエディタであり、イラストレーションとデジタルペインティングに重点が置かれています。インターネットはイラストレーションで溢れています。ますます多くのデザイナーが、Webデザインに活気を与えるために、イラストレーションやデジタルペインティングを使うことを選択するようになっています。
それらのほとんどは、SVGであるという理由からベクター形式です。しかし、あなたがグラフィックを従来からの伝統的な外観でデザインしたい場合には、Kritaは良い選択肢です。
Kritaは、伝統的なグラフィックエディタに期待されるほとんどの機能を備えています。
2. Visual Studio Code
以前は、Microsoftがオープンソースソフトウェアと何らかの形で関係するとは想像しがたいことでした。
しかし現在、MicrosoftはWindows上でCLIモードでUbuntuを実行しており、フリーテキストエディタも提供しています。フリーテキストエディタのVisual Studio Codeは公開されて以来、多くのファン層を築いています。なぜでしょうか？
それは、Visual Studio Codeが高速で、拡張性があり、上手く作動するからです。
しかしあなたが、Sublime Text、Atom、または他の有名なテキストエディタを使い慣れているとしたら、あえて変更するべき理由はあまりないといえます。
このことは、あなたがMacまたはLinux OSを使用している場合には特に当てはまります。なぜなら、Visual Studio Codeの大きな魅力は、Microsoft社の他の開発ツールとの統合だからです。
あなたがWindows OSのユーザーでありASP.Netでコーディングしている場合、Visual Studio Codeのメリットを享受できるでしょう。
3. UIkit
あなたがフロントエンドのフレームワークを見ることが好きであったり、「2大フレームワーク」があなたに向いていない場合は、UIkitを試してみてください。Ulkitはバイト単位で動く、モジュラーな設計なので、あなたが必要とする分だけのビット（bit）を使うことができます。UIkitのGithubのレポジトリでは多くの活動が見られます。
最も重要なことは、UIkitはデフォルトからとても優れた外観であるということであり、これはほとんどの人がフレームワークに望むことだと思います。
4. Pencil Project
Firefoxの拡張機能であった時代からPencilを知っていた人もいるかもしれません。Pencilはそれ以降も発展を続け、安定したワイヤーフレーム/プロトタイピングアプリになりました。 Pencilはこれと同種のオンラインアプリが備えている拡張的なコラボレーション機能に欠けていますが、オフラインで作業する必要がある、またはオフライン作業が好きな人には最適です。
要素とステンシルの大きなライブラリが利用可能なので、これらを手に入れてプロトタイピングを素早く開始することができます。
5. kodeWeave
kodeWeaveはCodePenとよく似た新しいプロジェクトで、基本的に同じ目的（フロントエンドのコードのテスト）を果たすためのものです。大きな違いは、kodeWeaveはWebアプリケーションとして使用できるだけでなく、Windows、Mac、Linux、ChromeOS、Android用のスタンドアロンアプリとしてダウンロードできることです。
もちろん、オフラインでの開発には最適ですが、あなたのクライアントがプロジェクトデータやコードのテストをクラウドに保存することを好まないようなプロジェクトにも最適です。またCSSプリプロセッサも付属しています。すべてのフレームワークですぐに名前を付けることができます。
kodeWeaveは、WebDGapと呼ばれるアプリケーションと統合して、コードをネイティブのデスクトップまたはモバイルアプリとして出力することができます。そのため、プロトタイプの作成に非常に適しています。
6. GrapesJS
GrapesJSは、Webサイトビルダーです。むしろWebサイトビルダーのフレームワークと表現した方がより正しいかもしれません。
GrapesJSを開くとWebサイトのデザインをオンラインで編集できます。GrapesJSは、レスポンシブデザイン、コード編集、いくつかのプレビューモード、元に戻す/やり直しなどをサポートしています。
また、ドラッグアンドドロップできる既定義のページ要素もあります。
しかし、本当に、GrapesJSは他の人のプロジェクトで利用されることを意図して設計されています。GrapesJSは、Webサイトビルダーサービス、インストール可能なCMS、ニュースレター管理アプリ、エンドユーザーによるカスタマイズが可能なHTML/CSSテンプレートが必要なものなどのより大きなアプリに含めることができます。GrapesJSは使い方が簡単です。
Webデザインに精通していない人にとっては、いつものことながら学習の必要性がありますが、非常に有能なエディタです。
選外特別賞
選外特別賞は、2DアニメーションアプリであるSynfig Studioです。これはWebデザインとは深い関係がないので、リストには載せられませんでした。
しかしSynfig StudioはWebコンテンツの作成に使用することができ、昨年は大いに進化しました。開発チームの歓喜に値するでしょう。
この他にも、数多くの素晴らしいOSSプロジェクトがあります。その中のいくつかは、まだ不明確な段階にあり定期的に開発され、忠実で愛着を持った少数のファンだけに使用されています。
Github、SourceForgeにアクセスして、OSSソフトウェアの秘密基地を探してみましょう。そこにある何かがあなたのWebデザインプロセスに役立つかもしれませんし、もしかしたら他のことにも役立つかもしれません。
また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを作ることが可能です。
独学に限界を感じている場合はご検討ください。
