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

本稿は、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サイトを作ることが可能です。

独学に限界を感じている場合はご検討ください。